概要

Design Extractorについて

Design Extractorは、公開WebサイトのURLをDESIGN.mdに変換します。サイトのカラー、タイポグラフィ、スペーシング、シェイプ、コンポーネントと、その背後にある考え方を1つのMarkdownファイルにまとめたものです。Claude Code、Cursor、GitHub Copilot、Google StitchなどのAIコーディングエージェントが、スタイルの参考として読み込みます。

運営者

Design Extractorは、ドイツ・Mannheimを拠点とするMagentix Studio(Magentix Studio UG (haftungsbeschränkt))の製品です。代表者(マネージングディレクター)はFadel Kaadanです。会社の詳細は運営者情報に掲載しています。ご連絡はお問い合わせページからどうぞ。

抽出の仕組み

公開URLを貼り付けると、Design Extractorはブラウザで実際のページを読み込み、視覚的な特性(カラー、書体、スペーシング、シェイプ、繰り返し使われるコンポーネント)を読み取って、DESIGN.mdに書き出します。正確なトークン値を記したYAMLのフロントマターと、その使い方を説明するMarkdownの本文で構成されます。

Pro抽出では、サイトの約5ページを対象にします。実行ごとにプリペイド式のクレジットを消費し、こちら側の原因で抽出に失敗した場合はクレジットが残高に戻ります。Design Extractorの仕組みを読む。

ギャラリーの作り方

ギャラリーには、よく知られたサイトの公開ページから、皆さんが実行できるのと同じ抽出で作成したDESIGN.mdファイルを掲載しています。これらはそのページの見た目を記述したものです。公式のブランドガイドラインではなく、ブランドを掲載していることは、その所有者との提携や所有者による推奨を意味するものではありません。ギャラリーに掲載されているサイトの所有者で、削除を希望される場合はお問い合わせください。

はじめに

  • ドキュメント: すべてのガイドをまとめています。
  • DESIGN.mdとは: ファイル形式とそのセクション。
  • 無料ツール: バリデーター、フォント検出ツール、カラーパレット抽出ツール。登録不要です。
  • MCPサーバー: Claude Code、Codex、Cursor、claude.aiから抽出を実行できます。
  • Chrome拡張機能: 現在のタブのページを抽出します。
  • 料金: プリペイド式のクレジットパック、サブスクリプションなし。