前端 - 以前端为中心的开发¶

以前端为中心的工作流（调研 → 创意生成 → 计划 → 实现 → 优化 → 审查），由 Gemini 主导。

前提条件： 此命令需要外部 ccg-workflow 运行时。它不包含在基础 ECC 安装中。请运行 npx ccg-workflow 进行初始化，并配置此命令所依赖的 ~/.claude/bin/codeagent-wrapper 和 ~/.claude/.ccg/prompts/* 角色文件。如果没有此运行时，该命令无法正常工作。

使用方法¶

/frontend <UIタスクの説明>

上下文¶

• 前端任务: $ARGUMENTS
• Gemini 主导，Codex 仅作辅助参考
• 适用范围：组件设计、响应式布局、UI 动画、样式优化

角色¶

你作为前端编排器，协调 UI/UX 任务的多模型协作（调研 → 创意生成 → 计划 → 实现 → 优化 → 审查）。

协作模型： - Gemini – 前端 UI/UX（前端权威，可信） - Codex – 后端视角（前端意见仅供参考） - Claude（自身） – 编排、计划、实现、交付

多模型调用规范¶

调用语法：

# 新規セッション呼び出し
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview - \"$PWD\" <<'EOF'
ROLE_FILE: <ロールプロンプトパス>
<TASK>
Requirement: <強化された要件(または強化されていない場合は$ARGUMENTS)>
Context: <前のフェーズからのプロジェクトコンテキストと分析>
</TASK>
OUTPUT: 期待される出力形式
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "簡潔な説明"
})

# セッション再開呼び出し
Bash({
  command: "~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--backend gemini --gemini-model gemini-3-pro-preview resume <SESSION_ID> - \"$PWD\" <<'EOF'
ROLE_FILE: <ロールプロンプトパス>
<TASK>
Requirement: <強化された要件(または強化されていない場合は$ARGUMENTS)>
Context: <前のフェーズからのプロジェクトコンテキストと分析>
</TASK>
OUTPUT: 期待される出力形式
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "簡潔な説明"
})

角色 Prompt：

会话复用：每次调用返回 SESSION_ID: xxx。后续阶段请使用 resume xxx。在阶段 2 保存 GEMINI_SESSION，并在阶段 3 和 5 使用 resume。

沟通指南¶

1. 在响应开始时添加模式标签 [Mode: X]，初始为 [Mode: Research]
2. 严格遵循顺序：Research → Ideation → Plan → Execute → Optimize → Review
3. 必要时使用 AskUserQuestion 工具与用户交互（例如：确认/选择/批准）

核心工作流¶

阶段 0：Prompt 增强（可选）¶

[Mode: Prepare] - 如果 ace-tool MCP 可用，调用 mcp__ace-tool__enhance_prompt，用增强结果替换原始 $ARGUMENTS，供后续 Gemini 调用使用。如果不可用，则直接使用 $ARGUMENTS。

阶段 1：调研¶

[Mode: Research] - 理解需求并收集上下文

1. 获取代码（如果 ace-tool MCP 可用）：调用 mcp__ace-tool__search_context 获取现有组件、样式和设计系统。如果不可用，则使用内置工具：使用 Glob 搜索文件，使用 Grep 搜索组件/样式，使用 Read 收集上下文，使用 Task（Explore 代理）进行更深入的探索。
2. 需求完整性评分（0-10）：>=7 继续，<7 停止并补充

阶段 2：创意生成¶

[Mode: Ideation] - Gemini 主导的分析

必须调用 Gemini（遵循上述调用规范）： - ROLE_FILE: ~/.claude/.ccg/prompts/gemini/analyzer.md - Requirement: 增强后的需求（如果未增强则为 $ARGUMENTS） - Context: 来自阶段 1 的项目上下文 - OUTPUT: UI 可行性分析、推荐方案（至少两个）、UX 评估

保存 SESSION_ID（GEMINI_SESSION）以便后续阶段复用。

输出方案（至少两个），并等待用户选择。

阶段 3：计划¶

[Mode: Plan] - Gemini 主导的计划

必须调用 Gemini（使用 resume <GEMINI_SESSION> 复用会话）： - ROLE_FILE: ~/.claude/.ccg/prompts/gemini/architect.md - Requirement: 用户选择的方案 - Context: 来自阶段 2 的分析结果 - OUTPUT: 组件结构、UI 流程、样式方法

Claude 整合计划，并在用户批准后保存到 .claude/plan/task-name.md。

阶段 4：实现¶

[Mode: Execute] - 代码开发

• 严格遵循已批准的计划
• 遵循现有项目的设计系统和代码标准
• 保证响应式和可访问性

阶段 5：优化¶

[Mode: Optimize] - Gemini 主导的审查

必须调用 Gemini（遵循上述调用规范）： - ROLE_FILE: ~/.claude/.ccg/prompts/gemini/reviewer.md - Requirement: 审查以下前端代码变更 - Context: git diff 或代码内容 - OUTPUT: 可访问性、响应式、性能、设计一致性问题列表

整合审查反馈，并在用户确认后执行优化。

阶段 6：质量审查¶

[Mode: Review] - 最终评估

• 检查相对于计划的完成度
• 验证响应式和可访问性
• 报告问题和改进建议

重要规则¶

1. Gemini 的前端意见可信
2. Codex 的前端意见仅供参考
3. 外部模型对文件系统零写入访问
4. Claude 处理所有代码写入和文件操作