Google提唱の「DESIGN.md」でAIが生成するUIのバラつき問題を解決 — 仕組みと活用法を解説
はじめに
AIコーディングエージェントにUIを生成させると、ページごとにボタンの色が違ったり、フォントサイズがバラバラだったりと、デザインの一貫性が崩れる問題に悩まされた経験はないだろうか。Google Labsが開発したStitchプラットフォームから生まれた「DESIGN.md」は、この問題に正面から取り組む新しいアプローチだ。本記事では、DESIGN.mdとは何か、どのような構成になっているか、そして実際の開発でどう活用できるかを詳しく解説する。
DESIGN.mdとは何か — AIが読むデザインシステム
DESIGN.mdは、プロジェクトのデザインルール（カラーパレット、タイポグラフィ、スペーシング、コンポーネントパターンなど）をMarkdown形式で記述したファイルだ。Figmaの出力でもJSONスキーマでもなく、ただのMarkdownファイルである点がポイントとなる。
従来、AIエージェントがUIを生成する際には、視覚的なデザインコンテキストが失われてしまっていた。デザイナーが作成したFigmaファイルやスタイルガイドは人間向けに最適化されており、AIが解釈するには情報が断片的すぎた。DESIGN.mdはこのギャップを埋める。自然言語で書かれたデザインルールをAIが直接読み取り、コードに反映する。
この仕組みはAnthropicのCLAUDE.md（AIの振る舞いを定義するファイル）やAGENTS.md（エージェントのアクションを定義するファイル）と同じ発想に基づいている。プロジェクトルートに設定ファイルを置くだけで、AIエージェントが自動的にコンテキストを理解する。DESIGN.mdを読んだエージェントは「10ページ生成しても同じデザイナーが作ったように見える」UIを出力できるようになる。
DESIGN.mdの構成 — 9つのセクション
DESIGN.mdの標準的な構成は以下の9セクションで構成される。
1. Visual Theme & Atmosphere（ビジュアルテーマ） インターフェース全体の「雰囲気」を自然言語で記述する。ミニマル、ダーク、コーポレートといったデザイン哲学をAIに伝える起点となる。
2. Color Palette & Roles（カラーパレット） HEXコードでプライマリ、セカンダリ、ニュートラルのカラーを定義する。単なる色の羅列ではなく、「成功」「警告」「エラー」といったセマンティックな役割も明記する。
3. Typography Rules（タイポグラフィ） フォントファミリー、サイズ階層、ウェイト、行間をテーブル形式で定義する。見出しからキャプションまで、完全な文字体系を記述する。
4. Component Stylings（コンポーネント） ボタン、カード、入力フィールド、ナビゲーションなどの主要コンポーネントについて、通常状態・ホバー・フォーカス・無効化といった各状態のスタイルを定義する。
5. Layout Principles（レイアウト） グリッドシステム、スペーシングスケール、余白の哲学を記述する。8pxグリッドなのか4pxグリッドなのか、コンポーネント間のマージンはどう取るかを明確にする。
6. Depth & Elevation（深度） シャドウシステムとサーフェス階層を定義する。モーダル、カード、ドロップダウンなどの要素がどの「高さ」に位置するかを決める。
7. Do’s and Don’ts（ガードレール） AIが守るべきルールと避けるべきパターンを明示する。「角丸は8pxで統一」「グラデーションは使わない」といった具体的な制約を設ける。
8. Responsive Behavior（レスポンシブ） ブレークポイント、タッチターゲットのサイズ、レイアウトの折りたたみ戦略を記述する。
9. Agent Prompt Guide（エージェント向けガイド） カラーの参照方法やAIへの指示テンプレートなど、エージェントがすぐに使えるプロンプトを提供する。
この構成により、AIエージェントはプロジェクトのデザインコンテキストを体系的に理解し、どのページ・コンポーネントを生成しても一貫したビジュアルを維持できる。
エコシステムの広がり — 58サイト分のテンプレートも
DESIGN.mdはGoogle Stitchだけの閉じた仕組みではない。すでにコミュニティ主導でエコシステムが広がっている。
GitHubの「awesome-design-md」リポジトリでは、Stripe、Notion、Vercel、Linear、Figma、Airbnb、Spotifyなど58サイトのDESIGN.mdテンプレートが公開されている。「Stripeのようなデザインでページを作って」と指示する代わりに、StripeのDESIGN.mdをプロジェクトにコピーするだけで、AIが自動的にStripeライクなUIを生成する。
また、npmパッケージ「brandmd」を使えば既存サイトからデザインルールを抽出できるほか、CLIツールやMCPサーバーを通じてAIエージェントが構造化データとしてDESIGN.mdにアクセスする仕組みも整備されつつある。
Claude Code、Cursor、その他のAIコーディングツールでも、プロジェクトルートにDESIGN.mdを配置するだけで機能する。特別なプラグインや設定は不要だ。
エンジニアへの影響 — 「指示する人」から「レビューする人」へ
DESIGN.mdの登場は、AIを使ったUI開発のワークフローを根本的に変える可能性がある。
これまでは、AIにUIを生成させるたびに「ボタンの色は#3B82F6で、角丸は8pxで、フォントはInter…」と詳細な指示を毎回書く必要があった。DESIGN.mdがあれば、こうした指示はすべてファイルに集約される。開発者の役割は「UIの詳細仕様を逐一書く人」から「AIが生成したコードをレビュー・微調整する人」にシフトする。
特にフロントエンドの経験が浅いバックエンドエンジニアや、デザインシステムの知識がないチームにとっては大きな恩恵がある。既存の有名サービスのDESIGN.mdをベースに、自社プロダクトに合わせてカスタマイズするだけで、プロフェッショナルな品質のUIを一貫して生成できる。
一方で、DESIGN.mdはあくまで「ルールの定義」であり、ルール自体の設計はまだ人間の仕事だ。どのカラーパレットを選ぶか、コンポーネントの状態遷移をどう設計するかは、デザイナーやフロントエンドエンジニアの専門知識が求められる。AIが「実行」を担い、人間が「設計と判断」に集中するという、AI時代の役割分担がここにも表れている。
まとめ
- DESIGN.mdは、デザインシステムをMarkdownで記述し、AIエージェントがUIの一貫性を保ったまま生成できるようにする仕組み
- Google LabsのStitchプラットフォームから生まれ、CLAUDE.mdと同じ「プロジェクトルートにファイルを置く」アプローチを採用
- 9セクション構成で、カラー・タイポグラフィ・コンポーネント・レスポンシブまでカバー
- コミュニティにより58サイト分のテンプレートやCLIツールが整備済み
- 開発者の役割を「仕様を書く人」から「レビューする人」へとシフトさせる可能性がある
AIコーディングエージェントの活用が広がるなか、DESIGN.mdはCLAUDE.mdやAGENTS.mdに並ぶ「AIに読ませるドキュメント」の新しいスタンダードになりそうだ。