delegate-ui-to-claude

将 UI 委派给 Claude

Claude Code 端到端负责委派的前端/UI 层，包括组件行为和所有由此产生的 UI 编辑。Codex 担任 PM 和集成负责人：明确意图、划定边界并约定接口、启动 Claude、检查结果，并将修改反馈转交给 Claude。

工作流

1. 明确交接内容。

   • 阅读适用的说明、计划、设计文档和当前工作树状态。
   • 区分由 Claude 负责的前端/UI 路径，以及由 Codex 负责的后端、领域、数据、基础设施和跨层集成工作。委派前，稳定 Claude 所需的所有接口约定。
   • 先与用户解决仍未确定且未委派的重大产品或设计问题。 委派的 CLI 运行不会进入交互模式，因此 Claude 检查项目后发现的决策必须通过 Codex 传达，不得默默推断。
   • 启动 Claude 前，对交接方式进行分类：
     • 在明确范围内应用现有的明确无人值守授权；该授权可能涵盖剩余选择，并允许一次性运行。
     • 如果缺少 PRODUCT.md、工作会创建新的界面或视觉风格、请求涉及重新设计或品牌重塑，或仍有重大产品或设计选择待定，则采用经协调批准的方式。
     • 仅对沿用既有产品和视觉风格的限定范围工作采用一次性运行，或者在用户明确授权 Claude 无人值守地作出剩余决策时采用。
   • 记录具体的验收标准、响应式状态、无障碍预期、所需验证，以及必须保持不变的路径或内容。

2. 验证并配置委派工具。

   • 确认 claude 命令可用，并检查 claude --version。

   • 在相关 UI 仓库根目录下工作。确认该仓库已安装 Claude 专用的 Impeccable，路径为 .claude/skills/impeccable/SKILL.md，并确认 Claude 能解析 /impeccable；Codex 中存在同名技能并不能证明满足此依赖。

   • 不要让 Codex 使用 Impeccable。配置前，检查以下位置：

     • 当前仓库中的 .agents/skills/impeccable；
     • 用户级别的 ~/.agents/skills/impeccable 或 ~/.codex/skills/impeccable；以及
     • 仓库 .codex/hooks.json 中的 Impeccable hook 条目。

   • 报告检测到的面向 Codex 的配置项，未经明确授权不得移除。指明具体配置项的指令即为充分授权。在移除仓库本地的 .agents/skills/impeccable 前，验证其解析路径位于仓库内、它不是符号链接，且不含无关文件。在 .codex/hooks.json 中，只移除 Impeccable 条目。每个用户级路径都必须单独获得授权。

   • 清理后重新检查，并在所有冲突消除前停止。如果此任务已发现 Impeccable，只能在全新任务中继续。用户提出要求且功能受支持时，使用指定的续接提示词创建新任务；否则告知用户自行启动新任务。

   • 通过 npx 使用 @latest 调用 Impeccable，确保每次委派都会检查当前发布的 CLI，而不是依赖长期未更新的本地二进制文件。如果尚未安装 Claude 版本，则在委派前安装：

     npx --yes impeccable@latest install -y --providers=claude --scope=project
     

   • 如果已安装 Claude 版本，则在委派前刷新该项目级副本：

     npx --yes impeccable@latest update -y --providers=claude --scope=project
     

   • 只有在确认当前仓库包含委派的 UI 工作后，才安装 Impeccable。仅使用 --providers=claude 和 --scope=project；绝不要为 Codex 安装、使用 --scope=global、添加 其他提供方，或在仅负责协调后端或集成工作的仓库中安装。

   • 安装或刷新后，验证 .claude/skills/impeccable/SKILL.md 存在，并确认没有创建上述面向 Codex 的 产物。预期的仓库级可用范围仅限 Claude。

   • 将 Impeccable 创建的 .claude 文件视为项目变更：保留已有文件，检查最终差异，并在最终变更文件报告中列出这些文件。

   • 不得悄悄改由 Codex 实现 UI。

3. 编写完整的审批或实现提示词。

   • 选择与任务匹配的 Impeccable 命令：端到端创建或重新设计使用通用的 /impeccable 请求；建立缺失的项目设计背景使用 init；针对性实现优化使用 polish；审查层级结构和 UX 使用 critique；审查无障碍性、性能和响应式质量使用 audit。
   • 以 /impeccable 开始提示词；如果任务使用了命令，则附加所选命令。对于仅审查的工作，明确禁止编辑。
   • 明确 Claude 全权负责前端/UI 实现。
   • 包含目标、用户意图、设计/产品背景、可编辑范围、非目标、现有约定、限制条件、验收标准、验证命令以及相关的已有变更。
   • 如果项目和 Claude 集成支持在浏览器中迭代验证，则要求进行此类验证，并覆盖有代表性的桌面端和移动端状态。
   • 告知 Claude 不得提交、推送、重写无关变更或修改后端/领域逻辑。如果需要更改约定，必须报告并交由 Codex 处理。
   • 对于实现任务，要求最终报告包含变更文件、设计决策、验证结果以及任何剩余限制。

4. 在交接需要审批时，协调审批流程。

   • 以 plan 权限模式启动 Claude，并提供用于发现审批事项的提示词。要求 Claude 检查项目但不做编辑；避免打开或等待交互式决策页面；将后续产品问题或设计选项返回给 Codex，而不是自行选择或推断答案。

     claude -p --permission-mode plan --effort high --output-format json < /absolute/path/to/approval-discovery.txt
     

   • 要求审批材料将 status 设为 needs_approval 或 ready_to_implement，并包含确切问题或选项、Claude 基于证据提出的建议及权衡，以及任何必须在其发现下一项决策前存在的 PM 负责规划文档的确切拟定内容。

   • 捕获 JSON session_id。首先根据已确认的决策和委派权限处理审批材料。如果 needs_approval 中指出了权限范围之外的重要决策，则转达确切选项并等待答复；收到答复后，以 plan 模式在同一会话中继续。当状态为 ready_to_implement 且没有未解决的重要选择时，无需再次请求审批，直接继续。

     claude -p --resume <session-id> --permission-mode plan --effort high --output-format json < /absolute/path/to/approval-response.txt
     

   • 如果 Impeccable 需要由 PM 负责的规划文档（例如 PRODUCT.md）才能推导出下一步选项，请对照已批准的方向和授权范围，核查 Claude 提出的确切方案。只针对尚未解决且实质性的内容提问。在该授权范围内，Codex 只能编写由 PM 负责的文档，检查其差异，然后以 plan 模式恢复 Claude。只有在所有实质性选择都已获批准或授权后，才授予 Claude 写入权限。

   • 如果用户授权无人值守决策，请在交接说明中记录该授权，并让 Claude 使用 Impeccable 的无人值守回退方案，而不是擅自编造批准。

5. 从负责该 UI 的仓库和工作目录启动实现。如果经过协调，则恢复已批准的 Claude 会话；否则启动新的单次会话。优先使用当前经模型分类的权限模式，让 Claude 无需无条件绕过权限即可进行实现：

   claude -p --permission-mode auto --effort high --output-format json < /absolute/path/to/handoff.txt
   

   • 对于已批准且经过协调的会话，在该命令中添加 --resume <session-id>，并在交接说明中包含所有已确认的答复和选择。
   • 将以 /impeccable 开头的完整提示词写入任务专用的临时文件，并通过标准输入传入。不要将用户或仓库文本插入 shell 命令。
   • 如果 Claude 的 Chrome 集成可用，且需要进行可视化浏览器迭代，则添加 --chrome。
   • 如果 auto 不可用，则使用 acceptEdits，并添加范围严格限定的 --allowedTools 条目，指定 Claude 所需的确切仓库验证和开发命令。
   • 此工作流中绝不要使用 --dangerously-skip-permissions 或 bypassPermissions。
   • 保留会话，并捕获 JSON session_id；审批阶段和后续修订必须沿用相同上下文。
   • 如果 Codex 沙箱阻止 Claude 正常进行身份验证、访问会话或访问网络，请申请运行 claude 所需的最小范围提权。

6. 监督，但不要接管。

   • 委派运行期间，不要编辑由 Claude 负责的前端/UI 文件。
   • 检查 Claude 的结果、工作树差异和所报告的验证情况。独立核查范围、约定、用户意图和仓库集成。
   • 将未完成的工作以及视觉或 UX 反馈交回同一个 Claude 会话，而不是直接修补 UI：

   claude -p --resume <session-id> --permission-mode auto --effort high --output-format json < /absolute/path/to/revision.txt
   

   • 修订提示词以 /impeccable polish 开头，随后列出具体发现和验收差距。
   • 让 Claude 修正其 UI 工作。Codex 只能修改另行确定由 PM/集成负责的范围；如果前端必须调整，再恢复 Claude。

7. 只有在 Claude 的 UI 实现和 Codex 的集成检查均通过后才结束。报告职责划分、变更文件、验证依据，以及未能完成的任何视觉检查。