DESIGN.mdは、Google Labsが2026年4月21日にオープンソース（Apache 2.0ライセンス）で公開した、デザインシステムをAIコーディングエージェントに伝えるためのファイル規格です。

プロジェクトのルートディレクトリにDESIGN.mdという1つのMarkdownファイルを置くだけで、Claude Code、Cursor、GitHub CopilotなどのAIツールがそのファイルを読み取り、ブランドカラー・フォント・間隔・コンポーネントのルールに沿ったUIコードを生成するようになります。

Claude CodeやCursorにUIの生成を依頼したことがある方なら、こんな経験があるのではないでしょうか。

この問題の根本原因は、AIエージェントがプロジェクト固有のデザインルールを永続的に把握する手段がなかったことにあります。毎回のプロンプトに詳細なスタイル指定を含めるか、AIが推測に頼るかの二択でした。

DESIGN.mdはこの課題を解決します。一度ファイルを配置すれば、AIはそのデザインシステムを毎回参照し、プロンプトにスタイル情報を含めなくても正しいデザインを生成するようになります。

DESIGN.mdの最大の特徴は、機械可読なデザイントークンと人間向けの設計意図の解説を1つのファイルに統合している点です。

第1層 — YAMLフロントマター（デザイントークン）

ファイル冒頭の—で囲まれた部分に、カラー・フォント・余白などの具体的な値を構造化データとして記述します。

---
version: "alpha"
name: "My Brand Design System"
colors:
  primary: "#1A73E8"
  on-primary: "#FFFFFF"
  background: "#FFFFFF"
  surface: "#F8F9FA"
  text-primary: "#202124"
  text-secondary: "#5F6368"
typography:
  heading-1:
    fontFamily: "Inter"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.3
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.6
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
---

第2層 — Markdownセクション（設計意図の解説）

YAMLブロックの下に、##見出しで区切られたセクションが続きます。ここに「なぜその値を選んだのか」という設計の意図や使い方のルールを自然言語で記述します。

## Colors

Primary blue (#1A73E8) はブランドの信頼感を表現する色です。
CTAボタンやリンクに使い、背景色には使いません。
テキストは常に #202124 を使い、薄いグレー (#5F6368) は
補足的なラベルやキャプションにのみ使います。

## Typography

見出しは Inter Bold を使い、本文は Inter Regular を使います。
見出しと本文のコントラストで情報の階層を明確にします。

## Do's and Don'ts

- Do: ボタンにはprimaryカラーを使う
- Don't: 背景にprimaryカラーを使わない
- Do: 余白はspacingスケールの値のみ使う
- Don't: 任意のピクセル値で余白を指定しない

セクションの推奨順序

DESIGN.mdの仕様では、セクションの順序が以下のように定められています（省略可）。

YAMLフロントマターに記述できるトークンの種類は以下の通りです。

Token Referenceは特に強力な機能です。たとえばボタンの背景色を{colors.primary}と指定しておけば、primaryカラーを変更した時にボタンの色も自動的に追従します。AIエージェントはこの参照関係を理解し、一貫性のあるコードを生成します。

GoogleはDESIGN.mdの仕様と合わせて、検証・比較・エクスポートが可能なCLIツールも公開しています。

DESIGN.mdは特定のツールに依存しない汎用フォーマットです。Markdownファイルを読めるAIエージェントであれば、原理上すべて対応します。

対応が確認されているツール

導入手順（30秒で完了）

特別な設定やプラグインのインストールは不要です。DESIGN.mdはただのMarkdownファイルなので、Git管理の対象にもなり、チーム全体でデザインルールを共有できます。

DESIGN.mdはもともとGoogle Stitchから生まれたフォーマットです。Stitchは2026年3月中旬にGoogle LabsからリリースされたAIデザインプラットフォームで、自然言語の指示からUIデザインを生成するツールです。

4月21日の発表で、GoogleはDESIGN.mdの仕様をStitchから切り離し、独立したオープンソースプロジェクトとしてGitHubに公開しました。これにより、Stitch以外のどのプラットフォームでもDESIGN.mdを利用できるようになりました。

「具体的に何が変わるのか」がもっともイメージしやすいのは、Before/Afterの比較です。クラスメソッド社の実践レポートや複数のブログ記事から、DESIGN.mdの有無で何が変わるかをまとめます。

DESIGN.mdなし — 毎回「ガチャ」状態

• AIに「ダッシュボードを作って」と依頼すると、Tailwindのデフォルトカラー（blue-500等）で生成される
• ボタンのborder-radiusが12pxだったり8pxだったりと、コンポーネントごとにバラバラ
• シャドウの強さやパディングも毎回変わり、ページ全体の統一感がない
• チームメンバーがそれぞれ異なるプロンプトを使うため、同じプロジェクト内でもUI品質にバラつきが出る

DESIGN.mdあり — 一貫性と効率が劇的に改善

• AIが自動的にDESIGN.mdを参照し、指定されたカラー・フォント・余白で生成する
• クラスメソッド社の実験では、プロンプトの文字数が約11,500文字から約3,500文字へ — 約70%削減
• フッターの著作権表記やロゴの配置位置まで自動で反映される
• Claude Codeは「DESIGN.mdに沿って作成します」と明示的に宣言してから生成を開始する

DESIGN.mdの本質的な価値

DESIGN.mdの真の価値は「一度書けば、毎回読んでくれる」点にあります。プロンプトの冒頭にカラーコードを毎回コピペする作業がなくなるだけでなく、AIが設計の意図を理解した上で判断できるようになります。たとえば「このピンクはエラー表示専用」「背景にはプライマリカラーを使わない」といったルールを文脈として把握し、新しいコンポーネントを生成する際にもそのルールを守ります。

DESIGN.mdを自分でゼロから書く必要はありません。コミュニティが公開しているテンプレート集を活用すれば、有名サービスのデザインシステムをそのまま参考にできます。

awesome-design-md — 69種類のブランドテンプレート

GitHubの「awesome-design-md」リポジトリには、Stripe・Notion・Linear・Vercelなど69種類以上の有名ブランドのデザインシステムをDESIGN.md形式に変換したテンプレートが収録されています。

「Notionみたいなデザインにして」が実現する

たとえば社内ツールのUIを「Notionっぽい雰囲気にしたい」と思ったとき、これまではプロンプトに「白背景で、角丸は小さめで、フォントはInter系で…」と細かく指定する必要がありました。

awesome-design-mdのNotionテンプレートを使えば、ファイルを配置するだけでAIがNotionの配色・タイポグラフィ・余白感・コンポーネントスタイルを自動的に再現します。「Stripe風のきれいな決済画面」「Linear風のシンプルなタスク管理画面」なども同様です。

日本語UIに特化したテンプレートも

GitHub上には「awesome-design-md-jp」という日本語UIに特化したリポジトリも公開されています。CJKフォント（Noto Sans JP、Inter等）の指定や、日本語の行間・字間設定が含まれたテンプレートが24ブランド分用意されており、日本語のWeb制作でそのまま使えます。

また、designmd.aiやdesignmd.appでは423種類以上のデザインシステムがライブラリとして公開されており、タグ（clean, modern, SaaS, dashboardなど）で検索して目的のデザインテイストに合ったテンプレートを見つけることができます。

デザインシステムの管理には既存のツールやフォーマットがあります。DESIGN.mdはこれらとどう違うのでしょうか。

DESIGN.mdの最大の差別化ポイントは「設計意図を自然言語で伝えられる」点です。他のフォーマットが「何の値か」を定義するのに対し、DESIGN.mdは「なぜその値なのか」まで伝えることで、AIの判断精度を高めます。

導入が向いているケース

• AIコーディングエージェント（Claude Code, Cursor等）を日常的に使っている開発チーム
• プロトタイプやMVPを素早く作りたいスタートアップ
• デザインの一貫性に課題を感じているプロジェクト
• Tailwind CSSベースのプロジェクト（エクスポートで直接使える）

まだ時期尚早なケース

• 大規模な既存デザインシステムをすでに運用している企業（移行コストが高い）
• フォーマットの安定性が求められるプロダクション環境（アルファ版のため）
• デザインの自由度よりも厳密なピクセルパーフェクトが求められる受託案件

DESIGN.mdは「AIにデザインの意図を伝える」という、これまでありそうでなかったニーズを解決するシンプルなフォーマットです。1つのMarkdownファイルをプロジェクトに置くだけで、AIが生成するUIの品質が格段に向上します。

アルファ版ではあるものの、Apache 2.0で公開されており、100種類以上のテンプレートがコミュニティから提供されています。Googleが業界標準を目指して仕様策定を進めている点も、今後の普及を期待させます。

AIコーディングエージェントを使ってUIを生成する機会がある方は、まずは既存のテンプレートをプロジェクトに配置してみることをおすすめします。30秒の作業で、AIの出力品質の違いを体感できるはずです。