Gemini CLI v0.18 升级后,我用 MCP 让它和 Claude Code 组队干活,前端效果直接拉满

Gemini CLI 最近发布了 v0.18 版本,修复了大量 bug,可用性有了明显提升。

title

npm install -g @google/gemini-cli

一、问题背景

Gemini 2.5 Pro 的前端能力确实出色,但 Gemini CLI 的稳定性一直是个痛点。尤其是内置的 tool 调用,动不动就报 “API Error”,体验很差。

于是我写了一个 MCP 服务,让 Gemini 专注于它擅长的设计工作,而把代码实现交给 Claude Code。

GitHub – GuDaStudio/geminimcp

将 Gemini CLI 封装为标准 MCP 协议接口,让 Claude Code 可以调用 Gemini 进行 AI 辅助编程。

二、实际效果

结合之前的 CodeX-MCP,我的 Claude Code 终于有了 agents 的雏形。三个小 agent 各司其职、互相配合,开发过程基本只需要聊天就能完成,最终的代码质量也相当不错。

对比测试:使用完全相同的提示词,分别用两种方式生成前端页面。可以看到,使用 Gemini-MCP 后,无论是布局审美还是动画效果,都明显优于纯 Claude Code 的版本。

使用 Gemini-MCP:

仅使用 Claude Code:


三、安装方法

前置要求:

注意:强烈建议 Windows 用户在 WSL 中运行。

步骤 1:一键安装

claude mcp add gemini -s user --transport stdio -- uvx --from git+https://github.com/GuDaStudio/geminimcp.git geminimcp

步骤 2:验证安装

claude mcp list

看到 gemini: ... - ✓ Connected 说明安装成功。

步骤 3(可选):配置自动允许

~/.claude/settings.json 的 allow 项中添加 mcp__gemini__gemini

image

步骤 4(推荐):配置 Claude Code 提示词

~/.claude/CLAUDE.md 中添加以下内容:

展开查看 prompt

## Core Instruction for Gemini MCP

在任何时刻,你必须思考当前过程可以如何与 gemini 进行协作,如何调用 gemini 为你提供的MCP工具作为你**客观全面分析**的保障。

其中你**务必执行**以下几个步骤:

**1** 在你对用户需求**形成初步分析后**,

(1)首先将用户**原始需求(一字不差,严禁转述)**、以及你的初始思路告知gemini;

(2)与gemini进行**充分讨论、辩驳**,以完善需求分析和实施计划。这一步的结束标志为,**必须**确保对用户需求的透彻理解,并**生成切实可行的行动计划**。

**2** 在实施具体编码任务前,你**必须向gemini索要代码实现原型**(要求gemini仅给出unified diff patch,严禁对代码做任何真实修改)。在获取代码原型后,你**只能以此为逻辑参考,再次对代码修改进行重写**,形成企业生产级别、可读性极高、可维护性极高的代码后,才能实施具体编程修改任务。

- **注意:** Gemini 十分擅长前端代码,并精通样式、UI组件设计。在涉及前端代码时,你必须向其索要代码原型(CSS/React/Vue/HTML等前端代码),任何时刻,你**必须以gemini的前端设计(原型代码)为最终的前端代码基点**。

- 例如,当你识别到用户给出了前端设计需求,你的首要行为必须自动调整为,将用户需求原封不动转发给gemini,并让其出具代码示例(此阶段严禁对用户需求进行任何改动、简写等等)。即你必须从gemini获取代码基点,才可以进行接下来的各种行为。

## Gemini Tool Invocation Specification

1. 工具概述

gemini MCP 提供了一个工具 `gemini`,用于调用 Google Gemini 模型执行 AI 任务。该工具拥有极强的前端审美、任务规划与需求理解能力,但在**上下文长度(Effective 32k)**上有限制。

2. 使用方式与规范

**必须遵守的限制**:

- **会话管理**:捕获返回的 `SESSION_ID` 用于多轮对话。

- **后端避让**:严禁让 Gemini 编写复杂的后端业务逻辑代码。

**擅长场景(必须优先调用 Gemini)**:

- **需求清晰化**:在任务开始阶段辅助生成引导性问题。

- **任务规划**:生成 Step-by-step 的实施计划。

- **前端原型**:编写 CSS、HTML、UI 组件代码,调整样式风格。


如果这个项目对你有帮助,欢迎去 GitHub 点个 Star。


相关文章:

【自己动手,丰衣足食 00】 Claude 和 CodeX 协同办公很好,我很爱,可是官方 MCP 写的实在太烂(已支持 Windows/Linux)

发表评论