Codex + Figma MCP 实战：从设计稿到像素级 UI 还原，全流程配置指南
一句话总结：给 Codex 装上 Figma 官方的 MCP Server，AI 就能直接"读懂"设计稿的图层结构、间距、颜色变量和组件关系，而不是对着一张截图瞎猜。这篇文章把 Figma 端的设置、Codex 端的配置、要不要开会员、以及完整的还原流程全部讲清楚，每一步都经过验证，照着做就能跑通。
目录
- 一、为什么截图还原的时代该结束了
- 二、开始前，你需要准备什么
- 三、大家最关心的：Figma 要不要开会员？
- 四、Figma 端怎么设置（两种服务器，先搞懂再选）
- 五、Codex 端怎么配置（三种方式，任选其一）
- 六、实战：还原一个真实的 UI 页面
- 七、让还原质量翻倍的几个关键技巧
- 八、常见报错与排查
- 九、费用总结与建议
一、为什么截图还原的时代该结束了
以前我们用 AI 还原设计稿，流程是这样的：截图 → 丢给 AI → AI 看着图片猜布局、猜颜色、猜间距。结果可想而知——颜色差一点、间距对不上、字体靠蒙，还原度能有 70% 就谢天谢地了。
Figma 官方 MCP Server 改变了这个玩法。它给 AI 提供的不是"一张图"，而是设计稿的结构化数据：
- 完整的节点树（哪个 Frame 套着哪个组件）
- Auto Layout 规则（弹性布局方向、间距、对齐方式）
- 设计变量（颜色 Token、字号、圆角、间距变量）
- 组件关系（哪个图层对应哪个设计系统组件）
- 截图（作为视觉参照，辅助校对）
换句话说，AI 拿到的是"设计稿的源代码"，生成的代码自然贴合度极高。这是截图方案在原理上就追不上的差距。
二、开始前，你需要准备什么
| Codex | 需要 ChatGPT 付费订阅（Plus 及以上） | 免费 ChatGPT 账号目前用不了 Codex |
| Figma 账号 | 免费可注册，但有额度限制（详见第三章） | 建议 Professional 计划 |
| 一份设计稿 | 最好结构规范（Auto Layout、组件化） | 第七章细讲 |
| 网络 | 能正常访问 Figma 和 OpenAI | OAuth 授权需要在浏览器完成 |
三、大家最关心的：Figma 要不要开会员？
直接给结论：MCP Server 这个功能本身不单独收费，但免费版的额度基本没法用。
Figma 官方对 MCP 工具调用次数的限制是这样的（按席位类型和套餐区分）：
| 免费版（Starter），或任何套餐的 View / Collab 席位 | 每月 6 次 |
| Professional / Organization 的 Dev 或 Full 席位 | 每天 200 次（另有每分钟 10～15 次的限速） |
| Enterprise 的 Dev 或 Full 席位 | 每天 600 次（每分钟 20 次） |
"每月 6 次"是什么概念？还原一个稍微复杂点的页面，AI 取设计上下文、取截图、取变量定义、取切图资源……一次会话轻松消耗 6 次以上。所以免费版只能用来验证流程通不通，想真正干活，Professional 计划是现实的起点。
价格方面（官方当前定价）：
- Dev 席位：$12/月（年付）或 $15/月（月付）——开发者选这个就够，能看设计稿、用 Dev Mode、用 MCP
- Full 席位：$16/月（年付）或 $20/月（月付）——设计师才需要，能编辑设计文件
我的建议：个人开发者买 Professional 的 Dev 席位，一个月 12 美元，是最低成本的可用方案。 另外提一句，学生和教育工作者可以免费申请 Professional，符合条件的别花冤枉钱。
还有一个容易踩的坑：额度取决于"文件所在团队"的套餐，不只是你的席位。 比如你自己买了 Professional，但设计稿放在别人的 Starter 团队里，访问这个文件时依然按 Starter 的额度算。解决办法是把文件移动或复制到自己的 Professional 团队下。
四、Figma 端怎么设置（两种服务器，先搞懂再选）
Figma 官方提供两种 MCP Server，选错了后面全是坑，先花一分钟搞懂区别：
| 地址 | https://mcp.figma.com/mcp | http://127.0.0.1:3845/mcp |
| 是否要装 Figma 桌面端 | 不需要 | 必须，且要保持打开 |
| 提供设计上下文的方式 | 粘贴设计稿链接 | 在桌面端里选中图层（也支持链接） |
| 功能完整度 | 最全（支持写回画布等） | 少一些 |
| 适用场景 | 绝大多数人 | 企业内网/数据合规等特殊场景 |
结论：用 Remote Server。 它是 Figma 官方主推的方式，功能最全，配置最简单，浏览器里用 Figma 也能跑。
Remote Server 的设置
说实话，Remote Server 在 Figma 端不需要任何设置——它是 Figma 托管在云端的服务，你在 Codex 里配置好地址、完成 OAuth 授权就能用。你唯一要做的准备工作是：
Desktop Server 的设置（备用方案）
如果你的公司有网络限制，或者你偏要走本地方案，设置步骤如下：
注意：Desktop Server 要保持 Figma 桌面端处于打开状态才能用，关掉就断了。
五、Codex 端怎么配置（三种方式，任选其一）
方式一：Codex App 插件安装（推荐，最省事）
如果你用的是 Codex 桌面应用：
插件方式还会顺带装上 Figma 的 Skills（预设的工作流指令），让 Codex 更懂怎么处理设计稿，这是手动配置没有的好处。
方式二：CLI 一行命令
用 Codex CLI 的同学，终端里执行：
codex mcp add figma –url https://mcp.figma.com/mcp
然后完成 OAuth 登录：
codex mcp login figma
浏览器会自动打开授权页，点 Allow access 即可。可以用下面的命令确认配置成功：
codex mcp list
方式三：手动改配置文件（适合喜欢掌控一切的人）
打开 ~/.codex/config.toml，加入：
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
保存后同样执行 codex mcp login figma 完成授权。
老版本注意事项：如果你用的是比较旧的 Codex 版本，连接远程 HTTP MCP 可能会失败，需要在配置文件里额外加一段开启实验性的 rmcp 客户端支持：
[features]
rmcp_client = true
新版本已内置支持，连不上再加这段。如果你配的是本地 Desktop Server，地址换成 http://127.0.0.1:3845/mcp 即可，本地服务不需要 OAuth。
验证配置是否成功
在 Codex 会话里输入 /mcp，能看到 figma 服务器状态为已连接，并列出 get_design_context、get_screenshot、get_variable_defs、get_code 等工具，就说明配置成功了。
六、实战：还原一个真实的 UI 页面
配置完成后，完整走一遍还原流程。
第 1 步：在 Figma 里复制图层链接
在 Figma（网页版或桌面版都行）里，选中你要还原的那个 Frame——注意，是 Frame 不是整个页面，一次还原一个页面/组件效果最好。
右键 → Copy/Paste as → Copy link to selection。
得到的链接长这样：
https://www.figma.com/design/xxxxxx/MyDesign?node-id=123-456
Codex 不会真的去"打开"这个链接，而是从中提取 node-id，通过 MCP Server 拿到这个节点的全部设计数据。
第 2 步：向 Codex 下任务
在 Codex 里输入提示词，一个经过验证的基础模板：
请根据这个 Figma 设计稿还原 UI，使用 Vue3 + Tailwind CSS：
https://www.figma.com/design/xxxxxx/MyDesign?node-id=123-456
要求：
1. 先调用 Figma MCP 获取设计上下文和截图，对照理解整体结构
2. 尺寸、间距、颜色、字号严格按设计稿的变量值来，不要自己编
3. 图标和图片资源通过 MCP 导出到 src/assets 目录
4. 完成后启动本地服务并截图，和设计稿截图对比，列出差异并修正
最后一条"截图对比"非常关键——让 Codex 自我校验，还原度会明显提升，这就是 Agent 相比一次性生成最大的优势。
第 3 步：观察 Codex 的工作过程
正常的话，你会看到 Codex 依次调用这些 MCP 工具：
- get_metadata：获取节点结构概览
- get_design_context / get_code：拿到布局、样式、变量等核心数据和参考代码
- get_screenshot：拿设计稿截图作为视觉参照
- get_variable_defs：拿到颜色、字号等设计 Token 的具体值
- 导出资源：把 SVG 图标、图片切图保存到本地项目
生成的代码里，颜色会是 #1A73E8 这样来自设计变量的精确值，而不是"差不多蓝"的 #3B82F6；间距是设计稿里真实的 16px、24px，而不是 AI 拍脑袋的值。
第 4 步：迭代修正
第一次生成 rarely 完美，常见需要追加的指令：
导航栏的高度不对，重新读取设计稿核对
按钮的圆角应该是 8px，检查 variable 定义
把颜色抽成 Tailwind 的 theme 配置，对应 Figma 里的变量命名
因为 MCP 连接一直在，Codex 可以随时回去"重新看设计稿"，这个来回迭代的过程非常顺滑。
七、让还原质量翻倍的几个关键技巧
这部分是实战经验，比配置本身更影响最终效果。
1. 设计稿质量决定还原质量（最重要）
MCP 给 AI 的是结构化数据，结构乱的设计稿给的就是乱的数据。如果你的设计稿是一堆绝对定位的自由图层，AI 拿到的就是一堆无意义的 x/y 坐标。给设计师（或自己）提这几个要求：
- 全程使用 Auto Layout：AI 能直接映射成 Flexbox，布局逻辑一目了然
- 图层命名要有语义：Header / Nav / LoginButton 而不是 Frame 427
- 颜色字号用变量（Variables）：AI 会生成对应的设计 Token，而不是硬编码色值
- 组件化：重复的 UI 元素做成 Component，AI 生成代码时也会抽象成组件
一句话：设计稿越规范，MCP 传出来的数据越接近"前端代码"，还原越像素级。
2. 一次只还原一个 Frame
别把包含几十个页面的整份文件丢给它。一次一个页面、一次一个组件，上下文更聚焦，效果和额度消耗都更可控。
3. 用 AGENTS.md 固化项目规范
在项目根目录建一个 AGENTS.md，Codex 每次都会读它。写入你的技术栈和风格约定：
# 项目规范
– 框架：Vue 3 + TypeScript + Tailwind CSS
– 组件：组合式 API，单文件组件
– 图标：SVG 资源统一放 src/assets/icons
– 颜色：必须映射为 Tailwind theme 变量，禁止散落硬编码
– 移动端页面按 375px 设计宽度还原，使用 rem 适配
这样每次还原新页面，不用重复交代背景，输出风格也稳定。
4. 提示词里明确"先读再写"
对比两句话的效果差异很大：
- ❌ “帮我实现这个设计稿：链接”
- ✅ “先通过 Figma MCP 获取这个节点的设计上下文、变量定义和截图，分析布局结构后再开始写代码：链接”
明确要求它先调用工具，能避免模型偷懒直接靠链接里的有限信息硬编。
八、常见报错与排查
| 调用几次后提示 rate limit / 429 | 免费版每月只有 6 次额度 | 升级 Professional 的 Dev/Full 席位；确认文件不在 Starter 团队里 |
| OAuth 授权一直失败 | 浏览器缓存或网络问题 | 清缓存重试；执行 codex mcp login figma 重新授权 |
| /mcp 里看不到 figma 工具 | 配置未生效 | 检查 config.toml 语法；重启 Codex；老版本补 [features] rmcp_client = true |
| get_code 调用报错但连接正常 | 已知兼容性问题，多见于旧版 CLI | 升级 Codex CLI 到最新版；或改用 Codex App 插件方式 |
| Desktop Server 连不上 | Figma 桌面端没开 / Dev Mode 没启用 | 保持桌面端打开，Shift+D 进 Dev Mode 确认 MCP 已 Enable |
| 读不到文件内容 | 没有该文件的访问权限 | 让文件所有者给你开权限，或把文件复制到自己的团队 |
九、费用总结与建议
把整套方案的成本摊开算一下：
| ChatGPT Plus（用 Codex 的前提） | $20/月 | 必须 |
| Figma Professional · Dev 席位 | $12/月（年付） | 干活必须，免费版 6 次/月只够体验 |
| Figma MCP Server 本身 | 免费 | — |
结论：要开会员，而且严格说是两个会员。 Codex 要 ChatGPT 付费订阅，Figma 要 Professional 的 Dev 席位。合计每月 32 美元左右。
值不值？如果你是前端开发者，经常要还设计稿，这套组合能把单个页面的还原时间从几小时压到十几分钟，而且质量是"按设计变量精确还原"级别的。一个月省下来的时间，远不止 32 美元。
如果你只是想先试试水，完全可以零成本验证：免费 Figma 账号（6 次额度）+ Remote Server + 一个简单 Frame，把流程跑通，体验过"AI 读结构化设计数据"和"看截图猜"的差距之后，再决定要不要付费。
