使用 Codex 与 Figma 构建前端界面#
简介#
从今天起，你可以通过 Figma MCP server 从 Codex 直接生成 Figma 设计文件。MCP server 支持双向流动：把可运行的界面带到 Figma 画布上，或把画布上的设计语境带回 Codex 以生成或更新代码。这个往返流程让从原型到生产应用的迭代比以往更顺畅。
为什么要把 Codex 和 Figma 连接起来？
- 在设计与开发之间建立单向或双向的自动化桥梁，减少手工重建界面的成本。
- 利用 Figma 的画布做探索与协作，将高保真设计/交互直接映射为可运行的前端界面。
- 实现“从任意位置开始构建”的灵活工作流：设计 -> 代码 -> 画布 -> 代码。
准备工作与前提#
- 在本地或线上能运行你要捕获的应用界面（本地 dev server 或公网上的 URL）。
- 在 Codex 桌面应用中安装并配置 Figma MCP server（详情见下方文档链接）。
- 在 Figma 中拥有要采集的文件（Design、Make、FigJam 均支持）。
从设计开始构建应用（Design → Code）#
Figma MCP server 的常见用例之一是从 Figma 文件提取上下文并将其用于代码生成。MCP server 能捕获 Figma Design、Make、FigJam 文件中的布局、样式与组件信息，并把这些信息传给 Codex 作为生成代码时的重要上下文。
步骤概览：
- 打开你要从中构建应用的 Figma 文件。选中一个 frame 或 node，右键选择 “Copy as” → “Copy link to selection”。
- 将该 selection 的 URL 作为上下文传给 Codex。选择新项目或已有项目后，用类似的提示指导 Codex：
help me implement this Figma design in code, use my existing design system components as much as possible.- 该类提示会触发 agent 去调用 Figma MCP server 的 get_design_context 工具，提取布局、样式、组件等关键设计信息，然后把这些上下文用于生成前端代码。
提示与工具
- get_design_context：从 Figma 文件中抓取设计信息（布局、变量、组件、层级等），并以结构化数据返回给 Codex 用于代码生成。
- 更多工具与示例请参见官方文档：
- Figma MCP server 工具与提示文档：https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
从代码回到画布（Code → Figma）#
当你在代码中迭代后，通常需要把运行中的界面返回到 Figma 画布，以对比流程、探索替代方案并验证假设。Figma MCP server 提供了 generate_figma_design 工具，可以把运行中的界面快速转换为可编辑的 Figma 帧。
主要流程：
- 确保你的应用界面可以被浏览器渲染（本地或远程）。
- 在 Codex 中请求生成 Figma 设计：让 agent 调用 generate_figma_design，把页面渲染截图并映射为 Figma 帧。
- Codex 会引导你完成接下来的操作：
- 选择是创建新 Figma 文件还是使用现有文件；
- 确定需要放置文件的 workspace；
- 配置 UI 捕获（例如选择要捕获的页面或组件）；
- 打开一个新的浏览器会话并加载应用页面以供捕获。
当页面重新加载时，页面顶部会出现一个捕获工具栏，提供以下选项：
- Entire screen：捕获当前显示的整个屏幕并发送到 Figma 文件。
- Select element：选择页面上的某个组件或元素进行捕获。
- Open file：在 Figma 中打开你生成的文件，检查设计图层与结构。
捕获完毕后，你可以在 Codex 中直接打开生成的 Figma 文件，或把文件 URL 粘贴到 Figma 中进行进一步的编辑与协作。
典型的往返迭代工作流#
- 从 Figma 选取设计（Copy link to selection），在 Codex 中使用 get_design_context 提取上下文并生成初始代码。
- 在本地或远程运行应用，进行功能/交互迭代。
- 使用 generate_figma_design 捕获运行界面，将真实界面转为 Figma 帧用于评审与视觉迭代。
- 在 Figma 中细化设计（替换组件、调整样式、添加交互说明、制作多个变体）。
- 再次把修改过的设计上下文拉回 Codex，进行代码同步或更新，完成新一轮迭代。
在画布上的迭代建议
- 把常用的设计系统组件作为变量/组件保存，Codex 在生成代码时可以优先复用这些组件。
- 将颜色、字体等样式统一为变量，便于在代码和设计间保持一致。
- 在 Figma 中为关键交互与空状态添加注释，以便 agent 更准确地生成交互逻辑。
- 使用多个变体（variants）和页面，方便在 Figma 中并行评审不同实现方案。
快速操作清单#
- 获取 Figma 选择链接：选中 frame → 右键 → Copy as → Copy link to selection。
- Codex 提示示例（从设计生成代码）：
help me implement this Figma design in code, use my existing design system components as much as possible.- Codex 操作（从运行界面生成 Figma）：运行应用 → 在 Codex 中调用 generate_figma_design → 使用捕获工具栏选择 Entire screen 或 Select element → 打开生成的 Figma 文件。
总结#
当代码与画布实现无缝连接时，设计与开发的边界变得模糊：你可以从设计出发生成可运行代码，也可以把运行界面捕获为可编辑设计。Figma MCP server 和 Codex 的结合，让团队能在更短的时间内、以更少的摩擦从想法走向高质量的产品体验。
参考与资源#
- Figma MCP server 文档（总览）：https://developers.figma.com/docs/figma-mcp-server/
- Figma MCP server 工具与提示：https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
- 原文博客：Building frontend UIs with Codex and Figma（OpenAI Developers Blog）