AIでUIを生成するたびに、デザインシステムを0から説明し直していないだろうか。

Google Labsが2026年4月21日にオープンソース化した「DESIGN.md」は、AIコーディングエージェントにブランドのデザインルールを一度だけ伝えるためのファイル形式だ。プロジェクトのルートに置くだけで、Claude Code、Cursor、GitHub Copilotといったエージェントが毎回読み込み、ブランド通りのUIを生成するようになる。

この記事でわかること：

  • DESIGN.mdとは何か、なぜ生まれたか
  • GitHubで66,000スターを超えた「awesome-design-md」の中身と使い方
  • Claude CodeやCursorへの組み込み方
  • 公式CLIで何ができるか
  • 現時点の制限と注意点

AIエージェントがデザインを無視する本当の理由

Claude CodeやCursorに「ダッシュボードを作って」と頼むと、機能的に動くUIは生成される。ただし色はデフォルトのTailwindブルー、フォントはsans-serif、余白は適当だ。次のコンポーネントを頼むと、また別のビジュアルになる。

問題はエージェントの性能ではない。エージェントがブランドの情報を持っていないことが原因だ。毎回プロンプトに「メインカラーは#1A1C1E、アクセントは#B8422Eで」と書けばある程度解決するが、これをチーム全員が毎回守るのは現実的ではない。

README.mdがコードベースを人間に説明するように、DESIGN.mdはデザインシステムをAIエージェントに説明するファイルだ。

DESIGN.mdの構造

ファイルはYAML形式の「トークン」と、その意味を説明するMarkdown散文の2要素で構成される。

---
name: Heritage
colors:
  primary: "#1A1C1E"
  tertiary: "#B8422E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---

## Colors

- Primary (#1A1C1E): 見出しと本文テキスト用の深いインク色
- Tertiary (#B8422E): "Boston Clay" — インタラクティブ要素の唯一のアクセント

YAMLブロックが機械読み取り用の具体値を提供し、Markdown部分がそれぞれの「意味」を説明する。エージェントは単なる変数としてではなく、セマンティックな役割として色を理解するため、「このカラーは#B8422Eでいい」ではなく「このボタンにはBoston Clayを使うべき」という判断ができるようになる。

スペックは概要（ブランドの雰囲気）、カラー、タイポグラフィ、コンポーネントトークン、レイアウト原則、深度・エレベーション、Do/Don’t、レスポンシブ挙動、エージェントへの直接指示という9セクションで構成される。

awesome-design-md — 60社超のテンプレート集

GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agen…
GitHub

VoltAgentが管理するこのリポジトリには、実在するWebサイトから抽出した60社以上のDESIGN.mdファイルが収録されている。2026年3月31日の公開から1か月足らずで66,500スターを超え、フォーク数も8,196に達した。

収録ブランドはAIプラットフォーム（Claude、Cohere、ElevenLabs、Mistral AI、Ollama、xAI）、開発ツール（Cursor、Vercel、Warp、Raycast）、バックエンド（Supabase、PostHog、Sanity、Sentry）、デザインツール（Figma、Framer、Webflow）、フィンテック（Stripe、Revolut、Coinbase）など多岐にわたる。各エントリにはDESIGN.md本体と、カラースウォッチやタイポグラフィスケールを確認できるpreview.htmlが付属している。

DESIGN.mdの入手方法

Google Stitchで生成する

stitch.withgoogle.comでプロジェクトを作るか既存のデザインをインポートすると、ビジュアルシステムからDESIGN.mdが自動生成される。無料で使える。

awesome-design-mdからテンプレートを流用する

上記リポジトリから近いブランドのファイルをコピーし、値を自分のブランドに合わせて編集する。Claude、Vercel、Stripeのデザインシステムを参考にしたいときに特に便利だ。

手書きする

任意のテキストエディタで直接書いてGitHubにコミットするだけでよい。Stitchは生成を自動化するツールだが、DESIGN.md自体はどのエディタでも書ける。

Claude CodeやCursorへの組み込み方

DESIGN.mdをプロジェクトルートに置いた後、各ツールに読み込みを指示する。

Claude Codeの場合はCLAUDE.mdに追記する。

UIを生成する前に必ずDESIGN.mdを読み込むこと。
すべてのスタイリングはDESIGN.mdのトークンと解説に従うこと。

Cursorの場合は.cursorrulesに追記する。

UIコードを書く前に @DESIGN.md を読み込む。
任意のカラー値は使わず、デザイントークンのみ参照する。

一度設定すれば、その後の指示でデザインシステムを説明しなくてよくなる。

公式CLIの主要コマンド

Google Labsは@google/design.mdというCLIを合わせて公開している。npxで即時実行できる。

npx @google/design.md lint DESIGN.mdは構造を検証し、コントラスト比をWCAG基準で自動チェックする。エラーがあればコード1で終了するためCIに組み込める。

npx @google/design.md diff DESIGN.md DESIGN.next.mdは2ファイル間のトークン差分をレポートする。改訂版のエラーが増えたときはコード1で終了するので、デザインシステムの意図しない劣化をCIで検知できる。

npx @google/design.md export --format tailwind DESIGN.mdはTailwind設定またはW3C DTCG形式のJSONに変換する。FigmaのVariablesやStorybookとの橋渡しにDTCG形式が使える。

現時点の制限

DESIGN.mdのフォーマット仕様はアルファ版のため、スペック・トークンスキーマ・CLIはいずれも開発中で、今後フォーマットが変わる可能性がある。

Figmaはリアルタイムコラボレーションや細部の精度調整において依然として優れており、DESIGN.mdはFigmaの代替ではない。「Figmaで詳細設計 → DESIGN.mdでエージェントへ渡す」という両立運用が現実的だ。

エージェントへのネイティブ対応はGoogle Stitch以外ではまだ手動のプロンプト参照が中心で、Claude CodeやCursorへの組み込みは上述の手順が必要になる。

まとめ

DESIGN.mdはApache 2.0ライセンスで公開されたオープン仕様で、AIエージェントにデザインシステムを伝えるためのファイル形式だ。awesome-design-mdはその実装済みテンプレートを60社以上分まとめたリポジトリで、今のところ最短でDESIGN.mdを手に入れる手段になっている。

Claude CodeやCursorで本格的にUIを作っているなら、プロジェクトルートにファイルを1つ置いてCLAUDE.mdか.cursorrulesに参照を追記するだけで試せる。毎回のデザイン説明コストが減る体験は、一度試すと後戻りしにくい。