Gemini设计MCP服务器
使用MCP（模型上下文协议）的服务器 双子座2.5闪光灯 以生成前端UI代码。适用于Claude Code、Cursor和任何兼容MCP的客户端。
工具
| 工具 | 说明 |
|---|---|
gemini_design | 从文本描述生成UI代码 |
gemini_screenshot_to_code | 从屏幕截图图像再现UI |
gemini_refine | 使用编辑指令迭代优化现有代码 |
设置
1.克隆并安装
git clone
cd mcp-design-gemini
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -r requirements.txt2.添加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密钥 （免费版作品）