AGENT 安装入口
在 Codex 中安装 OpenDesign
一个纯文本地址，包含供 Codex 阅读的安装说明，而不是可视化演示。把提示粘贴到 Codex 中，智能体就会自行读取入口。
Codex 的 Prompt
在 Codex 中安装 OpenDesign：阅读 https://open-design.ai/codex-plugin/ 并按照其中的安装说明操作。更改配置前请先询问。
Codex 
OpenDesign 用 Codex
在 OpenDesign
做设计。
如何在 OpenDesign 中用 OpenAI Codex 设计界面：从环境搭建，到一个从 brief 到经审阅文件的完整任务，以及开始之前需要了解的限制。
从 brief 到界面01 / Codex
您带来想法↗
“一个更沉静的项目面板。
优先级清晰，留有专注的空间。”
一个完整的 Codex 设计任务
一个 Codex 设计任务：从需求简报到界面
跟随一个设计任务走完整个交接流程：你提供的需求简报与约束、Codex 返回的文件，以及在你宣布完成前仍需进行的检查。下方界面是为本页作为示例拼装的，并非截取自真实的 Codex 会话。
1设计 Brief 与约束条件
Brief为一个小型产品团队创建一个项目进度看板。一眼呈现整体进度、下一个里程碑和受阻的工作。任务在“待办”“进行中”和“已完成”之间流转。必须能在桌面端和移动端使用。
- 设计系统OpenDesign 中的纸面画布：Albert Sans，一种绿色强调色
- 断点桌面端 1440px、移动端 390px，无横向滚动
- 交互列筛选、任务抽屉，以及跨列的键盘导航
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2谁做什么：你、Codex 和 OpenDesign
- 你
你撰写需求简报、选择设计系统，并设定验收标准。
- Codex
Codex 规划布局，编写 HTML、CSS 和 JavaScript，运行文件，并在你要求时进行修改。
- OpenDesign
OpenDesign 提供设计系统和技能，渲染预览，并将每个版本作为文件保存在项目中。
- 审查
交接前，检查视觉层级、8px 网格间距、两个断点以及每一个交互。
3Codex 输出：1440px 和 390px 下的看板
4交付前审查
Layout
网格与间距
侧边栏、页眉、统计数据和各列均对齐到 8px 网格；在 1440 或 390 宽度下没有任何重叠。
Hierarchy
视觉层级
进度、下一个里程碑和受阻数量优先于列标题；强调色仅出现在一个里程碑标签上。
Responsive
移动端布局
在移动端宽度下，各列变为分段切换器，里程碑栏保留，侧边栏折叠为标签栏。
Interaction
交互检查
在本页上切换桌面端和移动端预览。在你自己的产物中，打开一个任务并测试筛选、键盘导航和焦点行为。
Fit
Codex 适合的场景，以及不适合的场景
Codex 适合的场景
- 你有可供起步的参考。 Codex 以截图作为输入，并据此构建响应式界面；将设计系统保留在上下文中有助于结果保持品牌一致。
- 你需要对已有的界面进行迭代。 请求修改，预览新版本，然后保留或回退——每个版本都是你项目中的一个文件。
- 你希望对照约束检查输出。 将 DESIGN.md 或 AGENTS.md 以及断点目标交给 Codex；它可以在浏览器中渲染，并将结果与参考进行对比。
- 你已经在使用 Codex。 继续使用你熟悉的智能体。核实你所选执行模式的身份验证和计费方式。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 此处的示例是 HTML，而非可编辑的 Figma 文档。请参阅单独的 Figma 工作流以获取你所需的资产格式。
- 你既没有参考也没有约束。 没有设计系统或示例，输出往往趋于通用外观；请先撰写需求简报。
- 你需要另一种执行模式。 本指南针对本地 Codex。不要假设其设置可以原样迁移到托管工作流。
- 你的团队使用 Claude Code 或 Cursor。 那些智能体有自己的页面；设置因智能体而异。参见相关智能体。
兼容性
开始使用 Codex 前需满足的要求
本页介绍的是本地 Codex。其他模式在设置和计费上有所不同。参考信息核实日期：2026 年 9 月 11 日。
工具范围OpenAI Codex，编程 Agent
OpenAI Codex，即编码智能体——而非较早的代码补全模型。本页涉及的是用 Codex 设计界面，而非 Codex 应用自身的 UI。OpenDesign 的设置说明将 Codex 列为可用的智能体之一。
账户与身份验证ChatGPT 登录，或 API 密钥
对于本地 Codex，可以使用 ChatGPT 登录，或使用 OpenAI API 密钥。两者在计费和政策影响上有所不同。请遵循OpenAI 的身份验证说明；本页不对配额或价格作任何承诺。
连接检查成功的标志
使用你已安装版本显示的连接说明，然后运行一个小任务。确认预期的智能体处理了该任务，并且产物可以打开。仅安装下载内容并不能证明连接正常。
从桌面应用开始
三步完成 Codex 设置
从下载开始，针对你安装的版本完成 Codex 设置，然后验证一个小结果。按此路径操作不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合你机器的安装包，安装并打开应用。
下载 OpenDesign检查点桌面应用能打开。如果已经安装，请进入下一步；无需再次下载。 - 2
准备您的 Codex 连接
执行你已安装版本随附的 Codex 说明。对于本地 Codex，在发送任务前完成 ChatGPT 登录或 API 密钥身份验证。
阅读 Codex 认证说明检查点核实预期的智能体和账户。如果任一不可用，在尝试更大任务前先查看兼容性。 - 3
运行一个 Codex 小任务
让第一个需求简报足够小，以便评判整个循环，包括一次修改。
入门 brief创建一个设置界面，包含个人资料表单和保存确认。遵循我的设计规则。在桌面端和移动端宽度下验证。
检查点打开结果，测试保存状态，并要求做一处具体修改。生成文件只是审阅的开始，而非结束。
Codex 设计工作流
Codex 工作流：五步从需求简报到已审阅的 HTML
一个进度看板需求简报从首次提示到已审阅 HTML 的完整追踪。每个阶段都标明你的输入、Codex 的动作、OpenDesign 的角色以及你仍需负责的检查。
- 1
设计 Brief
简短直白的需求简报——三到六行。说明谁使用该屏幕、它必须做什么以及哪些平台重要。
- 您起草需求简报，如有参考截图则一并附上。
- Codex阅读需求简报和项目的
AGENTS.md；遇到模糊需求时会先询问，而非猜测。 - OpenDesign提供项目、提示界面以及与该产物类型匹配的技能。
- 检查检查验收标准是否出现在需求简报中。在 Codex 生成之前写好，比事后修改成本更低。
- 2
设计约束
一个设计系统加上几条硬性规则。这种组合能让 Codex 的输出保持品牌一致，而不是默认落入通用外观。
- 您选择设计系统，指明断点，并列出任何必须使用的组件。
- Codex在 Codex 写下一行代码之前，将 DESIGN.md 的令牌和姿态规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选系统绑定到技能模板中。
- 检查对照你的品牌检查令牌：一种强调色、正确的字体、正确的圆角。
- 3
生成界面
Codex 生成一个自包含的 HTML 文件——包含布局、样式、交互和稳定的钩子。
- 您等待，或回答澄清性问题。此时无需配置任何内容。
- Codex规划各个区块，编写 HTML、CSS 和 JavaScript，运行文件并修复失败之处。
- OpenDesign将产物存储在项目文件夹中，并为其建立索引以供预览。
- 检查暂时没有。评判渲染后的文件，而不是 Codex 写的源码。
- 4
预览
OpenDesign 会按你指定的宽度渲染文件。设计就是在这里接受评判的。
- 你切换宽度，点击每一个交互，直接在元素上留下评论。
- Codex在被要求时，Codex 可以自己打开真实浏览器，并将结果与参考进行对比。
- OpenDesign渲染预览，并暴露
data-od-id目标，以便添加评论和进行编辑。 - 检查检查层级、对比度、390px 下的溢出情况、焦点状态，以及强调色是否保持克制。
- 5
修订与验证
在预览中指向元素即可请求修改。每次修订都会生成一个新文件；不会有任何内容被悄悄覆盖。
- 你将评论转化为请求，并决定任务何时完成。
- Codex就地应用修改，并重新运行该文件。
- OpenDesign将各个版本并排保留，并在你完成后导出图片或 HTML。
- 检查先只复查改动的区域，然后每个断点复查一次整个页面。
资源
Codex 设计资源
限制
Codex 的限制、人工检查与回退方案
- 需要本地 Agent本页介绍本地 Codex。其要求并不描述 OpenDesign 中可用的所有模式。
- 使用限额你的 OpenAI API 密钥或 ChatGPT 套餐决定使用限制和成本。本页不对免费配额作任何声明。
- 网络本地项目文件并不意味着离线推理。在共享敏感输入之前，请检查你的智能体提供商设置和数据政策。
- 产物是 HTMLCodex 产物是 HTML 文件，而不是矢量设计文件。Figma 往返通过 Figma 自有的 Codex 集成进行。
- 人工审查你需要在预览中审查无障碍性、真实内容、品牌契合度和交互正确性。在被要求时，Codex 可以在浏览器中自行验证；请将其视为第一遍检查。
- 后备方案如果 Codex 不可用或任务失败，请查看已安装版本的连接说明和身份验证。在更改配置之前，请保留错误信息和最后一个可正常工作的产物。
常见问题
关于 Codex 与 OpenDesign 的常见问题
Codex 做什么，OpenDesign 又做什么？
Codex 是 Agent：它读取你的 brief，编写并运行代码，然后进行修订。OpenDesign 是围绕它的工作区：设计系统、skill、预览、评论和带版本管理的文件。OpenDesign 是一个独立的开源项目，与 OpenAI 无关联。
开始之前我需要准备什么？
桌面应用、一个适用于你所选模式的可用 Codex 连接，以及一个用于测试的小任务。参见兼容性；源码构建的要求是另外的。设计系统会有帮助；如果你还没有，可从库中选一个。
在哪里可以查看其他 Agent？
Agent 中心列出了可用的 Agent 指南。Claude Code、Cursor 和 OpenCode 已在上方的相关 Agent 中链接。
如何避免 Codex 的设计看起来千篇一律？
给 Codex 具体的参考和设计令牌，在
AGENTS.md 或 DESIGN.md 等项目指令中写明品牌规则，并在目标断点下验证渲染出来的页面。前端设计技能也能提供更有主张的视觉方向。结果要自己审阅；浏览器检查并不能取代设计判断。Codex 能根据截图或 Figma 设计稿搭建 UI 吗？
截图可以作为实现时的视觉参考。Figma 工作流是另一回事：当你需要设计文件的上下文，或需要与可编辑的 Figma 画板往返时，请使用官方 Figma 集成。本指南关注的是审阅渲染出来的 Web 界面，而不是产出可编辑的矢量设计文件。
如何为 Codex 提供一套设计系统？
我能把 Codex 连接到 Figma 吗？
可以。OpenAI 的 Figma 集成支持在 Figma 设计与代码之间协同工作。请参照当前的 Codex 文档进行配置；具体命令与能力可能发生变化。本页的主要工作流是产出并审阅 HTML，而不是可编辑的 Figma 文件。
在 OpenDesign 中使用 Codex 时，BYOK 是什么意思？
Bring Your Own Key 意味着你用自己的 OpenAI 账号或 API key 为 Codex 做身份验证，并受你所选模式的计费与使用条款约束。OpenDesign 不会代理你的凭据。请查看兼容性部分以及 OpenAI 当前的认证指南，了解适用于你这套配置的细节。
Codex UI 指的是 Codex 应用，还是用 Codex 搭建的界面？
这个说法既可能指 OpenAI 的 Codex 应用，也可能指用 Codex agent 生成的产品界面。本页讲的是后者：用 Codex 设计和审阅 Web 界面。
在交付 Codex 生成的界面前，我应该检查什么？
在桌面和移动宽度下审阅渲染出来的界面，测试每一处交互和键盘操作路径，检查焦点与无障碍，并把结果与需求简报和参考进行比对。构建成功或 agent 自己的浏览器检查只是第一遍筛查；交付前应由人来验证产物。
OpenAI Codex 到底是什么（以及它不是什么）
先做一个澄清，几乎所有搜索“Codex”的人都会在这里被绊住。最初的 OpenAI Codex 是 2021 年推出的代码补全模型，支撑了早期的 GitHub Copilot，并于 2023 年被弃用。那不是本页要讲的东西。如今的 Codex 是 OpenAI 的智能体编程工具，它能根据自然语言任务规划、编写、运行并验证代码。
现代 Codex 覆盖四种形态：终端 CLI（用 Rust 重写，Apache-2.0 许可）、支持 VS Code、Cursor 和 Windsurf 的 IDE 扩展、用于委派异步任务的云端/Web 体验，以及带内置浏览器和 Computer Use 的桌面应用。
还有第二处需要澄清，因为搜索“Codex UI”会分成两个方向。一个指 Codex 自身的界面：OpenAI 为运行该 agent 而提供的桌面与 Web 应用。另一个——也就是本页讲的——是你用 Codex 搭建的 UI：你产品的组件、布局和页面。
默认模型：截至 2026 年年中，推荐模型是 gpt-5.5，而 gpt-5.4 是 OpenAI 明确针对前端和 computer use 训练的模型。
指令文件：Codex 会读取你项目中的 AGENTS.md 文件（一项跨工具标准）来获取项目规则，这是记录设计约定的天然位置。
沙箱：它运行在内核级沙箱中（默认 workspace-write），因此正在编辑你 UI 的 agent 无法越出项目范围。
凭据：OpenAI API key（BYOK）或 ChatGPT 订阅（Free / Go / Plus / Pro / Business / Enterprise）
厂商：OpenAI
CLI 许可：Apache-2.0，开源
现代 Codex 覆盖四种形态：终端 CLI（用 Rust 重写，Apache-2.0 许可）、支持 VS Code、Cursor 和 Windsurf 的 IDE 扩展、用于委派异步任务的云端/Web 体验，以及带内置浏览器和 Computer Use 的桌面应用。
还有第二处需要澄清，因为搜索“Codex UI”会分成两个方向。一个指 Codex 自身的界面：OpenAI 为运行该 agent 而提供的桌面与 Web 应用。另一个——也就是本页讲的——是你用 Codex 搭建的 UI：你产品的组件、布局和页面。
默认模型：截至 2026 年年中，推荐模型是 gpt-5.5，而 gpt-5.4 是 OpenAI 明确针对前端和 computer use 训练的模型。
指令文件：Codex 会读取你项目中的 AGENTS.md 文件（一项跨工具标准）来获取项目规则，这是记录设计约定的天然位置。
沙箱：它运行在内核级沙箱中（默认 workspace-write），因此正在编辑你 UI 的 agent 无法越出项目范围。
凭据：OpenAI API key（BYOK）或 ChatGPT 订阅（Free / Go / Plus / Pro / Business / Enterprise）
厂商：OpenAI
CLI 许可：Apache-2.0，开源
为什么 Codex 现在擅长设计
2026 年初，三件事汇聚到一起，让 Codex 从通用的代码生成器变成了真正的设计工具。
针对前端训练的模型：OpenAI 发布了 GPT-5.4，这是其首个针对前端和 computer use训练的主线模型，在整个设计工作流中具备强得多的图像理解能力，自我验证也更强。它甚至能在确定最终素材之前生成情绪板和视觉方案。
一项官方前端设计技能：openai/skills 目录提供了一项精心打磨的前端设计技能，它强制落实真正的品味：无卡片式布局、满幅首屏、品牌优先的层级、克制的动效、最多两种字体和一种强调色，并要求 Codex 在动手搭建前先写一份视觉论述。加入这项前端设计技能，是提升 Codex 产出最快的一步。
浏览器验证：借助 Playwright 技能，Codex 会打开真实浏览器，缩放到各个断点，把产出与参考对照，而不只是检查构建能否通过。
品味来自你提供的三项输入：一套设计系统、一项技能，以及真实的参考图。
这三者背后的启示是：Codex 默认并没有品味。当你给它约束、设计系统、美学技能和具体参考时，它才能产出好的设计。OpenDesign 恰好把这些输入打包好了，这也是二者契合的原因（详见下文）。
针对前端训练的模型：OpenAI 发布了 GPT-5.4，这是其首个针对前端和 computer use训练的主线模型，在整个设计工作流中具备强得多的图像理解能力，自我验证也更强。它甚至能在确定最终素材之前生成情绪板和视觉方案。
一项官方前端设计技能：openai/skills 目录提供了一项精心打磨的前端设计技能，它强制落实真正的品味：无卡片式布局、满幅首屏、品牌优先的层级、克制的动效、最多两种字体和一种强调色，并要求 Codex 在动手搭建前先写一份视觉论述。加入这项前端设计技能，是提升 Codex 产出最快的一步。
浏览器验证：借助 Playwright 技能，Codex 会打开真实浏览器，缩放到各个断点，把产出与参考对照，而不只是检查构建能否通过。
品味来自你提供的三项输入：一套设计系统、一项技能，以及真实的参考图。
这三者背后的启示是：Codex 默认并没有品味。当你给它约束、设计系统、美学技能和具体参考时，它才能产出好的设计。OpenDesign 恰好把这些输入打包好了，这也是二者契合的原因（详见下文）。
从零开始为设计工作设置 Codex
下面是从一台干净机器到能搭建并验证 UI 的 Codex 的完整路径。
想要一键搞定？下载 OpenDesign 桌面应用，它把 Codex 与精选技能和设计系统库打包在一起，你只需选择 Codex 作为 agent，就能直接开始设计，完全不用配置 CLI。如果你想自己把 Codex 接起来，下面的步骤就是手动路线。
配置顺序：安装 → 身份验证 → 配置 AGENTS.md → 安装前端技能 → 启用浏览器验证。
把你的设计规则写清楚：把令牌、基础构件和约定放进 AGENTS.md 或 DESIGN.md，并让 Codex 参照它们，这样产出才会符合品牌，而不是默认落成千篇一律的样子。
选择合适的推理档位：OpenAI 指出，低到中等推理档位往往比最高档位产出更好的前端结果。
命令和版本相关的细节请以当前的配置章节为准，它们可能会变化。
这是上一版指南中的历史命令示例；请在所链接的厂商文档中核实当前语法。
想要一键搞定？下载 OpenDesign 桌面应用，它把 Codex 与精选技能和设计系统库打包在一起，你只需选择 Codex 作为 agent，就能直接开始设计，完全不用配置 CLI。如果你想自己把 Codex 接起来，下面的步骤就是手动路线。
配置顺序：安装 → 身份验证 → 配置 AGENTS.md → 安装前端技能 → 启用浏览器验证。
把你的设计规则写清楚：把令牌、基础构件和约定放进 AGENTS.md 或 DESIGN.md，并让 Codex 参照它们，这样产出才会符合品牌，而不是默认落成千篇一律的样子。
选择合适的推理档位：OpenAI 指出，低到中等推理档位往往比最高档位产出更好的前端结果。
命令和版本相关的细节请以当前的配置章节为准，它们可能会变化。
# 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. 添加官方前端技能，然后重启 Codex
# （在 Codex 应用中）$skill-installer frontend-skill
# 5. 接入 Figma MCP 服务器（可选，用于设计交付）
codex mcp add figma --url https://mcp.figma.com/mcp这是上一版指南中的历史命令示例；请在所链接的厂商文档中核实当前语法。
使用 Codex 的截图转 UI 工作流程
使用 Codex 进行最高杠杆的设计循环是将参考图像转化为可用的响应式 UI，并不断迭代直到匹配。OpenAI 的官方指南精炼为五个步骤。
从你拥有的最清晰的视觉参考开始，并包含多个状态（桌面端和移动端、悬停、空状态、加载中），而不仅仅是一个主视觉图。
在提示中要具体；模糊的提示会产生通用的 UI。
准备一个设计系统，并告诉 Codex 设计令牌和规范原语的位置。
启用 Playwright 交互式技能，这样 Codex 可以在真实浏览器中渲染并调整到断点。
通过让 Codex 将其实现与截图进行比较来进行迭代，而不仅仅是确认它可以构建。
通过将截图拖入终端或使用图像标志来提供图像，然后使用具体的约束进行提示：
在第二个终端中运行开发服务器，保持提示小而专注，并提交好的迭代 / 回滚坏的迭代（在回滚时告诉 Codex），这样每次操作都基于干净的基础。
历史命令示例来自之前的指南；请在链接的供应商文档中验证当前语法。
从你拥有的最清晰的视觉参考开始，并包含多个状态（桌面端和移动端、悬停、空状态、加载中），而不仅仅是一个主视觉图。
在提示中要具体；模糊的提示会产生通用的 UI。
准备一个设计系统，并告诉 Codex 设计令牌和规范原语的位置。
启用 Playwright 交互式技能，这样 Codex 可以在真实浏览器中渲染并调整到断点。
通过让 Codex 将其实现与截图进行比较来进行迭代，而不仅仅是确认它可以构建。
通过将截图拖入终端或使用图像标志来提供图像，然后使用具体的约束进行提示：
在第二个终端中运行开发服务器，保持提示小而专注，并提交好的迭代 / 回滚坏的迭代（在回滚时告诉 Codex），这样每次操作都基于干净的基础。
codex -i reference-desktop.png -i reference-mobile.png \
"Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Use the Playwright skill to verify the UI matches the
references and iterate until it does."历史命令示例来自之前的指南；请在链接的供应商文档中验证当前语法。
Codex UI 设计：从组件到交付的前端
Codex 从三种输入构建 UI：文字描述、参考截图或 Figma 框架。在设计系统就位且启用了 Playwright 技能的情况下，它可以生成响应式、基于组件的前端，并在真实浏览器中自我验证。
将一个截图变成一个页面是演示；交付一个真实的前端才是工作。当您将其视为构建系统、可重用组件、响应式布局以及每个交互状态，而不仅仅是单个主视觉图时，Codex 的 UI 设计工作才会变得出色。GPT-5.4 更强的图像理解和自我验证使这变得切实可行，但结构仍然来自您。
组件优先：要求 Codex 根据您的令牌构建原子化、可重用的组件（按钮、输入框、卡片、导航），然后再组合整个页面，这样前端保持一致而不是一次性的。
默认响应式：提供桌面和移动参考并指定断点；让 Codex 在真实浏览器中调整大小并修复破坏的布局，而不是只信任单一视口。
每个交互状态：明确说明悬停、焦点、活动、空、加载和错误状态，这些状态让 UI 感觉完整，而通用的 AI 输出通常会跳过这些。
可访问的标记：要求语义化 HTML、带标签的控件、可见的焦点环和足够的对比度，并要求 Codex 在构建过程中检查它们。
明确提示组件及其状态，然后让 Codex 对照参考进行验证：
区分优质前端输出和“AI 垃圾”的模式是验证：Codex 渲染 UI，在断点间与参考进行比较，并迭代，而不是仅仅确认构建通过。
历史命令示例来自之前的指南；请在链接的供应商文档中验证当前语法。
将一个截图变成一个页面是演示；交付一个真实的前端才是工作。当您将其视为构建系统、可重用组件、响应式布局以及每个交互状态，而不仅仅是单个主视觉图时，Codex 的 UI 设计工作才会变得出色。GPT-5.4 更强的图像理解和自我验证使这变得切实可行，但结构仍然来自您。
组件优先：要求 Codex 根据您的令牌构建原子化、可重用的组件（按钮、输入框、卡片、导航），然后再组合整个页面，这样前端保持一致而不是一次性的。
默认响应式：提供桌面和移动参考并指定断点；让 Codex 在真实浏览器中调整大小并修复破坏的布局，而不是只信任单一视口。
每个交互状态：明确说明悬停、焦点、活动、空、加载和错误状态，这些状态让 UI 感觉完整，而通用的 AI 输出通常会跳过这些。
可访问的标记：要求语义化 HTML、带标签的控件、可见的焦点环和足够的对比度，并要求 Codex 在构建过程中检查它们。
明确提示组件及其状态，然后让 Codex 对照参考进行验证：
区分优质前端输出和“AI 垃圾”的模式是验证：Codex 渲染 UI，在断点间与参考进行比较，并迭代，而不是仅仅确认构建通过。
codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."历史命令示例来自之前的指南；请在链接的供应商文档中验证当前语法。
使用 Codex 构建设计系统
设计系统是对输出质量最大的杠杆，它让 Codex 了解您的颜色、字体比例、间距和组件，而不是默认采用通用的 Inter 加紫色外观。给 Codex 一个设计系统作为构建依据，它生成的每个界面都会继承相同的品味。
定义令牌：将颜色、排版、间距、圆角和阴影捕获为命名令牌，这是 Codex 重用的词汇表，而不是在每个界面中发明值。
捕获原语：将 Codex 指向您的规范组件（按钮、输入框、卡片、模态框），这样它可以从中组合，而不是重新绘制每一个。
写在 Codex 读取的地方：将规则编码到 AGENTS.md 或 DESIGN.md 中，代理每次运行都会加载：没有主视觉卡片，最多两种字体，一种强调色，品牌优先的层次结构。
每次检查时强制执行：要求 Codex 对照系统检查新 UI 并标记偏差，这样设计系统保持真实，而不是在第一个界面后逐渐衰退。
您也可以反方向工作：将几个参考界面交给 Codex，要求它提取一个起始设计系统（令牌加原语），然后您进行细化。无论哪种方式，系统都是使结果可重复的产物。
定义令牌：将颜色、排版、间距、圆角和阴影捕获为命名令牌，这是 Codex 重用的词汇表，而不是在每个界面中发明值。
捕获原语：将 Codex 指向您的规范组件（按钮、输入框、卡片、模态框），这样它可以从中组合，而不是重新绘制每一个。
写在 Codex 读取的地方：将规则编码到 AGENTS.md 或 DESIGN.md 中，代理每次运行都会加载：没有主视觉卡片，最多两种字体，一种强调色，品牌优先的层次结构。
每次检查时强制执行：要求 Codex 对照系统检查新 UI 并标记偏差，这样设计系统保持真实，而不是在第一个界面后逐渐衰退。
您也可以反方向工作：将几个参考界面交给 Codex，要求它提取一个起始设计系统（令牌加原语），然后您进行细化。无论哪种方式，系统都是使结果可重复的产物。
Codex + Figma：在设计与代码之间往返
2026 年 2 月，OpenAI 和 Figma 宣布了官方合作，将之前的 Figma MCP 测试版转变为第一方、双向集成。它双向工作。
设计 → 代码：在 Figma 中复制框架的“链接到选区”，粘贴到 Codex 中使用 get_design_context，并要求它使用您现有的组件库实现设计。
代码 → 设计：generate_figma_design 工具（“代码到画布”）将正在运行的 UI 转回可编辑的 Figma 框架，整个界面、选中的元素或整个文件。
Figma MCP 作为远程服务器运行，不受速率限制。添加一次后，Codex、Claude Code、Cursor、VS Code 等都可以使用，这正是 OpenDesign 旨在编排的那种可移植、多代理能力。
设计 → 代码：在 Figma 中复制框架的“链接到选区”，粘贴到 Codex 中使用 get_design_context，并要求它使用您现有的组件库实现设计。
代码 → 设计：generate_figma_design 工具（“代码到画布”）将正在运行的 UI 转回可编辑的 Figma 框架，整个界面、选中的元素或整个文件。
Figma MCP 作为远程服务器运行，不受速率限制。添加一次后，Codex、Claude Code、Cursor、VS Code 等都可以使用，这正是 OpenDesign 旨在编排的那种可移植、多代理能力。
Codex、Cursor 与 Claude Code 的设计能力对比
设计工作没有单一赢家，每个代理有不同的优势，经验丰富的团队会组合使用。一个公平的总结：
Codex — GPT-5.4 + 前端技能后视觉打磨强；图像理解 — 委托异步构建、沙箱运行、可移植的 AGENTS.md 规则
Cursor — 带有实时预览和内联编辑的可视化构建-查看循环 — 在 IDE 内进行紧密的迭代-观察 UI 工作
Claude Code — 具体的设计决策（十六进制、间距、字体）和代码库感知的 UX — 前端推理和大上下文重构
社区反复得出的结论是品味来自人类：在没有技能、参考和约束的情况下，三者都默认为通用的审美。这才是要解决的真正问题，而且是设计工具形状的，不是模型形状的。
代理 — 设计优势 — 最适合
Codex — GPT-5.4 + 前端技能后视觉打磨强；图像理解 — 委托异步构建、沙箱运行、可移植的 AGENTS.md 规则
Cursor — 带有实时预览和内联编辑的可视化构建-查看循环 — 在 IDE 内进行紧密的迭代-观察 UI 工作
Claude Code — 具体的设计决策（十六进制、间距、字体）和代码库感知的 UX — 前端推理和大上下文重构
社区反复得出的结论是品味来自人类：在没有技能、参考和约束的情况下，三者都默认为通用的审美。这才是要解决的真正问题，而且是设计工具形状的，不是模型形状的。
代理 — 设计优势 — 最适合
Codex 设计插件对比（包括 OpenDesign）
Codex 的设计能力几乎完全来自您插入的内容。以下是今天可以与 Codex 一起使用的主要设计插件和工具，以及 OpenDesign 在其中所处的位置：
OpenAI 产品设计插件 — OpenAI 的角色插件：探索方向、审计用户流程、从活动 URL 制作原型、使截图可交互、导出到 Figma 或 Canva — 否 — Codex 内的快速官方设计任务
openai/skills frontend-skill — 精选审美、无卡片布局、品牌优先层次、克制的动效、构建前的视觉主题 — 是（Apache-2.0）— 提升原始输出质量
Figma 集成（MCP）— 双向 Figma ↔ 代码：在代码中实现框架，将运行中的 UI 推回可编辑的 Figma — 否（官方）— 生活在 Figma 中的团队
OpenDesign — Codex 周围的一个开放、本地优先的设计层：精选技能 + 设计系统库、渲染管道、桌面 UI 和 BYOK — 是（Apache-2.0）— 您拥有的真实、可移植的设计工作流程
如何选择：如果您想要 Codex 内 OpenAI 自己的设计流程，产品设计插件涵盖探索方向、审计流程和从活动 URL 制作原型。对于原始输出质量，前端设计技能是最具杠杆作用的附加项。如果您的团队生活在 Figma 中，官方Figma 集成必不可少，而且它是可移植的，所以您可以将其与其他任何东西配对，包括Claude Code和Cursor。
OpenDesign 是唯一端到端开源、本地优先且 BYOK 的选项。它将 Codex 包装在精选的技能和设计系统库、结构化渲染管道和本地桌面 UI 中，因此使 Codex 出色的设计上下文从第一次运行就存在，而不是每个项目手动组装，并且每个工件都保留在您自己的仓库中。
插件 / 工具 — 添加了什么 — 开源 — 最适合
OpenAI 产品设计插件 — OpenAI 的角色插件：探索方向、审计用户流程、从活动 URL 制作原型、使截图可交互、导出到 Figma 或 Canva — 否 — Codex 内的快速官方设计任务
openai/skills frontend-skill — 精选审美、无卡片布局、品牌优先层次、克制的动效、构建前的视觉主题 — 是（Apache-2.0）— 提升原始输出质量
Figma 集成（MCP）— 双向 Figma ↔ 代码：在代码中实现框架，将运行中的 UI 推回可编辑的 Figma — 否（官方）— 生活在 Figma 中的团队
OpenDesign — Codex 周围的一个开放、本地优先的设计层：精选技能 + 设计系统库、渲染管道、桌面 UI 和 BYOK — 是（Apache-2.0）— 您拥有的真实、可移植的设计工作流程
如何选择：如果您想要 Codex 内 OpenAI 自己的设计流程，产品设计插件涵盖探索方向、审计流程和从活动 URL 制作原型。对于原始输出质量，前端设计技能是最具杠杆作用的附加项。如果您的团队生活在 Figma 中，官方Figma 集成必不可少，而且它是可移植的，所以您可以将其与其他任何东西配对，包括Claude Code和Cursor。
OpenDesign 是唯一端到端开源、本地优先且 BYOK 的选项。它将 Codex 包装在精选的技能和设计系统库、结构化渲染管道和本地桌面 UI 中，因此使 Codex 出色的设计上下文从第一次运行就存在，而不是每个项目手动组装，并且每个工件都保留在您自己的仓库中。
插件 / 工具 — 添加了什么 — 开源 — 最适合
给不写代码的设计师的 Codex
您不必是工程师也能用 Codex 进行设计。该代理接受自然语言意图和真实参考，并返回可工作的响应式 UI，这使其成为设计师和产品人员的真正工具，而不仅仅是前端开发人员。诀窍是像设计简报一样驱动它，而不是编码会话。
用自然语言描述：用设计术语说出您想要的内容、布局、层次结构、基调、感觉，让 Codex 将其转化为标记。
从参考开始：放入截图、情绪板或品牌网站；具体的参考胜过任何数量的散文来获得正确的外观。
在真实浏览器中预览：让 Codex 渲染并打开结果，这样您可以用眼睛判断它、调整大小并指出哪里不对。
安全地迭代和回滚：代理在沙箱中运行，所以您可以尝试一个方向、保留好的通过、回滚坏的而不损坏任何东西。
用自然语言描述：用设计术语说出您想要的内容、布局、层次结构、基调、感觉，让 Codex 将其转化为标记。
从参考开始：放入截图、情绪板或品牌网站；具体的参考胜过任何数量的散文来获得正确的外观。
在真实浏览器中预览：让 Codex 渲染并打开结果，这样您可以用眼睛判断它、调整大小并指出哪里不对。
安全地迭代和回滚：代理在沙箱中运行，所以您可以尝试一个方向、保留好的通过、回滚坏的而不损坏任何东西。
陷阱，以及如何避免“AI 垃圾”外观
关于 Codex 生成设计最常见的抱怨是它看起来很通用，柔和的渐变、浮动面板、过大的圆角、戏剧性的阴影，一种“这显然是 AI 做的”的 Inter 加紫色氛围。其他报告的问题包括移动布局损坏、指令泄漏到 UI 文案中，以及快速达到使用限制。
安装前端技能：精选的审美技能迫使 Codex 承诺真实的方向，而不是默认外观。
启用 Playwright 验证：让 Codex 在断点间渲染并自我检查，这样布局不会在移动端悄然损坏。
提供令牌和参考：真实的设计令牌和参考截图是对输出质量最大的杠杆。
在 AGENTS.md 中编码规则：将“没有主视觉卡片，最多两种字体，品牌优先层次”之类的规则放在代理每次运行都会读取的地方。
注意每个缓解措施都是关于给代理一个精选的设计上下文。每个项目手动维护该上下文是 OpenDesign 消除的苦工。
安装前端技能：精选的审美技能迫使 Codex 承诺真实的方向，而不是默认外观。
启用 Playwright 验证：让 Codex 在断点间渲染并自我检查，这样布局不会在移动端悄然损坏。
提供令牌和参考：真实的设计令牌和参考截图是对输出质量最大的杠杆。
在 AGENTS.md 中编码规则：将“没有主视觉卡片，最多两种字体，品牌优先层次”之类的规则放在代理每次运行都会读取的地方。
注意每个缓解措施都是关于给代理一个精选的设计上下文。每个项目手动维护该上下文是 OpenDesign 消除的苦工。
BYOK：您的 OpenAI 密钥、您的 ChatGPT 计划、您的限制
Codex 是自带密钥（BYOK）：您使用自己的 OpenAI API 密钥或 ChatGPT 订阅进行身份验证，您的凭据属于您。这对成本控制和隐私很重要，您的密钥或工作无需通过第三方路由。
OpenAI API 密钥（BYOK）— 按令牌即付即用 — 精细的成本控制、自动化和 CI
ChatGPT 订阅 — 包含在 Plus / Pro / Business / Enterprise 中 — 日常交互式设计的更高、更可预测的限制
选择正确的推理级别：OpenAI 指出低到中等推理通常比最高设置产生更强的前端结果，而且成本更低。
保持提示小而专注：简短、具体的任务使用更少的令牌并产生更清晰的差异，而不是一个巨大的提示。
提交好的迭代：保存有效的通过并回滚其余的，这样您就不会每次都为重新生成干净基础而付费。
选项 — 如何计费 — 最适合
OpenAI API 密钥（BYOK）— 按令牌即付即用 — 精细的成本控制、自动化和 CI
ChatGPT 订阅 — 包含在 Plus / Pro / Business / Enterprise 中 — 日常交互式设计的更高、更可预测的限制
选择正确的推理级别：OpenAI 指出低到中等推理通常比最高设置产生更强的前端结果，而且成本更低。
保持提示小而专注：简短、具体的任务使用更少的令牌并产生更清晰的差异，而不是一个巨大的提示。
提交好的迭代：保存有效的通过并回滚其余的，这样您就不会每次都为重新生成干净基础而付费。
选项 — 如何计费 — 最适合
在 OpenDesign 中使用 Codex 进行设计
OpenDesign 是上述工作流程一直要求的开源设计层。它将 Codex 视为第一方适配器，并将其包装在精选技能和设计系统库、结构化渲染管道和本地桌面 UI 中，所以使 Codex 出色的设计上下文从第一次运行就存在，而不是每次手动组装。
OpenDesign 的桌面应用：选择一个插件，描述您想要什么，Codex 就会构建它，无需命令行。
使用您的 OpenAI API 密钥（BYOK）或 ChatGPT 订阅进行身份验证，凭据留在您的机器上，从不通过我们代理。
选择一个设计系统和一个技能，然后生成具有一致品味的演示文稿、原型和着陆页。
每个工件和 DESIGN.md 文件都存在于您自己的仓库中，而不是托管云上。
Codex 在本地部署 OpenDesign 并在其应用内浏览器中打开它，然后从那里驱动画布。
同一个 Codex 代理，同一个密钥，再加上一个真实、可移植、开源的设计工作流程。它是本地优先的且 Apache-2.0 许可，因此您的任何工作或凭据都不会离开您的机器。
一个 Codex + OpenDesign 会话的真实输出：演示文稿、着陆页和渲染视频，全部保存在您自己的仓库中。
安装 OpenDesign 并选择 Codex 作为您的代理。
OpenDesign 的桌面应用：选择一个插件，描述您想要什么，Codex 就会构建它，无需命令行。
使用您的 OpenAI API 密钥（BYOK）或 ChatGPT 订阅进行身份验证，凭据留在您的机器上，从不通过我们代理。
选择一个设计系统和一个技能，然后生成具有一致品味的演示文稿、原型和着陆页。
每个工件和 DESIGN.md 文件都存在于您自己的仓库中，而不是托管云上。
Codex 在本地部署 OpenDesign 并在其应用内浏览器中打开它，然后从那里驱动画布。
同一个 Codex 代理，同一个密钥，再加上一个真实、可移植、开源的设计工作流程。它是本地优先的且 Apache-2.0 许可，因此您的任何工作或凭据都不会离开您的机器。
一个 Codex + OpenDesign 会话的真实输出：演示文稿、着陆页和渲染视频，全部保存在您自己的仓库中。
安装 OpenDesign 并选择 Codex 作为您的代理。
OpenDesign 是否与 OpenAI 有关联？
否。Codex 是 OpenAI 的产品；OpenDesign 是一个独立的开源项目，将其作为第一方适配器支持。
用 Codex 开始第一个设计任务
先从小任务开始，判断整个往返流程，然后再带来真实的简报。选择与你设置匹配的选项；本页不会自动检测。