Design Extractor Chrome拡張機能
Design ExtractorのChrome拡張機能は、現在のタブで開いているWebサイトをDESIGN.mdに変換します。サイトのカラー、タイポグラフィ、スペーシング、シェイプ、コンポーネントのルールをまとめた、Claude Code、Cursor、Copilotなどのコーディングエージェント向けのデザインシステムファイルです。ツールバーでワンクリックするだけで、URLを貼り付ける必要はありません。
インストールは無料です。抽出ごとに、サイトと同じ料金でプリペイド残高からクレジットを消費します。
できること
開いているタブからDESIGN.mdを
タブのページを抽出
ワンクリックで、開いているタブのアドレスをホームページのフォームと同じ抽出に送ります。Proではサイトの主要ページもサンプリングするため、1画面だけでなくサイト全体を反映した結果になります。
完全なデザインシステムを作成
カラー、タイポグラフィ、スペーシング、シェイプのYAMLトークンに加え、DESIGN.md形式の8つのセクション（Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components、Do's and Don'ts）を書き出します。
コンポーネントごとのレシピ
ヘッダー、ボタン、入力欄、カードなど、ページから選び出したコンポーネントは、それぞれ要点を抽出したHTMLとCSSとして出力されます。実際のサイトと照合して確認するか、確認できない場合は理由を明記します。
同じアカウント、同じクレジット
拡張機能はdesign-extractor.comのセッションをそのまま使います。2回目のログインは不要で、ポップアップにクレジット残高が表示されます。
使い方
タブからDESIGN.mdまで3ステップ
Chromeに追加してピン留め
Chrome Web Storeからインストールし、パズルのアイコンからピン留めします。要求する権限はdesign-extractor.comと現在のタブへのアクセスだけです。サイトで一度ログインすれば、ポップアップがそのセッションを使います。
公開ページを開いてExtract this pageをクリック
ポップアップでモードを選び、実行を開始します。実行中はポップアップに進捗が表示され、そのまま閲覧を続けられます。
DESIGN.mdを開く
Open resultをクリックすると、サイト上のDESIGN.mdが開きます。抽出履歴にも保存されるので、リポジトリに置く前にコピー、ダウンロード、編集ができます。
インストールの詳細、ログイン、クレジット、現在の制限については拡張機能のセットアップガイドをご覧ください。URLを貼り付けたい場合は、ホームページから同じ抽出を実行できます。
比較
TypeUIのDESIGN.md Style Extractorと比べて加わる機能
TypeUIのDESIGN.md Style Extractorは、タブで開いているページのスタイルをTypeUI独自のテンプレートに埋め込む、無料のオープンソース拡張機能です。Design Extractorの拡張機能は、次の機能を追加します。
Googleの仕様に沿ったDESIGN.md
トークンはYAMLのフロントマターに、標準セクションは仕様どおりの順序で並びます。どのファイルも無料のDESIGN.mdバリデーターで確認できます。
選び出したコンポーネントごとのレシピ
ヘッダー、ボタン、入力欄、カードなどについて要点を抽出したHTMLとCSS。それぞれ構造の一致とピクセル比較で実際のサイトと照合して確認するか、確認できない場合は理由を明記します。
地域制限のあるサイト
一部の国からの訪問者をブロックしているサイトでは、別の国のブラウザを経由して実行できます。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。
サイトと同じアカウントとクレジット
すべての実行は抽出履歴に保存され、そこで編集、コピー、ダウンロードができます。エージェントはMCP経由でそれを読み込めます。
時点で、バージョン0.4.0、そのREADMEとソースコード、Chrome Web Storeの掲載情報をもとに確認しました。
| 項目 | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| サイトの読み取り方 | 当社のサーバーがブラウザでページのアドレスを開き、レンダリングされたページを分析します。Proではサイトの主要ページもサンプリングします。 | タブで開いているページの表示要素（最大280個）について、計算済みスタイルをブラウザ内で読み取ります。 |
| 出力が準拠するもの | GoogleのDESIGN.md仕様。トークンはYAMLのフロントマターに、標準セクションは仕様どおりの順序で並びます。 | TypeUI独自のDESIGN.mdテンプレート（Mission、Brand、Style Foundations、Rulesなど）で、YAMLのフロントマターはありません。またはSKILL.md。 |
| コンポーネント | ページから選び出したコンポーネントごとに、要点を抽出したHTMLとCSSのレシピ。構造の一致とピクセル比較で実際のサイトと照合して確認するか、確認できない場合は理由を明記します。 | 一般的なコンポーネントのガイダンスの下に、コンポーネントの種類ごとの数。出力はレンダリングされたページと比較されません。 |
| 結果の保存先 | サイトの抽出履歴に保存され、そこで編集、コピー、ダウンロードができます。 | ポップアップに表示され、そこでコピーするか、ファイルとしてダウンロードします。 |
| 読み取れるページ | 公開ページのみ。ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページにはまだ対応していません。 | タブで開いているページ。ページを直接読み取るため、ログイン中のページも含みます。 |
| 料金 | インストールは無料。抽出にはプリペイド式のクレジットを消費します。 | 無料、オープンソース（MIT）。 |
Googleの仕様に沿ったDESIGN.mdを、実際のサイトと照合したコンポーネントごとのレシピ付きで、アカウントに保存したい場合は、Design Extractorの拡張機能をお選びください。詳しい比較はTypeUI vs Design Extractorをご覧ください。
よくある質問
Chrome拡張機能に関する質問
拡張機能のインストール、送信する内容、料金についての簡潔な回答です。
インストールは無料です。抽出ごとに、サイトと同じ料金でプリペイド残高からクレジットを消費します。パックは$5で50クレジットから。サブスクリプションはなく、クレジットに有効期限はありません。こちら側の原因で抽出に失敗した場合、クレジットは返金されます。
Extract this pageをクリックしたときに、現在のタブのアドレスと選んだモードだけを送信します。ページの内容を読み取ることはなく、閲覧中のページでバックグラウンド実行することもなく、分析機能も含まれていません。
まだ使えません。当社のサーバーがアドレスからページをキャプチャするため、ページが公開されている必要があります。ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページには対応していません。拡張機能はChrome専用です。
いいえ。ポップアップはdesign-extractor.comでログインしたセッションをそのまま使います。ログアウトしている場合は、サイトを開くSign inボタンが表示されます。ポップアップでログアウトすると、サイトからもログアウトします。
リポジトリのファイルを読み込めるエージェントならどれでも使えます。DESIGN.mdをコードと一緒に保存し、Claude Code、Cursor、GitHub Copilot、Codex、Windsurf、Google Stitchに新しいUIのスタイルの参考として指定してください。
TypeUIのDESIGN.md Style Extractorなどの拡張機能は、ブラウザ内で計算済みスタイルを読み取り、その値を独自のテンプレートに埋め込みます。Design Extractorは、Googleの仕様に沿ったDESIGN.mdを作成し、ページから選び出したコンポーネントごとにHTMLとCSSのレシピを付けて、実際のサイトと照合して確認するか理由を明記したうえで、アカウントに保存します。