用 Codex 和 Figma 构建前端 UI

从设计开始构建应用

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 用于代码生成的源数据。选区可以来自 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 服务器来完成。然后，让 Codex 帮你生成一个新的 Figma 设计文件。

接着，Codex 会引导你完成以下步骤：

选择创建一个新的 Figma 文件，或者使用一个现有文件。
确定要把这个文件放到哪个 workspace 中。
为应用设置 UI capture。
打开一个新的浏览器会话来访问你的应用。

当应用重新加载后，你会在页面顶部看到一个新的工具栏，其中包含以下选项：

Entire screen（整个屏幕）：捕获当前显示的整个屏幕渲染结果，并将其发送到 Figma 文件中。

Select element（选择元素）：选择页面中的某个具体组件或元素进行捕获。

Open file（打开文件）：打开 Figma 文件，检查你新生成的设计图层。

当你完成了所有想要传输到 Figma 的内容之后，你可以选择打开该文件，或者返回 Codex。此时，Codex 会把对应的 Figma 文件 URL 准备好，等着你使用。

[图示已省略]