inspo について
Inspo は、取得した本番環境の Web サイトのアーカイブ（配色、フォント、ページ分解、参照用 JSX など）をコーディングエージェントに提供する MCP サーバーです。UI を書く前にデザインの参照を必要とするエージェントや開発者を想定しています。
主な機能
- 01832 サイト・2,320 ページのアーカイブ
- 02コピーして使える JSX を含む 68 の参照コンポーネント
- 03DOM から抽出したサイトごとの DESIGN.md
- 04複数の検索を 1 回の呼び出しにまとめる recommend ツール
- 05読み取り専用のツールと SSRF 対策
- 06stdio と Streamable HTTP のトランスポート
活用シーン
- 01コーディングエージェントが UI 実装前に実サイトのレイアウトや配色を調べる
- 02価格表やフッターなど特定の参照セクションを探す
- 03サイトの DOM からタイプスケール、余白、CSS 変数を抽出する
MCP 対応
このプロジェクトは MCP サーバーであり、Web サイトのアーカイブ、参照コンポーネント、デザインシステムを照会する 15 個のツールを MCP クライアントに公開します。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://inspomcp.dev/api/mcpclaude mcp add --transport http nutlope-inspo https://inspomcp.dev/api/mcp{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}Cursor で開く{"servers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}VS Code で開く{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}{"mcpServers":{"nutlope-inspo":{"serverUrl":"https://inspomcp.dev/api/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
15| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| mode | enum | いいえ | ライトまたはダークlight | dark |
| vibe | enum | いいえ | ムード／雰囲気 — 「calm」「loud」「luxe」「technical」「soft」など。calm | loud | playful | serious | luxe | raw | soft | technical | warm | cold |
| color | enum | いいえ | 色を表す語 — 「warm」「cool」「monochrome」「neon」「earthy」。warm | cool | monochrome | neon | earthy | pastel | saturated | muted | high-contrast |
| limit | integer | いいえ | |
| query | string | いいえ | 探しているものを自然言語で説明します。例：「minimalist editorial agency portfolio」 |
| style | enum | いいえ | ビジュアルスタイルを 1 つに絞り込みます（例：「ミニマリズム」、「エディトリアル」）minimalism | editorial | brutalism | glassmorphism | swiss | maximalism | playful | dark-mode | monochrome | vintage | futurist |
| detail | enum | いいえ | 'standard'（デフォルト）：各行に northstar、パレット、フォント、軸、マクロ構造、タグを表示し、上位 3 件を折りたたみ領域ごとに詳しく分析します。'full'：すべての行を分析します（各約 300 トークン。すべて読む場合のみ使用してください）。'concise'：northstar、パレット、フォント。テキストプロファイルのデフォルトは concise です。concise | standard | full |
| device | enum | いいえ | 'mobile' は 375px のキャプチャペアがあるサイトに限定し、モバイルのサムネイルをインライン表示します。デフォルト：desktop。desktop | mobile |
| industry | enum | いいえ | 業界を 1 つに絞り込みます（例：「saas」、「fintech」、「portfolio」）agency | ai | architecture | automotive | consumer-tech | creator | crypto | culture | developer-tools | ecommerce | education | fashion | fintech | food-beverage | furniture | gaming | health | media | music | non-profit | portfolio | saas | travel | type-foundry |
| pageType | enum | いいえ | ページ種別で絞り込みます：'landing'（デフォルトのホームページ）、'pricing'、'features'、'auth'、'about'、'blog'、'changelog'、'docs'、'other'landing | pricing | features | auth | about | blog | changelog | docs | other |
| accentHue | enum | いいえ | アクセントカラーの色温度：'warm'（10～60°）、'cool'（200～300°）、'neutral'（低彩度）、'chromatic-other'（緑、マゼンタなどその他の色）。warm | cool | neutral | chromatic-other |
| maxTokens | integer | いいえ | この応答のおおよそのトークン上限です。順位の低い結果とサムネイルを削りますが、最上位の結果とすべての URL は保持されます。 |
| paperBand | enum | いいえ | キャプチャから測定した表面の明度：'dark'（<30% L）、'mid'（30～85%）、'light'（>85%）。タグ付けされた `mode` は約 15% の行で測定値と食い違うため、こちらのほうが信頼性があります。dark | mid | light |
| displayClass | enum | いいえ | ディスプレイ書体の構成：'grotesk-sans'、'geometric-sans'、'roman-serif'、'mono'、'display-condensed-bold' など。grotesk-sans | geometric-sans | roman-serif | italic-serif | slab-serif | mono | display-condensed-bold | display-heavy | system-native | handwritten |
| macrostructure | enum | いいえ | マクロ構造を絞り込みます（例：「bento-grid」）bento-grid | long-document | marquee-hero | stat-led | conversational-faq | manifesto | photographic | specimen | catalogue | letter | index-first | narrative-workflow | split-studio | feature-stack | type-specimen | portfolio-grid | map-diagram | ecosystem-index | component-playground |
詳細
Inspo
コーディングエージェントがUIを書く前に、MCP経由で参考にできる、実際の本番環境のWebサイトです。inspomcp.dev
ありの場合となしの場合
同じ要件、同じモデルで、どちらの実行でもデザインスキルは使っていません。唯一の違いは、右側のページがセッション中にInspo MCPを使って作られたことです。
この差こそがプロダクトです。エージェントにはツールはありますが、審美眼はありません。一方、オープンなWebには必要な参考例がすでにすべてそろっています。Inspoはそれらを集め、タグ付けし、参照できるようにします。
内容
- 実在する832サイトの2,320ページを収録。各ページはデスクトップとモバイルでキャプチャされ、トレースした配色、実際のフォント、検出した技術スタックに加え、ページごとの折り返し単位の分析が付いています。
- 68個の標準的なリファレンスコンポーネント（ヒーロー、料金表、フッター、ナビゲーションなど）を収録。それぞれが名前の付いたマクロ構造を1つ示し、コピーして使えるJSXを備えています。
- すべてのサイトにDESIGN.mdを用意。DOMから抽出した意味的な配色の役割、書体の段階、間隔のスケール、CSS変数、コンテナ幅を記載しています。
15個のツールですべてのデータを利用できます。recommend(brief)を使えば、その大半を1回の呼び出しにまとめられます。ツール一覧の全体はapps/mcp/README.mdにあります。
技術スタック
- TypeScript製のMCPサーバー。トランスポートは2種類で、npm経由のstdioと、サイト独自のVercelデプロイで提供するStreamable HTTPです。クエリ時にデータベースは使わず、カタログは静的シードとして同梱されています。
- Next.js 16 + Tailwind v4のギャラリー：アーカイブの閲覧機能とキュレーターダッシュボードを提供します。
- Playwrightのキャプチャワーカー：デスクトップとモバイルのスクリーンショット、配色、書体の段階、CSS変数を抽出し、Together AI経由でタグ付けと分析を行います。
- セマンティック検索と
find_similarにはTogether AIの埋め込みを使用します。 - サーバーをプロセス内で起動し、主要なツールを実行するスモークテスト用ハーネス。
クローンと実行
- どのクライアントでも使えるワンコマンド：
npx -y inspo-mcp install（Claude Code、Cursor、Codex、VS Code、Windsurf、Zed、Claude Desktopを検出して設定を書き込みます。--dry-runを指定すると実行計画を表示します） - または、ホスト済みのエンドポイントをクライアントから直接指定します：
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp - または、クローンします：
git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install - ギャラリー：
pnpm devを実行してから、localhost:3000を開きます - 開発ループ：
pnpm --filter @inspo/mcp test
クライアント別の設定例（Cursor、Windsurf、Zed、Claude Desktop）はMCPページにあります。セルフホストの手順書はDEPLOY.mdをご覧ください。
ロードマップ
- 各画面ページで、デスクトップとモバイルのキャプチャを並べて表示する
- コンポーネントの切り抜きを補完し、
find_componentsがすべての検索結果に切り抜きを返すようにする - リスト系ツールに上限を設けるのではなく、ページネーションを導入する
- モバイル一式をRetinaスケールで撮り直す
- アカウントとペイウォールは意図的に省いています。アーカイブは無料のほうが役立つためです。
アーカイブにサイトを追加したい場合は、apps/worker/src/seed-urls.tsに追加してPRを作成してください。基準は、そのサイトがWebサイトを作る人にとってアーカイブをより良いものにするかどうかです。
セキュリティ
すべてのツールは読み取り専用です。外部にアクセスする唯一の処理であるget_design_system(live:true)は、画面自体のソースから取得した情報を使って、キャプチャ済みのトークンが不足している場合に補完します。この処理では、すべてのURLとリダイレクトにSSRF対策を適用します。許可されるのは公開ホスト名のみで、ポートは80と443に限定され、レスポンス本文にはバイト数の上限があり、JavaScriptは実行されません。ホスト済みエンドポイントでは、呼び出しごとにツール名、成功の有無、処理時間を記録し、IPアドレスやクエリテキストは記録しません。
MITライセンス。著作権はTogether AIおよび貢献者に帰属します。スクリーンショットは各デザイナーの作品です。各画面には出典へのクレジットとリンクが付いており、削除依頼には/dmcaで対応しています。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。