Page Design Guide MCP

🚀 ページデザインガイドMCPサーバー

MCP（Model Context Protocol）サーバーで、LLMがより良く、よりモダンなウェブページを生成するためのデザインガイダンスを提供します。このサーバーはコードテンプレートを提供するのではなく、デザイン原則とベストプラクティスを教えることに焦点を当てています。

✨ 主な機能

• [layout] レイアウトガイダンス - Fパターン、Zパターン、ベントグリッドなどの使用時期と方法
• [palette] 色彩心理学 - 色の意味、配色タイプ、パレット推奨案
• [type] タイポグラフィ - 階層構造、フォントの組み合わせ、読みやすさのベストプラクティス
• [grid] レスポンシブデザイン - モバイルファーストの戦略とブレイクポイントガイダンス
• [layers] 視覚的な階層構造 - コントラスト、余白、配置の原則
• [component] コンポーネントガイダンス - ボタン、カード、フォーム、ナビゲーションのデザイン原則
• [motion] アニメーション原則 - タイミング、目的、パフォーマンスの考慮事項
• [accessibility] アクセシビリティ - WCAG準拠、コントラスト比、セマンティックHTML
• [sparkles] モダンなトレンド - 現在のデザイントレンドと使用時期
• [check] デザインレビュー - デザインの説明を分析し、推奨事項を取得

📦 インストール

Claude Desktopでのセットアップ

Claude Desktopの設定ファイルに以下を追加してください。

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

オプション1: グローバルインストール（推奨）

{
  "mcpServers": {
    "page-design-guide": {
      "command": "npx",
      "args": ["-y", "page-design-guide-mcp"]
    }
  }
}

オプション2: ローカルインストール

{
  "mcpServers": {
    "page-design-guide": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/page-design-guide-mcp/build/index.js"]
    }
  }
}

/absolute/path/to をプロジェクトの node_modules ディレクトリの実際のパスに置き換えてください。

OpenCodeでのセットアップ

opencode.json 設定ファイルに以下を含める必要があります。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "page-design-guide": {
      "type": "local",
      "command": ["npx", "-y", "page-design-guide-mcp"],
      "enabled": true
    }
  }
}

💻 使用例

接続後、Claudeに以下のような質問をすることができます。

• "このランディングページにはどのデザイン原則を守るべきですか？"
• "ポートフォリオサイトに最適なレイアウトはどれですか？"
• "信頼感とプロフェッショナリズムを伝える色は何ですか？"
• "ヒーローセクションをどのように構成すべきですか？"
• "タイポグラフィで避けるべき一般的な間違いは何ですか？"
• "これをアクセシブルにするにはどうすればいいですか？"
• "このECサイトのページのデザインアプローチをレビューしてください"

基本的な使用法

# 接続後、Claudeに質問を投げる例
# 例えば、ランディングページのデザイン原則について質問
question = "このランディングページにはどのデザイン原則を守るべきですか？"
# Claudeに質問を送信するコードは省略

📚 ドキュメント

利用可能なツール

get_design_principles

基本的なデザイン原則（階層構造、余白、コントラスト、配置など）とガイドライン、避けるべき一般的な間違いを取得します。

get_layout_guidance

ページタイプに基づいたレイアウト推奨案を取得します。Fパターン、Zパターン、ベントグリッド、スプリットスクリーンなどの使用時期と理由を説明します。

get_color_guidance

色彩心理学、配色タイプ（モノクロマティック、補色など）、ムードと業界に基づいたパレット推奨案を取得します。

get_typography_guidance

タイポグラフィの階層構造、異なるスタイルのフォントの組み合わせ推奨案、読みやすいテキストのベストプラクティスを取得します。

get_section_guidance

特定のページセクション（ヘッダー、ヒーロー、機能、推薦文、価格、CTA、フッター、FAQ）のガイダンスを取得します。目的、構造、ベストプラクティスが含まれます。

get_responsive_guidance

レスポンシブデザインの原則、ブレイクポイント戦略、モバイルファーストのベストプラクティスを取得します。

get_component_guidance

UIコンポーネント（ボタン、カード、フォーム、ナビゲーション、モーダル、アイコン）のデザインガイダンスを取得します。サイズ、状態、アクセシビリティが含まれます。

get_animation_guidance

アニメーションの原則、タイミングガイドライン、異なるタイプのモーションのパフォーマンスの考慮事項を取得します。

get_accessibility_guidance

アクセシビリティ要件（コントラスト比、フォーカス状態、セマンティックHTML、モーションの設定）を取得します。

get_modern_trends

現在のウェブデザイントレンド（2024 - 2026）と、適切な使用時期と方法のガイダンスを取得します。

review_design_approach

デザインを説明し、スコア、特定された強み、懸念事項、推奨事項を含むフィードバックを取得します。

🔧 技術詳細

プロジェクト構造

page-design-guide-mcp/
├── src/
│   └── index.ts          # メインのMCPサーバーコード
├── build/                # コンパイルされたJavaScript（自動生成）
├── package.json
├── tsconfig.json
└── README.md

開発

変更時に自動再構築する開発用コマンドは以下です。

npm run watch

必要条件

• Node.js >= 18.0.0
• Claude Desktopアプリ

📄 ライセンス

MIT