あらゆるWebサイトから
DESIGN.mdを取得

DESIGN.mdは、AIコーディングエージェントが一貫したUIを生成するために読み込む、プレーンテキストのデザインシステムドキュメントです。AGENTS.mdのデザイン版にあたり、人もエージェントも読んで、編集し、ルールとして守ることができます。内部は2つの層で構成されています。YAMLのフロントマターには、カラー、タイポグラフィ、スペーシングなどの機械可読なデザイントークンが入ります。Markdownの本文では、デザインの意図を説明します。

DESIGN.mdには通常、Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components、Do's and Don'tsの8つの標準セクションがこの順に含まれます。YAMLのフロントマターには正確なトークン値が記録されます。Markdownの本文では、それらをどのように、なぜ適用するのかを説明します。関係のないセクションは省略でき、分野固有のセクションを追加することもできます。

公開WebサイトのURLをDesign Extractorに貼り付けて、抽出をクリックします。新規登録してクレジットパックを購入すると、抽出のたびに数クレジットを消費します。結果はコピーできるDESIGN.mdです。DESIGN.mdをリポジトリに置けば、AIエージェントがClaude、Cursor、Copilot、Stitchでスタイルの参考として読み込みます。

プロジェクトのディレクトリからMarkdownファイルを読み込めるAIコーディングツールなら、どれでもDESIGN.mdを使えます。Claude Code、Cursor、GitHub Copilotのほか、ファイルにアクセスできるコーディングアシスタントが対象です。DESIGN.mdをプロジェクトのルートやdocsフォルダに置き、プロンプトで参照してください。

一般に公開されているWebサイトであれば抽出できます。Design Extractorは、ブラウザでレンダリングされた実際のページを分析します。静的サイト、SPA、サーバーサイドレンダリングのページに対応しています。サイトには標準的なHTTP/HTTPSのURLでアクセスできる必要があります。

官公庁のポータルや地域のショップなど、一部のサイトは特定の国からの訪問者にしか表示されません。サイトにアクセスを拒否されて抽出に失敗した場合は、結果ページにその旨が表示され、サイトが表示される国が提案されます。国を選ぶと、その国のブラウザでページを読み込み、通常どおり抽出します。別の国からの実行には、モードの料金に少額の追加料金がかかり、開始前に表示されます。それでも失敗した実行は返金されます。同じオプションはChrome拡張機能とMCPサーバーでも利用できます。

はい。Design ExtractorのChrome拡張機能は、サイトでログインしたセッションをそのまま使うため、別途ログインする必要はありません。ポップアップにはクレジット残高が表示され、ワンクリックで現在のタブのページを、ホームページのフォームと同じ抽出に送れます。LiteまたはProを選べ、消費するクレジットもフォームと同じです。完成したDESIGN.mdはサイトで開き、抽出履歴に表示されます。この最初のバージョンでは、ページが公開されている必要があります。キャプチャはサーバー側で行うため、ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページにはまだ対応していません。編集とダウンロードは引き続きサイトで行います。

はい。Design ExtractorはMCPサーバーとしても使えます。claude.ai、Claude Desktop、ChatGPTでは、サーバーのURLをコネクタとして追加し、アカウントでログインします。Claude Code、Codex、Cursor、Agent SDKでは、コマンド1つで接続できます（ドキュメントページに各クライアント用の設定があり、APIキーが必要なクライアントにはアカウントページで発行したキーを使います）。あとはサイトの抽出を頼むだけです。エージェントが実行を開始し、1分ほどしてから結果を確認し、リポジトリに保存するDESIGN.mdのテキストを受け取ります。消費するクレジットはサイトと同じです。Claude CodeとCodexではプラグインとしてインストールすることもでき、DESIGN.mdをコードベースに適用するスキルが追加されます。