新工具可根据设计生成 Angular 组件

编写设计代码可能需要多次迭代。一种新的人工智能工具通过生成组件来加快开发过程。

对于前端开发人员来说，根据Figma UI 设计规范进行编码可能非常耗时。WaveMaker 推出了一款名为 AutoCode 的新人工智能工具，旨在通过生成 Web 和移动组件来简化这一过程。然后可以将代码导出到Web 的Angular和移动的React Native。对于前端开发人员来说，根据Figma UI设计规范进行编码可能非常运行。WaveMaker推出了一款名为AutoCode的新人工智能工具，旨在通过生成Web和移动组件来简化这一过程。然后可以将代码导出到Web的Angular和移动的React Native。

WaveMaker 高级产品总监Prashant Reddy表示：“设计团队和前端工程团队之间的交接过程耗费时间，因为要经过多次迭代才能完美实现适配和完成。借助 AutoCode，我们试图让设计师和前端工程团队之间的交接尽可能完美、尽可能精确，这样我们就可以减少团队在交付最终产品时需要经历的迭代次数。”WaveMaker高级产品总监Prashant Reddy表示：“设计团队和前置工程团队之间的交接过程保存时间，因为要经过多次迭代完美实现重构并完成。借助AutoCode，我们试图让设计师和前置工程团队之间的交接任务完美、精准，这样我们就可以减少团队在交付最终产品时需要经历的迭代次数才能。”

面向程序员的低代码

WaveMaker 是一个低代码平台，但据 WaveMaker 联合创始人兼首席技术官Deepak Anupalli介绍，它主要由金融机构、大型产品公司和独立软件供应商的专业前端开发人员使用。这些公司通常会在产品现代化过程中构建和交付数百个屏幕。WaveMaker 是一个低代码平台，但据 WaveMaker 联合创始人兼首席技术官Deepak Anupalli称，它主要由金融机构、大型产品公司和独立软件供应商的专业前端开发人员使用。通常，这些公司正在构建和交付数百个屏幕，作为其产品现代化之旅的一部分。

“甚至在 LLM（大型语言模型）出现之前，我们就已经在 Angular 和 React Native 中生成代码，并且我们实际上将代码提供给开发人员，以便他们可以在此基础上构建应用程序，”他说。“这就是我们能够说服开发人员采用该产品的方法。他们实际上看到了真正的代码，他们拥有它并对其进行自定义。”“甚至在 LLM（大型语言模型）中，我们就在 Angular 和 React Native 中生成代码，我们实际上能够向开发人员提供代码，以便他们可以在上面构建他们的应用程序，”他说。“这就是我们能够说服开发人员采用该产品的方式。实际上他们看到了真实的代码，他们拥有它并之前进行了自定义。

AutoCode 的作用

AutoCode 将基于 Material 3 的 Figma 设计转换为可用于 UI 元素、应用导航和交互的生产级代码。

Material 3 是 Google 的开源设计系统。Figma 使用 Material 3 设计套件，其中包含预先设计的组件、样式和指南。这使设计师能够轻松创建符合 Material 3 原则的原型和模型。Material 3 是 Google 的开源设计系统。Figma 使用 Material 3 设计套件，其中包含预先设计的组件、样式和指南。这使设计师能够轻松创建符合 Material 3 原则的原型和模型。

虽然 WaveMaker AutoCode 开箱即用，适用于使用 Material 3 设计系统的 Figma 设计，但它也可以与客户专有的设计系统配合使用。AutoCode 可识别表单、列表和卡片等设计元素，并将它们映射到 WaveMaker 工作室中的相应小部件。它支持 Figma 变量、模式和设计令牌，以在开发过程中保持原始设计的完整性。虽然 WaveMaker AutoCode 开箱即用，适用于使用 Material 3 设计系统的 Figma 设计，但它也可以与客户专有的设计系统配合使用。 AutoCode 可识别表单、列表和卡片等设计元素，并将它们映射到 WaveMaker 工作室中的相应小部件。 它支持 Figma 变量、模式和设计令牌，以在开发过程中保持原始设计的完整性。