AI导哈

UI代码生成服务

一个利用Gemini 2.5 Flash生成前端UI代码的MCP服务器，支持从文本描述或截图生成代码，并提供代码迭代优化功能。

  • by hichammoods
  • HTML
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 hichammoods/mcp-design-gemini

使用说明

Gemini设计MCP服务器

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

工具

工具 说明
gemini_design 从文本描述生成UI代码
gemini_screenshot_to_code 从屏幕截图图像再现UI
gemini_refine 使用编辑指令迭代优化现有代码

设置

1.克隆并安装

git clone <repo-url>
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 提示立即从缓存返回
  • 动态代币预算 --将输出大小与组件复杂性相匹配
  • 迭代优化 --编辑生成的代码，而无需从头开始重新生成

需求

相关 MCP