从生图到代码还原，我们把 AI×UI 完整流程跑通了！

一、全文速览图

大家好，我是风筝 KK，前段时间，我分享了自己如何把 AI 生成的效果图拆成视觉素材，再通过 Figma MCP 还原成设计稿：

当时，我觉得 AI 和 Figma 之间最难跨过去的那一步，已经开始被解决。

但那还只是“效果图进入 Figma”，最近我们小组又跑通了《AI 工作流从生图到代码还原》的一个小闭环。

我们最终的目标是：

通过不同复杂度的页面，打通【文字需求——草图——高保真原型——前端代码片段】完整链路，输出可复用标准化操作SOP。

1. 提高界面初稿产出效率，减少重复性搭建工作。
2. 验证 Figma 设计稿到代码页面的还原质量与调整成本。
3. 逐步覆盖页面结构、组件、交互、状态和响应式适配。
4. 沉淀团队可复用的设计规范、提示词、验收清单和操作 SOP。

这几天，我们把整个 Demo 从头到尾跑了一遍：

AI 生成效果图 → Figma MCP 绘制设计稿 → 设计师微调 → Workbuddy生成代码 → 移动端预览。

整体的效果还不错，像这样简单的页面基本可以 100% 还原，同时像图中复杂的按钮也通过代码绘制完成。

测试完最大的感受是：

AI × UI 的链路已经能跑通了。接下来就需要继续测试，复杂页面的还原效果怎么样，怎么组合、质量更高、速度更快、成本更低。

下面和大家分享这次跑通的 AI 工作流程。

二、从文字需求到草图

第一个阶段主要为了跑通整个流程，于是我们在网上找了一个简单的启动页进行演示。输入了简单的关键词，先让 GPT image2 生成效果图。

在有参考图的情况下，只需要输入简单的关键词，就能快速生成草图。

你只要告诉 AI：

1. 页面是什么类型；
2. 尺寸是多少；
3. 有哪些内容
4. 插图元素有什么
5. 风格、颜色是什么

它就能很快生成一张接近目标方向的效果图，效果图确定之后，就进入下一步：把它还原成 Figma 设计稿。

三、用 Figma MCP 绘制设计稿

目前，Figma MCP 基本能够将简单页面的效果图直接绘制成设计稿。

1. 把完整效果图直接交给 Figma MCP

在左下角添加 figma mcp 的插件，输入提示词，要求他将图片在 figma 中绘制出来，要求分层处理，状态栏调用 ios 的状态栏，页面尺寸为 750。

这种方式的优势很明显：它能够把页面结构生成出来。

背景、状态栏、标题、按钮、分页器，都可以在 Figma 中完成基础搭建。大家可以看看图层按钮也是全部通过绘制完成的。

但它的问题也很明显。

结构虽然有了，但插图还原度不够，边缘容易出现锯齿，分辨率也不高，箭头使用 svg 绘制，也没有还原。

尤其是带有 3D 质感、渐变、半透明和复杂光影的插图，直接让 Figma MCP 重画，现阶段很难达到原图质量。

2. 插图如何高质量绘制到 Figma 中

我目前采取的方式是，先让 AI 将插图分层，然后再交给 Figma MCP 合并。

我先告诉 AI，哪些视觉内容需要单独导出：

接着 AI 会将其进行分层。

然后，接着把分层的图片发给 AI，添加 figma MCP 以及 figma 绘制连接，AI 开始在 Figma 中搭建页面。

通过这样的方式，界面中需要的插图，就可以直接分离出来。

这种方式生成的插图质量会高很多。

因为数字、吉祥物、特殊字体和装饰效果，都可以作为透明 PNG 保留，不需要让 Figma MCP 使用矢量图形重新猜一遍。

但它也有一个问题：

如果只提供分层素材，AI 未必会完整生成界面结构。

它可能只是把几张图片放进 Figma，而不会主动建立标准的文字、按钮、布局和组件。

所以，一种方式保住了界面结构，却损失了插图质量；另一种方式保住了插图质量，却没有完整还原界面。

最后我们发现，真正好用的方案并不是二选一，而是把两种方式合并起来。

四、在 Figma 里合并，才是目前质量最高的方案

我们最后采用的处理方式是：

将上面 Figma MCP 根据完整效果图生成的页面结构，和生成的高清透明素材，最后综合成一张高质量的设计稿。

这一步仍然需要设计师微调。

因为 AI 生成到 Figma 里的文件，距离标准设计稿还有差距。例如间距不规范、图标 svg 绘制不标准、文字样式没有统一。

五、从设计稿到代码，这次复杂按钮也还原了

Figma 文件整理完成后，我又继续测试了 Codex、WorkBuddy 和 CodeBuddy，让它们读取设计稿和切图文件，再生成前端页面。

这次让我最惊喜的是：复杂按钮也被还原出来了。

它没有把整张启动页直接贴成一张图片。主插图使用了导出的高清资源，标题、说明文字、按钮、分页器等页面元素则进入了真实代码结构。

从浏览器开发者工具里可以看到，按钮是一个真正的 button 元素，渐变、圆角、阴影和按压反馈由 CSS 完成。

接下来和大家分享我是如何做的呢？

1. Codex 如何进行代码还原

如果你使用的是 Codex 可以直接连接 figma mcp，从设计稿拉取速度，和还原质量都还不错，我并没有太标准的提示词，添加站点插件、figma mcp、设计稿连接给他后，直接语音对他说如何实现即可。就这样他就能生成还原度 90%的静态页面。

当然也可以下载 VS Code 编辑器进行对话，你可以查看项目代码和资料，同时速度也会高一点。

2. WorkBuddy/Codebuddy 如何进行代码还原

如果你使用 WorkBuddy/Codebuddy，我开始尝试了 Work Buddy 连接 Figma MCP ，安装稍微有点费劲，我推荐你直接问 AI，根据引导一步步完成就可以了。

如果你没耐心操作，也可以将设计稿用 figma 里面的 Heron Handoff 插件，导出切图标注文件，这里记得插图一定要添加 Export，这样的方式 AI 也是可以识别的，而且识别的质量也非常高，消耗的 token 也比较少，拉取设计稿的速度还快很多。

接着就可以打开 work buddy，新建一个项目，同时搭建好环境，这里和 codex 一样，让 AI 帮你搭建就可以了。提示词和 codex 也一样，直接语音和他说，你的交互说明即可。

六、AI 代码还原工具怎么选？

前期我建议大家各家的 AI 都去试试，我这次主要尝试了 Codex 、WorkBuddy、Codebuddy，对于设计师来说相对比较简单，安装就可以直接使用。

1. Codex/ChatGpt 套餐

Codex/Chatgpt 如果大家使用频率比较高，推荐大家买 20 刀一个月，Codex 也能共用额度，对于日常使用基本够用，当然如果不够，也可以连接 deepseek 使用。

2. WorkBuddy 套餐

WorkBuddy/Codebuddy 这两个可以通用，注册就送 2000 分，体验版每个月有 500 积分，这个免费量还是比较大，如果你只想体验，我推荐大家下载来体验即可。

六、总结

走完整个 Demo 之后，我最大的感受并不是“AI 已经可以替设计师工作了”，而是设计师的工作重心正在发生变化。

以前我们花很多时间找素材、抠图、搭页面、调间距、切图，再把设计稿一点点翻译成开发能够理解的内容。

现在，AI 已经开始接手其中一部分执行工作。

但它仍然不会自动知道：什么样的视觉方向最适合产品，哪些图层未来需要复用，哪些元素必须可编辑，页面应该使用什么技术方案，什么程度的还原才算可以交付。

这些依然需要设计师判断。

所以，我现在越来越相信：

AI 时代，设计师最重要的能力，不只是会使用某个工具，而是能不能把不同工具组织成一套稳定的工作流。

当这条工作流搭建完成后，我们减少的不是设计本身，而是那些反复、机械、消耗精力的工作。

这条链路还不完美，但它已经跑通了。

AI × UI 工作流真正值得期待的地方，不是“一句话生成一个 App”，而是设计师终于可以用更短的时间，把一个想法推进到能够看见、能够体验、能够继续开发的阶段。