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
}

使用場景

測試

# 驗證安裝
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 協議      ┌─────────────────┐
│   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。