designmd.me vs Design Extractor
designmd.meとDesign Extractorは、どちらもWebサイトのURLを、AIコーディングエージェント向けのDESIGN.mdに変換します。Design ExtractorのファイルはGoogleのDESIGN.md仕様に沿っており、ページから選び出した各コンポーネントを、エージェントが再構築できるHTMLとCSSのレシピとして出力します。各レシピは実際のサイトと照合して確認するか、確認できない場合は理由を明記します。特定の国からの訪問者にしか応答しないサイトにも対応しています。
初めての方は、まずDESIGN.mdとは何かをご覧ください。
時点で、designmd.me、料金ページ、CLIリファレンス、Figmaのページ、Discoverセクションのファイルをもとに確認しました。提供内容や価格は変わることがあるため、判断する前に先方のサイトをご確認ください。
Design Extractorを選ぶ理由
GoogleのDESIGN.md仕様に準拠
YAMLのフロントマターには仕様で定義されたプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは、OverviewからDo's and Don'tsまで仕様どおりの順序で並びます。フロントマターのコンポーネント項目には仕様の8つのプロパティだけを使い、値はリテラルで記述します。どのファイルも無料のDESIGN.mdバリデーターで確認できます。
ページから選び出したコンポーネントごとのレシピ
ページから選び出したヘッダー、フッター、ボタン、入力欄、カードなどのコンポーネントは、それぞれレシピとして出力されます。リテラル値で書かれた、要点を抽出したHTMLとCSSで、DESIGN.mdのComponentsセクションに含まれます。各レシピには、構成要素と、サイトで確認されたホバー時とフォーカス時の状態が記載されているため、コーディングエージェントは推測ではなくコンポーネントを再構築できます。
実際のサイトと照合
各レシピは単独でレンダリングされ、実際のサイトと照合されます。レンダリングされた構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックします。それでも合格しないものは理由を明記してフラグを付け、検証済みとして出力することはありません。結果ページでは、コンポーネントの一致度と、サイトのカラーとテキストスタイルのカバー率を確認できます。ギャラリーのStripeをご覧ください。
地域制限のあるサイトにも対応
一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、結果ページに国の選択肢が表示されます（ページを読み込めることが確認された国が先頭に並びます）。選んだ国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
比較表
| designmd.me | Design Extractor | |
|---|---|---|
| 仕様への準拠 | YAMLのフロントマターに仕様のトークンを書き出し、さらにsource、themes、breakpointsなど、仕様で定義されていないトップレベルキーも加えます。セクションは独自のもので、Visual Theme & AtmosphereからKnown Gapsまで番号が振られています。 | GoogleのDESIGN.md仕様に準拠：フロントマターには仕様のプロパティだけを使い独自のトップレベルキーはなく、標準セクションは仕様どおりの順序で、コンポーネント項目は仕様の8つのプロパティとリテラル値に限定。 |
| コンポーネントのレシピ | 各コンポーネントは、背景、フォント、パディング、ボーダー、角丸などのスタイル値を並べたリストです。HTMLは含まれません。 | ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、ComponentsセクションのHTMLとCSSを要点に絞ったレシピとして出力され、コーディングエージェントが再構築できます。 |
| 実際のサイトとの照合 | 提供なし | はい。各レシピは単独でレンダリングされ、構成要素の構造の一致チェックとピクセル比較で、実際のサイトと照合されます。合格しないコンポーネントは理由を明記してフラグを付け、検証済みとして出力することはありません。 |
| 地域制限のあるサイト | 提供なし | はい。一部の国からの訪問者をブロックしているサイトでは、失敗した実行に国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。 |
| 概要 | ジェネレーター：URLを貼り付けると、DESIGN.mdが手に入ります。Crowdlinkerが開発しています。 | ジェネレーター：公開URLを貼り付けると、そのサイトのDESIGN.mdが手に入ります。 |
| 読み取るページ | シングルページ（ランディングページ）またはマルチページ（サイトの主要ページ）を、実行ごとに選択できます。 | Proではサイトの主要ページをサンプリングします。 |
| 1回あたりの価格 | シングルページは4クレジット、マルチページは8クレジット。成功した場合のみ請求されます。 | Pro抽出は10クレジット。こちら側の原因で失敗した実行は返金されます。 |
| クレジットパック | $5で50、$15で175、$30で375、または任意の金額のチャージ。クレジットに有効期限はありません。 | $5で50、$10で110、$25で300。クレジットに有効期限はありません。サブスクリプションなし。 |
| 無料で始める | 初回訪問時に4クレジット、新規登録時にさらに20クレジットが無料。始めるのにカードは不要です。 | 新規登録時の無料クレジットはありません。ギャラリーと無料ツールの利用には費用はかかりません。 |
| その他の機能 | HTMLプレビューファイル（追加で8クレジット）、Variables、Styles、ボードのFigmaインポート（12クレジット、生成ごとに1回）、2つのサイトの並列比較。 | 結果ページでのファイルのSourceとPreviewの表示、Visual systemパネルに加え、無料ツール：DESIGN.mdバリデーター、フォント検出ツール、カラーパレット抽出ツール。 |
| 作成済みのサンプル | 生成されたサイトを集めたDiscoverセクション。カテゴリーとランキング付き。 | 抽出済みブランドのギャラリー。無料で閲覧、コピーできます。 |
| エージェントからの利用 | CLI（@crowdlinker/designmdme）と、Claude Code、Cursorなどスキル対応エージェント向けのエージェントスキル。MCPサーバーはありません。 | Claude Code、claude.ai、ChatGPT、Codex、Cursorなどのクライアント向けのリモートMCPサーバーと、Claude CodeおよびCodex向けのプラグイン。 |
| ブラウザ拡張機能 | 提供なし | 開いているタブを抽出するChrome拡張機能。 |
designmd.meの提供内容
- 初回訪問時と新規登録時の無料クレジット。始めるのにカードは不要です。
- シングルページの実行は4クレジット、マルチページの実行は8クレジットで、成功した場合のみ請求されます。
- HTMLの見本ページと、VariablesとStylesのFigmaインポート。いずれも追加のクレジットが必要です。
- 2つのサイトのデザインシステムの並列比較。
- CLIと、Claude Code、Cursorなどスキル対応エージェント向けのエージェントスキル。
両者の違い
どちらのツールもURLからDESIGN.mdを返します。Design Extractorは、ページから選び出した各コンポーネントをレシピとして出力し、実際のサイトと照合するため、エージェントはどのコンポーネントを書かれたとおりに再構築でき、どれに理由付きでフラグが付いたかがわかります。ギャラリーのStripeでご確認ください。
Design Extractorは、作業している場所でも使えます。エージェントはMCPサーバー経由で抽出を開始して結果を読み込めますし、Chrome拡張機能は開いているタブを抽出します。完成したファイルはギャラリーでさらにご覧いただけます。
designmd.meからの乗り換え方
- Design ExtractorのホームページにサイトのURLを貼り付けて、Pro抽出を実行します。
- 結果をDESIGN.mdとしてリポジトリのルートに保存して、古いファイルを置き換えます。AGENTS.mdやCLAUDE.mdの参照はそのまま機能します。
- エージェントに自ら抽出を実行させるには、designmd.meのCLIの代わりにMCPサーバーを接続してください。
結論
Googleの仕様に沿い、ページから選び出したコンポーネントごとにレシピがあり、それぞれ実際のサイトと照合されるか理由付きでフラグが付けられたDESIGN.mdが必要な場合は、Design Extractorをお選びください。地域制限のあるサイトにも対応しています。エージェントからMCP経由で実行できます。表のとおり、1回あたりのクレジットはdesignmd.meのほうが少なくて済みます。
その他の比較
getdesign.md vs Design Extractor
既製のDESIGN.mdファイルを厳選したコレクションと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
Refero Styles vs Design Extractor
Webサイトのスタイルを集めた大規模な無料ライブラリと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
TypeUI vs Design Extractor
タブ内のスタイルから独自のテンプレートを埋めるTypeUIの無料Chrome拡張機能と、実際のサイトと照合したコンポーネントのレシピ付きの仕様準拠のDESIGN.mdの比較。
よくある質問
designmd.me vs Design Extractor：よくある質問
designmd.meとDesign Extractorについての簡潔な回答です（2026-10-20時点で確認）。
無料で始められます。2026-10-20時点では、新規訪問者に4クレジット、新規登録時にさらに20クレジットが無料で付与され、カードは不要でした。その後のクレジットパックは$5で50クレジットからです。シングルページの実行は4クレジット、マルチページの実行は8クレジットです。
designmd.meです。designmd.meのパックは$5で50クレジットから、私たちのパックは$5で50クレジットからです。designmd.meのマルチページの実行は8クレジット、シングルページの実行は4クレジットで、Design ExtractorのPro実行は10クレジットです。designmd.meのHTMLプレビューとFigmaインポートには追加のクレジットがかかります。
Googleの仕様に沿ったDESIGN.mdです。トークンはフロントマターに入り、ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、要点を抽出したHTMLとCSSのレシピとして含まれます。各レシピは構造の一致チェックとピクセル比較で実際のサイトと照合され、合格しないものは理由を明記してフラグが付けられます。
いいえ。designmd.meにはCLIとエージェントスキルがありますが、MCPサーバーはありません。Design ExtractorはリモートMCPサーバーです。claude.ai、Claude Desktop、ChatGPT、Claude Codeはログインして接続し、Codex、Cursor、スクリプトはAPIキーを使います。
Design Extractorは別の国から抽出を実行できます。そのために実行が失敗した後、結果ページに国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
はい。どちらもリポジトリに置くDESIGN.mdを作成するため、エージェントの設定は変わりません。サイトをDesign Extractorで抽出し、ファイルを置き換えてください。