getdesign.md vs Design Extractor
Design Extractorは、指定された任意の公開URLからDESIGN.mdを作成します。ファイルはGoogleのDESIGN.md仕様に沿っており、ページから選び出した各コンポーネントを、コーディングエージェントが再構築できるHTMLとCSSのレシピとして出力します。各レシピは実際のサイトと照合して確認するか、確認できない場合は理由を明記します。特定の国からの訪問者にしか応答しないサイトにも対応しています。
getdesign.mdは、有名ブランドの既製のDESIGN.mdファイルを厳選したコレクションです。両者の比較は以下のとおりです。初めての方はDESIGN.mdとは何かをご覧ください。
時点で、getdesign.md、リクエストページ、Catalog Passのページ、awesome-design-mdリポジトリをもとに確認しました。提供内容や価格は変わることがあるため、判断する前に先方のサイトをご確認ください。
Design Extractorを選ぶ理由
GoogleのDESIGN.md仕様に準拠
YAMLのフロントマターには仕様で定義されたプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは、OverviewからDo's and Don'tsまで仕様どおりの順序で並びます。フロントマターのコンポーネント項目には仕様の8つのプロパティだけを使い、値はリテラルで記述します。どのファイルも無料のDESIGN.mdバリデーターで確認できます。
ページから選び出したコンポーネントごとのレシピ
ページから選び出したヘッダー、フッター、ボタン、入力欄、カードなどのコンポーネントは、それぞれレシピとして出力されます。リテラル値で書かれた、要点を抽出したHTMLとCSSで、DESIGN.mdのComponentsセクションに含まれます。各レシピには、構成要素と、サイトで確認されたホバー時とフォーカス時の状態が記載されているため、コーディングエージェントは推測ではなくコンポーネントを再構築できます。
実際のサイトと照合
各レシピは単独でレンダリングされ、実際のサイトと照合されます。レンダリングされた構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックします。それでも合格しないものは理由を明記してフラグを付け、検証済みとして出力することはありません。結果ページでは、コンポーネントの一致度と、サイトのカラーとテキストスタイルのカバー率を確認できます。ギャラリーのStripeをご覧ください。
地域制限のあるサイトにも対応
一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、結果ページに国の選択肢が表示されます（ページを読み込めることが確認された国が先頭に並びます）。選んだ国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
比較表
| getdesign.md | Design Extractor | |
|---|---|---|
| 仕様への準拠 | GoogleのDESIGN.md仕様の構造を使っています：トークンはYAMLのフロントマターに入り、標準セクションは仕様どおりの順序で並びます。 | GoogleのDESIGN.md仕様に準拠：フロントマターには仕様のプロパティだけを使い独自のトップレベルキーはなく、標準セクションは仕様どおりの順序で、コンポーネント項目は仕様の8つのプロパティとリテラル値に限定。 |
| コンポーネントのレシピ | コンポーネントはフロントマターでトークンとして定義され、文章で説明されています。HTMLは含まれません。 | ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、ComponentsセクションのHTMLとCSSを要点に絞ったレシピとして出力され、コーディングエージェントが再構築できます。 |
| 実際のサイトとの照合 | 提供なし | はい。各レシピは単独でレンダリングされ、構成要素の構造の一致チェックとピクセル比較で、実際のサイトと照合されます。合格しないコンポーネントは理由を明記してフラグを付け、検証済みとして出力することはありません。 |
| 地域制限のあるサイト | ファイルはカタログか非公開のリクエストから提供されます。 | はい。一部の国からの訪問者をブロックしているサイトでは、失敗した実行に国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。 |
| 概要 | 実際のWebサイトから分析したDESIGN.mdファイルを厳選したコレクション。VoltAgentチームが管理しています。 | ジェネレーター：公開URLを渡すと、そのサイトのDESIGN.mdを返します。 |
| 任意のWebサイトにオンデマンドで対応 | 即時ではありません。無料セット以外のサイトについては有料の非公開リクエストを送り、ファイルはメールで届きます。 | はい。公開URLを貼り付けると、すぐに実行が始まります。完了するとDESIGN.mdが結果ページで開きます。 |
| 無料ファイル | はい。ダウンロードするかnpx getdesign@latest add stripeでインストールできる無料セットがあります。このうち84件のファイルは、GitHubのawesome-design-mdリポジトリでもMITライセンスで公開されています。 | 抽出は有料です。すでに抽出したDESIGN.mdファイルのギャラリーは、無料で閲覧、コピーできます。 |
| 対象範囲 | 551サイトのWebサイトカタログ。無料セット以外のカタログ項目では、ダウンロードではなく、プレビューと有料のリクエストが提示されます。 | あらゆる公開Webサイトと、抽出済みブランドの小さなギャラリー。 |
| 価格 | 無料セット：無料。非公開のDESIGN.md：1回限り$39（通常価格は$59）。Catalog Pass：月額$99で厳選ファイル45件、毎月5件以上を追加。 | プリペイド式のクレジット、サブスクリプションなし。パックは$5で50クレジットから。Pro抽出は10クレジットです。クレジットに有効期限はありません。 |
| ファイルの作り方 | サイトの公開されている観察可能なパターンを独自に分析したもので、インスピレーションの出発点として厳選したものです。 | 実行した時点で、ブラウザで実際のサイトからレンダリングします。Proではサイトの主要ページをサンプリングします。 |
| 情報の新しさ | サイトを分析した時点のスナップショット。項目には分析日が表示されていません。 | 実行した瞬間の最新の状態。後日の再抽出は、新しい有料の実行になります。 |
| エージェントからの利用 | DESIGN.mdを名前でインストールするCLI。MCPサーバーやAPIはありません。 | Claude Code、Cursor、Codex、ChatGPTなどのクライアント向けのMCPサーバーと、開いているタブ用のChrome拡張機能。 |
| その他の機能 | 各ファイルのライト・ダークのライブプレビューと、スターターキット（Webサイト用キットは1回限り$249、通常価格は$299）。 | 無料ツール：DESIGN.mdバリデーター、Webサイトのフォント検出ツール、カラーパレット抽出ツール。 |
getdesign.mdの提供内容
- 有名ブランドのDESIGN.mdファイルの無料セット。その大半はGitHubでもawesome-design-mdとしてMITライセンスで公開されています。
- npx getdesignによる、ターミナルからの1行インストール。
- 各ファイルのライト・ダークのライブプレビュー。
- リクエストに応じた他サイトの非公開DESIGN.mdファイル（メールで納品）と、月額制のCatalog Pass。
- Webサイト用キットなどのスターターキット。
コレクションか、任意のURLにオンデマンドで対応か
getdesign.mdからの乗り換え方
- Design ExtractorのホームページにサイトのURLを貼り付けて、Pro抽出を実行します。
- 結果をDESIGN.mdとしてリポジトリのルートに保存して古いファイルを置き換え、AGENTS.mdやCLAUDE.mdの参照はそのまま残します。手で編集した場合は、無料のDESIGN.mdバリデーターで確認してください。
- または、エージェントに任せることもできます。MCPサーバーを接続して、サイトの抽出を頼んでください。
結論
カタログに限らず、任意のサイトのDESIGN.mdをオンデマンドで、実際のサイトと照合したコンポーネントのレシピ付きで必要とする場合は、Design Extractorをお選びください。実行した時点のサイトの見た目を読み取り、Googleの仕様に沿って、ページから選び出したコンポーネントごとにレシピを作成します。合格しないレシピには理由を明記してフラグを付けます。エージェントはMCPサーバー経由で自ら抽出を開始できます。
その他の比較
designmd.me vs Design Extractor
URLからDESIGN.mdを作る2つのジェネレーターを、仕様への準拠、コンポーネントのレシピ、実際のサイトとの照合、価格で比較。
Refero Styles vs Design Extractor
Webサイトのスタイルを集めた大規模な無料ライブラリと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
TypeUI vs Design Extractor
タブ内のスタイルから独自のテンプレートを埋めるTypeUIの無料Chrome拡張機能と、実際のサイトと照合したコンポーネントのレシピ付きの仕様準拠のDESIGN.mdの比較。
よくある質問
getdesign.md vs Design Extractor：よくある質問
getdesign.mdとDesign Extractorについての簡潔な回答です（2026-10-20時点で確認）。
一部無料です。getdesign.mdの無料セット（大半はGitHubでもawesome-design-mdとしてMITライセンスで公開）は、ダウンロードするか、npx getdesignでインストールできます。他サイトの非公開DESIGN.mdは1回限り$39、Catalog Passは月額$99です。価格は2026-10-20時点で確認しました。
はい、有料の非公開リクエストとしてなら可能です。URLを送信すると、ファイルがメールで届きます。2026-10-20時点では、サイトに即時のセルフサービス型ジェネレーターはありませんでした。Design Extractorは、実行するとすぐに任意の公開URLからDESIGN.mdを生成します。
はい。フロントマターには仕様のプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは仕様どおりの順序で並び、コンポーネント項目には仕様の8つのプロパティだけをリテラル値で使います。無料のDESIGN.mdバリデーターで、どのファイルも仕様に照らしてチェックできます。
各レシピは単独でレンダリングされ、実際のサイトと比較されます。構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックし、それでも合格しないものには理由を明記してフラグを付けます。
いいえ。抽出にはプリペイド式のクレジットを使います。パックは$5で50クレジットから、Pro抽出は10クレジットです。クレジットに有効期限はなく、サブスクリプションもありません。ギャラリーの閲覧と無料ツールの利用には費用はかかりません。
はい。どちらもリポジトリに置いてエージェントに参照させるDESIGN.mdを提供します。Design Extractorに乗り換えても、エージェントの設定は変わりません。