Codex Use Case

做细粒度 UI 修改

在现有应用中快速完成聚焦、可验证的界面迭代。 本页把官方 use case 的章节、工具、起步提示词和检查点整理成中文执行流程,便于直接对照落地。

Front-end Design
Make granular UI changes Front-endDesign

场景定位

在现有应用中快速完成聚焦、可验证的界面迭代。 本页把官方 use case 的章节、工具、起步提示词和检查点整理成中文执行流程,便于直接对照落地。

难度
中级
时间跨度
约 30-60 分钟

适合用于

  • 需要把「在现有应用中快速完成聚焦、可验证的界面迭代。」做成可复用流程的团队,且来源分散在 Playwright 等工具中
  • 希望 ChatGPT 或 Codex 保留来源、检查点和可审阅输出的使用者
  • 需要把「做细粒度 UI 修改」从一次性对话变成可复查工作流的场景

Skills & Plugins

相关工具

Starter Prompt

起步提示词

Make this UI change in the existing app:
[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]

Constraints:
- Change only the files needed for this UI adjustment.
- Reuse existing components, tokens, icons, and layout patterns.
- Keep behavior, data flow, and routing unchanged unless I explicitly ask for it.
- Start or reuse the dev server, inspect the current UI in the browser, make the smallest patch, and verify the result visually.

Stop after this one change and summarize the files changed plus the browser check you ran.
在 ChatGPT 中尝试

介绍

这一节对应官方流程中的「Introduction」。落地时围绕「做细粒度 UI 修改」把目标、输入、执行步骤和验证证据保持在同一条工作流里。

操作要点:运行最小可信验证并保存证据,并关注 Codex 等相关来源或工具,让后续审查能看到命令、结果和失败处理方式。

操作要点:在继续执行前检查来源、假设、受众、权限和输出质量;不确定内容应进入待确认列表。

Pick your model

这一节对应官方流程中的「Pick your model」。落地时围绕「做细粒度 UI 修改」把目标、输入、执行步骤和验证证据保持在同一条工作流里。

操作要点:围绕「Pick your model」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致。

操作要点:先把本节需要的来源材料、权限和上下文补齐;缺失内容要明确标记,不要让 ChatGPT 或 Codex 隐式猜测。

Development flow

这一节对应官方流程中的「Development flow」。落地时围绕「做细粒度 UI 修改」把目标、输入、执行步骤和验证证据保持在同一条工作流里。

  • 围绕「Development flow」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致。
  • 在继续执行前检查来源、假设、受众、权限和输出质量,并关注 Codex 等相关来源或工具;不确定内容应进入待确认列表。
  • 围绕「Development flow」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致,并关注 Codex 等相关来源或工具。
  • 围绕「Development flow」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致,并关注 Codex 等相关来源或工具。
  • 在继续执行前检查来源、假设、受众、权限和输出质量;不确定内容应进入待确认列表。

Write small prompts

这一节对应官方流程中的「Write small prompts」。落地时围绕「做细粒度 UI 修改」把目标、输入、执行步骤和验证证据保持在同一条工作流里。

操作要点:围绕「Write small prompts」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致。

操作要点:围绕「Write small prompts」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致。

When to slow down

这一节对应官方流程中的「When to slow down」。落地时围绕「做细粒度 UI 修改」把目标、输入、执行步骤和验证证据保持在同一条工作流里。

操作要点:把风险、决策、负责人和下一步动作分开记录,并说明每个判断来自哪些材料。

操作要点:围绕「When to slow down」推进「做细粒度 UI 修改」时,保持目标、输入、执行步骤和验证结果一致,并关注 Codex 等相关来源或工具。

Prompt Library

建议提示词

先界定范围

For Make granular UI changes, first inspect the available sources and propose the smallest useful scope. Name the inputs, outputs, validation steps, permissions, and anything that needs approval before action.

交付前复核

Review the result for Make granular UI changes. Check source coverage, assumptions, unresolved questions, and the evidence that proves the output is ready to use.