Page Design Guide Mcp Server

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

LLM がより優れた、より現代的な Web ページを生成できるよう、デザインの指針を提供する MCP（Model Context Protocol）サーバーです。このサーバーは、コードテンプレートを提供するのではなく、デザインの原則とベストプラクティスを教えることに重点を置いています。

機能

• [layout] レイアウトガイド - F パターン、Z パターン、Bento Grid などをいつ、どのように使うか
• [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 にできます。

• 「このランディングページでは、どのようなデザイン原則に従うべきですか？」
• 「ポートフォリオサイトに最適なレイアウトはどれですか？」
• 「信頼感と専門性を伝える色は何ですか？」
• 「ヒーローセクションはどのように構成すべきですか？」
• 「タイポグラフィで避けるべき一般的な間違いは何ですか？」
• 「これをアクセシブルにするにはどうすればよいですか？」
• 「この E コマースページのデザイン方針をレビューしてください」

利用可能なツール

get_design_principles

階層、余白、コントラスト、配置などの基本的なデザイン原則について、ガイドラインや避けるべき一般的な間違いとともに取得します。

get_layout_guidance

ページの種類に基づいたレイアウトの推奨事項を取得します。F パターン、Z パターン、Bento Grid、Split Screen などをいつ、なぜ使うべきかを説明します。

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

現在の Web デザイントレンド（2024-2026）について、適切な活用方法とタイミングのガイダンスを取得します。

review_design_approach

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

プロジェクト構成

page-design-guide-mcp/
├── src/
│   └── index.ts          # Main MCP server code
├── build/                # Compiled JavaScript (generated)
├── package.json
├── tsconfig.json
└── README.md

開発

変更時に自動で再ビルドする開発方法：

npm run watch

要件

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

ライセンス

MIT