TypeUI vs Design Extractor
TypeUIのDESIGN.md Style Extractorは、タブで開いているページのスタイルを読み取り、TypeUI独自のDESIGN.mdテンプレートを埋める無料のChrome拡張機能です。Design ExtractorのファイルはGoogleのDESIGN.md仕様に沿っており、ページから選び出した各コンポーネントを、コーディングエージェントが再構築できるHTMLとCSSのレシピとして出力します。各レシピは実際のサイトと照合して確認するか、確認できない場合は理由を明記します。特定の国からの訪問者にしか応答しないサイトにも対応しています。
初めての方は、まずDESIGN.mdとは何かをご覧ください。
時点で、拡張機能のREADMEとソースコード、Chrome Web Storeの掲載情報、TypeUIのREADMEをもとに確認しました。提供内容や価格は変わることがあるため、判断する前に先方のサイトをご確認ください。
Design Extractorを選ぶ理由
GoogleのDESIGN.md仕様に準拠
YAMLのフロントマターには仕様で定義されたプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは、OverviewからDo's and Don'tsまで仕様どおりの順序で並びます。フロントマターのコンポーネント項目には仕様の8つのプロパティだけを使い、値はリテラルで記述します。どのファイルも無料のDESIGN.mdバリデーターで確認できます。
ページから選び出したコンポーネントごとのレシピ
ページから選び出したヘッダー、フッター、ボタン、入力欄、カードなどのコンポーネントは、それぞれレシピとして出力されます。リテラル値で書かれた、要点を抽出したHTMLとCSSで、DESIGN.mdのComponentsセクションに含まれます。各レシピには、構成要素と、サイトで確認されたホバー時とフォーカス時の状態が記載されているため、コーディングエージェントは推測ではなくコンポーネントを再構築できます。
実際のサイトと照合
各レシピは単独でレンダリングされ、実際のサイトと照合されます。レンダリングされた構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックします。それでも合格しないものは理由を明記してフラグを付け、検証済みとして出力することはありません。結果ページでは、コンポーネントの一致度と、サイトのカラーとテキストスタイルのカバー率を確認できます。ギャラリーのStripeをご覧ください。
地域制限のあるサイトにも対応
一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、結果ページに国の選択肢が表示されます（ページを読み込めることが確認された国が先頭に並びます）。選んだ国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
比較表
| TypeUI | Design Extractor | |
|---|---|---|
| 仕様への準拠 | 提供なし | GoogleのDESIGN.md仕様に準拠：フロントマターには仕様のプロパティだけを使い独自のトップレベルキーはなく、標準セクションは仕様どおりの順序で、コンポーネント項目は仕様の8つのプロパティとリテラル値に限定。 |
| コンポーネントのレシピ | コンポーネントは、一般的なコンポーネントのガイダンスの下に、種類ごとの数（ボタン、リンク、入力欄、カード、ナビゲーション、リスト、テーブル）として表示されます。 | ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、ComponentsセクションのHTMLとCSSを要点に絞ったレシピとして出力され、コーディングエージェントが再構築できます。 |
| 実際のサイトとの照合 | 提供なし | はい。各レシピは単独でレンダリングされ、構成要素の構造の一致チェックとピクセル比較で、実際のサイトと照合されます。合格しないコンポーネントは理由を明記してフラグを付け、検証済みとして出力することはありません。 |
| 地域制限のあるサイト | 提供なし | はい。一部の国からの訪問者をブロックしているサイトでは、失敗した実行に国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。 |
| 概要 | DESIGN.md Style Extractor。TypeUIの開発元であるBergside SRLによる無料のChrome拡張機能です。バージョン0.4.0、Chrome Web Storeでのユーザー数は約40,000人、MITライセンスのオープンソースです。 | ジェネレーター：サイト上、MCP経由、またはChrome拡張機能から公開URLを渡すと、そのサイトのDESIGN.mdが手に入ります。 |
| 出力が準拠するもの | TypeUI独自のDESIGN.mdテンプレート：Mission、Brand、Style Foundations、Accessibility、Writing Tone、Rulesなどで、YAMLのフロントマターはありません。SKILL.mdを書き出すこともできます。 | GoogleのDESIGN.md仕様：トークンはYAMLのフロントマターに、標準セクションは仕様どおりの順序で並びます。 |
| サイトの読み取り方 | タブで開いているページの表示要素（最大280個）について、計算済みスタイルをネットワークリクエストなしでブラウザ内で読み取ります。 | 当社のサーバーがブラウザでURLを開き、レンダリングされたページを分析します。Proではサイトの主要ページもサンプリングします。 |
| 読み取れるページ | タブで開いているページ。ログイン中のページも含みます。 | 公開ページのみ。ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページにはまだ対応していません。 |
| 結果の保存先 | ポップアップに表示され、そこでコピーまたはダウンロードします。Quick installボタンを使うと、選んだプロジェクトのClaude Code、Codex、Cursorのスキルフォルダに、SKILL.mdを書き込みます。 | アカウントの抽出履歴に保存され、そこで編集、コピー、ダウンロードができます。エージェントはMCP経由でそれを読み込めます。 |
| 価格 | 無料。アカウントも支払いも不要です。 | プリペイド式のクレジット、サブスクリプションなし。パックは$5で50クレジットから。Pro抽出は10クレジットです。ギャラリーと無料ツールの利用には費用はかかりません。 |
| エージェントからの利用 | 拡張機能はポップアップから実行します。TypeUIの別個のCLIとホスト型MCPサーバーは、TypeUIが厳選したデザインスキルとUIプロンプトを提供します。 | 任意のURLを受け付ける抽出ツールを備えたリモートMCPサーバー。Claude Code、claude.ai、ChatGPT、Codex、Cursorなどのクライアントから使えます。 |
TypeUIの提供内容
- 無料のオープンソース（MIT）のChrome拡張機能。Chrome Web Storeでのユーザー数は約40,000人で、アカウントも支払いも不要です。
- タブで開いているページ上で、すべてブラウザ内で動作します。ログイン中のページも含みます。
- タイポグラフィ、カラー、スペーシング、角丸、影、モーションの値を、TypeUI独自の形式のDESIGN.md、またはSKILL.mdにまとめます。
- ポップアップからファイルをコピーまたはダウンロードするか、Quick installでSKILL.mdをClaude Code、Codex、Cursorのプロジェクトに追加します。
- 拡張機能のほかに、TypeUIは厳選したデザインスキル、UIプロンプト、オープンソースのCLI、ホスト型MCPサーバーを提供しています。また、強化されたデザインスキルファイル、レイアウト用のUIプロンプト、非公開のDiscordコミュニティが付いたPro版もあります。
両者の違い
TypeUIの拡張機能は、1ページで見つけたスタイルの値を要約し、テンプレートの一般的なガイダンスを加えます。Design Extractorはサイトをレンダリングしてコンポーネントを選び出し、それぞれのレシピを作成したうえで、すべてのレシピを実際のサイトと照合します。そのため、エージェントはどのコンポーネントを書かれたとおりに再構築でき、どれに理由付きでフラグが付いたかがわかります。ギャラリーのStripeでご確認ください。
開いているタブから始めたい場合は、Design ExtractorのChrome拡張機能が、同じアカウントとクレジットで、そのタブを同じ抽出に送ります。エージェントがMCPサーバー経由で実行を開始し、結果を読み込むこともできます。完成したファイルはギャラリーでさらにご覧いただけます。
TypeUIからの乗り換え方
- Design ExtractorのホームページにサイトのURLを貼り付けるか、Chrome拡張機能でExtract this pageをクリックして、Pro抽出を実行します。
- 結果をDESIGN.mdとしてリポジトリのルートに保存して、古いファイルを置き換えます。AGENTS.mdやCLAUDE.mdの参照はそのまま機能します。
- Quick installを使っていた場合は、TypeUIが書き込んだdesign-systemスキルのフォルダを削除し、DESIGN.mdの参照は残してください。
- エージェントに自ら抽出を実行させるには、MCPサーバーを接続してください。
結論
Googleの仕様に沿い、ページから選び出したコンポーネントごとにレシピがあり、それぞれ実際のサイトと照合されるか理由付きでフラグが付けられ、アカウントに保存されるDESIGN.mdが必要な場合は、Design Extractorをお選びください。地域制限のあるサイトにも対応しています。エージェントからMCP経由で実行できます。表のとおり、TypeUIの拡張機能は無料で、ログイン中のページも読み取れます。
その他の比較
getdesign.md vs Design Extractor
既製のDESIGN.mdファイルを厳選したコレクションと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
designmd.me vs Design Extractor
URLからDESIGN.mdを作る2つのジェネレーターを、仕様への準拠、コンポーネントのレシピ、実際のサイトとの照合、価格で比較。
Refero Styles vs Design Extractor
Webサイトのスタイルを集めた大規模な無料ライブラリと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。
よくある質問
TypeUI vs Design Extractor：よくある質問
TypeUIとDesign Extractorについての簡潔な回答です（2026-10-20時点で確認）。
はい。2026-10-20時点で、拡張機能は無料かつMITライセンスのオープンソースで、アカウントも支払いも不要でした。Design Extractorは無料ではありません。抽出にはプリペイド式のクレジットを消費し、パックは$5で50クレジットから、Pro抽出は10クレジットです。ギャラリーと無料ツールの利用には費用はかかりません。
いいえ。ファイルはMission、Brand、Style Foundations、Rulesなどのセクションを持つオープンソースのTypeUI DESIGN.md形式に沿っており、バージョン0.4.0はYAMLのフロントマターを書き出さないため、GoogleのDESIGN.md仕様には沿っていません。Design ExtractorはGoogleの仕様に沿っており、無料のDESIGN.mdバリデーターでどのファイルも仕様に照らしてチェックできます。
Googleの仕様に沿ったDESIGN.mdです。トークンはフロントマターに入り、ヘッダー、フッター、ボタン、入力欄、カードなど、ページから選び出した各コンポーネントは、要点を抽出したHTMLとCSSのレシピとして含まれます。各レシピは構造の一致チェックとピクセル比較で実際のサイトと照合され、合格しないものは理由を明記してフラグが付けられます。
はい。タブ内のページをブラウザ内で読み取るため、ログイン中のページでも動作します。Design Extractorが読み取れるのは公開ページのみで、ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページにはまだ対応していません。
Design Extractorは別の国から抽出を実行できます。そのために実行が失敗した後、結果ページに国の選択肢が表示され（ページを読み込める国が先頭）、その国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。
はい。どちらもリポジトリに置くDESIGN.mdを作成するため、エージェントの設定は変わりません。サイト上またはChrome拡張機能から、サイトをDesign Extractorで抽出し、ファイルを置き換えてください。Quick installを使っていた場合は、TypeUIが書き込んだdesign-systemスキルのフォルダを削除し、DESIGN.mdの参照は残してください。