用 Codex 做设计。

Codex 到底是什么（以及不是什么）

先消歧，几乎每个搜「Codex」的人都会被绊一下。最早的 OpenAI Codex 是 2021 年的代码补全模型，驱动过早期 GitHub Copilot，2023 年已弃用。本文讲的不是它。今天的 Codex 是 OpenAI 的 Agent 式编码工具 —— 从自然语言任务出发，规划、编写、运行并验证代码。

现代 Codex 有四种形态：终端 CLI（用 Rust 重写、Apache-2.0 开源）、面向 VS Code / Cursor / Windsurf 的 IDE 扩展、用于异步委派任务的云端/网页版，以及带内置浏览器和 Computer Use 的桌面 App。

• 默认模型: 截至 2026 年中，推荐模型是 gpt-5.5；而 gpt-5.4 是 OpenAI 明确为前端和 Computer Use 训练的那个模型。
• 指令文件: Codex 读取项目里的 AGENTS.md（跨工具通用标准）作为项目规则 —— 也就是写你设计约定最自然的地方。
• 沙箱: 它跑在内核级沙箱里（默认 workspace-write），改你 UI 的 Agent 不会跑到项目之外乱动。

• 厂商：OpenAI
• 凭据：OpenAI API key（BYOK）或 ChatGPT 订阅（Free / Go / Plus / Pro / Business / Enterprise）
• CLI 许可：Apache-2.0，开源

为什么 Codex 现在能做设计

2026 年初有三件事凑到一起，才让 Codex 从通用代码生成器变成真正的设计工具。

• 一个为前端训练的模型: OpenAI 发布了 GPT-5.4 —— 它第一个主线版为前端和 Computer Use 训练的模型，对设计流程里的图像理解大幅提升，自我验证也更强，甚至能在定稿前先生成情绪板和多个视觉方案。
• 一个官方前端 skill: openai/skills 目录里有一个精选 frontend-skill，强制真审美：无卡片布局、整屏 hero、品牌优先的层级、克制的动效、最多两种字体加一个强调色 —— 还逼 Codex 先写「视觉论点」再动手。
• 浏览器验证: 配上 Playwright skill，Codex 会真开浏览器、按断点缩放，并把输出跟参考图比对，而不只是「构建通过」就完事。

三件事背后的道理是一样的：Codex 默认没有审美。只有当你给它约束 —— 设计系统、审美 skill、具体参考 —— 它才能产出好设计。Open Design 打包的正是这三种输入，这也是两者契合的原因（下文详述）。

从零配好 Codex 做设计

从一台干净的机器，到一个能构建并验证 UI 的 Codex，完整路径如下。

# 1. 安装 Codex CLI
npm install -g @openai/codex
# 或：brew install --cask codex
# 或：curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. 鉴权（推荐用 ChatGPT 登录，额度更高）
codex            # 然后选 “Sign in with ChatGPT”

# 3. 生成项目上下文
codex            # 在项目里运行 /init 生成 AGENTS.md

# 4. 装官方前端 skill，然后重启 Codex
# （在 Codex App 里）$skill-installer frontend-skill

# 5. 接 Figma MCP server（可选，做设计交付）
codex mcp add figma --url https://mcp.figma.com/mcp

• 把设计规则写进去: 把 token、基础组件、约定写进 AGENTS.md 或 DESIGN.md 并让 Codex 指向它们，输出就会贴合品牌，而不是退回那套通用样子。
• 选对推理档位: OpenAI 提到：低到中等推理档位的前端效果，往往比最高档更好。

截图转 UI 的工作流

Codex 做设计最高杠杆的回路，是把参考图变成可用的响应式 UI，再迭代到对齐为止。OpenAI 官方指引归纳为五步。

1. 从你手头最清晰的视觉参考出发 —— 而且要包含多个状态（桌面和移动、hover、空态、加载态），不只是一张 hero 图。
2. prompt 要具体；含糊的 prompt 只会产出通用 UI。
3. 准备好设计系统，并告诉 Codex token 和基础组件在哪。
4. 开启 Playwright 交互 skill，让 Codex 真在浏览器里渲染并按断点缩放。
5. 迭代时让 Codex 把实现跟截图比对 —— 而不只是确认「能构建」。

喂图可以把截图拖进终端，或用 image 参数，然后用具体约束来 prompt：

codex -i reference-desktop.png -i reference-mobile.png \
  "用 React + Vite + Tailwind + TypeScript 实现这个设计。
   尽量复用我现有的设计系统组件和 token。
   对齐间距、布局和层级；做成响应式。
   用 Playwright skill 验证 UI 跟参考图一致，
   不一致就一直迭代。"

在第二个终端里跑 dev server，prompt 保持小而聚焦，好的迭代就 commit、坏的就 revert（并告诉 Codex 你回退了），这样每一轮都在干净的基础上推进。

Codex + Figma：设计 ↔ 代码双向打通

2026 年 2 月 OpenAI 和 Figma 宣布官方合作，把早先的 Figma MCP beta 升级成一等公民级的双向集成。两个方向都能走。

• 设计 → 代码: 在 Figma 里复制某个 frame 的「link to selection」，粘进 Codex 配合 get_design_context，让它用你现有的组件库实现这个设计。
• 代码 → 设计: generate_figma_design 工具（「Code to Canvas」）能把跑起来的 UI 变回可编辑的 Figma frame —— 整屏、选中元素或整个文件都行。

Figma MCP 以远程 server 形式运行且免限流。接一次，Codex、Claude Code、Cursor、VS Code 等都能用 —— 这种可移植的多 Agent 能力，正是 Open Design 要编排的东西。

Codex vs Cursor vs Claude Code 做设计

做设计没有唯一赢家 —— 每个 Agent 强在不同地方，老手会叠着用。公允的总结：

社区反复得出的结论是：审美来自人。三者在没有 skill、参考和约束时，都会退回通用样子。这才是要解决的真问题 —— 而它是「设计工具」形状的，不是「模型」形状的。

常见坑，以及怎么避开「AI 味」

对 Codex 生成设计最常见的吐槽是「显得通用」—— 柔和渐变、漂浮面板、超大圆角、夸张阴影，那种 Inter 字体加紫色的味道，「一看就是 AI 做的」。其他常见问题还有移动端布局崩、指令文案泄漏进 UI、以及很快撞到用量上限。

• 装一个前端 skill: 精选的审美 skill 逼 Codex 选定一个真方向，而不是默认那套样子。
• 开启 Playwright 验证: 让 Codex 跨断点渲染并自检，布局就不会在移动端悄悄崩。
• 喂 token 和参考: 真实的设计 token 和参考截图，是对输出质量影响最大的那个杠杆。
• 把规则写进 AGENTS.md: 把「不要 hero 卡片、最多两种字体、品牌优先层级」这类规则放在 Agent 每次都会读到的地方。

注意：每条缓解措施，本质都是给 Agent 一套精选的设计上下文。而逐个项目手工维护这套上下文，正是 Open Design 帮你省掉的苦活。

在 Open Design 里用 Codex

Open Design 就是上面这套工作流一直在呼唤的那个开源设计层。它把 Codex 当作一方适配器，外面包上精选的 skill 与设计系统库、结构化渲染流水线、本地桌面 UI —— 让那些让 Codex 变好的设计上下文从第一次运行就在，而不是每次手工拼。

1. 安装 Open Design，选 Codex 作为你的 Agent。
2. 用 OpenAI API key（BYOK）或 ChatGPT 订阅鉴权 —— 凭据留在你机器上，绝不经我们中转。
3. 选一套设计系统和一个 skill，生成审美一致的 deck、原型和落地页。
4. 每个产物和 DESIGN.md 都在你自己的 repo 里，不在托管云端。

同一个 Codex Agent、同一把密钥 —— 外加一套真正可移植的开源设计工作流。它本地优先、Apache-2.0，你的工作和凭据都不离开你的机器。

常见问题

1. 01 OpenAI Codex 真的能做设计吗？ +

   能 —— 只要上下文里有前端 skill、设计系统和真实参考图，Codex（尤其在 GPT-5.4 上）能产出生产级、响应式的 UI，还能在浏览器里自检。没有这套上下文它就会退回通用样子，而这正是 Open Design 补的缺口。

2. 02 这是 OpenAI 的 Codex Product Design 插件吗？ +

   不是。Open Design 是独立开源项目，把 Codex 作为 Agent 集成，用本地优先的开源 skill 与设计系统库补充官方工具。

3. 03 用 Codex 做设计需要 ChatGPT 订阅吗？ +

   OpenAI API key（BYOK）或 ChatGPT 订阅都行。ChatGPT 登录通常额度更高；无论哪种，Open Design 都不中转你的凭据。

4. 04 前端设计该用 Codex 还是 Claude Code？ +

   两个都强。Claude Code 以具体、懂代码库的设计决策见长；Codex 在 GPT-5.4 之后视觉打磨很强，且擅长沙箱化的异步委派构建。很多团队两个都用 —— Open Design 让你换 Agent 时不用换设计工作流。

5. 05 怎么把 Codex 接到 Figma？ +

   加上官方 Figma MCP server（codex mcp add figma --url https://mcp.figma.com/mcp）。之后用 get_design_context 把 Figma frame 实现成代码，用 generate_figma_design 把跑起来的 UI 推回可编辑的 Figma frame。

6. 06 怎么避免那种通用的「AI 味」审美？ +

   装一个前端 skill、喂真实的设计 token 和参考截图、把品牌规则写进 AGENTS.md、并开启 Playwright 验证。Open Design 把这些做成精选库，你就省掉了逐项目的配置。

7. 07 Open Design 跟 OpenAI 有关联吗？ +

   没有。Codex 是 OpenAI 的产品；Open Design 是独立开源项目，以一方适配器的方式支持它。OpenAI 和 Codex 是 OpenAI 的商标。

8. 08 我的文件和凭据安全吗？ +

   安全 —— Open Design 本地优先。你的文件、产物和 DESIGN.md 都留在自己的 repo，OpenAI 凭据由你的 Agent 直接使用，绝不经 Open Design 服务器中转。