design-inspiration

Dribbble、Behance、Awwwards、Mobbin、Pinterest でUIデザインのインスピレーションを検索するMCPサーバー。Claude Code用に構築されていますが、あらゆるMCPクライアントで動作します。

Serper API（Google検索）をsite:フィルタと組み合わせて使用し、結果をデザインプラットフォームのみに限定します。また、ヘッドレスブラウザ経由で任意のライブWebサイトから実際のデザイントークン（色、フォント、スペーシング）を抽出することもできます。

インスピレーションを見つけて、気に入ったサイトから正確なトークンを抽出しましょう。

なぜ作ったか

UIを構築しながらClaudeにデザインの参考を引っ張ってきてほしいと思いました——実際のDribbbleのショットを見たり、カラーパレットを見つけたり、レイアウトパターンを閲覧したり——ターミナルから離れることなく。既存の選択肢はPlaywrightが必要（重い）か、実際にダウンロードして表示できる画像URLを返さないかのどちらかでした。

検索側はSerperの画像検索・Web検索エンドポイントを、事前設定済みのサイトフィルタでラップしているだけです。シンプルです。

トークン抽出側は別のニーズから生まれました。Dribbbleで気に入ったサイトを見つけて開き、それから手動でスポイトで色を拾い、フォントを調べるという手間を省きたかったのです。今はdesign_extract_tokensにURLを渡すだけで、正確な値が返ってきます。

ツール

design_search_images — デザインプラットフォームを横断した画像検索。画像URL、寸法、ソースリンクを返します。特定のUIパターンのビジュアルリファレンスを見つけるのに適しています。

design_search_references — デザインサイトに限定したWeb検索。記事タイトル、スニペット、リンクを返します。ケーススタディ、デザインシステムのドキュメント、パターンの解説を見つけるのに適しています。

design_search_styles — 特定の美的方向性（カラーパレット、タイポグラフィ、レイアウト、アニメーション）を検索します。画像検索とWeb検索を並列で実行し、結合結果を返します。

design_extract_tokens — ライブWebサイトからデザイントークンを抽出します。任意のURLを指定すると、色、タイポグラフィ、スペーシング、ボーダー半径、シャドウが返ってきます。dark_modeフラグとmobileフラグに対応。dembrandtがグローバルにインストールされている必要があります（npm install -g dembrandt）。

3つの検索ツールはsitesパラメータで特定のプラットフォームに絞り込め、numパラメータで結果数を制御できます。

セットアップ

検索ツールにはSerper APIキーが必要です。無料枠ではクレジットカード不要で2,500回の検索が利用できます。

1. serper.devでサインアップ

2. APIキーをコピー

トークン抽出には、dembrandtをグローバルにインストールします:

npm install -g dembrandt

Claude Code

claude mcp add design-inspiration -e SERPER_API_KEY=your-key-here -- node /path/to/design-inspiration-mcp-server/dist/index.js

その他のMCPクライアント（stdio）

{
  "design-inspiration": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/design-inspiration-mcp-server/dist/index.js"],
    "env": {
      "SERPER_API_KEY": "your-key-here"
    }
  }
}

ソースからビルド

git clone https://github.com/YonasValentin/design-inspiration-mcp-server.git
cd design-inspiration-mcp-server
npm install
npm run build

実際の仕組み

各ツールは、検索した内容にsite:dribbble.com OR site:behance.net OR ...を追加して検索クエリを構築します。その後、Serperの/imagesまたは/searchエンドポイントを呼び出し、レスポンスを整形します。

design_search_stylesツールは両方のエンドポイントを並列（Promise.all）で実行し、同じクエリの画像と記事を取得します。

design_extract_tokensはchild_process.execFile経由でdembrandtを--json-onlyフラグ付きでシェル実行し、JSON出力をパースしてマークダウン＋構造化データに整形します。タイムアウトは60秒。追加のnpm依存関係はありません——dembrandtはグローバルCLIとして動作し、child_processは組み込みです。

結果は表示用のマークダウンとプログラム利用用の構造化JSONの両方で返されます。レスポンスはコンテキストウィンドウを圧迫しないよう25,000文字で切り詰められます。

使用上のヒント

汎用的な用語ではなく、具体的なUIパターンを検索してください:

# good
"fintech dashboard dark mode"
"mobile onboarding flow card swipe"
"saas pricing page comparison table"

# too vague
"nice website"
"good design"

返された画像URLをダウンロードして、Claudeに直接表示させることができます:

curl -sL "https://cdn.dribbble.com/..." -o /tmp/reference.jpg

その後、Claudeに画像ファイルを読むよう指示してください——デザインを見て説明できます。

ライセンス

MIT

宣言型3Dアセットワークフロー

リファレンスは、サイトのコンセプトに3Dアセットが必要であることを宣言できます。design_prepare_referencesは要件を検証し、assetPlanを返します。ファイルの作成、Blenderの呼び出し、他のMCPの起動は行いません。

アセットプランにroute: "blender"が含まれる場合、ホストアプリケーションまたはエージェントはそのタスクを利用可能なBlender MCPにルーティングする必要があります。これはホストレベルのルーティングであり、このサーバーが実行する呼び出しではありません。アセットIDと受け入れ要件はBlenderタスクに保持してください。

ハンドオフの形としてはexamples/blender-asset-task.jsonを使用してください。主題、ビジュアルの意図、カメラ、構図、マテリアル、ライティング、アニメーション、Web対応出力形式、パフォーマンス制限、受け入れ期待値を含めてください。Web出力には通常、圧縮された.glbまたは.gltfに加えて、.pngまたは.webpのフォールバックが含まれます。受け入れでは、クリーンなビューアでの読み込み、フレーミング、マテリアル、アニメーション、パフォーマンス予算を検証します。

期待されるハンドオフ: design_prepare_references -> assetPlan.route = "blender" -> ホストアプリケーション -> Blender MCP -> ネイティブサイト実装とブラウザQA。

ユーザーの承認なしに、宣言された3D要件をCSSやプレースホルダーに置き換えないでください。Blenderが利用できない場合は、ブロックされたアセットタスクを報告し、宣言型ハンドオフを保持してください。