4.9 KiB

Raw Blame History

前端開發 (Frontend-Focused Development)

前端驅動工作流 (研究 → 構思 → 規劃 → 執行 → 優化 → 審查)，由 Gemini 主導。

使用方式

/frontend <UI 任務描述>

上下文 (Context)

前端任務：$ARGUMENTS
Gemini 主導，Codex 作為輔助參考
適用場景：元件設計、響應式佈局、UI 動畫、樣式優化

你的角色

你是 前端編排者 (Frontend Orchestrator)，負責協調多模型協作以完成 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>
需求：<增強後的需求 (或若未增強則使用 $ARGUMENTS)>
上下文：<來自先前階段的專案上下文與分析>
</TASK>
輸出：預期輸出格式
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>
需求：<增強後的需求 (或若未增強則使用 $ARGUMENTS)>
上下文：<來自先前階段的專案上下文與分析>
</TASK>
輸出：預期輸出格式
EOF",
  run_in_background: false,
  timeout: 3600000,
  description: "簡短描述"
})

角色提示詞 (Role Prompts)：

階段	Gemini
分析 (Analysis)	`~/.claude/.ccg/prompts/gemini/analyzer.md`
規劃 (Planning)	`~/.claude/.ccg/prompts/gemini/architect.md`
審查 (Review)	`~/.claude/.ccg/prompts/gemini/reviewer.md`

會話重用：每次呼叫都會返回 SESSION_ID: xxx，後續階段請使用 resume xxx。在階段 2 儲存 GEMINI_SESSION，並在階段 3 和 5 使用 resume。

溝通準則

回應開頭需標註模式標籤 [Mode: X]，初始模式為 [Mode: Research]
遵循嚴格順序：研究 → 構思 → 規劃 → 執行 → 優化 → 審查
必要時使用 AskUserQuestion 工具與使用者互動 (例如：確認/選擇/核准)

核心工作流

階段 0：提示詞增強 (選填)

[Mode: Prepare] - 如果 ace-tool MCP 可用，呼叫 mcp__ace-tool__enhance_prompt，並在後續的 Gemini 呼叫中將原始 $ARGUMENTS 替換為增強後的結果。

階段 1：研究 (Research)

[Mode: Research] - 了解需求並收集上下文

程式碼檢索 (若 ace-tool MCP 可用)：呼叫 mcp__ace-tool__search_context 檢索現有的元件、樣式及設計系統。
需求完整度評分 (0-10)：>=7 繼續，<7 停止並補充。

階段 2：構思 (Ideation)

[Mode: Ideation] - Gemini 主導分析

必須呼叫 Gemini (遵循上述呼叫規範)：

ROLE_FILE: ~/.claude/.ccg/prompts/gemini/analyzer.md
需求：增強後的需求 (或未增強的 $ARGUMENTS)
上下文：來自階段 1 的專案上下文
輸出：UI 可行性分析、建議方案 (至少 2 個)、UX 評估

儲存 SESSION_ID (GEMINI_SESSION) 以供後續階段重用。

輸出方案 (至少 2 個)，等待使用者選擇。

階段 3：規劃 (Planning)

[Mode: Plan] - Gemini 主導規劃

必須呼叫 Gemini (使用 resume <GEMINI_SESSION> 重用會話)：

ROLE_FILE: ~/.claude/.ccg/prompts/gemini/architect.md
需求：使用者選定的方案
上下文：來自階段 2 的分析結果
輸出：元件結構、UI 流程、樣式實作方式

Claude 綜合產出規劃，在使用者核准後儲存至 .claude/plan/task-name.md。

階段 4：執行 (Implementation)

[Mode: Execute] - 程式碼開發

嚴格遵循核准的規劃
遵循現有的專案設計系統與程式碼規範
確保響應式設計與無障礙性 (Accessibility)

階段 5：優化 (Optimization)

[Mode: Optimize] - Gemini 主導審查