MCP Design Gemini

Gemini设计MCP服务器

使用MCP（模型上下文协议）的服务器 双子座2.5闪光灯 以生成前端UI代码。适用于Claude Code、Cursor和任何兼容MCP的客户端。

工具

设置

1.克隆并安装

git clone 
cd mcp-design-gemini
python -m venv .venv
source .venv/bin/activate   # Windows: .venv\Scripts\activate
pip install -r requirements.txt

2.添加Gemini API密钥

创建一个 .env 项目根目录中的文件：

GEMINI_API_KEY=your_api_key_here

在获取免费API密钥 aistudio.google.com.

3.在Claude代码中配置

将此添加到您的Claude Code MCP设置中(~/.claude/claude_code_config.json):

{
  "mcpServers": {
    "gemini-design": {
      "command": "/ABSOLUTE/PATH/TO/mcp-design-gemini/.venv/bin/python",
      "args": ["/ABSOLUTE/PATH/TO/mcp-design-gemini/server.py"]
    }
  }
}

替换 /ABSOLUTE/PATH/TO/ 使用机器上的实际路径。

4.重新启动克劳德代码

当Claude Code调用其任何工具时，服务器会自动启动。

使用示例

生成UI：

“为SaaS产品设计定价页面”

转换屏幕截图：

“将此屏幕截图转换为代码：/path/to/screencast.png”

优化现有代码：

“将背景更改为深蓝色，并使字体变大”

控制代币预算 （on gemini_design):

• complexity: "small" --8K代币（按钮、卡）
• complexity: "medium" --16K代币（形式，导航栏）
• complexity: "large" --32K令牌（整页，默认）
• complexity: "xl" --64K代币（仪表板，多页）

特性

• 图像压缩 --截图在发送到Gemini之前会自动调整大小（节省50-80%的输入令牌）
• 响应缓存 --完全相同 gemini_design 提示立即从缓存返回
• 动态代币预算 --将输出大小与组件复杂性相匹配
• 迭代优化 --编辑生成的代码，而无需从头开始重新生成

需求

• Python 3.10+
• A. Gemini API密钥 （免费版作品）