デザイン参考用ジャンル別サイトMCP

ジャンル毎の人気サイトを参考にして、デザインのインスピレーションを得るためのMCPサーバーです。

何ができるか

• 10ジャンル（ニュース、SNS、EC、教育など）の人気サイトランキングを取得
• 各ジャンルの具体的なデザイン要素を分析：
  • カラートーン（メイン色、アクセント色、背景色）
  • ボタンの配置パターン（フローティング、固定、インライン）
  • レイアウト構造（グリッド、カード、リスト）
• 分析結果を元にコード生成時に自動的にデザインを踏襲

使い方

1. インストール

npm install

2. テスト（ブラウザで確認）

npx @modelcontextprotocol/inspector .

3. Claude Desktopで使用

npmから実行（推奨）

{
  "mcpServers": {
    "mcp-design-reference": {
      "command": "npx",
      "args": ["mcp-design-reference"]
    }
  }
}

GitHubから直接実行

{
  "mcpServers": {
    "mcp-design-reference": {
      "command": "npx",
      "args": ["github:kirinnokubinagai/mcp-design-reference"]
    }
  }
}

使用例

Claudeでの会話例：

あなた: 「SNSアプリを作りたい」

Claude（裏側の動作）:

1. MCPが人気SNSサイトのデザイン要素を自動分析
2. 色のトーン（青系・白基調）、ボタン配置（右下フローティング）などを抽出
3. これらのデザイン要素を踏襲したプロジェクトを作成

結果: 人気SNSのデザインパターンを取り入れたアプリが完成（説明不要で視覚的に優れたUI）

技術仕様

• データソース: Tranco List（無料・毎日更新）
• APIキー: 不要
• キャッシュ: 24時間有効（高速レスポンス）

npm公開手順（メンテナー向け）

1. npmにログイン

npm login

2. パッケージを公開

npm publish --access public

ライセンス

MIT