Nutlope/inspo

これは何？

主な機能

• 01832の実在サイトからキャプチャした2,320ページを、デスクトップとモバイルの両方で検索
• 02コピーして使えるJSX付きの参考コンポーネントを68種類提供
• 03サイトごとに、配色の役割、文字サイズの段階、CSS変数を記載したDESIGN.mdを生成
• 04複数の検索結果をまとめて取得するrecommendツールなど、15個のMCPツールを提供
• 05npm経由のstdio、またはホストされたStreamable HTTPエンドポイントで動作

ユースケース

• ランディングページを作る前に、コーディングエージェントへデザインの参考例を提示する
• 参考にできる料金セクション、ヒーロー、フッターの実例を探す
• インスピレーションを得るために、サイトの配色、文字サイズ、余白を確認する
• 付属のギャラリーで厳選されたWebデザインの事例を閲覧する

クイックスタート

1. 1

   お使いのMCPクライアント向けのワンコマンドインストーラーを実行します

   npx -y inspo-mcp install
2. 2

   または、ホスト型エンドポイントをClaude Codeに追加します

   claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
3. 3

   または、リポジトリをcloneして依存関係をインストールします

   git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

使う前に知っておきたいこと

• !アーカイブは静的なシードデータのため、現時点で取得済みのサイトとページのみを収録しています。
• !スクリーンショットの権利は各デザインの制作者に帰属し、著作権および削除要請の対象となります。

トピック

よくある質問

inspo とは？

実在する本番サイトのスクリーンショット、配色、フォント、DESIGN.mdを検索可能なデザイン資料としてコーディングエージェントに提供するMCPサーバー。 Inspoは、Model Context Protocol（MCP）を通じてコーディングエージェントに提供される、実在する本番サイトの検索可能なアーカイブです。エージェントはUIを書く前にアーカイブを検索して参考例を探せるため、自身のデザイン感覚だけに頼らずに済みます。現在、832サイトにまたがる2,320ページを収録しており、各ページはデスクトップとモバイルの両方でキャプチャされています。抽出した配色やフォント、検出した技術、ページを折り目ごとに分けた構成も確認できます。

inspo は無料で使えますか？ライセンスは？

inspo は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

inspo は今もメンテナンスされていますか？

活発にメンテナンス中。inspo の最終コミットは 2026年10月1日 です。

inspo は何に使えますか？

ランディングページを作る前に、コーディングエージェントへデザインの参考例を提示する 参考にできる料金セクション、ヒーロー、フッターの実例を探す インスピレーションを得るために、サイトの配色、文字サイズ、余白を確認する 付属のギャラリーで厳選されたWebデザインの事例を閲覧する

inspo のインストール方法は？

お使いのMCPクライアント向けのワンコマンドインストーラーを実行します: npx -y inspo-mcp install または、ホスト型エンドポイントをClaude Codeに追加します: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp または、リポジトリをcloneして依存関係をインストールします: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

inspo はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Nutlope/inspo