Codex Design 和 Figma Make 对比。
Figma Make 和 Codex Design 都能用 AI 把一段描述变成可以运行的界面。Figma Make 在 Figma 里完成这件事，还能把结果发布成 Web 应用；Codex Design 则给 Codex 加上一块画布，让你在写代码的地方直接探索和对比设计。
更新于 2026年11月6日 · 阅读约 6 分钟
简短回答
如果你的团队在 Figma 里做设计，Figma Make 是顺理成章的选择：它能直接基于你现有的画框和组件库来做，还能把可运行的原型发布成一个可分享的网址。如果你用 Codex 开发，Codex Design 让设计这一步和代码待在同一个地方，界面以实时 HTML 的形式摆在本地画布上。
- 选 Figma Make： 如果你的设计稿和设计系统都在 Figma 里，想做一个别人在浏览器里就能打开的可运行原型，或者团队平时就在 Figma 文件里协作。
- 选 Codex Design： 如果你已经在用 Codex，想在动手开发前把几个方向并排对比，并且希望设计最终落进你自己的代码库，而不是一个托管的 App。
两款工具分别是什么
Figma Make 是 Figma 推出的从提示词到 App 的工具。你和一个 AI agent 对话，把 Figma 设计里的画框和组件贴进去，它就会做出一个可交互的 App。生成的代码可以直接在 Make 里修改、下载，还能加上后端来存数据，最后发布成 Web 应用，用 figma.site 的网址或你自己的域名访问。通过 Make kit，还能把设计系统里的代码包、变量和样式一并交给它参考。
Codex Design 是我们为 Codex 做的独立插件。它加了一块本地画布，Codex 设计的界面会以实时 HTML 页面的形式出现在上面，旁边可以放设计稿图片和你的参考图。选中一个元素，就能在侧边栏里改字体、颜色和间距，也可以继续让 Codex 帮你调整。画布项目都保存在你自己的电脑上。
逐项对比
| Figma Make | Codex Design | |
|---|---|---|
| 能做什么 | 可交互的 App 和可运行的原型，可以从提示词或现有 Figma 设计出发 | 网站和 App 设计稿（实时 HTML 页面），以及设计稿图片 |
| 在哪里运行 | Figma 里 | Codex 里，画布在你自己的电脑上（macOS 和 Linux） |
| 产出和代码 | 可编辑的代码，能打包成 .zip 下载；可发布到 figma.site 网址或自定义域名；能把预览复制进 Figma Design | 本地项目里的 HTML 页面和图片；选定的设计可以接着让 Codex 在你的代码里实现 |
| 价格 | 免费的 Starter 套餐每月最多 500 AI 积分；Professional 套餐 Full 席位每月 16 美元起，含 3,000 AI 积分 | 免费版可用一个画布项目；Pro 每月 5 美元，项目数量不限。Codex 的用量另外计算 |
| 适合谁 | 在 Figma 里做设计、需要可分享的可运行原型的团队 | 想在动手开发前对比、打磨几个 UI 方向的 Codex 用户 |
Figma 的 AI 积分由所有 AI 功能共用，Make 的部分功能还取决于你的套餐和席位类型。本文对比的内容以 2026 年 11 月 6 日两者官网和文档上的信息为准。
什么时候该选 Figma Make
下面这些情况，Figma Make 是更好的选择：
- 你的设计稿本来就在 Figma 里。 把画框和组件贴进对话，或者把设计链接作为上下文加进去，Make 就会照着它们来做。
- 你今天就需要一个能点着用的东西。 把 Make 文件发布成有独立网址的 Web 应用，可以绑定自定义域名；原型需要存数据时，还能加上后端。
- 你的设计系统在 Figma 里。 Make kit 可以包含 npm 包，以及设计库里的变量和样式，并附上使用规范。
- 你还想回到图层上继续改。 在符合条件的套餐上，可以把预览的快照复制成图层，粘贴到 Figma Design 里。
- 你的团队在 Figma 里协作。 团队成员可以在同一组 Make 对话里协作、留评论，还能同时修改生成的代码。
什么时候该选 Codex Design
- 你已经在用 Codex 开发。 画布就在写代码的那个 agent 里面，设计和开发之间不用下载、也不用交接。选好方向后，让 Codex 直接在你现有的项目里实现。
- 你想先探索、再拍板。 Codex Design 就是为此而做的：把几个方向并排摆在一块画布上对比，旁边还有参考图和设计稿图片。
- 你想快速做些可视化微调。 在 HTML 设计稿里选中一个元素，就能在侧边栏里调整字体、颜色、间距等属性。
- 你希望作品留在自己电脑上。 画布项目保存在本地，而不是一个托管的文件里。
- 你不想再多一套积分体系。 Codex Design 自己没有 AI 积分，也没有 token 钱包。一个画布项目免费，Pro 每月 5 美元；Codex 的用量计入你的 Codex 套餐。
常见问题
Codex Design 能替代 Figma Make 吗？
如果你用 Codex，在设计阶段可以。两者都能把描述变成可以运行的界面。Figma Make 在 Figma 里，能直接发布 App；Codex Design 在 Codex 里，专注于探索和打磨设计，之后由 Codex 在你的代码库里实现。如果你的团队在 Figma 里协作，又需要发布出去的原型，Figma Make 更合适。
我在 Figma 里的设计能用在 Codex Design 里吗？
画布上可以放图片和实时 HTML 页面，所以你可以把 Figma 里的画框导出成图片，放在 Codex 设计的界面旁边当参考来对比。Codex Design 不能直接导入 Figma 文件。
Figma 的免费套餐能用 Figma Make 吗？
Figma 在 Starter 免费套餐和各个付费套餐里都列出了 Make，它消耗的是 Figma 的 AI 积分。Starter 每月最多有 500 AI 积分。查看和下载代码、在付费套餐上发布等部分功能，取决于你的席位类型。