gemini-mcp-server

🚀 Gemini UI Design Server

Gemini UI Design Server 是一款专注于企业级 UI/UX 设计与前端实现的专业工具。它借助 Google Gemini 2.5 PRO，提供从 UI 组件设计到前端代码生成等一系列服务，为企业的前端开发提供强大支持。

🚀 快速开始

前提条件

• Node.js ≥ 18.0.0
• Warp Terminal（最新版本）
• Gemini API 密钥 → 获取密钥

安装

git clone https://github.com/bobvasic/gemini-ui-design-server.git
cd gemini-ui-design-server
npm install
chmod +x index.js setup.sh

配置

方法 1：自动设置

./setup.sh YOUR_GEMINI_API_KEY

方法 2：手动 Warp MCP 配置 将以下内容添加到 ~/.config/warp/mcp.json：

{
  "mcpServers": {
    "gemini-ui-designer": {
      "command": "node",
      "args": ["${HOME}/gemini-ui-design-server/index.js"],
      "env": {
        "GEMINI_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

重启 Warp Terminal 以激活配置。

✨ 主要特性

核心功能

┌─────────────────────────────────────────────────────────────┐
│  GEMINI 2.5 PRO UI DESIGN SPECIALIST                        │
├─────────────────────────────────────────────────────────────┤
│  ► Design UI Components      - 企业级组件设计               │
│  ► Review Implementations    - WCAG AAA 合规性审查           │
│  ► Generate Frontend Code    - 生成可用于生产的前端代码       │
│  ► Architecture Consultation - 可扩展系统的前端架构咨询       │
│  ► Brand Identity Design     - 打造统一的品牌视觉系统         │
└─────────────────────────────────────────────────────────────┘

📦 安装指南

安装步骤

git clone https://github.com/bobvasic/gemini-ui-design-server.git
cd gemini-ui-design-server
npm install
chmod +x index.js setup.sh

配置方式

自动设置

./setup.sh YOUR_GEMINI_API_KEY

手动配置 添加到 ~/.config/warp/mcp.json：

{
  "mcpServers": {
    "gemini-ui-designer": {
      "command": "node",
      "args": ["${HOME}/gemini-ui-design-server/index.js"],
      "env": {
        "GEMINI_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

重启 Warp Terminal 生效。

💻 使用示例

基础用法

design_ui_component

{
  component_type: string;      // button, form, card, navigation, hero
  requirements: string;         // Detailed specs, brand, accessibility
  framework?: string;           // React, Vue, Angular, Svelte
  design_system?: string;       // Material, Tailwind, Custom
}

高级用法

review_ui_implementation

{
  code: string;                 // Frontend code to analyze
  framework?: string;           // React, Vue, Angular
  review_focus?: enum;          // accessibility | performance | ux | visual-design | responsive | all
}

📚 详细文档

工具参考

design_ui_component

企业级组件设计，采用无障碍优先的方法。

{
  component_type: string;      // button, form, card, navigation, hero
  requirements: string;         // Detailed specs, brand, accessibility
  framework?: string;           // React, Vue, Angular, Svelte
  design_system?: string;       // Material, Tailwind, Custom
}

review_ui_implementation

专业代码审查，验证 WCAG 合规性。

{
  code: string;                 // Frontend code to analyze
  framework?: string;           // React, Vue, Angular
  review_focus?: enum;          // accessibility | performance | ux | visual-design | responsive | all
}

generate_frontend_code

生成可用于生产的代码，支持 TypeScript。

{
  specification: string;        // Detailed implementation requirements
  framework?: string;           // React, Vue, Angular, Svelte
  styling_approach?: string;    // Tailwind, CSS Modules, Styled Components
  typescript?: boolean;         // Default: true
}

ui_architecture_consultation

为可扩展系统提供战略前端架构指导。

{
  project_context: string;              // Scale, team, constraints
  consultation_topic: enum;             // component-architecture | state-management 
                                        // design-system | performance | testing | deployment
}

brand_identity_design

创建统一的品牌标识和设计系统。

{
  brand_requirements: string;           // Values, audience, industry, emotions
  deliverables?: string;                // color-palette,typography,components,spacing
}

使用场景

| 场景 | 工具链 | |------|------| | 组件库 | design_ui_component → generate_frontend_code → review_ui_implementation | | 设计系统 | brand_identity_design → ui_architecture_consultation → generate_frontend_code | | 代码优化 | review_ui_implementation → 重构 → review_ui_implementation | | 架构规划 | ui_architecture_consultation → design_ui_component → generate_frontend_code |

测试

# 验证安装
export GEMINI_API_KEY="your-key"
npm start
# 预期输出: "Gemini MCP Server running on stdio"

# 在 Warp 中通过 Claude 测试
# 调用工具: gemini-ui-designer/design_ui_component

支持

技术问题 → GitHub Issues
安全问题 → info@cyberlinksec.com
企业咨询 → CyberLink Security

🔧 技术细节

技术规格

| 属性 | 详情 | |------|------| | 协议架构 | MCP SDK 1.0.4、Stdio 传输层、JSON 模式验证、异步/等待事件循环 | | AI 模型配置 | 模型：gemini-2.5-pro；温度：0.7；最大令牌数：8192；优化的提示工程 |

集成模式

┌──────────────┐      MCP 协议      ┌─────────────────┐
│   Claude AI  │ ←──────────────────────→│  Gemini 2.5 PRO │
│  (Warp IDE)  │   UI/UX 咨询服务   │  (UI 设计师)    │
└──────────────┘                         └─────────────────┘
       ↓                                           ↓
  开发实施                            设计规格
  代码生成                            组件架构
                                        品牌系统

提示工程

Gemini 2.5 PRO 提示遵循 Google 官方最佳实践进行设计： ✓ 结构化角色定义 - 明确专家角色
✓ 上下文规范 - 全面的需求框架
✓ 可交付成果分类 - 明确输出结构
✓ 约束声明 - WCAG、性能、框架要求
✓ 质量关卡 - 企业级、可用于生产的要求

安全架构

• 零凭证硬编码 - 环境变量隔离
• API 密钥验证 - 启动时验证，快速失败
• 错误清理 - 错误消息中不包含敏感数据
• 依赖审计 - 0 漏洞（已验证）

安全联系：info@cyberlinksec.com

📄 许可证

本项目采用 MIT 许可证 - 版权所有 © 2025 CyberLink Security。