长期以来，切图总是对于前端开发人员来说最痛苦且费时的事情，我们目睹了 Web 技术的惊人进步，但将设计稿直接转化为代码一直没有令人满意的解决方案。就在昨天， Builder Velocity 发布了 Visual Copilot（由 AI 驱动的「Figma to Code」），只需一个鼠标点击即可将 Figma 设计即时转换为 React 代码。
长期以来，切图总是对于前端开发人员来说最痛苦且费时的事情，我们目睹了 Web 技术的惊人进步，但将设计稿直接转化为代码一直没有令人满意的解决方案。通常我们需要数小时的精细工作去确保，以确保代码复刻出来的页面在视觉上跟设计相符，而且在功能上无瑕疵。
从历史角度来看，我们曾尝试透过各种工具和插件来缩小设计和代码之间的差距。尽管这些解决方案提供了一些帮助，但它们仍然需要大量手动工作，并且容易出错。
就在昨天，Builder Velocity 发布了 Visual Copilot（由 AI 驱动的「Figma to Code」），只需一个鼠标点击即可将 Figma 设计即时转换为 React、Vue、Svelte、Angular、Qwik、Solid 或 HTML 代码。可以使用自己偏好的 CSS，包括纯 CSS 代码、Tailwind、Emotion、Styled Components，并使用 AI 持续迭代或 JavaScript 框架（例如 Next.js）的代码。
「Figma to Code」- 加入 AI 带来的革命性演进
**，时长11:21
Visual Copilot 这一革命性解决方案解决传统上设计转换为代码的困难问题，有着以下特点：
- 即时代码生成：「Figma to Code」能够一键生成高质量的代码，支持 React、Vue 和 Svelte 等框架。举例来说，我们可以使用 HTML 和 Tailwind CSS 来生成语义化且优化的代码。
- 多种的框架支持：它支持各种框架和样式系统，自动生成语义化的组件名称结构和 CSS 变量，提高了代码的可读性和可维护性。
- 支持多设备以及 RWD：Visual Copilot 自动调整组件以适应所有屏幕尺寸，无需手动调整移动回应能力。当您调整屏幕大小时，设计会无缝适应。
- 可重用性：「Figma to Code」使用 TypeScript 类型，将代码分解为多个可重用的组件，提高了代码的模块化和可扩展性。
- 自订偏好：开发者可以新增自定义指令以影响代码生成，这意味着开发者可以根据项目需求订制生成的代码。
- LLMs 的参与：LLMs 在转换文字为代码方面表现出色，为「Figma to Code」提供了极高的精确性、质量和速度。
- 轻松发布：「Figma to Code」支持一键发布到即时生产网站，简化了部署过程。
结合 AI Prompting 协助修改特定组件
在演示中，本来是静态画面的计时器，就直接透过 AI 下 Prompt 让这个计时器真正互动起来，然后就可以点击同步，将它同步到代码库，直接 Hot Reload 重新启动，就这样，一个漂亮的滴答滴答的计时器就出现了，无需思考，只需看到它直接在眼前发生的过程。连接到代码库、建立自定义组件、点击同步、透过 API 在可视化编辑器画布内使用真实网站发布就这么简单。
Visual Copilot 应用 AI 的突破在于，产生高质量的代码。虽然 LLMs 在将文字转换为文字提示代码方面非常出色，但这往往不是开发者所需要的，开发者需要开发符合设计稿中详细描述的规格，而 LLMs 并没有接受过这方面的训练，从根本上说，它们无法以经过专门训练的模型的准确性、质量和速度进行转换。
Visual Copilot 用超过 200 万个资料点训练专门的模型，以便将平面和非结构化设计转化为响应式代码层次结构，然后将其传递给开源编译器 mitosis，后者会将其编译为您所选择的框架的代码，这是 LLMs 非常了解的格式。
与过去不同，生成的是可维护的代码
多数的开发者可能会想「我已经有既有的代码以及组件库了，这个工具不一定能帮到忙。」，但实际上 Visual Copilot 可以允许我们使用代码中已有的其他组件来建立组件，或是使用映射到 Figma 组件的设计系统进行设计，当我们使用这些组件进行设计并点击汇入后就可以自动使用它们。
Visual Copilot 上可以选择任何层并输出高质量的代码，与原本程式库的设计保持一致。包含样式化组件，它会自动为你的组件赋予简洁的上下文名称，然后对于其他任何需要的东西，需要做的就是写一个提示。
举例来说：如果使用了 Material UI 组件，我可以直接告诉 AI，就像我们自己写的一样，，使用了 nextjs 图片组件，也可以得到从 next image 汇入的代码，并直接使用 nextjs 图片组件。
实测：如何使用 Visual Copilot
1. 使用 Figma Plugin 转换设计稿
首先要准备好既有的 Figma 设计稿，然后下载 Figma Plugin 使用 Visual Copilot，一开始使用的时候是不需要有 Builder.io 的帐号，产生代码之后按下右上角的 Save，这时候就需要注册帐号，未来所有产生的代码都会储存在这个帐号之中。
2. 链接产生的代码到既有的 Repo
在 Figma 透过 Builder CLI 工具，可以选择产生新的项目还是连结既有的项目。
在代码库的初始化动作如下，其中的 app/page.tsx 是初始化的预设页面：
npm init builder.io@latest
cd builder-app
npm install
npm run dev
cd builder-app
vi app/page.tsx
一旦链接之后就可以将代码与 Builder 的编辑画面同步，我们可以即时预览代码的变化，马上就可以看到更改后的结果并且是双向同步的。例如：给定了一个新的设计，而代码库中还没有，我们可以简单地删除这里的内容，到 Figma 中选择我们想要带过去的内容，我们可以点击复制，然后简单地粘贴我们漂亮的新内容。
简单而无缝的方式即将到来，你将能够把 Figma 连接到一个条目和 Builder 中，我们只需点击推送内容，最新的更改就会即时反应在 Builder 中，当你对 Builder 中的最新版本感到满意时，再推送一次，我们就可以发布了。
汇入设计后，只需点击一下，您就可以将其发布到您的即时制作网站。这个过程没有任何繁琐的步骤，例如命名或手动代码调整。即时网站透过我们强大的发布 API 进行即时更新，无需任何代码部署或送出。这几乎是即时的，确保设计不仅可以快速转换为代码，而且可以立即用于即时平台上的使用者互动。
结语
根据我的实测（如下图），我将设计稿转换为代码花不到三分钟，而且一行代码没有改就可以得到这个效果，这可能会完全改变前端开发的方式，大幅提高效率和品质。它代表着前端开发的未来，并且这个还只是在初期 Beta 阶段，我们可以期待 Builder.io 不断地改进和创新。
Visual Copilot "Figma to Code" 这个工具目前还是免费，根据他们的发布会，未来他们还会推出 iOS 以及 Android SDKs，可以直接用可视化的方式生成双平台的代码。
