设计转代码：工具、取舍与捷径

1. 转换器

读取设计文件并导出 HTML、CSS 或框架代码的插件。Anima 能把 Figma 画框转成 HTML、React 或 Tailwind，Figma 社区里也有好几款 Figma 转 HTML 插件。

• 优点：快，一键完成。
• 局限：输出遵循的是设计图，而不是你的代码库，所以常常需要重写。

2. AI 代码生成工具

读取设计稿、截图或提示词，然后写出组件的工具。Figma Make 能根据画框生成 HTML、CSS 和 JavaScript。Builder.io 能把设计转成代码，并使用你自己的组件、令牌和设计系统。

• 优点：代码贴合你的技术栈。
• 局限：第一次生成之后，设计和代码依然会逐渐脱节。

3. 由代码构成的画布

最新的思路是直接去掉转换。画布本身就是 HTML 和 CSS，也就没有需要弥合的断层。Paper 和 Kalka 采用这种方式，Penpot 的布局使用 CSS Flex 和 Grid，也已十分接近。

• 优点：设计什么就上线什么，没有任何损耗。
• 局限：你要按网页的规则来设计。这正是它的意义所在，但需要一点时间养成习惯。

如何选择

• 使用 React 或 Vue 组件库的应用：选一款了解你组件的 AI 生成工具。
• 用现有 Figma 文件快速做一个静态页面：转换器。
• 经常设计和上线的网站：由代码构成的画布，让设计转代码这一步彻底消失。

Kalka 是我们对第三类工具的诠释：Figma 的界面，底层是真正的 HTML，开源且本地运行。目前正在开发中。