DESIGN.mdとは？
DESIGN.mdは機械が読むためのデザインシステムです。色、タイポグラフィ、余白、コンポーネントのルールを、AIが推測せず適用できるほど明確に記述したプレーンテキストのmarkdownです。Google Stitchが導入し公開仕様となったため、Claude Code、Cursorなどテキストを読めるエージェントで使えます。
DESIGN.mdとは何か
DESIGN.mdは完全なデザインシステムを構造化し、機械可読にする一つのMarkdownファイルです。通常は最初に読むYAMLのデザイントークンと、色、文字、余白、形、コンポーネント、動きを説明する文章を組み合わせ、AIが推測せず適用できるようにします。
名前はREADME.mdの慣例に従います。どのツールでも開け、バージョン管理・移植できるプレーンテキストです。READMEが人にプロジェクトを説明するのに対し、DESIGN.mdはスライド、サイト、製品を整えるAIにデザインを説明します。
「現代的でクリーンに」と曖昧に頼む代わりに、DESIGN.mdをプロジェクトへ置くと、エージェントが正確なスタイルをすべての成果物に適用します。
形式の由来：Google Stitch
DESIGN.mdはGoogle LabsのAIデザインツールGoogle Stitchから広まりました。Stitchはdesign.mdをデザインシステムの永続的な記憶として使い、配色、フォント、ルールを保存してプロンプトごとのぶれを防ぎます。
2026年、Google LabsはDESIGN.mdを公開仕様にし、Stitchに縛られずツールやプラットフォームを越えて使えるようにしました。Claude Code、Cursor、Codexなどがプロジェクトルートから読み、awesome-design-mdのようなコミュニティコレクションやCurioの厳選ライブラリが生まれました。
重要なのは、デザインシステムとAIの共通言語になりつつあることです。一度書いた一つのファイルを、次に使うAIも理解できます。
DESIGN.mdの内容
最初にスタイル名、一文のエッセンス、ライトかダークかなどのメタデータを置きます。機械が最初に得る方向です。
Then the token sections, each stated as concrete values rather than adjectives: a color section (a named palette — background, ink, accents — as exact values like <hex>), a typography section (font families, weights, and a type scale in <px>/rem), a spacing section (a rhythm in <px>), and shape, shadow, and motion sections (radii, elevation, easing).
最後に、ボタン、カード、入力のコンポーネントロジックと、適する場所・適さない場所を示します。これでAIは値を作らず、ルールから画面へ進めます。
Curio ships every style in its library as a complete file of this shape. The structure is open so anyone can see how a DESIGN.md is put together; the precise token values for each style are the paid product. The skeleton is public; the exact <hex> and <px> are what you unlock.
機械可読がスクリーンショットより優れる理由
スクリーンショットや雰囲気は情報が欠け、AIが重要な要素を毎回違って推測します。色は真似ても余白を逃し、書体は借りてもグリッドを外します。DESIGN.mdは値を明記し、各画面で正確に同じ適用をします。
一つの決定的なファイルなので一貫し再利用できます。同じDESIGN.mdが1枚目と40枚目、今週のランディングページと来月のダッシュボードを管理します。偶然の見た目ではなく、頼れるシステムです。
プレーンテキストなので、リポジトリに置き、Gitで移動し、デザイン変更を確認できるdiffとして扱えます。
AIがDESIGN.mdを使う方法
ツールに合う方法で渡します。プロジェクトルートに置く、チャットへ貼る、共有リンクを送る、MCPで必要時に取得させる方法です。モデルはトークンを読み、平均へ流れずスタイルに合うコンポーネント、スライド、ページを生成します。
普通のMarkdownなので一つのアシスタントに縛られません。チャット、コーディングツール、エージェントパイプラインのどこでも同じDESIGN.mdが使え、仕様が作業と共に移動します。
自分で書くか、既成のものを選ぶか
既存の自社ブランドや製品のデザインシステムなら、自分でDESIGN.mdを書きます。一度記述すれば、以後のAIツールが忠実に適用します。
Bauhaus、Swiss International、ブランド品質の現代スタイルなど確立したものが欲しく、逆解析したくないなら既成のものを選びます。Curioは数百の実在スタイルを完全なDESIGN.mdとして提供し、AIがMCP、共有リンク、ダウンロードから数秒で適用できます。
FAQ
DESIGN.mdは誰が作りましたか？
DESIGN.mdはGoogle LabsのAIデザインツールGoogle Stitchが導入し、デザインシステムの保存に使いました。後にGoogle Labsが公開仕様としたため、Claude Code、Cursor、Curioなどが現在対応しています。
DESIGN.mdは公式標準ですか？
Google Labsが公開したオープン仕様で、W3Cのような正式標準ではありません。実務上は構造化トークンを持つ普通のMarkdownなので、専用形式や解析器なしで読めます。
DESIGN.mdはGoogle Stitch専用ですか？
いいえ。Stitch発祥ですが、公開仕様の普通のMarkdownなのでClaude Code、Cursor、Codex、チャット、独自パイプラインなどテキストを読めるAIが使えます。
実際のトークン値を無料で見られますか？
DESIGN.mdの構造は公開され、形とセクションを確認できます。Curioでは各スタイルの正確な値が直接利用できる製品なので有料ですが、Freeにも無料スタイルが含まれます。
デザイントークンやFigmaファイルと何が違いますか？
デザイントークンとFigmaファイルはデザインツールやパイプライン向けです。DESIGN.mdはトークンと適用指針を一つのプレーンテキストにまとめ、AIが一度で直接読むための形式です。