ドキュメント
Design Extractorの仕組み
URLを貼り付けると、構造化されたデザイン仕様が手に入ります。カラー、タイポグラフィ、スペーシング、コンポーネントを、リポジトリにそのまま置けるDESIGN.mdにまとめます。
DESIGN.mdとは？
DESIGN.mdは、人間もAIエージェントも読める、プレーンテキストのデザインシステムドキュメントです。AGENTS.mdのデザイン版と考えてください。AGENTS.mdがエージェントにプロジェクトの作り方を伝えるのに対し、DESIGN.mdは見た目と使い心地がどうあるべきかを伝えます。
内部的には、どのDESIGN.mdも2つの層で構成されています。機械可読なデザイントークンを記したYAMLのフロントマターと、デザインの意図を説明するMarkdownの本文です。トークンはエージェントに正確な値を、文章はその値がなぜ存在するのかを伝えます。
標準セクション
- Overview
- Colors
- Typography
- Layout
- Elevation & Depth
- Shapes
- Components
- Do's and Don'ts
仕組み
入力
公開URLを貼り付けます（例：
design-extractor.com）。抽出
システムがページをクロールし、カラー、タイポグラフィ、スペーシング、コンポーネントのパターン、全体的なデザイン言語といった視覚的な特性を分析します。
出力
次の内容を含むDESIGN.mdが1つ：
- 概要とブランドスタイルのガイダンス
- 名前付きトークンを持つカラーパレット
- タイポグラフィのレベルとフォントのプロパティ
- レイアウト、スペーシング、シェイプのトークン
- コンポーネントのガイダンスとトークン参照
- デザインのガードレールとして機能するDo's and Don'ts
出力
1回の抽出で、DESIGN.mdが1つ作成されます。
Markdown
- DESIGN.md。標準のDESIGN.md形式はGoogle Stitchによって導入されました。どのリポジトリに置いても、AIエージェントが読み込めます。
Chrome拡張機能
ここに戻らなくても、現在のタブのページを抽出できます。拡張機能はサイトのセッションをそのまま使い、同じクレジットを消費します。拡張機能の仕組みを読む ->
重要なポイント
AIエージェントは、正確なトークンと人が読める意図の両方を与えられると、より良いデザインを出力します。YAMLのフロントマターは正確な値を、Markdownの本文はその値を実際にどう使うべきかを伝えます。
試してみませんか？
公開URLからDESIGN.mdを取得できます。抽出には少なくとも1分かかります。