AGENT 安装入口
在 Codex 中安装 OpenDesign
这是一个供 Codex 读取的纯文本地址，包含安装说明，而非可视化教程。将该 prompt 复制到 Codex 中，它会自行读取该条目。
Codex 的 Prompt
通过阅读 https://open-design.ai/codex-plugin/ 并按照其中的安装说明，在 Codex 中安装 OpenDesign。更改配置前请先询问。
Codex 
OpenDesign 用 Codex
在 OpenDesign
做设计。
如何在 OpenDesign 中用 OpenAI Codex 设计界面：从环境搭建，到一个从 brief 到经审阅文件的完整任务，以及开始之前需要了解的限制。
从 brief 到界面01 / Codex
您带来想法↗
“一个更沉静的项目面板。
优先级清晰，留有专注的空间。”
一个完整的 Codex 设计任务
一个 Codex 设计任务：从 brief 到界面
完整呈现一个任务：你交付的 brief 与约束条件、返回的产物，以及交付前仍需完成的检查。下方界面是为本页面制作的示例说明，并非 Codex 运行记录。
1设计 Brief 与约束条件
Brief为一个小型产品团队设计一个项目进度看板。一目了然地展示整体进度、下一个里程碑和被阻塞的工作。任务在待办、进行中和已完成之间流转。看板必须同时适配桌面端和移动端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互列筛选、任务抽屉，以及列之间的键盘导航
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Codex 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Codex
规划布局，编写 HTML、CSS 和 JavaScript，运行该文件并按要求修订。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Codex 产物：1440px 与 390px 下的看板
4交付前审查
Layout
网格与间距
侧边栏、页头、统计信息和列均对齐 8px 网格；在 1440 或 390 下均无重叠。
Hierarchy
视觉层级
进度、下一个里程碑和阻塞数量的优先级高于列标题；强调色仅标记一个里程碑标签。
Responsive
移动端布局
列变为分段切换控件；里程碑栏保持不变；侧边栏折叠为标签栏。
Interaction
交互检查
在此切换桌面端和移动端预览。在你自己的产物中，打开一个任务并测试筛选器、键盘导航和焦点行为。
Fit
Codex 适合与不适合的场景
Codex 适合的场景
- 从参考图开始。 Codex 接受截图作为输入，并据此构建响应式界面；上下文中的设计系统能让结果保持在品牌规范之内。
- 在现有界面上迭代。 提出修改要求，预览新版本，保留或还原——每个版本都是项目中的一个文件。
- 需要对照约束检查输出结果。 给 Codex 一份 DESIGN.md 或 AGENTS.md 以及断点目标；它可以在浏览器中渲染并与参考图进行比对。
- 已经在使用 Codex。 继续使用熟悉的 Agent。请检查所选执行模式对应的身份验证与计费方式。
选择其他工作流的场景
- 需要可编辑的矢量文件。 本示例是 HTML，并非可编辑的 Figma 文档。如需所需的资源格式，请查看单独的 Figma 工作流。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 需要不同的执行模式。 本指南涉及的是本地 Codex，请勿假定其设置可原样套用于托管工作流。
- 您的团队使用 Claude Code 或 Cursor 工作。这些 Agent 都有各自的页面；工作区相同，设置不同。参见相关 Agent。
兼容性
开始使用 Codex 前需满足的要求
本指南涉及本地 Codex。其他模式的设置和计费方式有所不同。已发布参考资料的核对日期为 2026 年 9 月 11 日。
工具范围OpenAI Codex，编程 Agent
OpenAI Codex 是一款编程 Agent，并非早期的代码补全模型。本页讨论的是用 Codex 设计界面，而不是 Codex 应用本身的界面。OpenDesign 的设置说明将 Codex 列为可用 Agent 之一。
账户与身份验证ChatGPT 登录或 API key
使用本地 Codex 时，可通过 ChatGPT 登录，也可使用 OpenAI API key。两者的计费和政策含义不同。请遵循OpenAI 的身份验证说明；本页不承诺任何配额或价格。
连接检查成功的标志
按照您所安装版本显示的连接说明操作，然后运行一个小任务。确认预期的 Agent 已处理该任务，且产物可以打开。仅完成下载并不能确定连接已经成功建立。
从桌面应用开始
三步完成 Codex 设置
先下载，再针对您安装的版本完成 Codex 设置，然后检查一个小结果。您无需从源码构建 OpenDesign 即可完成这一流程。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备您的 Codex 连接
按照您所安装版本中的 Codex 说明操作。使用本地 Codex 时，请在发送任务前完成 ChatGPT 登录或 API key 身份验证。
阅读 Codex 认证说明检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个 Codex 小任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
Codex 设计工作流
五步完成 Codex 设计工作流
同一个 progress-board 任务，从 brief 到验证完成的文件逐步呈现。每一步都列出您需要提供的内容、Codex 执行的操作、OpenDesign 提供的支持，以及您需要核对的要点。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Codex读取 brief 及项目中的
AGENTS.md；遇到不明确之处会主动提问。 - OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Codex在写下第一行之前，先将 DESIGN.md 中的 token 与设计取向规则载入上下文。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Codex 编写一个自包含的 HTML 文件：布局、样式、交互与稳定的挂载点。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Codex规划各个区块，编写 HTML、CSS 与 JavaScript，运行该文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Codex需要时可以自行打开真实浏览器，与参照物进行对比。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Codex就地应用更改并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Codex 设计资源
限制
Codex 的限制、人工检查与后备方案
- 需要本地 Agent本页描述的是本地 Codex。其要求并不涵盖 OpenDesign 中提供的所有模式。
- 使用限额使用限额和费用取决于你的 OpenAI API key 或 ChatGPT 套餐。本页对免费额度不作任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 产物是 HTML产物是 HTML 文件，而不是矢量设计文件。Figma 往返需通过 Figma 自身的 Codex 集成。
- 人工审查无障碍性、真实内容、品牌契合度和交互正确性由你在预览中审查。Codex 在被要求时可以在浏览器中自我验证；请将其视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Codex 与 OpenDesign 的常见问题
Codex 做什么，OpenDesign 又做什么？
Codex 是 Agent：它读取你的 brief，编写并运行代码，然后进行修订。OpenDesign 是围绕它的工作区：设计系统、skill、预览、评论和带版本管理的文件。OpenDesign 是一个独立的开源项目，与 OpenAI 无关联。
开始之前我需要准备什么？
桌面应用、一个适用于你所选模式的可用 Codex 连接，以及一个用于测试的小任务。参见兼容性；源码构建的要求是另外的。设计系统会有帮助；如果你还没有，可从库中选一个。
在哪里可以查看其他 Agent？
Agent 中心列出了可用的 Agent 指南。Claude Code、Cursor 和 OpenCode 已在上方的相关 Agent 中链接。
用 Codex 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。