在 AI 掀翻代码界的这一年里，设计圈的老大哥 Figma 显然有点“破防”了。当人们开始拿着 Pencil 几秒钟生成可交互原型，当 Vibe Coding（氛围编程）让“设计师直接出成品”从口号变成现实，所有人的目光都聚焦在 Figma 身上：你这个全球最强的设计工具，难道真要沦为 AI 时代的“画板”？
终于，Figma 憋出了个大的。
就在刚刚，Figma 宣布深度集成 OpenAI Codex，推出了一套足以改变游戏规则的“设计到应用”新流派。这不是简单的插件更新，而是一次降维打击式的整合。通过引入 MCP（Model Context Protocol）协议，Figma 试图证明：在 Vibe Coding 的浪潮里，老大哥不仅没掉队，还要把“设计即代码”的标准重新握回手里。
如果你还在纠结如何把精美的 Figma 稿件变成能跑的代码，或者担心被只会调包的 AI 搞失业，那么这篇来自官方的关于 Codex to Figma 的实操教程指南，你绝对不能错过。（底部附官方原教程地址）
实操开始
从今天起，您可以使用Figma MCP 服务器从 Codex 生成 Figma Design 文件。
Codex桌面应用程序专为智能体编程而设计。它提供了一个专注的界面，用于跨项目并行管理多个智能体，在不丢失上下文的情况下跟踪进度，并集成外部工具。
首先，打开你计划用来构建应用程序的 Figma 文件。右键单击并选择“复制为”和“复制链接到所选内容”来选择一个框架。
Help me implement this Figma design in code, use my existing design system components as much as possible.类似这样的提示会指示代理从 Figma MCP 服务器调用该get_design_context工具。该工具可以帮助从 Figma 文件中提取关键设计信息，例如布局、样式和组件信息，然后将这些信息提供给 Codex 以生成代码。
从代码到画布 在代码迭代之后，您可以将设计重新导入画布，以便比较流程、探索替代方案并验证您的假设。Figma MCP 服务器让您可以轻松地将这些屏幕导入 Figma，而无需在浏览器中手动重新创建。借助此generate_figma_design工具，您可以在几秒钟内将实时运行的界面转换为完全可编辑的 Figma 框架，从而将真实的、功能齐全的 UI 直接呈现在画布上，以便进行更深入的探索和协作。首先，你需要渲染应用程序的用户界面。这可以在本地完成，也可以通过公共网络服务器完成。之后，让 Codex 生成一个新的 Figma 设计文件。
接下来，Codex 将引导您完成以下步骤：
- 决定是创建一个新的 Figma 文件还是使用现有的文件。
- 确定文件要放置在哪个工作区。
- 设置应用程序以进行用户界面捕获。
- 打开一个新的浏览器会话来运行您的应用程序。
应用程序重新加载后，页面顶部会出现一个新的工具栏，其中包含以下选项：
- 全屏：捕获当前显示的整个屏幕的渲染结果，并将其发送到 Figma 文件。
- 选择元素：选择页面上的特定组件或元素进行捕获。
- 打开文件：打开 Figma 文件以检查您的新设计图层。
在您采集完所有想要导入 Figma 的信息后，您可以选择打开文件或返回 Codex。Codex 中会显示 Figma 文件的 URL。
往返之旅，一个MCP的故事
现在您已经构建了应用并设置好了设计文件，可以开始迭代了。在这里，您可以充分利用 Figma 画布提供的各种功能，包括：
- 添加设计系统组件
- 将样式、字体和颜色更新为变量
- 调整布局并添加注释说明
- 构建各种交互和空白状态
- 合作进行多种变体和探索
完成用户界面优化后，通过 MCP 服务器将这些更改拉回到您的应用程序中。
当代码与画布连接起来，您就可以在执行和探索之间流畅切换。这种往返流程充分发挥了 Figma MCP 服务器与 Codex 的强大功能——让您能够从任何位置开始，打造意义非凡、高质量的应用程序体验，而无需牺牲速度。
为什么 Figma 这次必须和 Codex “搞波大的”？
对手的紧逼： Pencil 等新兴工具利用 LLM 绕过了传统设计软件，直接从需求生成可交互 Demo，让 Figma 的“静态画板”属性显得厚重且低效。
Vibe Coding 的崛起： 现在的趋势是“感觉对了，代码就该出来”。Figma 必须打破设计与工程的柏林墙，让设计师的“Vibe”无缝流向生产环境。
Codex + Figma 是如何提效的？
从设计稿直接生成 App 架构： 教程中提到的 Codex 接口，不再是生成一段简单的 CSS，而是理解整个 UI 逻辑。
双向同步： 重点介绍它如何利用 MCP 把设计组件直接转化为可执行代码，甚至反向更新设计稿。
AI 驱动的设计新流程？
风格探索阶段： 用 AI 快速产出系列风格，解决“脑暴”难题。
资产生成阶段： 自动生成 3D 图标、场景配图（替代手动抠图）。
界面实现阶段： 通用界面生成： 输入指令，自动拼装基础 UI。
组件级代码转化： 通过 Codex 识别 Figma 组件，一键生成 React/Vue 代码。
动效与逻辑注入： AI 自动补全微交互动效代码。
