将设计编写成代码可能需要多次迭代。一个新的AI驱动工具通过生成组件来加快开发过程。
译自 New Tool Generates Angular Components From Design，作者 Loraine Lawson。
对于前端开发人员来说，根据 Figma UI 设计规范编写代码可能非常耗时。WaveMaker 的一项名为 Auto Code 的新人工智能工具旨在通过生成 Web 和移动组件来简化此过程。然后可以将代码导出到 Web 的 Angular 和移动端的 React Native。
WaveMaker 的产品高级总监表示：“设计团队和前端工程团队之间的这种移交过程会占用大量时间，因为要完美实现其外观和效果需要多次迭代。”“通过 Auto Code，我们试图使设计师和前端工程团队之间的移交尽可能精确，以便减少团队为交付最终产品而进行的迭代次数。”
WaveMaker 是一个低代码平台，但据 WaveMaker 的联合创始人兼 CTO 所说，它主要由金融机构、大型产品公司和独立软件供应商的专业前端开发人员使用。这些公司通常在其产品现代化过程中构建和交付数百个屏幕。
他表示：“即使在大型语言模型 (LLM) 出现之前，我们也在生成 Angular 和 React Native 代码，并将代码提供给开发人员，以便他们能够在其之上构建应用程序。”“这就是我们能够说服开发人员采用该产品的方式。他们实际上看到了真实的代码，拥有它并对其进行自定义。”
Auto Code 将基于 Material 3 的 Figma 设计转换为 UI 元素、应用程序导航和交互的生产就绪代码。
Material 3 是 Google 的开源设计系统。Figma 使用 Material 3 设计工具包，其中包括预先设计好的组件、样式和指南。这使得设计师可以轻松创建符合 Material 3 原则的原型和模型。
虽然 WaveMaker AutoCode 可以开箱即用地用于使用 Material 3 设计系统的 Figma 设计，但可以将其启用以与客户端专有设计系统一起使用。AutoCode 识别表单、列表和卡片等设计元素，并将它们映射到 WaveMaker 工作室中的相应小部件。它支持 Figma 变量、模式和设计令牌，以在整个开发过程中保持原始设计的完整性。
生成的代码也可以在 WaveMaker 的工作室环境中进行自定义以添加业务逻辑。
WaveMaker 目前拥有 90 多个组件，包括按钮、文本字段、表单、多步骤表单、表格和图表。它还提供常用的移动应用程序组件，包括底部导航。
表示：“我们看到在 Web 和移动应用程序中普遍存在的模式，然后我们将这些模式组件化并添加到产品中。”
Auto Code 可以识别单个组件（例如文本框或按钮），但它也可以将它们分组并识别它们共同创建长表单或注册表单。
表示：“这种抽象非常重要，因为编程模型会转变为‘您希望来自此表单的数据去向何处？’”我们的 AI 模型识别设计中的所有组件，然后将设计中的组件分组到逻辑的高阶抽象中——例如表单、表格网格、卡片列表——无论它们是垂直的还是水平的。”
它也识别高阶抽象。
他表示：“从编程的角度来看，当您看到卡片列表时，您会将其视为数据中的数组。”“对于程序员来说，不要将 Figma 设计中的五张卡片视为单个卡片，而是将其视为列表非常重要。因此，我们的 AI 模型完成了所有这些工作。”
Auto Code 是一款基于机器学习 (ML) 的工具，但并非生成式 AI。它不训练大型语言模型 (LLM)，而是依赖于 Figma 设计的元数据。Reddy 和 Anupalli 表示，这解决了幻觉问题。
“我们的实现基于不使用 LLM 的机器学习技术，这是解决方案架构的一部分，它使每次运行都具有可预测性和一致性，”他说。“我们生成设计令牌，然后是使用它们的组件，最后是页面。这些都是架构上的防护措施，确保转换质量准确，并且您可以在每一层进行验证。”
WaveMaker 还提供 WaveMaker CoPilot，这是一个 AI 驱动的助手，位于 WaveMaker 的开发工作室中，可以为 WaveMaker AutoCode 生成的 UI 提供基于提示的 UI 自定义功能。