Codex 做设计：用 OpenAI Codex 搭 UI

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

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

从零配好 Codex 做设计

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

想要一键路径？直接下载 Open Design 桌面客户端，它把 Codex 连同精选 skill 和设计系统库打包在一起，你选 Codex 作为 agent 就能开始设计，完全不用配 CLI。下面这些步骤，是你想自己动手接 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 做前端与 UI 设计

把一张截图变成一个页面只是演示；交付真正的前端才是活儿。当你把 Codex 的 UI 设计当成搭建一套系统来做，可复用组件、响应式布局、每一种交互状态，而不是只做一张大图，效果才会好。GPT-5.4 更强的图像理解和自我校验让这变得可行，但结构仍然要你来给。

• 组件优先: 先让 Codex 基于你的 token 搭出原子化、可复用的组件（按钮、输入框、卡片、导航），再组合成整页，前端才会保持一致而不是一次性拼凑。
• 默认响应式: 给出桌面和移动端的参考并说清断点；让 Codex 在真实浏览器里缩放、修掉会崩的布局，而不是只信一个视口。
• 每一种交互状态: 把 hover、focus、active、空态、加载、错误都写清楚，正是这些状态让 UI 显得完整，也正是平庸的 AI 产出通常会漏掉的。
• 无障碍标记: 要求语义化 HTML、带标签的控件、可见的焦点环和足够的对比度，并让 Codex 把这些当成构建的一部分来检查。

明确地对着一个组件及其各种状态下 prompt，再让 Codex 对照参考图自我校验：

codex "用 React + Tailwind + TypeScript 搭一个响应式定价区块。
   复用我的设计系统 token 和 Button/Card 组件。
   包含 hover、focus 和移动端堆叠状态。
   用 Playwright skill 在 375px 和 1280px 下对照 pricing-desktop.png
   和 pricing-mobile.png 检查，并迭代到一致为止。"

把优秀前端产出和“AI 味”区分开的关键就是校验：Codex 渲染 UI、在各断点下与你的参考图对比、反复迭代，而不是只确认构建能通过。

用 Codex 搭建设计系统

设计系统是对产出质量最大的那个杠杆，它是 Codex 知道你的配色、字号阶梯、间距和组件的方式，否则它就会退回到那套千篇一律的 Inter 加紫色的观感。给 Codex 一套设计系统来对着做，它产出的每一屏都会继承同一种审美。

• 定义 token: 把配色、排版、间距、圆角和阴影沉淀成命名 token，这是 Codex 会复用的词汇，而不是每一屏都现编数值。
• 沉淀基础组件: 把 Codex 指向你的规范组件（Button、Input、Card、Modal），让它从中组合，而不是每次都重画一遍。
• 写在 Codex 会读的地方: 把规则写进 agent 每次运行都会加载的 AGENTS.md 或 DESIGN.md：不用 hero 卡片、最多两种字体、一个强调色、品牌优先的层级。
• 每一遍都强制执行: 让 Codex 拿新 UI 对照系统检查并标出偏离，设计系统才会一直有效，而不是做完第一屏就开始瓦解。

你也可以反过来做：给 Codex 几张参考屏，让它抽取一套起步的设计系统，token 加基础组件，再由你打磨。无论哪种方式，系统都是让结果可复现的那个产物。

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、参考和约束时，都会退回通用样子。这才是要解决的真问题，而它是「设计工具」形状的，不是「模型」形状的。

Codex 设计插件对比（含 Open Design）

Codex 的设计能力几乎全来自你给它插了什么。下面是今天能配 Codex 用的主要设计插件/工具，以及 Open Design 在其中的位置：

怎么选：想在 Codex 里用 OpenAI 自家的设计流，Product Design plugin 覆盖探索方向、审查流程、从实时 URL 出原型。要拉升原始产出质量，frontend design skill 是杠杆最大的一招。官方 Figma 集成 对重度用 Figma 的团队是刚需，而且它可移植，能跟其它任何一个搭配，包括 Claude Code 和 Cursor。

这几个里，只有 Open Design 是从头到尾开源、本地优先、BYOK 的。它把 Codex 包进一套精选 skill 和设计系统库、一条结构化渲染管线和一个本地桌面 UI，让 Codex 变强的那些设计上下文，第一次运行就在，不用每个项目手动攒，而且每份产物都留在你自己的仓库里。

不会写代码的设计师如何用 Codex

用 Codex 做设计不必是工程师。这个 agent 接收自然语言意图和真实参考图，返回可用的、响应式的 UI，这让它成为设计师和产品同学的真正工具，而不只属于前端开发。诀窍是把它当成一份设计 brief 来驱动，而不是一次编码会话。

• 用大白话描述: 用设计的语言说清你要什么，布局、层级、语气、那种感觉，让 Codex 把它翻译成标记。
• 从参考图出发: 丢进截图、一块 moodboard 或某个品牌的官网；在把观感做对这件事上，具体的参考图胜过任何长篇文字。
• 在真实浏览器里预览: 让 Codex 渲染并打开结果，你用眼睛判断、缩放、指出哪儿不对。
• 安全地迭代与回退: agent 在沙箱里运行，你可以试一个方向、留下好的几遍、回退坏的，什么都不会弄坏。

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

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

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

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

BYOK：你的 OpenAI key、你的 ChatGPT 方案、你的额度

Codex 是自带密钥（BYOK）：你用自己的 OpenAI API key 或 ChatGPT 订阅来鉴权，凭证归你所有。这对成本控制和隐私都很重要，你的 key 和你的工作，都不必绕经第三方。

• 选对推理档位: OpenAI 指出，中低推理档在前端上往往比最高档效果更好，而且更省。
• prompt 保持小而聚焦: 短而具体的任务用的 token 更少，产出的 diff 也比一个巨型 prompt 更干净。
• 把好的迭代提交下来: 把有效的那几遍存下来、回退其余的，就不用每次都花钱重新生成一个干净的基底。

在 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 服务器中转。

9. 09 Codex 能搭响应式前端 UI 吗？ +

   能。给出桌面和移动端参考、配合 Playwright skill，Codex 会搭出响应式前端 UI，在真实浏览器里按每个断点渲染，并迭代到一致为止，组件、布局、交互状态都包含在内。给它你的设计系统 token，是让产出保持一致而非平庸的关键。

10. 10 怎么给 Codex 一套设计系统？ +

    把你的 token（配色、排版、间距）和规范组件写进 Codex 每次运行都会读的 AGENTS.md 或 DESIGN.md，并让它对着这些来构建。Open Design 自带一套策展过的设计系统库，你可以直接选一套而不必从零写，Codex 随后就会对着它构建每一屏。

11. 11 不会写代码也能用 Codex 做设计吗？ +

    可以。Codex 把大白话 brief 和参考图变成可用的 UI，所以设计师和产品同学不写代码也能用。Open Design 的桌面 app 把终端和配置整个去掉了，你选 agent、选设计系统、选 skill，然后在一个本地 UI 里生成并预览。

12. 12 Open Design 支持用 Codex 做 BYOK 吗？ +

    支持。Open Design 是自带密钥的：用你自己的 OpenAI API key 或 ChatGPT 订阅给 Codex 鉴权，凭证由你的 agent 直接使用、绝不经 Open Design 中转。它本地优先，你的文件和 DESIGN.md 都留在你自己的仓库里。

13. 13 怎么给 Codex 加一个 frontend design skill？ +

    从 openai/skills 目录装官方的 frontend design skill：在 Codex app 里对 frontend-skill 跑一下 skill 安装器，然后重启 Codex。这个 frontend design skill 会让 Codex 锁定一套真审美，无卡片布局、品牌优先的层级、最多两种字体加一个强调色，而不是那套千篇一律的默认观感，它是对 Codex 设计质量最大的那个杠杆。