Codex Design 和 Figma code layers 对比。
Figma code layers 和 Codex Design 想解决的是同一个问题：在画布上、在设计稿旁边，看到真实运行的界面。Figma 把代码带进 Figma，也就是团队本来做设计的地方；Codex Design 把画布带进 Codex，也就是代码本来写在的地方。下面说清两者的区别，以及各自更适合什么情况。
更新于 2026年11月7日 · 阅读约 6 分钟
简短回答
如果你的团队在 Figma 里做设计，code layers 是顺理成章的下一步：它把设计稿变成同一块画布上能运行的原型，队友可以直接评论。如果你用 Codex 开发，Codex Design 让设计这一步就在代码旁边，没有自己的 AI 额度，也没有交接环节。
- 选 Figma code layers：设计稿和设计系统都在 Figma 里，团队在 Figma 文件里评审，想在静态设计稿旁边放可交互的原型。
- 选 Codex Design：你已经在用 Codex，想在动手开发前把几个方向并排比较，并且希望最终结果落在你自己的代码库里。
两款工具分别是什么
Figma code layers 在 Figma 画布上放置真实运行的代码，让设计稿在它旁边变成实时、可交互的原型。Figma 在 2026 年 6 月的 Config 大会上发布了这个功能，2026 年 10 月 15 日起所有套餐都可以参加公开测试。可以从选中的设计稿开始，可以用 Figma 的 Chrome 插件抓取一个网页，可以连接 GitHub 仓库，可以通过 Figma 的 MCP 服务器从编程工具创建，也可以新建一个空的 code layer 再让 Figma 的 agent 来做。和它配套的是 Figma Specs，一种放在画布上、记录设计背景信息的 Markdown 文档。
Codex Design 是我们为 Codex 做的独立插件。它加了一块本地画布，Codex 设计的界面会以实时 HTML 页面的形式出现在上面，旁边可以放设计稿图片和你的参考图。选中一个元素，就能在侧边栏里改字体、颜色和间距，也可以继续让 Codex 帮你调整。画布项目都保存在你自己的电脑上。
逐项对比
| Figma code layers | Codex Design | |
|---|---|---|
| 做出什么 | Figma 画布上可运行、可交互的原型，可以从设计稿、网站、代码仓库或提示词开始 | 网站和 App 的设计稿，以实时 HTML 页面呈现，另外还有设计稿图片 |
| 在哪里运行 | Figma 里，桌面端、网页端和手机端都支持 | Codex 里，画布在你自己的电脑上（macOS 和 Linux） |
| 谁来做 AI | Figma 的 agent，或者通过 Figma MCP 服务器连接的编程工具 | Codex 本身，用你的 Codex 套餐和模型 |
| 代码 | 可以从连接的 GitHub 仓库开始；Figma 的发布说明没有提到如何导出代码 | 本地项目里的 HTML 页面；之后由 Codex 在你的代码里实现选定的设计 |
| 价格 | 公开测试中；使用 Figma AI 额度，从设计稿创建一个 code layer 约需 250 以上。完整席位按套餐每月 500 到 4,250 额度 | 一个画布项目免费；Pro 每月 5 美元，项目数不限。Codex 用量另算 |
| 适合谁 | 在 Figma 里设计和评审的团队 | 想在开发前比较、打磨 UI 方向的 Codex 用户 |
付费套餐免费使用 code layers 的期限已在 2026 年 11 月 4 日结束；之后 code layers 的任务和 Figma 其他 agent 功能一样消耗 AI 额度，额度不会累积到下个月。Starter 套餐和查看席位每天上限 150 额度，低于从设计稿创建一个 code layer 的花费。额度数字是 Figma 自己的估算，复杂任务会更多。本对比依据两款产品截至 2026 年 11 月 7 日的官网和文档。
什么时候该选 Figma code layers
- 设计稿已经在 Figma 里。 选中设计稿，让 agent 把它变成 code layer，不用离开文件。
- 团队在 Figma 里评审。 code layers 和其他内容在同一块画布上，评论、复制、并排对比版本都和团队现在的习惯一样。
- 想从真实网站或代码仓库开始。 用 Chrome 插件抓取线上页面，或者从 GitHub 克隆一个轻量的原型代码库来改。
- 想把需求文档放在设计旁边。 Figma Specs 把需求和背景信息放在画布上，agent 还能把 Spec 变成 code layer。
什么时候该选 Codex Design
- 你已经在用 Codex 开发。 画布就在写代码的 agent 里，设计和开发之间不用交接。让 Codex 在你现有的项目里实现你选中的方向就行。
- 想先探索再决定。 Codex Design 就是为了把几个方向并排放在一块画布上比较而做的，旁边还能放参考图和设计稿图片。
- 想自己选模型。 Codex Design 用的是你 Codex 里设置的模型。可以看看 GPT-6.1 Terra 和 Sol 做 UI 设计的对比。
- 不想再多一套额度系统。 Codex Design 没有自己的 AI 额度。一个画布项目免费，Pro 每月 5 美元；Codex 用量算在你的 Codex 套餐里。
- 想把作品留在自己电脑上。 画布项目保存在本地，不是托管的文件。
常见问题
Figma code layers 免费吗？
付费套餐现在不免费了。2026 年 11 月 4 日之前可以免费创建和编辑；现在要消耗 Figma AI 额度，从设计稿创建一个 code layer 约需 250 以上，和 Figma Make、Figma agent 共用每月的额度。
Codex 能和 Figma code layers 一起用吗？
Codex 可以连接 Figma 的 MCP 服务器，编程工具可以通过它读写 Specs，并在画布上创建 code layers。Codex Design 走的是另一条路：画布就在 Codex 里，根本不需要 Figma 文件。
Codex Design 能替代 Figma code layers 吗？
如果你用 Codex 开发，想用真实运行的界面来做设计，可以。两者都把实时界面放在画布上。Figma code layers 适合设计和评审都在 Figma 里的团队；Codex Design 适合在 Codex 里设计和开发、希望结果落在自己代码库里的人。