官方教程中文版实战场景
精修界面细节
说明如何用 Codex-Spark 做短循环 UI polish：视觉 note、focused edit、browser check、再迭代。
📖 本篇术语速查表
| 英文 / 缩写 | 中文 | 一句话解释 |
|---|---|---|
| UI 精修 | UI polish | 打磨界面细节提升质感。 |
| 细节清单 | detail list | 待精修的具体问题列表。 |
| 视觉验收 | visual check | 改动后对照效果确认。 |
不想读完？把下面这段提示词丢给 AI 帮你跑完——帮你把界面细节精修拆成一份可逐项执行的清单。
你是界面精修规划顾问，帮我把界面细节打磨拆成可逐项执行、可验收的清单。
【角色】
你知道精修界面细节适合交给 Codex 的部分、怎么选模型，也清楚视觉效果要人把关。
【输入】
- 要精修的界面：___
- 我感觉不够好的细节（间距 / 对齐 / 动效 / 配色）：___
- 设计规范或参考：___
- 平台和技术栈：___
【工作流程】
1. 把模糊的不满整理成具体细节清单
2. 每项给 Codex 明确的目标
3. 标出需视觉对照的部分
4. 给逐项实现到验收的流程
【输出规范】
▌一、具体细节清单
▌二、每项的明确目标
▌三、需视觉对照的部分
▌四、逐项实现到验收流程
【硬约束】
- 把模糊感受变成具体可执行项，不含糊
- 视觉效果人工对照把关
- 小步改、可回滚
- 不臆测审美偏好，不清先确认
- 不确定的 API 标注需查官方文档
- 每改一处细节就对照参考看一眼，别一次改一堆最后分不清是哪处出了视觉偏差当 app 主结构已经存在，只需要快速做小的 UI 调整时，可以用 Codex-Spark 进入短循环：一个视觉 note，一个 focused edit，一个 browser check，再进入下一条 note。
官方页面：https://developers.openai.com/codex/use-cases/make-granular-ui-changes
适合什么任务
| 场景 | Codex 应该做什么 |
|---|---|
| 现有 app 结构已经完成，只需小视觉调整 | 每次只改一个 spacing、alignment、color、copy、responsive 或 component-state 问题 |
| product/design review 需要快速响应 | 保持一个 note 对应一个 patch |
| UI polish 需要 browser verification | 用 $playwright 检查结果，但不扩成大 redesign |
推荐模型和强度：gpt-5.3-codex-spark，low effort。没有 Spark 时，用当前更强模型配 medium 或 low reasoning effort。
使用的能力
| 能力 | 用法 | 链接 |
|---|---|---|
$playwright | 打开 running app，检查 changed route，并在下一次迭代前验证小 UI 调整 | https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive |
相关官方说明：
- Codex-Spark：https://developers.openai.com/codex/speed#codex-spark
- Floating pop-out window：https://developers.openai.com/codex/app/features#floating-pop-out-window
- Codex Spark model：https://developers.openai.com/codex/models#gpt-53-codex-spark
起始提示词
请在现有 app 中完成这个 UI change：
[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]
约束：
- 只修改这个 UI adjustment 必需的文件。
- 复用现有 components、tokens、icons 和 layout patterns。
- 除非我明确要求，否则保持 behavior、data flow 和 routing 不变。
- 启动或复用 dev server，在 browser 中检查当前 UI，做最小 patch，并用视觉方式验证结果。
完成这一个 change 后就停止，并总结改了哪些 files，以及运行了哪个 browser check。这个 prompt 强制 Codex stop after one change。小 UI 调整最怕越改越宽。
选择模型
Codex-Spark 是面向近实时 coding iteration 的 fast model。它不如通用模型全面，但适合移动按钮、调整 breakpoint、改 component state 这类窄任务。
这类任务通常不需要最深推理，而需要：
- 快速理解本地代码。
- 找到正确文件。
- 做最小 patch。
- 立刻在 browser 中验证。
- 能连续重复小循环。
Development Flow
- 打开 existing app，让相关 route 或 component 可见。
- 把当前 Codex conversation pop out 到 floating window，放在 browser、editor 或 design preview 附近。
- 每次只给一个具体 UI change。
- 提供 route、viewport、current screenshot、target screenshot 或 exact product note。
- 要求 Codex inspect current implementation，做 smallest defensible edit，并保留 existing components、tokens、layout primitives、data flow。
- review result，再在同一 thread 发送下一条小调整。
小 Prompt 怎么写
好的 granular UI prompt 要包含：
- surface：哪个 route、component 或 viewport。
- target change：具体改什么。
- validation：怎么检查结果。
如果结果接近但还差一点，follow-up 也保持窄：
在 mobile card 上，把 title 和 metadata 之间的 vertical gap 减少约 4px。desktop 保持不变。The primary button is visually too heavy in the empty state. Use the existing secondary button token there only.什么时候放慢
如果任务不再 granular，就换更强模型和更审慎 prompt。
这些情况不适合继续快循环：
- 需要 broad refactoring。
- 要创建新的 design system primitive。
- 涉及 non-trivial accessibility behavior。
- 有跨多屏 product decision。
- 要从零 redesign app。
快速 UI loop 适合调整已经理解的 surface，不适合重做产品方向。