Inspo MCP の使い方：デザイン参考とスクリーンショットを Claude Code / Codex の UI 開発に取り込む
このガイドでは、Inspo MCPをClaude CodeまたはCodexに接続し、デザイン参考を検索・確認したうえで、レイアウト、情報階層、余白、書体、配色、レスポンシブ要件を実行可能なUIタスクへ落とし込み、実際のレンダリングからエージェントが参考を本当に使ったかを確認する方法を説明します。
目次
Claude Code や Codex に「シンプルで洗練された、デザイン性の高いランディングページを作って」と頼めば、動くページを得ること自体は難しくありません。難しいのは、生成結果が見慣れたグラデーション背景、角丸カード、大きな見出しに収まり、参考にしたかったレイアウト、リズム、視覚的な情報階層が反映されないことです。
Inspo は、この具体的な問題に対応します。エージェントが UI を書き始める前に、実在する Web サイトのデザイン参考を渡せます。公式サイトには現在、832 件の本番サイト、デスクトップとモバイルのキャプチャを含む 2,320 件のページ記録、68 件の参考コンポーネント、さらにページから抽出された配色、フォント、余白、角丸、コンテナ幅、ページ構造が掲載されています。これらの資料は MCP を通じて Claude Code や Codex などのクライアントに提供されます。
ただし、インストールが完了したからといって、エージェントがスクリーンショットを見たとは限りません。まして、完成ページに参考が反映されたことの証明にはなりません。より確実な流れは次のとおりです。
- Inspo MCP を接続し、クライアントが実際に接続済みであることを確認する。
- すぐにコードを書かせず、最初に参考を検索させる。
- どのページ記録と画像 URL を取得したか、画像自体を本当に読んだかを確認する。
- 選んだ参考を明確な「リファレンス契約」に変換する。
- 実装後に実際のレンダリングを見て、項目ごとに比較・修正する。
以下では、「既存プロジェクト向けに、開発者を対象とした B2B 製品のランディングページを作る」という仮想タスクを例にします。これは手順を説明するための例であり、本記事があなたのプロジェクトを実際に実行・検証したという意味ではありません。
Inspo MCP が実際に提供するもの
Inspo は単なるスクリーンショット検索ツールではありません。公式 MCP ページとプロジェクトリポジトリによると、エージェントは主に 3 種類の参考資料を取得できます。
1. ページとスクリーンショット
search_screens では、自然言語、スタイル、業界、ページ種別、色、ライト／ダークモード、ページ構造を条件に実在ページを検索できます。結果には次の情報が含まれる場合があります。
- ページタイトル、Inspo の
slug、元サイトの URL - デスクトップ版とモバイル版のスクリーンショット URL
- ページのサムネイル
- 配色、フォント、技術スタック、タグ
- ページ全体の特徴とセクション構造の分析
特定の候補を詳しく調べるときは、多数の候補を一度にコンテキストへ入れるのではなく、get_screen を使ってその候補の詳細記録を取得します。
2. 構造化されたデザインシステム
収録された各サイトには、ページ情報から抽出された DESIGN.md があります。get_design_system は、フォント、セマンティックカラー、文字サイズ階層、余白、角丸、CSS 変数、コンテナ幅などを返せます。
こうしたデータが重要なのは、「このサイトを参考にして」だけでは曖昧すぎるからです。「ファーストビューは左右 2 カラムにする」「本文コンテナの幅を制限する」「主要ボタンは高コントラストのアクセントカラーにする」「セクション間に明確な余白を設ける」といった要件なら、エージェントは安定して実行できます。
3. 参考コンポーネントとコード
Inspo には、ナビゲーション、Hero、料金、フッターなどの参考コンポーネントもあります。エージェントは、まず find_reference_components で適切なコンポーネントを探し、次に get_reference_jsx で対応する JSX を取得できます。
だからといって、サイト全体をそのままコピーすべきではありません。コンポーネントの構成や情報階層を参考にしつつ、現在のプロジェクトの技術スタック、ブランド、コンテンツ、インタラクションに合わせて作り直すのが適切です。
最初に使うツールとして適しているのは recommend です。通常の言葉で要件を渡すと、ページ構造、候補サイト、参考コンポーネント、配色、レイアウト提案を組み合わせて返します。初回は最初から十数ページを連続検索するより、エージェントに recommend を呼ばせてから、1〜2 件の候補を詳しく見るほうが効率的です。
モデル接続と Inspo MCP は別の経路
Claude Code や Codex がコードを分析・修正・推論するには、利用可能なモデル接続が必要です。一方、Inspo MCP は外部のデザイン資料を提供します。両者は URL、認証方法、障害原因が異なる別々の経路です。
すでに BetterToken 経由で Claude Code または Codex を使っている場合は、先に該当するドキュメントでモデル側の設定を完了してください。
その後、Inspo を別途設定します。https://inspomcp.dev/api/mcp をモデルの Base URL に設定したり、BetterToken の API Key を Inspo に渡したりしないでください。Inspo の公式ホスト型エンドポイントは、現在アカウントも API Key も不要です。また BetterToken は Inspo をホストせず、第三者のデザイン資料に対する権利を付与せず、エージェントが必ず画像を読むことや特定の UI を生成することを保証しません。
接続前に確認するのは次の点だけです。
- Claude Code または Codex がインストール済みで、通常のコーディングタスクを実行できる。
- クライアントから Inspo のホスト型エンドポイントへアクセスできる。
- 自動インストーラーまたはローカル stdio 方式を使う場合、Node.js と
npxが利用できる。
Inspo MCP を接続する
Inspo には自動インストーラーがありますが、各クライアントの MCP コマンドを直接使うこともできます。複数の AI コーディングツールが入っている PC では、まず --dry-run を実行し、どのクライアントと設定が変更されるか確認するのがおすすめです。
方法 1：Inspo の自動インストーラーを使う
設定を書き込まずに Claude Code だけ確認します。
npx -y inspo-mcp install --dry-run --client claude-code内容を確認してからインストールします。
npx -y inspo-mcp install --client claude-codeCodex だけ確認します。
npx -y inspo-mcp install --dry-run --client codex確認後にインストールします。
npx -y inspo-mcp install --client codex--client を指定しない場合、インストーラーは Claude Code、Codex、Cursor、VS Code、Windsurf、Claude Desktop、Zed のインストール状況を検出します。Inspo MCP の公式説明では、最初に計画を表示して確認を求めるとされています。--dry-run は計画を表示するだけでファイルを書き換えず、-y は確認を省略します。
方法 2：ホスト型 MCP を直接追加する
Inspo が推奨するホスト型エンドポイントは次のとおりです。
https://inspomcp.dev/api/mcp公式リポジトリでは Inspo は読み取り専用サービスと説明されていますが、それでも外部の第三者 MCP です。チーム環境では、接続前にリポジトリ、データ範囲、ネットワークポリシーを確認してください。「読み取り専用」であることは、信頼性の確認を省略する理由にはなりません。
Claude Code の公式 MCP ドキュメントによると、リモートサービスは HTTP で追加します。ローカルのすべてのプロジェクトで Inspo を使えるようにするには、次を実行します。
claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp続けて確認します。
claude mcp get inspo
claude mcp listClaude Code のセッション内では、次も使えます。
/mcpAdded と表示されても、それは設定が書き込まれたことを示すだけです。実際の接続状態は claude mcp list で確認し、Connected であれば接続済みです。Failed to connect、Pending approval、または無効状態の場合は、先に問題を解消してください。
OpenAI の Codex MCP ドキュメントでは、Codex は Streamable HTTP と STDIO のサービスに対応しています。リモート MCP は次のコマンドで追加します。
codex mcp add inspo --url https://inspomcp.dev/api/mcp設定済みサービスを確認します。
codex mcp listCodex の対話画面でも次を使用できます。
/mcpOpenAI の現行ドキュメントによれば、Codex CLI、IDE 拡張機能、ChatGPT デスクトップアプリは、同じ Codex ホスト上で動作する場合に MCP 設定を共有します。サービスを追加・変更したら、現在のクライアントを再起動するか新しいセッションを開き、Inspo が表示されるか確認してください。
stdio は接続方式の代替にすぎない
クライアントからリモート URL へ接続しにくい場合は、npx 経由で stdio サービスを起動できます。
claude mcp add --scope user inspo -- npx -y inspo-mcp
codex mcp add inspo -- npx -y inspo-mcp自動インストールコマンドに --local を加えることもできます。ただし、この方式でも Inspo のカタログは CDN から取得されるため、オフライン動作や完全なセルフホストと同じではありません。
初回は、コードを書かせる前に参考を探す
よくある失敗は、「参考探し」と「ページ実装」を 1 文にまとめることです。
Inspo を使って、見栄えのよいランディングページを作ってください。
これでは、エージェントが参考を選び、何を取り入れるか決め、そのままコードを書き始めます。結果が悪くても、検索結果が不適切だったのか、スクリーンショットがコンテキストに入らなかったのか、実装段階で参考からずれたのか判断できません。
最初の指示は、次のように分けるほうが安全です。
まだコードを変更せず、ページのデザインも始めないでください。
Inspo MCP を使って、「開発者向け B2B AI API 製品のランディングページ」の参考候補を 4 件探してください。
要件：
- 大面積の派手なグラデーションを使わず、抑制されたプロフェッショナルな見た目にすること。
- Hero で製品価値を明確に伝え、主要 CTA を 1 つ配置すること。
- 製品 UI や呼び出しフローを見せてもよいが、従来型の企業サイトのようにはしないこと。
- デスクトップとモバイルの両方の参考を確認すること。
- まず recommend から始め、必要な場合だけ search_screens、get_screen、get_design_system を使うこと。
各候補について、次を返してください。
1. ページタイトル、Inspo slug、sourceUrl
2. ツール結果に存在する場合は、デスクトップとモバイルのスクリーンショット URL
3. macrostructure、主要な配色、フォント
4. 取り入れる価値のある具体的なデザインポイント 3 件
5. コピーしてはいけないブランド要素、文言、装飾
最後に、主参考を 1 件、補助参考を最大 2 件だけ選び、それぞれが何を担当するか説明してください。この時点ではコードを書かないでください。この指示の目的は、形容詞を増やすことではありません。追跡可能なページ識別子と根拠を出させることです。「モダン、シンプル、プロフェッショナル」という要約だけでなく、具体的な slug、元サイト URL、スクリーンショット URL、デザインデータが確認できる状態を目指します。
エージェントが本当に参考を取得したか確認する方法
確認は 4 段階に分けられます。前の段階が成立しても、次の段階まで成立したとは限りません。
| 段階 | 観察できる証拠 | 証明できること |
|---|---|---|
| MCP の設定を確認した | Claude Code に Connected と表示される、または Codex の MCP 一覧に Inspo がある | Connected は Claude Code の接続を示す。Codex の一覧は設定の存在を示すため、サービスへのアクセスはツール呼び出しの成功で確認する |
| ツールが資料を返した | 応答に実在する slug、sourceUrl、配色、フォント、ページ構造、スクリーンショット URL がある | エージェントが Inspo を呼び、構造化記録を取得した |
| 画像を読んだ | エージェントが画像を読めるツールでスクリーンショット URL を開くか、利用可能な画像ビューアを使い、具体的な画面の特徴を説明する | テキスト説明やリンクだけを読んだ状態ではない。結果にサムネイルがあるだけでは、画像を読んだ証拠にならない |
| ページに参考が反映された | 実際のレンダリングと選択した参考の間に、構造、階層、リズム、レスポンシブ動作の説明可能な対応がある | 参考が実装に実際の影響を与えた |
この区別は重要です。Inspo の応答形式には常に構造化テキストが含まれ、元画像 URL が付く場合があります。対応する経路では、サムネイルをネイティブな画像コンテンツブロックとしてツール結果に含めることもできます。一方、プロジェクトの応答形式実装では、別の 2 ケースも明示的に扱われています。画像取得に失敗すると、テキストと URL を残したまま画像ブロックが省略される場合があり、テキスト優先の設定ではテキストだけが返ることもあります。
したがって、「エージェントがスクリーンショット URL を返した」だけでは、モデルが画像のピクセルを読んだ証明にはなりません。次の確認用プロンプトを送ります。
まず、主参考を取得できていることを証明してください。まだコードを書き始めないでください。
次を出力してください。
- このセッションで実際に使用した Inspo ツール名
- 主参考の slug、sourceUrl、デスクトップスクリーンショット URL、モバイルスクリーンショット URL
- デスクトップ画像とモバイル画像からそれぞれ観察した具体的な視覚的事実を 3 件ずつ。例：Hero の構成、ナビゲーション位置、CTA の整列、画像のトリミング、カードの並び、折りたたみ方
- どの結論がスクリーンショット由来で、どの結論が Inspo のテキストフィールドだけに由来するか
現在のクライアントがテキストまたは URL だけを受け取り、画像のピクセルを読んでいない場合は、「画像のピクセルは読み取っていない」と明記してください。説明文から視覚的な詳細を推測しないでください。理想的な結果は、長いデザイン批評ではありません。「画像に実際に存在する要素」と「構造化データから得た結論」を分けて説明できることが重要です。
エージェントが配色、フォント、northstar の説明しか繰り返せない場合は、そのクライアントで利用可能なブラウザまたは画像読み取りツールを使ってスクリーンショット URL を開かせます。現在のクライアントとモデルが画像入力に対応していれば、スクリーンショットをダウンロードして画像として添付できます。モデルやプロバイダーの経路が画像を処理できない場合、添付しても解決しません。Inspo を構造・配色・テキスト分析に使うか、画像入力に対応する構成へ切り替えてください。MCP が画像を返せることと、すべてのクライアントとモデルの組み合わせが画像を処理できることは別です。
参考を「リファレンス契約」に整理する
候補を決めた後も、「参考 A の雰囲気にして」だけでは不十分です。各参考が何を担当するかを固定し、コピーしてはいけないものを明確にします。
エージェントには、次のような契約を作らせます。
確認済みの主参考と補助参考に基づき、まず「リファレンス契約」を整理してください。まだコードを変更しないでください。
次を含めてください。
1. 主参考
- slug / sourceUrl：
- 担当するものだけ：ページ全体の構造、Hero の構成、セクションのリズム
2. 補助参考 A
- slug / sourceUrl：
- 担当するものだけ：文字階層、本文幅、余白
3. 補助参考 B（本当に必要な場合のみ）
- slug / sourceUrl：
- 担当するものだけ：特定のコンポーネント 1 件、またはモバイルでの折りたたみ方
4. 現在のプロジェクトで必ず維持するもの
- 既存の技術スタック、ルーティング、コンポーネント規約
- 実際の製品文言、機能範囲、ブランドカラー
- 既存のインタラクション、アクセシビリティ、パフォーマンス要件
5. 明確に禁止すること
- 元サイトのロゴ、ブランド名、イラスト、写真、原文をコピーしない
- サイト全体をピクセル単位で複製しない
- 参考に近づけるために、現在の製品に存在しない機能を作らない
6. 受け入れ条件
- 一般的なデスクトップ viewport で、Hero にタイトル、説明、CTA、主ビジュアルがすべて収まる
- 情報階層は主参考に沿うが、内容は現在の製品に属する
- モバイルでは明確な並べ替え方針があり、デスクトップ版を縮小しただけにしない
- セクション余白、コンテナ幅、文字階層、ボタン優先度に検証可能なルールがあるリファレンス契約は、インスピレーションを制約条件に変えます。主参考が全体構造を決め、補助参考は局所的な課題だけを解決します。参考が多ければよいわけではありません。5 つのサイトが色、フォント、カード、Hero を同時に支配すると、優先順位のない汎用的な AI デザインに戻りがちです。
Claude Code または Codex に実装させる
参考と受け入れ条件を確認してから、エージェントにリポジトリを調べさせ、コードを変更させます。以下のプロンプトでは、npm run dev、フレームワークのディレクトリ、テストコマンドをあえて固定していません。これらは推測せず、現在のプロジェクトから判断させるためです。
実装を開始してください。
最初に、現在のリポジトリの技術スタック、ページのエントリーポイント、デザイン変数、再利用可能なコンポーネント、利用可能なスクリプトを確認してください。その後、確認済みの「リファレンス契約」に従ってページを変更してください。
実装要件：
- 既存のフレームワーク、コンポーネント体系、依存関係を使い、本当に必要でない限り新しい UI フレームワークを追加しないこと。
- 実際の製品コンテンツと機能を維持し、参考サイトのブランド資産や文章をコピーしないこと。
- 参考を、このプロジェクト独自のレイアウト、CSS 変数、コンポーネントへ変換すること。
- デスクトップとモバイルの両方を意図的に実装し、モバイルを最後に回して自動縮小だけに頼らないこと。
- まず全体構造、情報階層、余白を修正し、その後に影や角丸などの装飾を処理すること。
- Inspo が JSX を提供するという理由だけで、既存プロジェクトのコンポーネントを上書きしないこと。
変更前に、次を簡潔に説明してください。
1. 変更予定のファイル
2. 各参考ポイントを反映するコンポーネントまたはスタイルルール
3. 変更せず維持すべき既存コンテンツ
完了後：
- リポジトリに既存のフォーマット、型チェック、テストを実行すること。
- 利用可能なローカルプレビューを起動すること。
- 実際に変更したファイルを一覧にすること。
- 「参考ポイント → 実装箇所」の対応表を出すこと。
- 「よりモダン」「より高級」といった言葉だけで結果を評価しないこと。プロジェクトにすでにデザイントークンがある場合は、複数コンポーネントへ色や寸法をハードコードするのではなく、まずトークンやセマンティック変数を変更させます。そうすれば、次の調整でページ全体のリズムを修正しやすくなります。
最終判断はコード差分ではなく、実際のレンダリングで行う
ページがコンパイルできても、コードが動くことしか証明できません。参考が反映されているか判断するには、実際のページを見る必要があります。
Inspo のページには通常、デスクトップとモバイルのキャプチャがあります。公式 Colophonによると、アーカイブは幅 1440 ピクセルと 375 ピクセルで取得されています。高さを完全に合わせる必要はありませんが、近い幅で実装を確認すると、全体構造とモバイルでの並べ替えを比較しやすくなります。
Claude Code または Codex にブラウザ、Playwright、その他のスクリーンショットツールが設定されている場合は、ローカルページを開かせます。そうでなければ、自分でブラウザからプレビューを開き、デスクトップとモバイルの画面を撮影してエージェントに渡します。
次の形式で比較させます。
次を比較してください。
- 確認済みの主参考のデスクトップ／モバイルスクリーンショット
- 現在のページを約 1440px と 375px の幅で実際にレンダリングしたスクリーンショット
まだ再設計やコード変更をしないでください。まず差分表を出してください。
| 確認項目 | 参考で観察できる証拠 | 現在の実装 | 差分 | 推奨する修正 |
| --- | --- | --- | --- | --- |
| Hero の構造 | | | | |
| タイトルと CTA の階層 | | | | |
| コンテナと余白 | | | | |
| 文字階層 | | | | |
| 色とコントラスト | | | | |
| コンポーネントの配置 | | | | |
| モバイルでの並べ替え | | | | |
その後、影響が最も大きい差分を 3 件だけ選んで修正してください。修正後に再レンダリングし、もう一度確認してください。同じ回で新しいデザイン方向を追加しないでください。よい修正指示は、観察可能で実行可能な内容です。たとえば次のようにします。
- 悪い例：「Hero がまだ十分に高級に見えません。」
- よい例：「主参考では、ファーストビュー内にタイトル、CTA、製品 UI が同時に表示されています。現在のページは上下の余白が大きすぎるため、製品 UI がファーストビューより下にあります。Hero の縦方向の余白を減らし、タイトル幅を制限し、一般的なデスクトップの高さ内に主ビジュアルが見えるようにしてください。」
別の例です。
- 悪い例：「モバイル版が参考にあまり似ていません。」
- よい例：「参考のモバイル版では、タイトルと CTA の後に 1 カラムの製品カードが続きます。現在の実装はデスクトップの 2 カラムを維持しているため、文章と画像がどちらも狭くなっています。モバイルでは 1 カラムに変更し、CTA を主ビジュアルより前に置いてください。」
毎回、影響の大きい差分を少数だけ直すほうが、「もっときれいにして」と繰り返すより早く収束します。
よくある問題
設定コマンドは成功したが、エージェントが Inspo を見つけられない
再インストールする前に、クライアントの状態を確認します。
Claude Code：
claude mcp get inspo
claude mcp listCodex：
codex mcp listエンドポイントに余分な文字がないことを確認し、クライアントを再起動します。Claude Code でプロジェクトレベルの .mcp.json を使用している場合は、信頼済みワークスペース内でサービスを承認する必要があることもあります。
MCP は接続済みだが、エージェントが Inspo を呼ばない
参考取得とコーディングを分けてください。プロンプトに「まず Inspo を呼び、slug、sourceUrl、スクリーンショット URL を返すこと。参考を確認するまでコードを変更しないこと」と明記します。/mcp でサービスが有効になっているかも確認してください。
ページの説明は返ったが、画像が見えない
呼び出しがテキストだけを返した、サムネイル取得に失敗した、クライアントが MCP の画像ブロックを表示しない、またはモデル経路が画像を処理しない可能性があります。デスクトップとモバイルのスクリーンショット URL が残っているか確認し、画像のピクセルを読んだか明言させてください。現在のクライアントとモデルが画像入力に対応していれば、ブラウザツールで URL を開くか、画像を添付します。テキスト専用モデルでは、構造化データを使うか、画像を処理できる構成へ切り替えてください。
ページが依然として汎用テンプレートに見える
通常、さらに 10 件の参考を探す必要はありません。主参考 1 件で全体構造を決め、補助参考 1 件でフォントと余白を決め、もう 1 件使うなら特定コンポーネントだけに限定します。その役割をリファレンス契約に書き、エージェントに「参考ポイント → コード箇所」の対応を出させます。
コンテキストが大きくなりすぎ、エージェントが参考を混同する
まず recommend で候補を取得し、選んだ 1〜2 件に対してだけ get_screen または get_design_system を呼びます。多数の完全なページ記録やコンポーネントコードを同時に読み込ませないでください。get_reference_jsx は特定コンポーネントが必要なときだけ使います。
元サイトと Inspo のスクリーンショットが一致しない
Inspo はキャプチャ時点のページ資料を保存しますが、元サイトはその後に変更される場合があります。比較には選択した Inspo のスクリーンショットと記録を使います。sourceUrl は出典を追跡するためのものであり、元サイトが今後も常にアーカイブと同じ見た目であるとは限りません。
大切なのは「MCP を入れること」ではなく、証拠の連鎖を作ること
Inspo MCP の価値は、何が良いデザインかを自動で決めることではありません。「このような雰囲気にしたい」という要望を、追跡可能なページ、スクリーンショット、デザインデータ、参考コンポーネントに変換することです。
信頼できる UI 開発の 1 サイクルでは、次の 4 種類の証拠を残せます。
- クライアントが Inspo の接続を確認している。
- エージェントが具体的なページとデザイン資料を返している。
- スクリーンショットを読んだことを確認できる、またはテキストだけを取得したと正直に説明している。
- 最終レンダリングについて、どの構造・階層・レスポンシブ規則が参考に由来するかを項目ごとに説明できる。
検索、確認、実装、再検証を分離すれば、Claude Code や Codex は単に「感覚で見栄えのよいページを作る」のではなく、確認・修正・再利用できるデザインコンテキストの中で作業するようになります。
