Codex+Figma MCP：GPT-image-2 出图转前端的完整实践
标签: GPT-image-2 / Codex / Figma MCP / AI前端 / 设计转代码 / Playwright
原文: 微信公众号「阿星AI工作室」https://mp.weixin.qq.com/s/TLcisXmuMKrBHKvVSzGAqg
核心亮点
GPT-image-2 刷屏了，但怎么把生成的图变成前端代码？
- 两种转换路径：直接用 Codex 生图转前端，或通过 Figma MCP 读取设计文件转代码
- Codex 内置 GPT-image-2：无需额外工具，直接在 CLI 里生成 UI 并落地代码
- Playwright-interactive 校验：AI 自己打开浏览器截图对比，确保还原度
- Figma MCP 双向互通：既能把代码推送到 Figma，也能从 Figma 读取设计上下文
- 完整工作流：样本图 → Codex 生成 → Playwright 验证 → Figma 微调 → MCP 读取 → 最终代码
一、问题：GPT-image-2 生成的图，怎么变成前端？
GPT-image-2 最近刷屏了，生图质量确实惊艳。但对于开发者来说，问题来了：
图是好看了，然后呢？
- 手写代码？那要 AI 干嘛
- 给设计师？设计师说"你自己切图吧"
- 扔给 v0/Lovable？还是得手动调整
所以今天我们来展示两种路径：
- 直接用 Codex 生图并就地绘制
- Figma 设计文件通过 MCP 转前端
二、路径一：直接使用 Codex 生图并就地绘制
2.1 场景
当你自己还没有任何 UI 的时候，直接利用 Codex 里已有的 GPT-image-2 生图功能，再转前端。
2.2 操作步骤
第一步：准备样本图
找一张你喜欢的设计参考图，比如一个治愈系冥想 App 的三联屏界面（Home / Discover / Profile）。
第二步：给 Codex 下发指令
请你在当前项目中，完整复刻我给的参考图（三个手机界面，治愈系冥想 App 风格），并直接落地到代码与可预览页面。
目标：
1) 复刻对象是我上传的那张三联屏参考图（Home / Discover / Profile），不是随意发挥。
2) 要求高还原：布局结构、留白节奏、圆角、阴影、配色、字体气质、卡片层级、底部导航都要尽量贴近。
3) 参考图中的"荷花主视觉"必须复刻，不要用纯占位色块。你可以使用你自带的 GPT-image-2 生成所需插画/素材（荷花、水面、花草等），并接入页面。
4) 做成"可交互版本"，不是静态海报。
交互要求（至少实现）：
- 底部 Tab 可切换 3 个页面（Home / Discover / Profile）；
- 主要按钮有点击反馈（如 Start Session、See all、Log Out）；
- 进度图表和关键卡片有基础动画（首屏进入动画或数值过渡）；
- 响应式：桌面与移动端都能正常显示。
技术与产出要求：
1) 先分析现有项目结构，再改代码，不要新建无关项目。
2) 优先复用已有组件；样式统一管理，避免重复 CSS。
3) 视觉素材（包含荷花）如用内置的 GPT-image-2 生成，请保存到项目可访问路径并在页面真实引用。
4) 完成后运行本地预览，并做一次自检（布局、交互、样式一致性）。
5) 给我最终结果时请包含：改动文件清单、关键实现说明、本地预览地址/打开方式、与参考图仍有差异的点（如有）。
执行风格：
- 直接动手实现，不要只给方案。
- 不需要再问我"要不要开始"，直接做到可预览为止。
第三步：用 Playwright-interactive 做校验
让它自己用 playwright-interactive 做校验
Playwright-interactive 的作用是：
- 在真实浏览器里打开页面
- 截图、点交互、检查渲染效果
- 把截图和参考图对比，发现偏差再改一轮
防止"它以为像了，其实不像"
GitHub 地址：https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
2.3 效果展示
Codex 会：
- 先生成代码结构
- 发现素材是 SVG 不是真实图片后，用 GPT-image-2 生成荷花、花草等视觉元素
- 把生成的图片融入项目
- 用 Playwright 打开页面验证
- 对比差异后自动调整
最终效果：
- 第一张是原图
- 第二张是 Codex 复现的
还原度已经非常高了！
三、路径二：塞进 Figma 里进行修改
生成完代码后，可以把它推送到 Figma 进行进一步调整：
把页面推送到 Figma 中，遵守自动布局，统一文字、间距、圆角等规范：
Figma 文件链接：https://www.figma.com/design/xxx
注意：作者提到 Figma 额度用完了，没法完整演示，但大家可以自己试试。
四、路径三：Figma 设计文件通过 MCP 复刻为网页
核心思路很简单：
先让 Codex 读取 Figma 设计上下文，再生成代码，最后用 Playwright 在浏览器里校验效果。
4.1 准备工作
第一步：打开 Codex，找到设计相关 MCP
在 Codex CLI 里找到 Figma 相关的 MCP 工具，点击安装。
第二步：关联 Figma 账户
使用时会让关联 Figma 账户，直接下一步即可。
Figma MCP 主要功能：
get_design_context：获取节点的完整设计上下文get_metadata：查看节点结构（内容过大时先看结构再按需提取）get_screenshot：获取准确截图
4.2 回到 Figma，拿链接
- 在 Figma 里选中目标 Frame/组件
- 点击"复制链接"，自动复制到剪贴板
4.3 把链接发给 Codex
要求：
1) 先调用 get_design_context 获取该节点设计上下文；
2) 如果内容过大或被截断，先调用 get_metadata 查看结构，再只提取需要节点；
3) 然后调用 get_screenshot 获取准确截图；
4) 完成第一版实现后，使用 Playwright 打开页面进行验证。
这是当前 Figma MCP Server 在设计到代码工作流中推荐的实践流程。
4.4 效果对比
- 第一张：Codex 复刻的
- 第二张：原图
效果非常接近！
作者提到"这张比较简单，想测试复杂的时候已经限额了"，所以方法在这里了，大家可以自己去试试更复杂的案例。
五、使用 Figma MCP 的注意事项
总体上看，在 Codex 直接调用 Figma 时，最好注意到以下几点：
5.1 内容过大时先看结构
Figma 文件可能非常大，直接 get_design_context 可能返回截断的内容。建议：
- 先用
get_metadata查看节点树结构 - 找到需要的具体节点
- 只提取必要的部分
5.2 用截图做最终校验
文本描述和设计规范可能有歧义，但截图不会说谎：
get_screenshot获取准确截图- 和生成的代码效果对比
- 发现差异再调整
5.3 保持设计规范一致性
Figma 文件里通常有统一的：
- 字体规范（字号、行高、字重）
- 颜色变量
- 间距系统（4px/8px 等）
- 圆角规范
让 Codex 读取这些规范并在代码中遵循。
六、完整工作流总结
样本图 / Figma 文件↓
Codex 读取设计上下文↓
生成第一版代码↓
Playwright 打开浏览器验证↓
截图对比发现差异↓
自动调整代码↓
最终版本
关键点：
- 设计输入：样本图或 Figma 文件提供设计上下文
- Playwright 校验：防止"AI 觉得像，其实不像"
- 迭代调整：每轮都有截图证据，可重复验收
- 检查交互和响应式：不只是静态外观
七、为什么这个工作流有效？
7.1 传统方式的问题
- 设计师给设计稿 → 开发手写代码 → 来回沟通调整
- AI 生成代码 → 开发手动验证 → 不知道对不对
7.2 新工作流的优势
- AI 读懂设计：Figma MCP 让 AI 真正理解设计意图
- 自动验证：Playwright 让 AI 自己打开浏览器检查效果
- 闭环迭代：发现问题 → 自动调整 → 再次验证
八、写在最后
GPT-image-2 的生图能力已经很强了，但只有图片没有代码，对开发者来说还是"好看但没用"。
Codex + Figma MCP + Playwright 的组合，让"好看"真正变成"好用"：
- 生图即代码：不用手动切图
- 设计即代码：Figma 文件直接转前端
- 验证即迭代：AI 自己检查自己
如果你在做 AI + 设计 + 开发的工作流，这个组合值得试试。
本文整理自微信公众号「阿星AI工作室」，原文链接：https://mp.weixin.qq.com/s/TLcisXmuMKrBHKvVSzGAqg