最近在研究 UI 设计稿如何用AI快速还原为生产级前端代码。
尝试过截图 + Cursor、Figma MCP、Google Stitch、Figma to Lovable、字节TREA、百度的文心快码等,都没有一个能100%还原到我想要的程度。
直到用到Figma Make,简直是救我🐶命,妈妈再也不用担心我跟研发扯皮了。大致流程如下,分享给大家⬇️
1️⃣将【Design】文件导入【Make】,P1
在【Design】文件中选中一个frame,右键点击【Send to Figma Make】。目前最多支持一次性导入3个frame,但我试了很多次,效果都不佳,还是建议大家每次只导一个。
2️⃣创建【Make】文件,P2
打开【Make】页面,你会看到刚刚的Frame已经挂到了输入框上方(会展示一个蓝色的小钢笔),这样是带样式结构的,而不是截图。输入提示词要求100%还原你的设计稿,发送后就会跳转到 vibe coding 的界面,Make 文件就创建成功了。
3️⃣在【Make】文件中继续导入frame,P3
如果你要做页面跳转、状态切换、组件切换等交互,点击对话框左下角小「+」,选择【Attach a design】,会出现一个粘贴面板。此时去【Design】文件,直接复制对应frame,再粘贴回来,输入框上方就会出现对应页面(带蓝色小钢笔),继续对话让AI帮你完善即可。
4️⃣导出代码,P4
绑定Github仓库,一键push代码。
不过Figma make 也有一些缺点,比如生成的代码质量一般,不够组件化,而且你需要明确指定是要 React 18 还是 19 的代码,否则可能会有版本问题。大家还有什么更好的使用技巧吗,期待交流讨论~