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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。如果你只是偶尔验证一下模型出图效果可以直接用模型对话功能地址在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。但如果你像我一样要长期跑 Codex 做编码和 Agent 任务建议直接上 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。我实测下来Coding Plan 在连续多轮代码生成和 Playwright 校验这种高频调用场景下额度消耗更可控。拿到 Key 之后去控制台创建地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。API Keys 管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面把请求格式和参数都列清楚了。这里有个坑要提前说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指向 TaoTokenbase_url用https://taotoken.net/api不要加 UTM 参数那是给网页链接用的。第二env_key写的是环境变量名你需要在 shell 里 export 对应的 Key而不是把 Key 明文写进 toml。第三Figma MCP 和 Playwright MCP 是并列的两个 MCP ServerCodex 启动时会分别拉起。环境变量这样设置export TAOTOKEN_API_KEYsk-你的key export FIGMA_ACCESS_TOKENfigd_你的tokenFigma 的 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-id0-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-size390,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-size390,844它会截图、点交互、把截图和参考图对比发现偏差再改一轮。这个过程可以重复每轮都有截图证据。我实测下来第一轮通常能对齐 70% 左右主要偏差在间距和阴影第二轮能到 85%第三轮基本就接近了。验证时重点看这几个指标检查项移动端视口桌面端视口常见偏差底部导航高度56px64px图标间距不均卡片圆角16px20px阴影扩散过大主视觉留白24px32px上下不对称字体行高1.51.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 里是 390x844Playwright 就用 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 能切换、按钮有反馈、动画正常就算收工了。