「AIにデザインシステムを理解させるには、Figmaのトークンをexportして、JSON変換して、プラグインを入れて、またハンドオフして…」——去年までの光景でした。今はmarkdown1枚で済みます。2026年4月21日、GoogleがDESIGN.md仕様を公式オープンソース化しました。 Stitchを作る中で社内で使っていたフォーマットなのですが、今では誰でも自分のプロジェクトルートに置くだけで、Claude・Cursor・StitchなどのAIエージェントがそれを読んで一貫したUIを作ってくれます。VoltAgentが作ったawesome-design-mdコレクションは、4月リリースから1か月でGitHub 68.7Kスターを達成し、Linear/Apple/Stripe/Claude/Notion/Vercelなど70ブランドのDESIGN.mdが丸ごと公開されています。
これは何?
DESIGN.mdは、デザインシステムをmarkdown1枚に収めたファイルです。AGENTS.md（エージェントにコーディング方法を教えるファイル）のデザイン版と考えるとわかりやすいです。VoltAgentがまとめた比較が直感的です。
| ファイル | 読む対象 | 定義するもの |
|---|---|---|
| AGENTS.md | コーディングエージェント（Cursor・Claude Code・Codexなど） | プロジェクトをどう作るか |
| DESIGN.md | デザインエージェント（Stitch・Claude Designなど） | プロジェクトをどう見せるか |
「MarkdownはLLMが最もよく読めるフォーマットだから、パースや設定が必要ありません。プロジェクトルートに置くだけで完了。」— VoltAgent README.
GoogleはDESIGN.mdをStitch（自社のvibe designツール）社内で1年前から使っていました。そのうち外部の開発者たちが自分のバージョンを作り始め、企業が自分のmarkdownを公開し始めました。4月21日にGoogleが標準仕様を公式にオープンソース化しました。 このタイミングから「それぞれが適当に作ったmarkdown」が「Googleが保証する標準」へと格上げされました。
- 2層構造
上はYAMLトークン（hex、フォントサイズ、スペーシングなど——機械が読む）。下はmarkdownの散文（なぜそう決めたのか——人とエージェントの判断用）。「何を」と「なぜ」を分離します。 - 9つの標準セクション
Visual Theme & Atmosphere、Color Palette、Typography Rules、Component Stylings、Layout Principles、Depth & Elevation、Do's/Don'ts、Responsive Behavior、Agent Prompt Guide。 - 2種類のプレビュー
各DESIGN.mdには preview.html（ライト）と preview-dark.html（ダーク）の2つのビジュアルカタログが付属します。色・タイプ・ボタン・カードを一目で確認できます。
実際のawesome-design-mdに揃う70ブランドのラインナップは圧倒的です。AI/LLMにはClaude・Cohere・ElevenLabs・Mistral・Ollama・Replicate・xAI。開発者ツールにはCursor・Vercel・Warp・Raycast。バックエンドにはPostHog・Supabase・Sentry・MongoDB。デザインツールにはFigma・Framer・Webflow。フィンテックにはStripe・Coinbase・Revolut。自動車ではFerrari・Lamborghini・Teslaまで揃っています。 「Stripeスタイルで作って」という曖昧な指示の代わりに、stripe/DESIGN.mdを直接渡す方式です。
Figmaのワークフローと何が違うのか?
この1年でデザインシステムをAIに渡す方法が何度も変わりました。現場で感じる違いをまとめるとこうなります。
| 項目 | Figma + MCP/プラグイン | DESIGN.md |
|---|---|---|
| セットアップ | Figmaアカウント + プラグイン/MCPサーバー + 認証 | ファイル1個をプロジェクトルートにコピー |
| 転送コスト | トークンexport、JSON変換、コンテキストウィンドウを丸ごと消費 | 数百行のmarkdown——コンテキスト効率が圧倒的 |
| ツール依存 | Figmaロックイン。他のエージェントは読めない | プレーンテキスト。Claude・Cursor・Stitchすべてが読める |
| 更新 | Figma変更 → 再export → 再デプロイ | git diff一行、PRレビューで完結 |
| 「なぜ」の保持 | コンポーネント名・色の値だけ——意図が消える | 「Golden Retriever orangeで楽しい活気を」のような散文を保持 |
デザインシステムが「ファイルツリーの中のテキスト」になったため、コードレビュー・PR・git blame・ブランチがそのまま使えます。
特に重要なのが「なぜ」の保持です。トークンだけをexportすると、hexコードは渡せても、その色を選んだ理由——「楽観的で信頼感があり活動的なブランドトーン」というコンテキスト——が消えてしまいます。新しいコンポーネント、例外ケース、想定外のレイアウト制約が生まれたとき、エージェントが判断する根拠がなくなるのです。DESIGN.mdのmarkdownの半分は、まさにこれを収めています。 「絶対に要素をぎっしり詰めないこと」のような指針はトークン化できませんが、判断には決定的な影響を与えます。
① インタラクション・アニメーションはまだ標準にない（散文で書けるが定型化が不十分）。② 多言語フォントシステム（日中韓のfallback）のような複雑なルールはmarkdownで表現しにくい。③ Figmaの実際のピクセル検証ワークフローを完全には置き換えられない——DESIGN.mdは「どう見せるか」のガイドであり、ピクセル整合は別途必要。④ 70ブランドのコレクションは「公開CSSから抽出したもの」なので、元ブランドと100%一致はしない。 インスピレーション・スタート地点として捉えてください。
また、Stitchは4月にMCPインテグレーションもリリースしました。AIコーディングエージェント（例: Anti-Gravity）がStitchのデザインを見て直接レイアウト変更リクエストを送ったり、デザインバリエーションを自動生成したりできます。双方向フィードバックループです。 DESIGN.mdが「フォーマット標準化」を完了し、MCPが「ツール間の双方向通信」を解放したことで、デザイン・コードのハンドオフが実質的になくなる段階に入りました。
始め方のポイント
導入コストはほぼゼロです。30分で始められるステップをまとめます。
- レファレンスDESIGN.mdを入手
getdesign.mdまたはgithub.com/voltagent/awesome-design-mdから、自分のプロダクトとトーンが近いブランドのDESIGN.mdをダウンロードします。Linear（ミニマル精密）、Stripe（パープルグラデーション優雅）、Notion（温かみのあるミニマル）、Vercel（ブラック・ホワイト精密）などが人気です。 - プロジェクトルートにコピー
DESIGN.mdをプロジェクトルート（README.mdの隣）に置くだけです。別途インデックスやプラグインは不要。 - エージェントに伝える
「DESIGN.mdに従って[機能]を実装して」と言えば、Claude Code・Cursor・Stitchが自動でhex・フォント・スペーシングを適用してくれます。AGENTS.mdに一行追加しておくとより安定します。 - 自分のブランド向けにカスタマイズ
レファレンスDESIGN.mdをベースに色・フォント・トーンを変えます。Stitch DESIGN.md formatドキュメント（stitch.withgoogle.com/docs）に標準9つのセクションが整理されています。 - gitにコミットしてチームと共有
ここが本当の価値が出るステップ。デザインシステムがPRでレビューされ、ブランチで実験され、blameで追跡されます。デザイナーとエンジニアが同じ言語で話し始めます。
もう一点——単にFigma exportの代替として見ると小さく映ります。より大きな絵は、「デザインシステム自体がテキストになれば、AIエージェントがデザインの意思決定に参加できる」という点です。Department of Productの記事に引用されたGokul（元Google・Metaプロダクトリーダー）の「デザインがAI最初の犠牲者」という言葉が論争を呼びましたが、その主張の核心は「セントラルデザインシステムがAIに取り込まれる形で整理されれば、デザイナー採用のバックフィルが減るだろう」ということです。 賛否はともかく、デザインシステムがmarkdownに収束していく流れは止めにくいように見えます。
さらに深掘りしたい人へ
VoltAgent — awesome-design-md（68.7K Stars） Linear・Apple・Stripe・Claudeなど70ブランドのDESIGN.mdフルコレクション。preview.htmlとダーク版も付属 github.com
getdesign.md — ダウンロードディレクトリ awesome-design-mdのWebインターフェース。カテゴリ別ブラウジング、特定サイトのDESIGN.mdリクエストも可能 getdesign.md
Google Stitch公式 — Vibe Designツール DESIGN.md仕様の出発点。自然言語でUI作成、Figma export、MCPインテグレーションでコーディングエージェントの双方向フィードバック stitch.withgoogle.com
Department of Product — DESIGN.md Explained 2層構造の解剖、「デザインがAI最初の犠牲者」論争の整理、AGENTS.md vs DESIGN.md比較 departmentofproduct.substack.com
