
ECC/frontend命令实战Gemini 主导的前端多模型协作开发工作流【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC本文基于 ECC 仓库中的 docs/ja-JP/commands/multi-frontend.md 及其英文原版 commands/multi-frontend.md 编写系统讲解/frontend多模型前端命令的完整使用方式。该命令在 ECC 中属于multi-*系列的多模型协作命令用于以前端中心的视角完成 UI/UX 任务工作流为Research调查→ Ideation点子创出→ Plan计划→ Execute实现→ Optimize优化→ Review评审由 Gemini 主导前端决策Claude 负责编排与全部文件写入。读完本文你将掌握如何安装其依赖的ccg-workflow运行时、如何按规范调用外部模型、如何驱动 7 个阶段的完整工作流以及这套协作范式的信任边界与安全规则。一、命令定位前端中心的多模型协作范式在 ECC 的multi-*命令家族中/frontend承担的是前端专项角色。与面向服务端任务的 multi-backend.mdCodex 主导、面向全栈的 multi-workflow.md 相比/frontend将权威决策权交给Gemini日语版文档或Antigravity英文版文档而 Codex 仅以后端视角提供参考意见。该命令的适用场景非常聚焦原文档明确列出组件设计Component design响应式布局Responsive layoutUI 动画UI animations样式优化Style optimization在 COMMANDS-QUICK-REF.md 中/multi-frontend被描述为 Frontend-focused multi-model development前端聚焦的多模型开发与/multi-plan多模型协作规划、/multi-backend后端聚焦、/multi-execute多模型协作执行并列共同构成 ECC 的多模型开发能力矩阵。版本差异提示仓库同时维护了英文版与多语言版日文、中文、土耳其文等的命令文档。英文原版 commands/multi-frontend.md 以Antigravity作为前端权威模型调用参数为--backend antigravity而日语版 docs/ja-JP/commands/multi-frontend.md 使用Gemini调用参数为--backend gemini --gemini-model gemini-3-pro-preview。本文以日语版为准展开并在涉及调用参数处同步标注英文版的差异。二、前置条件安装ccg-workflow运行时/frontend命令依赖外部ccg-workflow运行时该运行时不包含在 ECC 基础安装中。这一点在命令文档的开头以醒目方式强调并在 README.md 中有对应说明multi-*命令不包含在基础 plugin/rules 安装中若要使用/multi-plan、/multi-execute、/multi-backend、/multi-frontend和/multi-workflow必须额外安装ccg-workflow运行时。安装命令npx ccg-workflow该运行时负责供给命令所依赖的外部组件包括~/.claude/bin/codeagent-wrapper—— 命令脚本中实际被调用的包装器可执行文件~/.claude/.ccg/prompts/*—— 供各阶段使用的角色提示词role prompt文件。注意如果未安装ccg-workflow这些multi-*命令将无法正常运行原文档明确写道 Without that runtime, this command will not run correctly。三、使用方法与上下文注入/frontend UIタスクの説明$ARGUMENTS即用户在斜杠命令后输入的任务描述。命令内部通过以下上下文变量理解任务Frontend task:$ARGUMENTS主导模型: Gemini 主导Codex 作为辅助参考Gemini主導、Codexは補助的な参照用适用范围: 组件设计、响应式布局、UI 动画、样式优化四、角色分工前端编排者与三方协作模型/frontend命令要求你扮演前端编排者Frontend Orchestrator协调 UI/UX 任务的多模型协作。三方模型的权责划分是整套范式的核心模型定位话语权Gemini前端 UI/UX前端权威可信赖前端の権威、信頼できるCodex后端视角前端意见仅供参考フロントエンドの意見は参考のみClaude自身编排、计划、实现、交付唯一的文件系统写入者这一分工与后端版 multi-backend.md 形成镜像后端任务中 Codex 是权威、Gemini 仅供参考。其设计意图是专业的事交给专业的模型同时通过外部模型零写入权限来保证代码主权Code Sovereignty——外部模型只能产出分析和建议所有实际代码写入与文件操作都由 Claude 完成。五、多模型调用规范5.1 调用语法所有对外部模型的调用统一通过codeagent-wrapper发起以 Bash 工具包装。日语版文档给出了两种调用形态新会话调用New session callBash({ 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: 簡潔な説明 })会话恢复调用Resume session callBash({ 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: 簡潔な説明 })调用要点解析{{LITE_MODE_FLAG}}可替换的轻量模式标记。参照同系列日语文档 docs/ja-JP/commands/multi-plan.md 与 docs/ja-JP/commands/multi-execute.md 的说明使用--backend gemini时需附加--gemini-model gemini-3-pro-preview注意保留参数末尾的空格若使用--backend codex则为空字符串。- $PWD-表示从 stdin 读取任务$PWD传入当前项目目录作为工作目录。timeout: 3600000即 1 小时毫秒。注意此处的调用是前台串行run_in_background: false因为前端工作流的阶段之间依赖前序输出。HeredocEOF任务内容、角色文件路径、期望输出格式全部通过 heredoc 传入EOF单引号防止 shell 展开。英文版 commands/multi-frontend.md 的差异在于后端参数为--backend antigravity无--gemini-model附加项。5.2 角色提示词Role Prompts每个阶段为 Gemini 指定不同的角色提示词文件由ROLE_FILE:字段传入阶段Gemini 角色提示词路径分析Analysis~/.claude/.ccg/prompts/gemini/analyzer.md计划Planning~/.claude/.ccg/prompts/gemini/architect.md评审Review~/.claude/.ccg/prompts/gemini/reviewer.md这些路径在安装ccg-workflow时由运行时供给见 README.md。英文版对应的目录为~/.claude/.ccg/prompts/antigravity/。5.3 会话复用Session Reuse每次调用都会返回SESSION_ID: xxx。为了让后续阶段延续同一上下文避免重复描述需求与背景必须在**第 2 阶段点子创出**保存返回的SESSION_ID为GEMINI_SESSION在**第 3 阶段计划与第 5 阶段优化**使用resume xxx恢复会话。注意恢复语法是resume SESSION_ID子命令英文版 multi-workflow.md 特别强调是resume而非--resume。六、沟通指南Communication Guidelines编排者与用户、模型之间的交互需遵守三条约定模式标签每次响应以[Mode: X]开头初始为[Mode: Research]严格顺序必须遵循Research → Ideation → Plan → Execute → Optimize → Review不可跳序用户交互在需要确认、选择、批准时使用AskUserQuestion工具与用户交互。七、核心工作流7 个阶段详解Phase 0提示词增强可选[Mode: Prepare]—— 若ace-toolMCP 可用调用mcp__ace-tool__enhance_prompt增强用户原始需求$ARGUMENTS并用增强结果替换后续所有 Gemini 调用的 Requirement若 MCP 不可用则直接使用$ARGUMENTS。Phase 1调查Research[Mode: Research]—— 理解需求、收集上下文代码获取若ace-toolMCP 可用调用mcp__ace-tool__search_context检索现有组件、样式与设计系统否则回退到内置工具Glob查找文件、Grep搜索组件/样式、Read收集上下文、TaskExplore 子代理做深层探索。需求完整度评分0-10评分 ≥ 7 则继续 7 则停止并让用户补充信息。这一止损机制与 multi-execute.md 中的 Stop-Loss Mechanism 一脉相承——当前阶段产出未验证前不进入下一阶段。Phase 2点子创出Ideation[Mode: Ideation]——必须调用 Gemini按前述调用规范执行ROLE_FILE:~/.claude/.ccg/prompts/gemini/analyzer.mdRequirement: 增强后的需求未增强则为$ARGUMENTSContext: Phase 1 收集的项目上下文OUTPUT: UI 可行性分析、推荐方案至少 2 个、UX 评估同时保存返回的SESSION_ID为GEMINI_SESSION供后续复用。最后向用户输出至少 2 个候选方案等待用户选择后才进入下一阶段。Phase 3计划Plan[Mode: Plan]——必须调用 Gemini使用resume GEMINI_SESSION复用 Phase 2 的会话ROLE_FILE:~/.claude/.ccg/prompts/gemini/architect.mdRequirement: 用户选定的方案Context: Phase 2 的分析结果OUTPUT: 组件结构、UI 流程、样式方案Claude 负责整合计划在用户批准后保存到.claude/plan/task-name.md。这一计划文件正是 multi-execute.md 中/ccg:execute .claude/plan/xxx.md的执行输入。Phase 4实现Execute[Mode: Execute]—— 代码开发阶段三条硬性要求严格遵循已批准的计划遵循既有项目的设计系统与代码标准保证响应式responsive与无障碍accessibility。此阶段全部由 Claude 执行写入Gemini 无文件系统访问权。Phase 5优化Optimize[Mode: Optimize]——必须调用 Gemini按调用规范使用reviewer.md角色Requirement: 评审以下前端代码变更Context: git diff 或代码内容OUTPUT: 无障碍、响应式、性能、设计一致性问题清单Claude 整合评审反馈在用户确认后执行优化。Phase 6质量评审Review[Mode: Review]—— 最终评估对照计划检查完成度验证响应式与无障碍报告问题与改进建议。八、关键规则Key Rules原文档在结尾处以四条规则收束整个协作范式这是确保多模型协作不失控的底线Gemini 的前端意见可信Geminiのフロントエンド意見は信頼できる——前端事务以 Gemini 为准Codex 的前端意见仅供参考Codexのフロントエンド意見は参考のみ——Codex 的后端视角不能否决前端决策外部模型零文件系统写入权限外部モデルはファイルシステムへの書き込みアクセスがゼロ——安全边界Claude 处理所有代码写入与文件操作——编排者即代码主权者。同样的规则在后端版 multi-backend.mdCodex 后端意见可信、Gemini 后端意见仅供参考与全栈版 multi-workflow.mdBackend follows Codex, Frontend follows Antigravity中以镜像形式出现构成了 ECC 多模型协作的通用信任模型Trust Rules。九、与multi-*系列其他命令的配合/frontend并非孤立存在。在 ECC 的多模型体系中命令之间有明确的分工与衔接命令职责主导模型/multi-plan多模型协作规划只规划、不写业务代码Codex Gemini/Antigravity 并行分析/multi-frontend前端中心开发本文Gemini前端权威/multi-backend后端中心开发Codex后端权威/multi-execute多模型协作执行读计划 → 原型 → 重构 → 审计按任务类型路由/multi-workflow全栈多模型协作工作流智能路由前端→前端模型后端→Codex典型的端到端路径是/multi-plan生成.claude/plan/*.md与SESSION_ID→ 用户确认 →/multi-execute读取计划并复用会话执行实现。而/frontend则适用于任务已明确是前端 UI的场景直接驱动 Gemini 完成从调查到评审的全流程。相关命令清单可见 COMMANDS-QUICK-REF.mdmulti-*命令的安装依赖说明见 README.md。十、总结/frontend命令将前端专业模型主导 后端模型参考 编排者唯一写权限的三方协作范式封装为一条可复用的斜杠命令。它的价值体现在三个层面专业性——UI/UX 决策交给前端权威模型避免通用模型的平庸设计可控性——外部模型零写入权限、Claude 全权负责文件操作从机制上杜绝了多模型协作中的意外改动连续性——通过SESSION_ID会话复用让调查、计划、优化各阶段共享上下文无需重复描述需求。对于需要在 Claude Code 中完成组件设计、响应式布局、UI 动画与样式优化的开发者在确保已通过npx ccg-workflow完成运行时安装的前提下/frontend UI任务描述即开即用。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考