ガイド

MCPで、必要なときにコーディングエージェントへデザイン仕様を渡す

エージェントは、ドキュメントを取得するのと同じようにデザイン仕様を取得できます。Design ExtractorのMCPサーバーを接続すれば、エージェントは1つのタスクの中で、公開サイトのDESIGN.mdを抽出し、実行の完了を待ち、ファイルを読み込んで、それをもとに構築できます。

ファイルをあちこちにコピーする必要も、ブラウザのタブも不要です。プロンプトでサイトを指定すれば、仕様がエージェントのコンテキストに届きます。

エージェントやエージェントのワークフローを作る開発者向け。更新。

このガイドでわかること

  • Claude Code、Codex、Cursor、claude.aiに接続したMCPサーバー。アカウントまたはAPIキーでログインします。
  • エージェントがたどるツールの流れ：確認、抽出、待機、読み込み。
  • 抽出からUIまで、一連の流れをエージェントに任せるプロンプト。
  • 費用と、計画に入れておくべき制限。

エージェントが受け取るもの

サーバーはhttps://www.design-extractor.com/api/mcpにあり、streamable HTTPで通信します。エージェントはこのサーバーを通じて、公開サイトの抽出を開始し、完了を待ち、完成したDESIGN.mdを読み込み、価格と残高を確認し、過去に抽出したものを一覧できます。どの実行も、他の抽出と同じようにサイトの抽出履歴に表示されます。

ファイルはサイトで作成されるものと同じです。冒頭にカラー、タイポグラフィ、スペーシング、角丸、コンポーネントのトークンがあり、その下に使い方のルールがあります。GoogleのDESIGN.md仕様に沿っているため、エージェントは他の仕様と同じように読み込めます。

サーバーを接続する

クライアントを選んでください。Claude Code、Codex、claude.ai、Claude Desktop、ChatGPTはアカウントでログインし、CursorとスクリプトはAPIキーを使います。

  1. サーバーを一度追加します。キーは不要です。

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. /mcpを実行し、design-extractorを選んでAuthenticateを選択します。開いたページでログインして許可します。

  3. サイトを指定して頼みます：「stripe.comのデザインを抽出して」。

Claude Code、Codex、claude.ai、Claude Desktop、ChatGPTはアカウントでログインします。Cursor、n8n、スクリプトでは、アカウントページで発行した個人用のAPIキーを使います。

Claude CodeとCodex向けにはプラグインもあります。サーバーとapply-designmdスキルをまとめたもので、このスキルは参考サイトの抽出から、そのDESIGN.mdをコードベースに適用するまでをエージェントに案内します。インストール後、Claude Codeで/mcpを実行し、プラグインのサーバーを認証してください。

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

すべてのクライアント、Agent SDKのコード例、キーの設定はMCPサーバーのドキュメントページにあります。

ツールと呼び出す順序

ツール機能
list_my_extractionsあなたの抽出を新しい順に返します。すでにあるサイトに二重に支払わないよう、最初に呼び出します。
get_pricing現在の抽出1回あたりのクレジット費用。
get_credits残りのクレジット残高。
extract_design公開URLの抽出を開始し、クレジットを消費します。サイトの主要ページをサンプリングするにはtierにPROを指定します。実行がキューに入るとすぐに応答を返します。
get_extractionサイトの名前またはURLを受け取ります。実行中はステータスを、完了後はDESIGN.mdの全文を返します。失敗した実行ではその理由を返します。

実行には少なくとも1分かかるため、流れは「開始してからポーリング」です。これはサーバーがエージェントに自ら伝えるので、あなたはサイトを指定するだけです。

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

実例：Supabase

エージェントがsupabase.comのスタイルで作るよう頼まれたとします。get_extractionが実行の完了を報告すると、DESIGN.mdの全体をテキストで返します。ギャラリーのSupabaseのDESIGN.mdは同じ種類のPro実行によるもので、エージェントのコンテキストに何が届くかを示しています。冒頭はこうです。

ギャラリーにあるSupabaseのDESIGN.mdの冒頭。各グループのトークンを数個に絞った抜粋です。
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Supabaseの公開Webサイトから抽出したもので、公式のブランドガイドラインではありません。SupabaseのDESIGN.mdをすべて読む

トークンの下には、エージェントがルールとレシピを読み取るセクションが続きます：Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps。Componentsセクションだけでも、HTMLとCSSによる49個のレシピがあるため、エージェントはボタンやカードを推測ではなく計測された値から再構築します。

プロンプト

ツール、サイト、ファイルをどうするかを指定します。これらのプロンプトはこのガイドのために書いたものです。サイトとタスクは変更してください。

1つのタスクで抽出と構築を行う

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

選ぶ前に比較する

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

独自のエージェントを作っていますか？Agent SDKのmcpServersオプションにAPIキー付きでサーバーを渡し、mcp__design-extractor__*を許可してください。完全なコード例はMCPドキュメントにあります。

クレジットと制限

  • サイトと同じクレジット。サイトで開始してもエージェントが開始しても、Pro抽出は10クレジットです。料金ページでチャージしてください。
  • 最近の自分の実行には二重請求なし。最近抽出したサイトを頼むと、その抽出が再利用されます。
  • 公開ページのみ。ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページには対応していません。
  • キー。有効なAPIキーは最大5個までで、それぞれ1年間有効、アカウントページで無効化できます。ログインしたクライアントはトークンを自動で更新します。接続は同じページで解除できます。

よくある質問

MCPでコーディングエージェントにデザイン仕様を渡す：よくある質問

試す前によく寄せられる質問への簡潔な回答です。

はい。同じアカウント、同じプリペイド式のクレジットを使います。Pro抽出は10クレジットです。エージェントはget_pricingで現在の費用を、get_creditsで残高を確認できます。残高が足りない場合、extract_designは実行を拒否してその旨を伝えます。

ログインできるクライアントには不要です。claude.ai、Claude Desktop、ChatGPT、Claude Code、Codexは、一度同意ページを開くだけで、自動更新されるトークンを保持します。Cursor、n8n、スクリプト、Agent SDKでは、アカウントページで発行した個人用のAPIキーを使います。

少なくとも1分かかります。extract_designはすぐに応答を返し、エージェントは1分ほど待ってから、DESIGN.mdの準備ができるまで25秒ごとにサイトを指定してget_extractionを呼び出します。

最近抽出したサイトなら、かかりません。もう一度頼むとその抽出が再利用され、クレジットは請求されていないと応答します。他の人だけが抽出したサイトは、通常の料金がかかります。すでにあるものはlist_my_extractionsで確認できます。

いいえ。サーバーはURLからページをキャプチャするため、ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページには対応していません。公開プレビューをデプロイするか、公開中のサイトを抽出してください。

接続する前にDESIGN.mdを見てみませんか？

サイトで抽出を1回実行してみてください。エージェントはサーバー経由で同じファイルを受け取ります。

あらゆるWebサイトからDESIGN.mdを取得

関連ガイド

DESIGN.mdのガイドをすべて見る