collaborating-with-gemini

name: collaborating-with-gemini description: | 与 Google Gemini CLI 协同开发。将编码任务委托给 Gemini 进行前端原型、UI设计和代码审查。

触发场景：

• 需要前端/UI/样式原型设计
• 需要 CSS/React/Vue 组件设计
• 需要代码审查和 Bug 分析
• 用户明确要求使用 Gemini 协作
• 复杂前端逻辑的原型设计

触发词：Gemini、协作、多模型、前端原型、UI设计、CSS、样式、gemini协同

前置要求：

• 已安装 Gemini CLI (npm install -g @google/gemini-cli)
• 已配置 Google API Key (GEMINI_API_KEY 环境变量或 gemini auth login)

注意：Gemini 对后端逻辑理解有缺陷，后端任务优先使用 Codex。

与 Gemini CLI 协同开发

通过 Python 桥接脚本调用 Gemini CLI，获取前端原型和 UI 设计建议。

快速开始

# 相对路径（推荐，在项目根目录执行）
python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py --cd . --PROMPT "Your task"

输出: JSON 格式，包含 success、SESSION_ID、agent_messages 和可选的 error。

参数说明

使用模式

1. 基础调用（默认只读模式）

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Design a responsive card component for product display"

2. 多轮会话

始终保存 SESSION_ID 用于后续对话：

# 第一轮：设计 UI
python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Design a mobile-first login page with form validation"

# 后续轮次：使用返回的 SESSION_ID（索引号）继续
python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --SESSION_ID "latest" \
  --PROMPT "Add dark mode support to the login page design"

3. 获取 Unified Diff 补丁

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Generate a unified diff to improve the CSS layout. OUTPUT: Unified Diff Patch ONLY."

4. 调试模式（返回完整信息）

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Debug this styling issue: elements overflow on mobile" \
  --return-all-messages

5. 引用项目文件（@file 语法）

Gemini CLI 支持 @file 语法直接引用文件内容：

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Review the component in @src/components/MyComponent.vue and suggest improvements for accessibility. OUTPUT: Unified Diff Patch ONLY."

6. 跨目录工作区

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --include-directories "../shared-lib" \
  --PROMPT "Analyze how shared-lib types are used in this project"

返回值结构

成功时：

{
  "success": true,
  "SESSION_ID": "5",
  "agent_messages": "模型回复内容..."
}

失败时：

{
  "success": false,
  "error": "错误信息描述"
}

安全模式说明

推荐：始终使用默认的沙箱模式。将 Gemini 的输出视为"脏原型"，由 Claude 重构为生产代码。

协作工作流

推荐场景

重要约束

1. 默认只读: 默认 --approval-mode plan，Gemini 不会修改任何文件
2. 英语交互: 与 Gemini 交互时使用英语，获得更好效果
3. Diff 输出: 在 PROMPT 中明确要求 OUTPUT: Unified Diff Patch ONLY
4. 后端逻辑: Gemini 对后端逻辑理解有缺陷，后端任务优先使用 Codex
5. 重构代码: 将 Gemini 的输出视为"脏原型"，由 Claude 重构为生产代码
6. 后台运行: 对于长时间任务，使用 Run in the background

与本项目的集成

典型用例：组件设计

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Design a React/Vue component for @src/components/MyComponent.vue. Focus on clean layout with dark mode support. OUTPUT: Complete component code."

典型用例：样式审查

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Review the CSS in @src/styles/main.css for consistency, unused rules, and best practices."

典型用例：UI 原型

python .claude/skills/collaborating-with-gemini/scripts/gemini_bridge.py \
  --cd . \
  --PROMPT "Design a file browser panel UI with tree navigation, search, and context menu. Use the project's existing UI framework. OUTPUT: Complete component code."

安装前置

# 安装 Gemini CLI
npm install -g @google/gemini-cli

# 配置 API Key（方式一：环境变量）
# 设置 GEMINI_API_KEY 环境变量

# 配置 API Key（方式二：CLI 登录）
gemini auth login

故障排除

Gemini vs Codex 选择指南