说实话把 Figma 设计稿变成可以跑的页面这事儿我前后折腾过不少方案Dev Mode 复制样式、插件导出代码、交给程序员照着稿子手写…… 每种都有各自的问题要么生成的是“半成品”要么只能给你一堆标注终究还是要靠人一点点拼。直到最近我把 Codex 和 MCP 组合起来跑通了一次完整的流程才觉得这条路终于有点“自动挡”的意思了。这篇不写概念直接记录我这次从 Figma 到可运行页面的完整落地过程包括方案怎么选、环境怎么配、Prompt 怎么写、踩了哪些坑。如果你也想让 AI 替你从设计稿写 front-end 代码这篇应该能帮你省不少时间。1. 方案选型为什么是 Codex MCP而不是其他路子先交代一下背景。Figma 转代码这个方向市面上早就不缺工具了官方有 Dev Mode可以直接看标注、复制 CSS社区里也有各种插件能导出 Tailwind、Flutter 代码。但用下来的感觉是这些工具大多数是“半自动”的它们能给你样式参考却很难理解整个页面的布局逻辑交互状态、响应式断点这些更指望不上。最后真正的拼装工作还是得人工完成。Codex 的出现解决了“理解与生成”这一层。它是 OpenAI 的编程智能体能在本地读写文件、执行命令也能理解和生成完整的前端工程代码。但光有它还不行因为 Codex 读不到 Figma 里的设计稿——设计稿本质上是一堆矢量和样式元数据不是它能直接解析的文本或图片。这个缺口正好由 MCP 来补。1.1 核心思路把设计稿信息变成 AI 能读的数据MCP 的全称是 Model Context Protocol通俗点说它是给 AI 接外部工具的标准化协议。Figma 自己有完整 REST API通过文件 Key 可以拿到图层树、尺寸、颜色、字体、圆角、间距这些精细数据。MCP server 干的事情就是把 Figma API 封装成一个一个可供 AI 调用的工具——比如 get_figma_file、get_figma_image、get_figma_node。这样一来Codex 就可以像“边问边看”一样去读设计稿它想知道首页根 Frame 的尺寸直接调 MCP 工具想知道某个按钮的圆角和阴影也可以直接读节点样式。整个过程对我这种使用者来说就是给 Codex 下一个指令它在后台自己调工具、自己分析、自己拼接代码完全不用我手动导出一堆标注再喂给它。打个比方如果 Codex 是刚入职的实习生MCP 就像是递给实习生的一张工程图——不是一张模糊的照片而是带着精确尺寸、材质标注、构造细节的原始蓝图。实习生能自己读图理解结构然后动手干活。1.2 为什么不直接用 Computer Use 或截图可能有人会问既然 AI 能识别图片为什么不直接截图给它看我在试过之后发现这条路有两个硬伤。第一是精度不够。模型从位图里“估计”出来的间距、字号、颜色和设计稿的真实数值通常有出入尤其圆角、投影、渐变这些细节偏差会被放大得很明显。而 MCP 拿到的数据是精确的每个数字都是 Figma 里真实存在的 token 值只要生成时约束到位基本能做到像素级别的还原。第二是工程质量差。截图方案生成出来的页面偏向“一次性视觉稿”代码里通常没有成体系的变量管理间距、颜色散落各处后面要改一个主题色就够你头疼的。MCP 方案把样式以结构化方式提供给 AI我可以在 Prompt 里要求它输出 CSS 变量或 Tailwind 配置产物的可维护性完全不在一个量级。所以在选型上我最终定了 Codex MCP 的组合。Codex 负责理解和生成代码MCP 负责把设计稿数据变成 Codex 能直接消费的结构化输入。两者互补缺一不可。2. 环境准备与配置打通说了一堆思路该进入实操了。整个准备阶段我用了一个多小时主要卡在配置细节上真正跑通之后就觉得特别简单。下面按顺序给你们拆开讲。2.1 Figma 侧拿到 API Token 和文件 Key第一步去 Figma 的个人设置里创建一个 Personal Access Token。路径一般是头像菜单 - Settings - Security - Personal access tokens。创建时权限建议只勾选 File content:read-only够用就行权限越小越安全。Token 生成后只会完整显示一次记得复制保存好。第二步拿到目标文件的 Key。在浏览器里打开你的 Figma 文件地址栏 URL 里会有一段类似abc123def456的字符串那段就是文件 Key。有些文件 URL 会带node-id...之类的参数我只需要第一个参数里面那段主 Key。这个过程有两点要注意都是我自己踩过的坑注意Token 所属的账号必须有目标文件的查看权限。如果文件是别人通过链接分享给你的只读副本你的账号不在协作者列表里API 是读不到的会返回 403 或空白数据。注意如果你想省事也可以直接用“只读链接”里的文件 ID 作为 Key但必须确保这个链接本身开了“允许通过 API 访问”的权限。团队文件通常默认支持外部访客文件不保证。2.2 本地环境Node.js 是硬前提Figma MCP server 基本都是用 Node.js 写的所以本地环境必须要有 Node.js。建议直接用 LTS 版本目前 20 以上都行。装完用node -v验证一下。另外提醒一下Codex 在生成页面之后大概率会在本地启动开发服务器做预览所以 3000、5173 这类常用端口最好提前确认没被占用不然一会儿生成完页面、服务却起不来又得多一次来回。2.3 配置 Codex 的 MCP Server 入口Codex 的 MCP 配置写在全局配置文件里以我用的 CLI 版本为例路径是~/.codex/config.toml。如果你不确定自己的配置文件在哪可以运行codex mcp --help或者直接查看codex目录下的文件结构。一个典型的配置段长这样[codex.mcp_servers.figma] command npx args [-y, figma-mcp-server] env { FIGMA_API_KEY 你创建的token }这里有一点要强调不同开源 Figma MCP server 的配置格式略有差异有的插件要求 token 直接放在 args 里有的要求通过环境变量传入你安装的是哪一款就以它的 README 为准。我这边用的是一款社区比较常见的 figma-mcp-server它支持用环境变量传递 token所以上面的写法就能直接跑。配置完成后重启 Codex 让它重新加载 MCP server。在交互界面里先输入一个简单指令比如“列出当前可用的 MCP 工具”如果一切正常它会返回类似 Connected MCP servers: figma 的提示这时候链路就通了。3. 完整实操流程从设计稿到可运行页面环境ready之后就进入最核心的部分了。我这次的目标是一个典型的营销落地页顶部导航、Hero 区、三个特性卡片、一个 CTA 区和页脚。设计稿是固定宽度 1440px不算复杂但足够验证流程。下面每一步都是实际操作记录。3.1 第一步让 Codex 读取设计稿基本信息打开 Codex 交互模式我输入的第一条指令不是让它直接写代码而是先读文件、做结构分析“读取 Figma 文件 [文件Key]先告诉我这个页面的整体布局结构包括根 Frame 的尺寸、主要区块划分、各个区块之间的间距不用生成代码。”这一步的作用有两个一是验证 MCP 链路确实通了二是让 Codex 先建立对设计稿的整体认知。如果链路正常Codex 会调用 get_figma_file 工具拉回来一长串 JSON 数据然后自己总结成一段结构描述。实测下来这里能明显感受到设计稿图层命名质量的影响。如果图层都是 Frame 1、Frame 2、Group 8 这种名字模型也能读但它只能靠位置关系猜测每个区块的语义后续生成的 CSS class 命名就会比较“抽象”。反过来如果关键区块有清晰的语义化命名比如 Navbar、HeroSection、FeatureCard这步的输出质量会高很多。所以我的建议是在真正确认要跑 AI 生成之前先花 10 分钟把设计稿的图层重点区块重命名一下。这不是可有可无的洁癖而是直接影响最终代码质量的投入。3.2 第二步约定页面结构和样式产物Codex 这类编程智能体有个特点如果你不约束它很擅长自由发挥。你让它“生成一个页面”它可能在还原度之外顺手给你加一堆动画、渐变、玻璃态效果好看是好看但跟设计稿一对比就有偏差后续返工成本更高。所以在写代码之前我会先把输出约束讲清楚。这次我的 Prompt 是“生成一个单页 HTML 文件内联 CSS样式尽量使用 CSS 变量颜色、字号、间距严格按设计稿取值。不需要响应式固定宽度 1440px。页面文件名 index.html放在 ./output 目录下。”这里有几个关键字是可以灵活替换的如果你项目用的是 Tailwind就说生成 Tailwind 代码如果你需要 React 组件就直接说生成 .tsx 组件。关键是让 AI 在动手之前知道你要什么形态的产物而不是让它猜。3.3 第三步生成页面并启动本地预览约束讲好之后就可以让它正式动工了。我的指令很直接“根据刚才读取的 Figma 信息写页面代码写入 ./output/index.html然后使用 python3 -m http.server 8080 启动一个本地静态服务。”Codex 有执行命令的能力先是创建目录、写入文件然后启动服务。这套动作它的执行顺序很稳定几乎不会乱。服务起来后浏览器访问 http://localhost:8080 就能看到生成效果然后就可以进入“对照设计稿找差异”的环节。这一步还有一个比较细节的地方如果设计稿里有位图素材比如产品展示图、背景照片Codex 会通过 MCP 调 Figma 的图片接口拿到可下载的临时链接然后把图片下载到本地、在代码里替换成相对路径。这样页面脱离 Figma 之后所有图片依然能正常展示。3.4 第四步对比设计稿做细粒度调整页面第一版生成出来之后一般能达到 70%~80% 的还原度剩下的是各种细节偏差间距差了几像素、某个按钮的颜色值取错、字体大小不对。这时候不要急着让它“改得更好看”而是要给它能执行的具体指令。我的做法是让 Codex 用 Playwright 之类的 MCP 工具对页面截图然后我再对照 Figma 里的设计稿截图把差异逐条描述给它。比如“导航栏左侧 logo 离左边距多了 20px正文行高偏大原稿是 24px主按钮的圆角是 8px不是 12px。”这种一条一条的调整指令模型处理起来非常稳定。还有一个很有效的方式是给 Codex 一个检查清单让它自己对着设计稿逐项核对检查所有间距数值是否都来自设计稿的间距 token检查字体大小和字重是否全局统一检查圆角和阴影是否逐项匹配。这个技巧的核心是把模型的注意力从“自由发挥”拉回“精确对齐”。你会发现一旦指令变得具体生成结果的质量会肉眼可见地提升。4. 常见问题与排查技巧实录下面的问题是我这次实践以及在反馈群里看别人踩过之后整理出来的高频雷区。每一类我都给到排查命令和解决思路。4.1 MCP server 连不上或工具不可用现象最典型的就是 Codex 里输入指令后它回复说找不到 MCP 工具或者直接抛出类似cc switch local proxy failed while handling codex endpoint /responses的报错。这个报错看起来很吓人但本质上就是本地代理或 MCP server 的连接出了问题。我的排查顺序是先确认 MCP server 本身能不能在终端跑起来把配置里的 command 和 args 复制出来手动执行一遍看看有没有报错。确认 npx 拉包是否成功。有时候 network 抖动会导致依赖下载一半失败重新跑一次命令一般能解决。检查环境变量是否正确注入。如果你是用 GUI 方式启动 Codex它不一定继承 shell 里的环境变量token 就可能读不到。最后把 Codex 完全重启让它重新加载配置。这套流程走完绝大多数 MCP 连接问题都能解决。4.2 Figma 文件 API 读不到内容Codex 能连上 MCP server但获取文件信息时返回 403 或者空结构。这通常不是配置问题而是权限问题。先检查 token 权限确认创建时勾选了 File content:read。然后检查 Figma 账号是否在目标文件的协作者列表里如果文件是通过链接分享来的确认你的账号真的能打开并能看到图层。还有一点容易忽略如果文件是在团队空间里可能需要团队管理员在设置里开启 API 访问权限。这类问题排查起来不算难但因为涉及 Figma 后台容易绕圈子。我的建议是一步步来先浏览器里用那个账号打开文件能正常看到图层再排查 API。4.3 生成的页面和设计稿差距大如果你发现自己生成的页面布局对得上、细节偏差却很多比如间距不对、字体不对、颜色不对先别急着责怪 Codex大概率是输入端的质量问题。我总结过三类最常见的原因图层命名混乱模型只能靠坐标猜语义设计稿里大量使用嵌套组件样式被分散到多层 node 上提取时容易漏文本内容里有大量隐藏的空格或特殊字符影响模型对版式结构的判断。解决思路也很简单提前整理图层命名、减少不必要的嵌套层级、清理掉无关的隐藏图层。你可以把这一步当作“给 AI 的输入做降噪”投入产出比非常高。4.4 图片资源加载不出来页面生成了图片区域却是空白或 404。这种情况多半是 Figma 生成的临时图片链接过期了。Figma 的图片接口返回的 URL 通常有时效MCP server 拿到 URL 之后如果没及时下载后面再用就会失效。解决方法是让 Codex 把图片资源下载到本地 assets 目录并在代码里使用相对路径引用。如果需要高精度还原也可以在 Prompt 里指定导出图片的倍率比如 2x这样清晰度更稳妥。另外如果设计稿里的图标是矢量组件尽量不要走位图导出直接让 Codex 按 SVG 生成会更清晰、文件更小效果也好得多。5. 一点实战心得与后续扩展流程跑到这里其实已经把“从 Figma 到可运行页面”的核心链路讲完了。最后说几个我自己的体会不算总结算经验。第一这套流程目前最适合的确实是中小型页面比如落地页、活动页、后台管理面板的单个模块。一旦设计稿特别复杂组件库本身就包含大量不合理的命名和冗余嵌套AI 的生成质量会明显下降。所以建议大家都从一个小页面开始跑通再逐步加大复杂度。第二Prompt 的写法真的需要花时间磨。我试过“照着稿子写”这种一句话指令效果远不如“先分析结构、再约定输出、再动手实现”这种三步走的引导方式。核心原因是分步引导能帮模型建立一个更清晰的上下文它的输出质量自然更稳定。第三设计稿侧的规范性比工具链本身的配置还重要。现在我可以很确定地说Figma 图层的命名、分组、组件化程度直接决定了 AI 生成代码的上限。群里也有朋友问我要不要用蓝湖 MCP、MasterGo MCP 这些同类方案我试过几个底层逻辑几乎一样换工具不换思路最重要的还是把设计稿本身整理好。最后分享一个小技巧跑流程时尽量保留每一轮的 Prompt 和 Codex 输出方便出问题时回溯定位。现在我已经攒了一套自己的 Prompt 模板库里面按“页面类型 技术栈 样式规范”分好了类下次再接设计稿基本就是套模板再微调效率比第一次至少快一倍。如果你们也在折腾这条链路建议从一开始就有意识地把自己的指令沉淀下来时间久了这就是最值钱的资产。