Gemini MCP Server

🚀 Gemini UI Design Server

エンタープライズレベルのUI/UXデザインとフロントエンド実装の専門サーバーです。Google Gemini 2.5 PROを活用し、MCPプロトコルを通じて高品質なUI/UXデザインを提供します。

🎯 UI/UXデザインとフロントエンドアーキテクチャのための専用AIエージェント
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
世界クラスのUIデザイナーとしてGoogle Gemini 2.5 PROを統合し、
Warp Terminal内のClaude AIからMCPプロトコルを介してアクセス可能です。

🚀 クイックスタート

前提条件

• Node.js ≥ 18.0.0
• Warp Terminal (最新版)
• Gemini API Key → キーを取得

インストール

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                        │
├─────────────────────────────────────────────────────────────┤
│  ► UIコンポーネントの設計      - エンタープライズレベルのコンポーネント  │
│  ► 実装のレビュー        - WCAG AAA準拠の確認          │
│  ► フロントエンドコードの生成  - 本番環境で使用可能なアーティファクト   │
│  ► アーキテクチャのコンサルティング - スケーラブルなシステム設計       │
│  ► ブランドアイデンティティの設計 - 統一感のあるビジュアルシステム      │
└─────────────────────────────────────────────────────────────┘

📚 ドキュメント

ツールリファレンス

design_ui_component

アクセシビリティを重視したエンタープライズレベルのコンポーネント設計

{
  component_type: string;      // button, form, card, navigation, hero
  requirements: string;         // 詳細な仕様、ブランド、アクセシビリティ
  framework?: string;           // React, Vue, Angular, Svelte
  design_system?: string;       // Material, Tailwind, Custom
}

review_ui_implementation

WCAG準拠の検証を含むエキスパートコードレビュー

{
  code: string;                 // 分析するフロントエンドコード
  framework?: string;           // React, Vue, Angular
  review_focus?: enum;          // accessibility | performance | ux | visual-design | responsive | all
}

generate_frontend_code

TypeScriptをサポートした本番環境で使用可能なコード生成

{
  specification: string;        // 詳細な実装要件
  framework?: string;           // React, Vue, Angular, Svelte
  styling_approach?: string;    // Tailwind, CSS Modules, Styled Components
  typescript?: boolean;         // デフォルト: true
}

ui_architecture_consultation

スケーラブルなシステムのための戦略的なフロントエンドアーキテクチャガイダンス

{
  project_context: string;              // 規模、チーム、制約条件
  consultation_topic: enum;             // component-architecture | state-management 
                                        // design-system | performance | testing | deployment
}

brand_identity_design

統一感のあるブランドアイデンティティとデザインシステムの作成

{
  brand_requirements: string;           // 価値観、対象ユーザー、業界、感情
  deliverables?: string;                // color-palette,typography,components,spacing
}

🔧 技術詳細

技術仕様

統合パターン

┌──────────────┐      MCP Protocol      ┌─────────────────┐
│   Claude AI  │ ←──────────────────────→│  Gemini 2.5 PRO │
│  (Warp IDE)  │   UI/UX Consultation   │  (UI Designer)  │
└──────────────┘                         └─────────────────┘
       ↓                                           ↓
  開発実装                            デザイン仕様
  コード生成                          コンポーネントアーキテクチャ
                                        ブランドシステム

📋 プロンプトエンジニアリング

Gemini 2.5 PROのプロンプトは、Googleの公式ベストプラクティスに従って設計されています。 ✓ 構造化されたロール定義 - 明確なエキスパートペルソナの設定
✓ コンテキストの指定 - 包括的な要件のフレーミング
✓ 成果物の分類 - 明示的な出力構造の定義
✓ 制約条件の宣言 - WCAG、パフォーマンス、フレームワークの要件
✓ 品質ゲート - エンタープライズレベル、本番環境で使用可能な要件

🔒 セキュリティアーキテクチャ

• クレデンシャルのハードコーディングなし - 環境変数の分離
• APIキーの検証 - 起動時の検証と即時エラー処理
• エラーメッセージのサニタイズ - エラーメッセージに機密データを含まない
• 依存関係の監査 - 脆弱性が0件 (検証済み)

セキュリティ連絡先: info@cyberlinksec.com

🎯 ユースケース

🧪 テスト

# インストールの検証
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

📄 ライセンス

MITライセンス - Copyright © 2025 CyberLink Security