Codex+Figma MCP：GPT-image-2出图转前端-平芜编程栈

1. 从一张设计图到能跑的前端，中间到底卡在哪

Codex 搭配 Figma MCP，把 GPT-image-2 生成的设计图转成可运行前端代码，这件事听起来像一条流水线，但真正动手你会发现卡点不在“生成”，而在“对齐”。我最近拿一个治愈系冥想 App 的三联屏（Home / Discover / Profile）做实验，流程是：先用 GPT-image-2 出图，再让 Codex 读图写代码，接着用 Figma MCP 把设计上下文喂进去，最后用 Playwright 在真实浏览器里截图比对。整个过程最耗时的不是写代码，而是反复确认“它以为像了，其实不像”。

这篇文章适合两类人：一是手里只有 AI 生成的设计图、想快速落地成可交互页面的前端；二是已经在用 Figma 做设计、想把 Frame 直接转成代码的开发者。核心检索词就三个：Codex、Figma MCP、GPT-image-2 出图转前端。我会把 Codex 侧的config.toml骨架、Figma MCP 的接入配置、Playwright 的验证命令都摊开讲，你照着改就能跑。

先说结论：这条链路能跑通，但需要你把“设计上下文”和“渲染验证”当成两个独立环节来对待。设计上下文由 GPT-image-2 或 Figma 提供，渲染验证由 Playwright 负责。中间任何一环偷懒，最后出来的页面就会在留白、圆角、阴影这些细节上露馅。

2. TaoToken 前置：把模型调用和 Coding Plan 先理顺

在动手写config.toml之前，得先把模型调用这条线理清楚。Codex 本身是编辑器侧的 Agent，它需要调用外部模型来完成出图和代码生成。我这边用的是 TaoToken 的 API 接入，官网地址是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 端点是 https://taotoken.net/api 。

如果你只是偶尔验证一下模型出图效果，可以直接用模型对话功能，地址在 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite 。但如果你像我一样要长期跑 Codex 做编码和 Agent 任务，建议直接上 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite 。我实测下来，Coding Plan 在连续多轮代码生成和 Playwright 校验这种高频调用场景下，额度消耗更可控。

拿到 Key 之后，去控制台创建，地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite 。API Keys 管理页面在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite 。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面把请求格式和参数都列清楚了。

这里有个坑要提前说：Codex 的config.toml里配置的是模型提供方的 base_url 和 api_key，不是 Figma MCP 的配置。Figma MCP 是另一套东西，走的是 MCP Server 协议。两者不要混在一起写，否则 Codex 启动时会报连接错误。

3. 可复制配置：Codex 侧 config.toml 骨架与 Figma MCP 接入

3.1 Codex 的 config.toml 骨架

Codex 的配置文件一般放在用户目录下的.codex/config.toml。我用的骨架如下，你可以直接复制后改 Key：

# ~/.codex/config.toml model = "gpt-image-2" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY" [model_providers.taotoken.headers] Content-Type = "application/json" [mcp_servers.figma] command = "npx" args = ["-y", "@figma/mcp-server"] env = { FIGMA_ACCESS_TOKEN = "你的_figma_token" } [mcp_servers.playwright] command = "npx" args = ["-y", "@playwright/mcp"]

这里有几个关键点。第一，model_provider指向 TaoToken，base_url用https://taotoken.net/api，不要加 UTM 参数，那是给网页链接用的。第二，env_key写的是环境变量名，你需要在 shell 里 export 对应的 Key，而不是把 Key 明文写进 toml。第三，Figma MCP 和 Playwright MCP 是并列的两个 MCP Server，Codex 启动时会分别拉起。

环境变量这样设置：

export TAOTOKEN_API_KEY="sk-你的key" export FIGMA_ACCESS_TOKEN="figd_你的token"

Figma 的 Access Token 在 Figma 账号设置里的 Personal Access Tokens 生成，权限至少给file_read。

3.2 Figma MCP 的接入配置

Figma MCP Server 的核心能力就三样：get_design_context拿设计上下文、get_metadata看结构、get_screenshot拿截图。你在 Codex 里发指令时，要明确让它按顺序调用。

在 Figma 里选中目标 Frame，右键复制链接，格式类似：

https://www.figma.com/design/ACM32qe0A3BIjTKkf2rYqw/Untitled?node-id=0-1

把这个链接发给 Codex，并附上明确要求：

请按以下流程处理这个 Figma 链接： 1) 先调用 get_design_context 获取该节点设计上下文； 2) 如果内容过大或被截断，先调用 get_metadata 查看结构，再只提取需要节点； 3) 然后调用 get_screenshot 获取准确截图； 4) 完成第一版实现后，使用 Playwright 打开页面进行验证。

这个顺序是 Figma MCP 官方推荐的设计到代码实践流程。我试过跳过get_metadata直接拿 context，结果节点一多就被截断，Codex 拿到的上下文不完整，生成的代码缺组件。

3.3 Playwright 验证的配置

Playwright MCP 装好后，Codex 可以调用它打开本地页面、截图、点交互。验证命令的核心逻辑是：

npx playwright screenshot --viewport-size=390,844 http://localhost:3000 home.png

移动端视口用 390x844，桌面端用 1440x900。截图后和 Figma 的get_screenshot结果做对比。我一般会让 Codex 把两张图并排输出，然后逐项检查布局、留白、圆角、阴影、配色。

4. 验证请求与成功结果：从出图到页面渲染

4.1 用 GPT-image-2 出图并就地绘制

当你还没有任何 UI 时，可以直接让 Codex 用 GPT-image-2 生成设计图，再转前端。我用的提示词结构是这样的：

请你在当前项目中，完整复刻我给的参考图（三个手机界面，治愈系冥想 App 风格），并直接落地到代码与可预览页面。 目标： 1) 复刻对象是我上传的那张三联屏参考图（Home / Discover / Profile），不是随意发挥。 2) 要求高还原：布局结构、留白节奏、圆角、阴影、配色、字体气质、卡片层级、底部导航都要尽量贴近。 3) 参考图中的荷花主视觉必须复刻，不要用纯占位色块。你可以使用自带的 gpt-image-2 生成所需插画素材，并接入页面。 4) 做成可交互版本，不是静态海报。 交互要求： - 底部 Tab 可切换 3 个页面； - 主要按钮有点击反馈； - 进度图表和关键卡片有基础动画； - 响应式：桌面与移动端都能正常显示。 技术与产出要求： 1) 先分析现有项目结构，再改代码，不要新建无关项目。 2) 优先复用已有组件；样式统一管理。 3) 视觉素材如用 gpt-image-2 生成，请保存到项目可访问路径并在页面真实引用。 4) 完成后运行本地预览，并做一次自检。 5) 给我最终结果时请包含：改动文件清单、关键实现说明、本地预览地址、与参考图仍有差异的点。

第一次跑的时候，提示词太简单，出来的效果和原图有出入。后来把提示词补全到上面这个长度，还原度明显提升。Codex 会先生成 SVG 占位，发现素材不是真实图片后，又用 GPT-image-2 重新生成荷花和水面素材，再抠组件融入项目。

4.2 用 Playwright 做渲染验证

代码写完后，让 Codex 调用 Playwright 打开页面：

npx playwright open http://localhost:3000 --viewport-size=390,844

它会截图、点交互、把截图和参考图对比，发现偏差再改一轮。这个过程可以重复，每轮都有截图证据。我实测下来，第一轮通常能对齐 70% 左右，主要偏差在间距和阴影；第二轮能到 85%；第三轮基本就接近了。

验证时重点看这几个指标：

检查项	移动端视口	桌面端视口	常见偏差
底部导航高度	56px	64px	图标间距不均
卡片圆角	16px	20px	阴影扩散过大
主视觉留白	24px	32px	上下不对称
字体行高	1.5	1.6	标题偏紧

4.3 把页面推回 Figma 修改

如果你想把生成的页面再推回 Figma 做进一步修改，可以让 Codex 把页面结构推送到 Figma，遵守自动布局，统一文字、间距、圆角规范。我这边因为额度限制没能完整演示，但方法是一样的：把 Figma 文件链接发给 Codex，让它按get_design_context的流程反向操作。

5. 本篇常见错排查

5.1 Codex 启动时报 MCP 连接失败

最常见的原因是config.toml里mcp_servers的command路径不对。npx在某些环境下需要写全路径，比如/usr/local/bin/npx。另外，Figma MCP 的FIGMA_ACCESS_TOKEN如果没设置，启动时会直接报 401。

排查命令：

npx -y @figma/mcp-server --help

如果这条命令能跑通，说明 MCP Server 本身没问题，问题在 Codex 的配置读取。

5.2 get_design_context 返回内容被截断

节点太多时，get_design_context的返回会超长。这时候要先调get_metadata看结构，再只提取需要的节点。我踩过的坑是直接让 Codex 处理整个页面，结果它只拿到了前几个 Frame 的上下文，后面的组件全是瞎猜的。

正确做法：

先调用 get_metadata 获取页面结构，列出所有 Frame 的 node-id， 然后只对 Home、Discover、Profile 三个 Frame 分别调用 get_design_context。

5.3 Playwright 截图和实际页面不一致

这种情况通常是页面还没加载完就截图了。Playwright MCP 默认会等load事件，但如果页面有异步数据，需要额外等待。可以在指令里加：

打开页面后等待 2 秒再截图，确保动画和异步内容加载完成。

另外，视口尺寸要和 Figma 设计稿的 Frame 尺寸对应。Figma 里是 390x844，Playwright 就用 390x844，不要用默认的 1280x720。

5.4 生成的素材是 SVG 占位而不是真实图片

GPT-image-2 有时候会先输出 SVG 占位，尤其是提示词里没明确要求“真实图片素材”时。解决办法是在提示词里加一句：

视觉素材必须用 gpt-image-2 生成真实图片，保存到 public/assets 目录， 并在页面中用 img 标签引用，不要用 SVG 占位。

5.5 额度消耗过快

Figma MCP 的调用次数是有限额的，尤其是get_design_context和get_screenshot。我一开始没注意，几下就把额度用完了。建议先把 Figma 里的 Frame 精简到只保留需要的节点，再让 Codex 读取。另外，Coding Plan 的额度比按次调用更划算，长期跑的话直接上 Plan。

6. 把这条链路跑顺之后，我实际怎么用

跑通之后，我现在的习惯是：先用 GPT-image-2 出三版设计图，选一版丢给 Codex 写代码，然后用 Playwright 截图比对，改两轮。如果设计稿本身在 Figma 里，就直接走 Figma MCP 的get_design_context流程，跳过出图环节。

有一个细节值得单独说：Codex 在调用 Figma MCP 时，最好让它先解释一遍它打算怎么调。我有一次没让它解释，它直接跳过了get_metadata，结果上下文截断，生成的代码里底部导航的图标全错位。后来我养成习惯，每次发 Figma 链接时都附上那四步流程要求，它就老实按顺序走了。

如果你要长期做这类设计转前端的活，建议把 Codex 的config.toml、Figma MCP 的 token、Playwright 的视口配置都固化下来，做成一个模板项目。下次直接复制，改改 Figma 链接就能跑。模型对话用来快速验证出图效果，Coding Plan 用来跑完整的编码和校验链路，两者配合着用，额度不会浪费。

最后一步验证完成后，直接在浏览器里打开http://localhost:3000，用手机模式看一遍，确认底部 Tab 能切换、按钮有反馈、动画正常，就算收工了。