Refero Styles vs Design Extractor
Design Extractorは、指定された任意の公開URLからDESIGN.mdを作成します。ファイルはGoogleのDESIGN.md仕様に沿っており、ページから選び出した各コンポーネントを、コーディングエージェントが再構築できるHTMLとCSSのレシピとして出力します。各レシピは実際のサイトと照合して確認するか、確認できない場合は理由を明記します。特定の国からの訪問者にしか応答しないサイトにも対応しています。
Refero Stylesは、Webサイトのスタイルを集めた大規模な無料ライブラリで、各スタイルのカラー、タイポグラフィ、スペーシング、コンポーネントを複数の形式で提供しています。初めての方はDESIGN.mdとは何かをご覧ください。
時点で、styles.refero.design、スタイルページの1つ、スタイルのサイトマップをもとに確認しました。提供内容や価格は変わることがあるため、判断する前に先方のサイトをご確認ください。
Design Extractorを選ぶ理由
GoogleのDESIGN.md仕様に準拠
YAMLのフロントマターには仕様で定義されたプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは、OverviewからDo's and Don'tsまで仕様どおりの順序で並びます。フロントマターのコンポーネント項目には仕様の8つのプロパティだけを使い、値はリテラルで記述します。どのファイルも無料のDESIGN.mdバリデーターで確認できます。
ページから選び出したコンポーネントごとのレシピ
ページから選び出したヘッダー、フッター、ボタン、入力欄、カードなどのコンポーネントは、それぞれレシピとして出力されます。リテラル値で書かれた、要点を抽出したHTMLとCSSで、DESIGN.mdのComponentsセクションに含まれます。各レシピには、構成要素と、サイトで確認されたホバー時とフォーカス時の状態が記載されているため、コーディングエージェントは推測ではなくコンポーネントを再構築できます。
実際のサイトと照合
各レシピは単独でレンダリングされ、実際のサイトと照合されます。レンダリングされた構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックします。それでも合格しないものは理由を明記してフラグを付け、検証済みとして出力することはありません。結果ページでは、コンポーネントの一致度と、サイトのカラーとテキストスタイルのカバー率を確認できます。ギャラリーのStripeをご覧ください。
地域制限のあるサイトにも対応
一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、結果ページに国の選択肢が表示されます（ページを読み込めることが確認された国が先頭に並びます）。選んだ国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
比較表
| Refero Styles | Design Extractor | |
|---|---|---|
| 仕様への準拠 | 提供なし | GoogleのDESIGN.md仕様に準拠：フロントマターには仕様のプロパティだけを使い独自のトップレベルキーはなく、標準セクションは仕様どおりの順序で、コンポーネント項目は仕様の8つのプロパティとリテラル値に限定。 |
| コンポーネントのレシピ | 各コンポーネントは、役割と寸法とともに文章で説明されています。HTMLは含まれません。 | ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、ComponentsセクションのHTMLとCSSを要点に絞ったレシピとして出力され、コーディングエージェントが再構築できます。 |
| 実際のサイトとの照合 | 提供なし | はい。各レシピは単独でレンダリングされ、構成要素の構造の一致チェックとピクセル比較で、実際のサイトと照合されます。合格しないコンポーネントは理由を明記してフラグを付け、検証済みとして出力することはありません。 |
| 地域制限のあるサイト | 提供なし | はい。一部の国からの訪問者をブロックしているサイトでは、失敗した実行に国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。 |
| 概要 | Webサイトのスタイルの無料ライブラリ（ベータ版）。refero.designのUIリファレンス製品であるReferoが提供しています。 | ジェネレーター：公開URLを渡すと、そのサイトのDESIGN.mdを返します。 |
| 任意のWebサイトにオンデマンドで対応 | 提供なし | はい。公開URLを貼り付けると、すぐに実行が始まります。 |
| 対象範囲 | スタイルのサイトマップに掲載されている1,342件のスタイルページ。 | あらゆる公開Webサイトと、抽出済みブランドのギャラリー。 |
| スタイルごとの形式 | DESIGN.md（compactとextended）、Tailwind v4、CSS変数、デザイントークン。 | DESIGN.mdを1つ。トークンはフロントマターに、コンポーネントのレシピはHTMLとCSSで含まれます。 |
| 価格 | 閲覧とコピーは無料。 | プリペイド式のクレジット、サブスクリプションなし。パックは$5で50クレジットから。Pro抽出は10クレジットです。 |
| 情報の新しさ | スナップショット。Appleのスタイルは2026-09-20に抽出されたものです。 | 実行した瞬間の実際のサイトから作成します。 |
| エージェントからの利用 | 各スタイルページから、Claude、ChatGPT、Cursor、Codexなどに対応したReferoのMCPへリンクしています。 | 任意のURLを受け付ける抽出ツールを備えたリモートMCPサーバー。Claude Code、claude.ai、ChatGPT、Codex、Cursorなどのクライアントから使えます。 |
| ブラウザ拡張機能 | 提供なし | 開いているタブを抽出するChrome拡張機能。 |
Refero Stylesの提供内容
- Webサイトのスタイルの無料ライブラリ。ダークモードのSaaSやエディトリアルなレイアウトなど、雰囲気で閲覧できます。
- スタイルごとに複数の形式：DESIGN.md（compactとextended）、Tailwind v4、CSS変数、デザイントークン。
- Claude、ChatGPT、Cursor、Codexなどに対応したReferoのMCPへのリンク。
ライブラリか、任意のURLにオンデマンドで対応か
Refero Stylesからの乗り換え方
- Design ExtractorのホームページにサイトのURLを貼り付けて、Pro抽出を実行します。
- 結果をDESIGN.mdとしてリポジトリのルートに保存し、AGENTS.mdやCLAUDE.mdの参照はそのまま残します。手で編集した場合は、無料のDESIGN.mdバリデーターで確認してください。
- または、エージェントに任せることもできます。MCPサーバーを接続して、サイトの抽出を頼んでください。
結論
ライブラリにあるサイトに限らず、任意の公開サイトのDESIGN.mdを、実際のサイトと照合したコンポーネントのレシピ付きで必要とする場合は、Design Extractorをお選びください。現在のサイトの見た目を読み取り、Googleの仕様に沿って、ページから選び出したコンポーネントごとにレシピを作成し、合格しない場合は理由を明記してフラグを付けます。地域制限のあるサイトにも対応しています。エージェントからMCP経由で実行できます。
その他の比較
getdesign.md vs Design Extractor
既製のDESIGN.mdファイルを厳選したコレクションと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
designmd.me vs Design Extractor
URLからDESIGN.mdを作る2つのジェネレーターを、仕様への準拠、コンポーネントのレシピ、実際のサイトとの照合、価格で比較。
TypeUI vs Design Extractor
タブ内のスタイルから独自のテンプレートを埋めるTypeUIの無料Chrome拡張機能と、実際のサイトと照合したコンポーネントのレシピ付きの仕様準拠のDESIGN.mdの比較。
よくある質問
Refero Styles vs Design Extractor：よくある質問
Refero StylesとDesign Extractorについての簡潔な回答です（2026-10-20時点で確認）。
はい。2026-10-20時点では、styles.refero.designでのスタイルの閲覧とコピーは無料でした。各ページからはrefero.designのReferoのMCPにリンクしています。
いいえ。Refero Stylesには自分のURLを送信する方法がなく、ライブラリから選びます。Design Extractorは、実行すると任意の公開URLからDESIGN.mdを作成します。
いいえ。Design Extractorが作成するのは1つのファイル、つまりGoogleの仕様に沿ったDESIGN.mdです。トークンはフロントマターに入り、ページから選び出した各コンポーネントは、要点を抽出したHTMLとCSSのレシピとして含まれます。コーディングエージェントがそれを読み込み、プロジェクトで使うスタイルを書きます。
各コンポーネントのレシピは単独でレンダリングされ、実際のサイトと比較されます。構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。合格しないレシピには理由を明記してフラグを付け、検証済みとして出力することはありません。
2026-10-20時点で、スタイルのサイトマップには1,342件のスタイルページが掲載されていました。
Design Extractorは別の国から抽出を実行できます。そのために実行が失敗した後、結果ページに国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。