本文为非官方中文翻译，内容以 OpenAI 官方英文文档为准。
官方来源：https://developers.openai.com/blog/building-frontend-uis-with-codex-and-figma
使用 Codex 和 Figma 构建前端 UI
使用 Codex 和 Figma 将真实运行中的界面带入 Figma，在其中进行优化，再将更改带回 Codex。
从今天开始，你可以使用 Figma MCP server 通过 Codex 生成 Figma 设计文件。MCP server 的构建目标是支持双向流转：既能将可运行的 UI 带到 Figma 画布上，也能同样轻松地再带回代码中，让你能够基于自己最好的想法继续构建，而不只是停留在第一个版本上。
Codex 桌面应用是专为 agentic coding 打造的。它提供了一个专注的界面，用于在多个项目中并行管理多个 agent、在不丢失上下文的情况下跟踪进度，并集成外部工具。这种流畅性让人倍感熟悉。在 Figma 中，团队也能以同样轻松的方式协作。画布是为探索和迭代而设计的。它是一个让最佳想法得以成形的空间。通过将 Figma 画布连接到 Codex，这种探索精神能够直接延伸到开发工作流中——为用户开启一种强大的新方式，去构建从原型到生产级应用的一切。
从设计启动应用
Figma MCP server 的一个核心用例，是从 Figma 文件中获取上下文，并在代码生成中使用这些上下文。Figma MCP server 可以捕获 Figma Design、Make 和 FigJam 文件中的信息，并在构建过程中将这些信息传递给 Codex。
要开始使用，请打开你计划作为应用构建来源的 Figma 文件。右键选择一个 frame，然后依次选择“Copy as”和“Copy link to selection”。
这些 selection URL 直接链接到 Figma 画布上的某个 frame 或节点。它们可以是单个元素，也可以是一组组件，但本质上，它们就是 agent 用于代码生成的源数据。selection 可以来自 Figma Design、Make 或 FigJam 文件。拿到 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 工具。该工具有助于从 Figma 文件中提取关键设计信息，例如布局、样式和组件信息，然后将这些上下文提供给 Codex 进行代码生成。
除了提取设计信息外，Figma MCP server 中还有许多其他有用的工具；完整列表请务必查看我们的文档。
从代码到画布
在代码中迭代之后，你会希望将设计带回画布，以便比较流程、探索备选方案，并验证你的假设。Figma MCP server 让你能够轻松地将这些界面重新带回 Figma，而无需再从浏览器中手动重建它们。借助 generate_figma_design 工具，你可以在几秒钟内将一个实时运行的界面转换为完全可编辑的 Figma frame——把真实、可运行的 UI 直接带到画布上，以便进行更深入的探索与协作。
首先，你需要渲染应用的 UI。这既可以在本地完成，也可以通过公开可访问的 web server 完成。然后，请 Codex 帮助你生成一个新的 Figma 设计文件。
接着，Codex 会引导你完成以下步骤：
- 决定是创建一个新的 Figma 文件，还是使用现有文件。
- 确定将该文件放在哪个 workspace 中。
- 为 UI 捕获设置应用。
- 打开应用的一个新的浏览器会话。
当应用重新加载后，你会在页面顶部看到一个新的工具栏，其中包含以下选项：
Entire screen: 捕获当前显示的整个屏幕渲染，并将其发送到 Figma 文件中。
Select element: 选择页面上的特定组件或元素进行捕获
Open file: 打开 Figma 文件以检查你的新设计图层
在捕获完所有你想要传输到 Figma 的信息后，你可以选择打开该文件，或者返回 Codex。Codex 会为你保留好这个 Figma 文件 URL。
往返之间，一个 MCP 故事
现在你已经构建好了应用，并设置好了设计文件，接下来就可以开始迭代了。在这里，你可以充分利用 Figma 画布所提供的一切，包括：
- 添加 design system 组件
- 将样式、字体和颜色更新为变量
- 调整布局并添加注释说明
- 设计各种交互和空状态
- 围绕多个变体和探索方向开展协作
完成 UI 优化后，你可以按照我们在本文开头概述的相同步骤，通过 MCP server 将这些更改拉回到你的应用中。
当代码与画布连接起来后，你就可以在执行与探索之间流畅切换。这个往返流程释放了 Figma MCP server 与 Codex 的真正力量——能够从任何起点出发，在不牺牲速度的前提下，打造有意义且高质量的应用体验。
要了解有关 Figma MCP server 的更多信息，请查阅我们的文档，或者直接在 Codex 桌面应用中安装 Figma MCP server 开始使用。