简体中文

English
日本語
繁體中文
한국어
Español
Français
Deutsch
العربية
Tiếng Việt

简体中文

English
日本語
繁體中文
한국어
Español
Français
Deutsch
العربية
Tiếng Việt

Appearance

Figma MCP 与 Codex 协作实战 ​

用 Codex 实现 ​

这一页本身就是一个 Codex 工作流页面。目标不是“再看一遍设计稿”，而是让 Codex 真的参与：

  • 读取设计上下文
  • 整理节点与组件
  • 输出样式 token 与拆分方案
  • 直接开始改代码并验证

如果你已经连好了 Figma MCP，可以直接这样说：

text
请基于这个 Figma 设计节点，先完成：
1. 页面区域拆分
2. 组件树
3. 样式 token
4. 开发顺序和风险点
确认后再开始生成代码

建议配合：

🎯 核心问题

为什么要让 Codex 通过 Figma MCP 直接理解设计上下文，而不是只看一张截图？

1. 这条工作流解决的是什么问题 ​

只看截图也能生成代码，但有几个天然限制：

  • 截图看不到真实图层结构
  • 看不到组件复用关系
  • 看不到变量、尺寸和命名信息
  • 很难稳定复刻复杂设计系统

而 Figma MCP + Codex 的价值在于，Codex 不只是看到“长什么样”，还能更接近理解：

  • 这个页面由哪些节点组成
  • 哪些按钮、卡片、输入框本来就是复用组件
  • 哪些颜色、间距、字号已经是 token 或变量
  • 当前设计更适合怎么拆成前端组件

这会让生成结果更接近真正可维护的项目代码，而不是“只像一张图”的代码。

2. 一张图看懂协作链路 ​

flowchart LR
  A["Figma 设计文件 / 节点"] --> B["MCP 读取设计上下文"]
  B --> C["Codex 分析页面结构"]
  C --> D["输出组件树与样式 token"]
  D --> E["Codex 生成或修改项目代码"]
  E --> F["本地预览 / 构建验证"]
  F --> G["继续回到设计或代码微调"]

如果你要给学员讲，只要记住一句话：

Figma 负责提供结构化设计信息，Codex 负责把这些信息推进成真正的工程任务。

3. 开始前要准备什么 ​

3.1 设计侧准备 ​

在 Figma 里，最好先确保这些信息尽量清晰：

  • 页面或组件命名不要太乱
  • 主要按钮、卡片、输入框尽量做成组件
  • 颜色、字号、间距尽量保持一致
  • 给出你真正想实现的页面或节点链接

如果这些都没整理好，Codex 也能帮忙，但会把更多时间花在“猜结构”上。

图示：Figma 设计界面。左侧图层、中央画布、右侧属性面板，是后续做设计交付和节点梳理的基础。

3.2 Codex 侧准备 ​

你需要一个已经配置好或可用的 Codex 环境，并且能访问到你的项目代码。更理想的状态是：

  • 代码仓库已经能本地运行
  • 你知道要改哪个页面或组件
  • 你已经能把 Figma 节点或文件链接提供给 Codex

图示：Codex IDE 扩展界面。实际教学时，这张图最适合拿来讲“当前项目上下文 + 设计任务 + 代码修改”三者如何串起来。

4. 推荐的课堂演示流程 ​

第一步：先不要急着让 Codex 直接写代码 ​

先让它做设计盘点：

text
请基于这个 Figma 页面先帮我整理：
1. 页面由哪几个区域组成
2. 哪些区域适合做成独立组件
3. 哪些地方应该提取成统一的颜色、间距、字体 token
4. 如果是 React 项目，建议的目录结构是什么

这样做的好处是，学生会先建立“设计结构 -> 代码结构”的映射，而不是一上来就得到一堆看不懂的代码。

第二步：让 Codex 给出组件树 ​

例如它应该能逐步整理出类似这样的结果：

  • PageShell
  • HeroSection
  • FeatureGrid
  • PrimaryButton
  • InfoCard
  • Footer

这一步很重要，因为它把“设计工具里的页面”真正变成了“前端工程里的组件”。

第三步：再开始生成或修改代码 ​

等组件树和 token 差不多确认后，再让 Codex开始：

  • 新建页面
  • 新建组件
  • 补充样式
  • 调整响应式布局

第四步：一定要让 Codex 自己做一次验证 ​

无论是：

  • npm run dev
  • npm run build
  • 组件预览
  • 截图对比

都要把“验证”放进流程里。这样这条链路才不是“看起来能用”，而是“真的能落地”。

5. 一套可直接复制的提示词模板 ​

模板 1：设计盘点 ​

text
请基于这个 Figma 节点先不要写代码，先输出：
1. 页面结构
2. 组件树
3. 样式 token
4. 响应式重点
5. 实现顺序

模板 2：组件落地 ​

text
请先实现页面中的卡片区域。
要求：
1. 抽成可复用组件
2. 保留后续接真实数据的接口
3. 样式尽量用统一 token
4. 写完后告诉我还差哪些区域没完成

模板 3：设计修正 ​

text
请对照当前实现和 Figma 设计，重点检查：
1. 间距
2. 字号和层级
3. 卡片圆角和阴影
4. 按钮状态
5. 移动端布局
不要整页重写，优先做小步修正

6. 这条工作流里，Codex 最适合做什么 ​

我建议把 Codex 的职责讲成下面四类：

6.1 设计翻译器 ​

把设计语言翻译成代码任务：

  • 组件
  • token
  • 布局
  • 交互状态

6.2 工程整理器 ​

它不只是生成页面，还可以：

  • 调整目录结构
  • 抽组件
  • 统一样式变量
  • 接入现有组件库

6.3 修正助手 ​

第一次实现不够像设计稿很正常。Codex 特别适合做：

  • 小范围样式修正
  • 对照节点逐步逼近
  • 响应式和状态补齐

6.4 交付总结者 ​

当一轮完成后，让 Codex 汇总：

  • 改了哪些文件
  • 哪些设计点已经对齐
  • 还有哪些地方没有验证

7. 和普通截图转代码相比，区别在哪里 ​

方式优点局限
截图 + AI上手快，适合简单页面容易丢失结构和组件信息
Figma 插件导出可直接得到代码片段可维护性和项目适配不一定稳定
Figma MCP + Codex更像真实工程协作，可逐步调整需要更清晰的设计与项目上下文

所以如果你的目标是：

  • 课堂演示一个页面雏形：截图方案就够了
  • 要把设计真正带进现有项目：Figma MCP + Codex 更值得讲

8. 推荐搭配方式 ​

这套流程和下面几页最适合一起看：

参考资料 ​