Codex × 设计：Figma 联动与 AI 内容创作

提到 Codex，多数人想到的是"写代码的 AI"。但以下来自 @yunxi0623 的实测：Codex + Figma，可能是 2026 年不会代码的人做产品的最强组合之一——想法变成网站，全程可以不动一行代码。

这门课有三块内容，来自三篇原文：

1. Figma 联动（@yunxi0623 主干）：Figma MCP 把设计和开发双向打通，附 5 套可直接复制的提示词；
2. Open Design（@nexudotio）：开源项目，给 Codex 一个视觉画布，"设计→代码→动画"收进一条对话；
3. HyperFrames（@BTCqzy1）：装个插件，在 Codex 里敲一句话就生成完整视频。

先建立一个总印象：Codex 负责需求分析和开发执行，Figma 负责设计和评审工作区，连接两者的是 Figma MCP——注意 MCP 只传递结构化上下文，不替你生成最终代码。

以下来自 @yunxi0623。传统流程是单向的：Figma 设计 → 开发实现 → 设计稿逐渐过期，改了代码没人回头改设计稿。而 Codex + Figma 可以形成闭环：

Figma 设计 → Codex 开发 → 浏览器运行 → Code to Canvas 捕获回 Figma → 评审调整 → Codex 再实现（注意：不要覆盖原始设计稿）。

安装 Codex（@yunxi0623 原文给出四种方式）

复制curl -fsSL https://chatgpt.com/codex/install.sh | sh # macOS / Linux
npm install -g @openai/codex # npm 方式
brew install --cask codex # macOS Homebrew
codex --version # 验证安装

截至 2026 年 7 月，原 Codex 桌面体验已整合进 ChatGPT 桌面应用。Figma 那边则通过 Figma MCP 接入 Codex。

双向能力的两个方向

• 读→写（Write to Canvas）：Codex 直接在 Figma 空白文件里创建首页设计——原生图层、Auto Layout、颜色字体变量，一次生成；
• 写→读（Code to Canvas）：把浏览器里正在运行的网页捕获成可编辑的 Figma Frame，评审完再让 Codex 改。

官方还建议：让 Codex 先获取准确节点的设计上下文和截图，复用代码仓库现有的组件、Token、路由和数据模式，而不是直接照搬 MCP 返回的示例结构。Figma 文件越规范（Auto Layout、图层命名清楚、用变量、保留真实图片），第一次生成的效果越稳定。

以下全部来自 @yunxi0623 原文，可直接复制使用。记住作者的忠告：一句话可以启动项目，但决定方向的，仍然是后面的提问、确认和取舍。

复制我想制作一个宠物用品品牌官网，但需求还不完整。

先不要设计，也不要写代码。

请向我提问，帮助我明确：

1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么

每轮最多问5个问题。
信息不足时继续提问，不要自行编造。

确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划

复制请使用 Figma MCP，在下面这个空白文件中创建首页设计：



要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能

复制请根据这个Figma Frame实现当前项目中的首页。


1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端


1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能


1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果

无法实际验证的项目必须标记为"未验证"。

复制请分析我提供的网页截图。

不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产

请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式

再结合我的产品需求，生成一套原创设计。

复制请先做PRD评审，找出需求漏洞：

1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题

等待我确认后，再制作产品原型。

以下来自 @yunxi0623。这是全课最容易踩坑的一节：不是所有 Figma 账号都能让 Codex 改画布。

席位决定你能做什么

Write to Canvas 目前仍处 Beta，Figma 表示暂不额外收费，但未来计划按使用量计费——免费午餐有保质期。

Code to Canvas：把跑起来的网页抓回 Figma

这是 @yunxi0623 认为最有价值的能力。传统流程里设计稿总会过期，有了它：

复制请启动当前项目的本地开发服务器。
使用Figma MCP的Code to Canvas能力，
把当前首页捕获到一个新的Figma Design文件中。
不要覆盖原始设计稿。
完成初次捕获后，告诉我如何继续捕获其他页面状态。

要点：Code to Canvas 把浏览器中正在运行的页面转成可编辑的 Figma Frame；首次打开浏览器会自动捕获当前状态，其他页面、弹窗、错误状态需要你先操作页面，再用工具栏的"Entire screen"或"Select element"继续捕获。捕获进新文件，不要覆盖原始设计稿。创建或编辑自己 Drafts 中的捕获文件可用不同席位；要写入 Drafts 之外的现有文件，仍需 Full 席位 + 编辑权限。

边界：App 和数据看板要加料

做 App 还需要 Xcode / Android SDK、签名证书、后端、推送、商店审核；数据看板要先确认指标口径、权限、数据隔离。Codex + Figma 解决的是"从想法到可用原型"，不是"从原型到上架"。

以下来自 @yunxi0623。作者把这句话加粗了：生成出代码只能说明项目有了第一版；通过验证才说明它开始接近产品。

做完千万不要直接部署。把下面这段交给 Codex：

复制请对当前项目执行发布前检查。

先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本

然后执行可以安全运行的检查。

检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题

不能实际验证的项目标记为"未验证"，
不要写成"已通过"。

不要执行正式部署、购买域名或创建付费资源。

三条铁律，来自原文：

1. "未验证"不许写成"已通过"——诚实标记比漂亮报告重要；
2. 不要执行正式部署、购买域名或创建付费资源——这些动作永远等人来点；
3. 官方推荐流程同样要求：用真实浏览器对照设计，结合 Playwright 等工具检查页面外观和交互，而不是只读代码就宣布完成。

以下来自 @nexudotio（X，2026-05-18）。如果说 Figma 联动是"借别人的画布"，Open Design 是开源的、自己的画布——项目地址 github.com/nexu-io/open-design。

核心观点：AI 设计最难的不是生成一个界面，而是在不断迭代、开发、发布时保持设计意图不走样。Open Design 给 Codex 提供了一个视觉画布，而不仅仅是文本聊天框。

三步用起来

定位提醒：这是第三方开源项目，不是 Codex 原生功能；原文是产品宣发帖，深度不如 @yunxi0623 的 Figma 长文，但"视觉画布"这个思路值得记住。

以下来自 @BTCqzy1（爱丽丝呀，X，2026-05-04）。面向自媒体和内容创作者的种草帖：装上 HyperFrames 插件，在 Codex 里敲一句话，就能生成完整视频——动效、转场、字幕、配音全自动。

玩法三句话：

1. 一句话描述想要的视频，Codex + HyperFrames 直接生成；
2. 不满意继续打字改，秒出新版本；
3. 还支持批量生成。

作者的 demo 是用 Codex 生成的《人类编程进化史》视频，评价"太酷了"，宣称"效率直接拉高十倍""小白都不需要懂很多技术"。

横向对比（课程视角，不替你选）：同样是"AI 做视频"，@nexudotio 的 Open Design 走"设计→代码→动画"对话流，HyperFrames 走"插件 + 一句话出片"路线；课 10 里 @gengdaJ 还会讲第三条路线——Codex + Remotion/three.js 手搓 3D 视频。三条路线各有取舍。