OpenAI Codex UI 设计指南：用 Oil UI 做出高完成度网页、后台与 App

Codex 做界面的强项与常见盲区

画廊中超过八成的作品由 GPT / Codex 系列模型（如 GPT 6.1 Sol、GPT 5.4、GPT 6 Luna、GPT 6 Astra）配合 Oil UI 完成。从实际产出看，Codex 非常擅长处理带真实逻辑的界面：例如《Fieldwork Type》里边打字边改字宽与授权计价，《Nightwatch》里拖拽故障时间窗联动拓扑图与部署标记，以及《Vesper》里筛选异常账单并展开 Webhook 负载。

但如果缺少设计约束，Codex 也容易把页面写成“工程师调试面板”——所有字段平铺直叙、边框线过密、状态按钮堆成一排，主次关系被淹没在密集的表格框线里。Oil UI 的作用就是帮 Codex 先立住视觉主次，再做减法。

在 Codex 中跑通“方向对比 → 状态实现 → 截图走查”

在 Codex 里使用 Oil UI 时，建议把一次大任务拆成清晰的阶段，让模型在每个阶段都有明确的验收标准，而不是一口气生成几千行未验证的代码。

1. 安装 Skill 并传入真实任务简报

   运行 npx skills add oil-oil/oil-ui 完成安装。给 Codex 的任务简报应当包含产品定位、核心对象、必选状态和视口尺寸。

   npx skills add oil-oil/oil-ui

2. 先看多方向同屏对比，选定唯一主方向

   让 Codex 先围绕真实内容提出 3 到 4 个在构图、字体气质和色彩明度上拉开差距的方案。选定一个方案后，禁止把落选方案的碎块拼回主稿。

3. 用 URL 参数或屏幕并排页固定关键状态

   像画廊里的《Nightwatch》和《Vesper》一样，让 Codex 用 ?state=incident 或 screens.html 把 3 个核心业务状态做成可直接打开的视图，方便逐一截图检验。

4. 按 100% 与 200% 截图做减法与盲审

   截取各状态的真实渲染图，检查是否有折行错位、多余的分割线或对比度不足的次要文字，修干净后再结束任务。

适合 Codex 的任务提示词范例

给 Codex 写提示词时，越具体地描述“用户操作什么控件、界面哪几处随之变化”，做出来的产品感就越扎实。下面是一段可直接改写的提示词：

用 Oil UI 设计并实现一个 [产品名称与类型，例如：面向 AI 团队的 API 用量计费与账单控制台]，桌面端视口 1440×900。
- 核心任务：管理订阅计划与实时 API 用量，核对当期应收与异常账单，按状态或用量阈值筛选客户，点开单条记录查看明细行、扣款与 Webhook 时间线。
- 关键联动：筛选条件变化时列表与顶部趋势同步更新；点开异常账单时可直接触发重试扣款、调整配额或导出账单。
- 交付状态：实现 1) 日常总览与实时筛选、2) 异常账单详情与恢复操作、3) 快捷命令面板三个状态，并在浏览器中截图走查。

画廊真实案例与提示词参考

打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。

Fieldwork Type

字体铸造厂官网

GPT 6.1 Sol1440×900

一家独立字体铸造厂的官网（1440×900 起，响应式到 390 宽）：首屏展示一款主打字体，访客可以直接输入自己的文字试排，调字号、字重和字宽；往下是字体家族的字重表、字符集、使用案例，以及按使用场景（桌面、网页、App）选授权并加入购物车。 试字和授权选择是这件作品的核心：输入时排版当场变化，授权价格随选项更新。设计首屏、试字面板展开、授权选择三个状态。

查看作品与提示词 →

Nightwatch

运维监控与故障处理

GPT 6.1 Sol1440×900

一个给中等规模平台团队用的监控和值班工具（1440×900），界面用英文：服务拓扑，延迟、错误率、流量曲线，最近的发布，日志和调用链；出故障时有告警、当前值班人和事件时间线。 故障正在发生是这件作品的核心：拓扑上出问题的服务和受牵连的下游一眼能看到；拖动时间范围，曲线、发布标记和日志对齐，能看出是哪一次发布引起的。 设计三个状态：一切正常的总览、故障进行中（告警触发、拓扑标出受影响路径）、在错误峰值上展开日志和调用链并定位到那次发布。

查看作品与提示词 →

Vesper

API 用量计费与账单后台

GPT 6.1 Sol1440×900

为 AI 与开发者工具团队设计一个 API 用量计费与客户账单管理后台，采用英文界面，桌面视口为 1440×900。用户可以管理订阅方案与实时 API 用量，查看本周期应收金额和异常账单，按状态与用量阈值筛选客户或账单，并打开单条记录查看计费明细、扣款与 Webhook 时间线及事件报文，完成重试扣款、调整配额或导出账单等操作。 实现三个关键状态：展示收入与用量走势、客户或账单列表及实时筛选的日常工作区；展示用量拆解、状态时间线和恢复操作的异常账单详情；以及快捷命令面板。交付可离线打开的 `index.html`，并以 1440×900、DPR=2 截取 `shots/desktop.png`、`shots/state-1.png` 和 `shots/state-2.png`。

查看作品与提示词 →

Tide

冲浪与潮汐预报 App

GPT 6.1 Sol390×844

一个冲浪者用的浪况与潮汐预报 App（390×844）：收藏的浪点列表、单个浪点今天和未来七天的浪高、周期、风向风速、潮汐曲线，以及“什么时候去最好”的时段建议。 潮汐和浪况随时间变化，是这件作品的数据可视化核心：拖动时间轴，浪、风、潮一起更新。设计浪点列表、单个浪点详情、拖动时间轴查看某个时刻三个状态。交付 `index.html` 和三屏并排的 `screens.html`。

查看作品与提示词 →

常见问题