AI导哈

UI设计服务器

Gemini UI Design Server是一款企业级UI/UX设计和前端实现专家服务，通过MCP协议集成Google Gemini 2.5 PRO，提供组件设计、代码审查、前端代码生成、架构咨询和品牌设计等功能。

  • by bobvasic
  • JavaScript
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 bobvasic/gemini-mcp-server

使用说明

双子座UI设计服务器

企业级UI/UX设计与前端实现专家

MCP服务器 · 双子座2.5 PRO · 企业架构

🎯 SPECIALIZED AI AGENT FOR UI/UX DESIGN & FRONTEND ARCHITECTURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Integrates Google Gemini 2.5 PRO as a world-class UI designer
accessible via MCP protocol from Claude AI in Warp Terminal

🏗️ 架构概述

专为MCP设计的服务器 通过Gemini 2.5 PRO提供企业级的UI/UX设计专业知识。其架构支持在Warp Terminal的代理开发环境中实现Claude到Gemini的无缝代理间通信。

核心能力

┌─────────────────────────────────────────────────────────────┐
│  GEMINI 2.5 PRO UI DESIGN SPECIALIST                        │
├─────────────────────────────────────────────────────────────┤
│  ► Design UI Components      - Enterprise-grade components  │
│  ► Review Implementations    - WCAG AAA compliance          │
│  ► Generate Frontend Code    - Production-ready artifacts   │
│  ► Architecture Consultation - Scalable system design       │
│  ► Brand Identity Design     - Cohesive visual systems      │
└─────────────────────────────────────────────────────────────┘

🚀 快速入门

先决条件

  • Node.js ≥ 18.0.0
  • “Warp Terminal”可以翻译为“曲速终端”或“跃迁终端”，具体取决于上下文和该术语在特定领域中的常用表达。在科幻或太空探索相关的语境中，“曲速”（Warp）通常指的是超越光速的旅行技术，因此“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终端 以激活。

🎨 工具参考

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
}

🔧 技术规格

协议架构

  • MCP SDK 1.0.4（中文可译为：“MCP软件开发工具包 1.0.4”）
  • 标准I/O传输层
  • JSON架构验证
  • 异步/等待事件循环

AI模型配置

  • 模型： gemini-2.5-pro
  • 温度：0.7
  • 最大令牌数：8192
  • 优化提示工程

集成模式

┌──────────────┐      MCP Protocol      ┌─────────────────┐
│   Claude AI  │ ←──────────────────────→│  Gemini 2.5 PRO │
│  (Warp IDE)  │   UI/UX Consultation   │  (UI Designer)  │
└──────────────┘                         └─────────────────┘
       ↓                                           ↓
  Development                            Design Specifications
  Implementation                         Component Architecture
  Code Generation                        Brand Systems

📋 提示工程

Gemini 2.5 PRO的提示设计遵循了谷歌官方的最佳实践原则：

✓ 结构化角色定义 - 明确建立专家人设
✓ 上下文规范 - 全面的需求框架构建
✓（对号，表示正确或同意） 可交付成果分类体系 - 明确的输出结构定义
✓ 约束声明 - WCAG（网页内容无障碍指南），性能，框架要求
✓ 质量门（或质量控制点） - 企业级、生产就绪的授权（或任务/要求）

🔒 安全架构

  • “Zero Credential Hardcoding” 可以翻译为“零凭据硬编码”。不过，这个翻译可能需要根据具体上下文进行微调，因为“凭据”（Credential）在信息安全领域通常指的是用户名、密码等用于身份验证的信息，而“硬编码”（Hardcoding）则指的是在程序代码中直接写入这些信息的做法。因此，更准确的翻译可能是“不硬编码凭据”或“避免凭据硬编码”，以强调避免在代码中直接存储敏感凭据的做法 - 环境变量隔离
  • API密钥验证 - 启动验证，快速失败
  • 错误清理（或错误规范化处理） - 错误信息中不包含敏感数据
  • 依赖项审计 - 0个漏洞（已验证）

安全联系人info@cyberlinksec.com（可译为：邮箱地址：info@cyberlinksec.com）

📚 文档

🎯 应用场景

场景 工具链
组件库 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

🧪 测试

# Verify installation
export GEMINI_API_KEY="your-key"
npm start
# Expected: "Gemini MCP Server running on stdio"

# Test via Claude in Warp
# Call tool: gemini-ui-designer/design_ui_component

📞 支持

技术问题 → GitHub Issues（在GitHub上的问题/议题）
安全顾虑 → info@cyberlinksec.com（邮箱地址保持不变，直接翻译为中文表达即为“邮箱：info@cyberlinksec.com”，但通常在实际应用中，我们直接保留原英文形式）
企业咨询 → 格式化为“赛博链接安全”（注：此处“CyberLink”通常被翻译为“赛博链接”或根据具体品牌策略可能有所不同，但在此直接采用音译加意译的方式，同时“Security”翻译为“安全”）

📄 许可证

MIT 许可证 - 版权所有 © 2025 CyberLink Security

专为企业级UI/UX开发而构建

由CyberLink Security设计 | 由Gemini 2.5 PRO提供支持

相关 MCP