AI导哈

Gemini设计代理MCP服务器

集成Google Gemini AI作为Claude Code的设计代理，提供全面的UI/UX设计支持。

  • by scottshapiro142
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 scottshapiro142/gemini-design-mcp

使用说明

Gemini设计代理MCP服务器

一个MCP服务器，集成了谷歌的Gemini AI作为Claude Code的设计代理，提供全面的UI/UX设计支持。

部署选项

  • 本地（stdio）： 使用stdio传输使用Claude代码在本地运行- 请参阅设置 在......下面
  • 远程（HTTP/SSE）： 部署到Railway进行远程访问- 请参阅快速入门

特性

此MCP服务器提供6个专用设计工具：

  1. gemini_design_建议 -获取组件、布局和用户流的UI/UX设计建议
  2. 双子座设计批评 -获得设计批评和改进建议
  3. 双子座设计 -分析前端代码以改进设计
  4. 双子座设计暴雨 -生成多种设计变体和创意概念
  5. 双子座设计系统 -获得全面的设计系统建议
  6. gemini_user_flow -分析和优化用户流量和旅程

设置

1.安装依赖项

cd gemini-design-mcp
npm install

2.获取Gemini API密钥

  1. 首选 谷歌人工智能工作室
  2. 创建新的API密钥
  3. 复制密钥

3.配置克劳德代码

将此MCP服务器添加到您的Claude Code配置中：

地点： ~/.config/claude-code/mcp_settings.json

{
  "mcpServers": {
    "gemini-design": {
      "command": "node",
      "args": ["/Users/scottshapiro/Documents/GitHub/gemagent/gemini-design-mcp/index.js"],
      "env": {
        "GEMINI_API_KEY": "YOUR_GEMINI_API_KEY_HERE"
      }
    }
  }
}

替换：

  • YOUR_GEMINI_API_KEY_HERE 使用您的实际Gemini API密钥
  • 如果移动了服务器目录，请调整路径

4.重新启动克劳德代码

保存配置后，重新启动Claude Code以加载MCP服务器。

使用示例

配置后，我（Claude）可以自动使用这些工具。以下是您可以要求我如何使用它们的示例：

设计建议

"Use Gemini to suggest a design for a SaaS pricing page"
"Get Gemini's ideas for a mobile app onboarding flow"

设计评论

"Have Gemini critique this component design: [description]"
"Get Gemini's feedback on the accessibility of this layout"

代码分析

"Ask Gemini to analyze this React component for design improvements"
"Get Gemini's thoughts on this CSS layout code"

创意头脑风暴

"Have Gemini generate 4 different design directions for our landing page"
"Get Gemini to brainstorm color schemes for a fintech app"

设计系统

"Use Gemini to create a design system for our e-commerce platform"
"Get Gemini's recommendations for a component library"

用户流量分析

"Have Gemini map out the checkout flow and find friction points"
"Get Gemini to design a user onboarding journey"

运作原理

  1. 你让我（克劳德）从双子座那里获得设计输入
  2. 我自动调用相应的MCP工具
  3. 该工具将您的请求发送到Gemini的API
  4. Gemini提供设计建议
  5. 我将Gemini的建议融入我的回应和实施中

这创建了一个协作工作流程，两个AI模型都发挥了各自的优势。

模型选择

服务器使用 gemini-2.0-flash-exp 默认情况下，用于快速、经济高效的响应。您可以在中修改模型 index.js 如果需要的话。

故障排除

MCP服务器未加载

  1. 检查路径是否正确 mcp_settings.json 是正确的
  2. 验证是否安装了Node.js： node --version
  3. 检查克劳德代码日志中的错误消息

API关键问题

  1. 验证Gemini API密钥是否有效
  2. 检查您是否已更换 YOUR_GEMINI_API_KEY_HERE 在配置中
  3. 确保密钥在Google AI Studio中具有适当的权限

工具未出现

  1. 完全重新启动Claude代码
  2. 检查 mcp_settings.json 语法是有效的JSON
  3. 验证服务器启动时没有错误： npm start （应显示“Gemini Design MCP服务器正在运行”）

成本考虑

  • Gemini API有一个带有慷慨限制的免费等级
  • 每个设计请求都算作一个API调用
  • 监控使用情况 谷歌人工智能工作室

许可证

麻省理工学院

相关 MCP