像素完美的设计和干净的代码是同一枚硬币的两面，称为出色的产品设计。仅仅设计一个出色的页面/屏幕是不够的;您还需要将其转换为干净的代码。就在几年前，要做到这一点，您必须与前端开发人员合作。如今，人工智能工具可以帮助您做到这一点。

Figma Make 和 Anima Playground 是两种流行的 AI 工具，可让您快速将设计转化为切实的解决方案。这两种工具的工作方式相似——您需要提交 Figma 设计，然后工具将其转换为代码。在本文中，我将指导您完成使用这些工具的整个过程，以便您更好地了解哪种工具最适合您手头的任务。

实验详情

在我们讨论实际工具的部分之前，必须做一件关键的事情：创建一个像样的 UI 模型。无论您选择使用哪种工具，请确保您使用自动布局。为了进行比较，我将使用送餐服务的登录页面。您可以在下面看到在 Figma 中创建的此登录页面的设计。

按 Enter 键或单击以查看大图

接下来，我只需要单击带有我设计的框架，然后要求工具生成此登录页面的工作版本。

Figma Make

要使用 Figma Make，我们需要在浏览器中打开一个新的 Figma 选项卡，然后从顶级菜单中选择 Make 选项。从一开始，这个额外的步骤就不是很方便，因为你必须在上下文之间切换——设计上下文和实现上下文。

按 Enter 键或单击以查看大图

Figma Make 本质上是一个 AI 助手，它允许您提供设计作为框架，以便该工具可以在编写代码时将其用作参考。

按 Enter 键或单击以查看大图

Figma Make 输入字段

既然我们在 Figma 中有了我们的设计，那么让我们简单地复制框架，将其粘贴到 Figma Make，然后要求它将其转换为代码。

按 Enter 键或单击以查看大图

要求 Figma 创建此页面。

该工具为我生成的第一个输出看起来很奇怪——Figma Make 生成的不是整个页面，而是其不同部分的混合。更糟糕的是，这种布局并不是像素完美的。如果你仔细观察底部导航部分，你可以看到公司标志和菜单选项之间的间距太密，并且与其他两个块不一致。

按 Enter 键或单击以查看大图

我们可以通过提交后续提示来完善此设计——要求工具在创建布局时使用整个页面。在我们这样做之前，我想提一件有趣的事情——在 Figma Make 为我们生成 Attributions.md 文件中，它提到它使用来自 [shadcn/ui] （https://ui.shadcn.com/） 的组件进行我们的设计，因此最终结果看起来与 Figma 中的原始设计略有不同。有趣的是，Figma 并没有要求你为你的项目选择技术堆栈——它会为你选择。虽然这种方法可以使一些产品创建者受益，但很多时候，产品创建者希望拥有更多控制权并自己选择技术堆栈，因为他们确切地知道他们将在未来的产品中使用哪些技术。

第二次尝试后，在提示“修复设计，以相同的顺序包含原始 Figma 文件中的所有部分”时，Figma Make 解决了问题并创建了一个非常接近我们在 Figma 文件中的原始布局的布局。

按 Enter 键或单击以查看大图

虽然该解决方案乍一看还不错，但它存在一个关键问题——代码质量。尽管代码分布在单独的函数中，但每个函数都是嵌套的 div 的集合，其视觉样式硬编码为属性。为了使此代码可用于生产，您需要先重构它 — 将 app.tsx 文件分解为具有明确功能目的的单独文件。

按 Enter 键或单击以查看大图

阿尼玛游乐场

Anima Playground 既可以作为 Web 应用程序 （dev.animaapp.com） 使用，也可以作为 Figma 的插件使用。Web 应用程序使非设计师更容易访问 Playground，因为他们可以通过复制和粘贴设计链接到 Anima 来开始他们的设计之旅。

按 Enter 键或单击以查看大图

Figma 的 Anima 插件让设计师的生活变得更加轻松，因为当您使用它时，您无需更改上下文即可将您的设计发送给 AI 助手。您需要做的就是选择带有您设计的框架并激活 Figma 的 Anima 插件。Anima 将为您分析设计，生成预览，并将其转换为代码。

这种方法更方便，因为您可以实时调整设计，而无需在浏览器选项卡之间移动。但 Anima 的伟大之处在于您可以在右侧面板中更改项目的技术堆栈。例如，就我而言，我将使用 React 和 Shadcn 组合，只是因为我想与 Figma Make 进行同类比较。但就您而言，您可以将其更改为其他内容（即 React 和 MUI）。

按 Enter 键或单击以查看大图

一旦 Anima 为您的设计生成代码，您可以单击“在 Playground 中提示”来完善它。正如您在下面的屏幕截图中看到的那样，Anima 将设计转化为代码的第一次迭代比 Figma Make 的第一次迭代更成功。我们有一个功能齐全的页面，几乎像素完美的设计。更棒的是，Anima 提供了一个开发脚本，因此我们可以轻松部署我们的解决方案。

按 Enter 键或单击以查看大图

关于 Anima 生成的代码，值得说几句。Anima 组织项目文件的方式更符合开发团队的做法。除此之外，Anima 还为各个代码块提供了相关注释，以便在我们想要引入更改时轻松扫描代码。

按 Enter 键或单击以查看大图

结论

Figma Make 和 Anima Playground 都是优秀的工具，具有许多优点和一些限制。Figma Make 是 Figma 原生工具包的一部分，可供付费计划的用户使用。尽管它是 Figma 工具包的原生部分，但为了使用它，您需要切换到不同的上下文（在单独的选项卡中打开 Figma Make）。它可以完成工作，但有一个关键的缺点——它生成的代码很混乱，有很多不必要的 div 和 span、硬编码样式和糟糕的组织，这使得开发人员很难使用。该工具还倾向于在初始迭代期间跳过部分页面，这在长页面中更加明显。

Anima Playground 是一个第三方解决方案，可作为 Figma 的插件或 dev.animaapp.com 上的 Web 应用程序使用。但要使用它，您无需切换到不同的上下文（它可以直接在开发模式下使用）。与 Figma Make 相比，Anima 生成的代码更清晰、语义化且完全可导出，与生产就绪解决方案更相关。它还可以更准确地处理设计，因此您将从第一次尝试开始就获得更相关的解决方案。