Codex 用例
进行细粒度 UI 更改
使用 Codex-Spark 在现有应用中进行快速、针对性的 UI 迭代。
使用 Codex 在现有应用中每次进行一项微小的 UI 调整，在浏览器中验证，并通过预览旁边的弹出聊天窗口持续快速迭代。
适用场景
- 适用于主要结构已构建完成，仅需进行微小视觉调整的现有应用
- 适用于快速的产品或设计评审循环，其中每条反馈都应转化为一个专注的代码修改
- 适用于需要浏览器验证但不应演变为广泛重新设计的 UI 精修阶段
目录
进行细粒度 UI 更改
使用 Codex-Spark 在现有应用中进行快速、针对性的 UI 迭代。
使用 Codex 在现有应用中每次进行一项微小的 UI 调整，在浏览器中验证，并通过预览旁边的弹出聊天窗口持续快速迭代。
适用场景
- 适用于主要结构已构建完成，仅需进行微小视觉调整的现有应用
- 适用于快速的产品或设计评审循环，其中每条反馈都应转化为一个专注的代码修改
- 适用于需要浏览器验证但不应演变为广泛重新设计的 UI 精修阶段
技能与插件
- 在真实的浏览器中打开运行中的应用，检查更改的路由，并在下一次迭代之前验证每一处细微的 UI 调整。
| 技能 | 为什么使用它 |
|---|---|
| Playwright | 在真实的浏览器中打开运行中的应用，检查更改的路由，并在下一次迭代之前验证每一处细微的 UI 调整。 |
起始提示词
简介
当你拥有一个现有的应用并希望对 UI 进行快速迭代时，你可以使用 gpt-5.3-codex-spark 来对 UI 进行微小且专注的更改。Codex-Spark 是我们最快的模型，专为近乎实时的编码迭代而优化。
这最适合作为一个紧凑的循环：一条视觉反馈，一次针对性修改，一次浏览器检查，然后是下一条反馈。
图像生成端点 Codex Spark 模型 来完成此任务。它在 Pro 计划中可用。
选择你的模型
要进行快速的 UI 迭代，请从 gpt-5.3-codex-spark 开始（如果你有访问权限）。它的能力不如我们的通用模型，但专为实时编码迭代而设计。如果你没有访问权限，请使用 gpt-5.5 with medium or low 推理努力级别。
这种权衡对于细粒度的 UI 工作非常有用。移动按钮、调整断点或修改组件状态通常不需要最强大的模型。你需要的是一个能快速响应、理解局部代码、修改正确文件，并且能够重复循环而不让迭代过程变得沉重的模型。
开发流程
- 打开现有应用，并让相关的路由或组件可见。
- 将当前活动的 Codex 对话弹出到一个 浮动窗口 中，并在工作时让其靠近你的浏览器、编辑器或设计预览界面。
- 每次给 Codex 一个具体的 UI 更改任务。如果有的话，请包含路由、视口、当前屏幕截图、目标屏幕截图或确切的产品反馈。
- 要求 Codex 检查当前的实现，进行最小且合理的修改，并保留应用现有的组件、设计变量、布局基元和数据流。
- 检查结果，然后在同一个对话串中发送下一个微小的调整。
编写简短的提示词
细粒度的 UI 提示词应该直接且范围明确。好的提示词应指明界面区域、目标更改以及你期望的验证方式。
如果结果接近但不完全正确，请保持后续跟进的同样具体性：
何时放慢速度
如果任务不再是细粒度的，请不要继续使用快速循环。当更改需要大规模重构、新的设计系统基元、非简单的无障碍行为，或者影响多个页面的产品决策时，请切换到更强大的模型和更深思熟虑的提示词。
当 Codex 在已充分理解的界面上进行调整，而不是从头重新设计应用时，快速的 UI 迭代效果最佳。
