Codex × Figma MCP：让 AI 读懂你的设计稿

Figma MCP 能让 Codex 直接读取设计稿、截图分析节点、生成页面、修改组件、绘制流程图。安装之后，你可以用自然语言下达设计需求，让 Codex 先生成草稿，再由你检查结构、业务逻辑和视觉质量。

在半桶水课程里，它对应的是“视觉与页面 / 产品表达 / 研发协作”的工作流：把模糊的产品想法、页面结构或流程说明，变成可查看、可讨论、可继续设计的视觉草稿。

这节解决什么

很多非设计同学不是完全没有想法，而是说不清“页面应该长什么样”。Figma MCP 可以让 Codex 读设计稿、生成流程图或高保真草稿，但最终审美、业务逻辑和可用性仍然要由人判断。

这节练的是：让 Codex 把想法变成设计草稿，同时学会检查结构、信息层级和可交付性。

工作流卡

项目	内容
输入	Figma 授权、目标页面、用户场景、已有设计稿、品牌或组件约束
Codex 负责	读取节点、生成流程图、产出 UI 草稿、整理设计说明
人类判断	信息层级是否清楚、是否贴合业务、视觉是否需要设计师接手
输出	Figma 链接、流程图、页面草稿、组件说明、前端实现建议
验收	链接可打开、节点完整、移动/桌面尺寸合理、关键文案不溢出

适合谁

这一节适合：

• 产品、运营、课程老师想快速表达页面想法的人。
• 前端同学想让 Codex 读取设计稿并辅助实现的人。
• 团队想把流程图、页面草稿和实现说明串起来的人。

如果是正式品牌视觉或商业发布页面，Codex 生成结果应该当作初稿，再交给设计师做审美和一致性把关。

1. 安装

在 Codex 桌面 App 的插件市场搜索 Figma，点击安装。

安装后会跳转到浏览器页面完成授权（流程和 Notion MCP 类似，按提示操作即可）。

---

2. 如何使用

新建对话，用 @ 符号调用 Figma MCP，然后直接描述你的需求。

示例一：生成流程图

让它生成一个包含基本操作步骤的用户登录流程图：

点击返回的链接，在浏览器里查看生成的登录注册流程图效果：

示例二：生成高保真 UI 设计图

如果你觉得流程图太偏技术，可以让它设计产品功能架构图，或者生成海报式的高保真 UI。直接发提示词即可：

点击链接查看效果，整体呈现非常不错：

---

总结

Figma MCP 特别适合有设计需求的朋友。在 Codex 里装上这个插件，就可以用对话的方式完成以前需要专业设计技能才能做的事情。

当画图的门槛被 AI 拉低之后，我们真正需要培养的能力是：

1. 产品思维 — 知道要做什么
2. 业务理解 — 知道为什么这样做
3. 审美标准 — 知道什么是好的

让 Codex 当执行者，借助 Figma MCP 去放大你的想法，设计出属于自己的作品。

你要重点检查什么

• Codex 是否读取了正确的 Figma 文件或节点。
• 输出的流程图是否符合真实业务步骤。
• UI 草稿里的标题、按钮、表单和说明是否完整。
• 是否存在文字溢出、层级混乱、移动端不可用等问题。
• 是否需要设计师继续完善视觉系统和组件规范。

验收标准

完成这个案例后，至少确认：

• Figma MCP 已完成授权，链接能正常打开。
• Codex 能说明它读取或创建了哪些节点。
• 输出草稿能被团队成员打开查看。
• 页面目的、用户路径、关键操作和状态说明清楚。
• 你知道哪些部分只是 AI 草稿，不能直接当最终设计交付。

复用方式

可以保存成这个任务模板：

请通过 Figma MCP 生成或分析设计稿。

目标页面/流程：
用户场景：
已有设计链接：
品牌或组件约束：
输出形式：
禁止修改：
验收标准：

执行前请先说明你会读取或创建哪些 Figma 节点；完成后请列出设计结构、关键状态和需要人工继续检查的地方。