Awesome DESIGN.md

AI エージェントが読む、プレーンテキストのデザインシステム集 / VoltAgent 製

1 — 概要
DESIGN.md とは何か

DESIGN.md は Google Stitch が提唱した新しいコンセプト。AI エージェントが読むためのプレーンテキスト設計書で、カラーパレット・タイポグラフィ・コンポーネントスタイル・レイアウト原則をマークダウンで記述する。特別なツールも JSON スキーマも不要で、プロジェクトルートに置くだけで AI コーディングエージェントが UI の見た目を統一してくれる。

58 DESIGN.md ファイル
7 カテゴリ
3 ファイル / ブランド
9 セクション / DESIGN.md

このリポジトリは実在する有名サービスのウェブサイトから抽出した ready-to-use な DESIGN.md ファイルのキュレーションコレクション。Figma エクスポートなし・JSON スキーマなし・特別なツールなし。マークダウンは LLM が最も得意とするフォーマット。

AGENTS.md との違い
ファイル読む主体定義する内容
AGENTS.md コーディングエージェント プロジェクトのビルド方法・開発手順
DESIGN.md デザインエージェント / AI コーディングエージェント UI がどのように見えるべきか・デザイン哲学
2 — コレクション（58 ブランド）
カテゴリ別一覧

7 つのカテゴリに分類された 58 ブランド。各ブランドのウェブサイトから CSS 値を抽出し、統一フォーマットで記述している。

AI & Machine Learning 12
Claude Cohere ElevenLabs Minimax Mistral AI Ollama OpenCode AI Replicate RunwayML Together AI VoltAgent xAI
Developer Tools & Platforms 14
Cursor Expo Linear Lovable Mintlify PostHog Raycast Resend Sentry Supabase Superhuman Vercel Warp Zapier
Infrastructure & Cloud 6
ClickHouse Composio HashiCorp MongoDB Sanity Stripe
Design & Productivity 10
Airtable Cal.com Clay Figma Framer Intercom Miro Notion Pinterest Webflow
Fintech & Crypto 4
Coinbase Kraken Revolut Wise
Enterprise & Consumer 7
Airbnb Apple IBM NVIDIA SpaceX Spotify Uber
Car Brands 5
BMW Ferrari Lamborghini Renault Tesla
3 — DESIGN.md の構造
Google Stitch フォーマット準拠 + 拡張

すべての DESIGN.md は Stitch DESIGN.md フォーマットに基づき、9 つのセクションで構成されている。

#セクションキャプチャする内容
1 Visual Theme & Atmosphere ムード・情報密度・デザイン哲学
2 Color Palette & Roles セマンティック名 + Hex 値 + 機能的役割
3 Typography Rules フォントファミリー・完全なヒエラルキー表
4 Component Stylings ボタン・カード・インプット・ナビゲーション（各状態）
5 Layout Principles スペーシングスケール・グリッド・空白の哲学
6 Depth & Elevation シャドウシステム・サーフェスヒエラルキー
7 Do's and Don'ts デザインガードレール・アンチパターン
8 Responsive Behavior ブレークポイント・タッチターゲット・折りたたみ戦略
9 Agent Prompt Guide クイックカラーリファレンス・すぐに使えるプロンプト
実際の DESIGN.md 例 — Stripe の Visual Theme より: カスタム sohne-var 可変フォント・weight 300 のヘッドライン・rgba(50,50,93,0.25) を使ったブルーティントのシャドウシステム。「blue-tinted multi-layer shadows」は Stripe らしさを決定づける要素として明記されている。
4 — 各ファイル構成
ブランドごとのファイル

各ブランドのディレクトリには 3 種類のファイルが含まれる。

DESIGN.md
AI エージェントが読む設計書本体。9 セクションの完全なデザインシステム記述。
preview.html
カラースウォッチ・タイプスケール・ボタン・カードを表示するビジュアルカタログ（ライトモード）。
preview-dark.html
同じカタログをダークサーフェスで表示するバリエーション。
ディレクトリ例 
design-md/
├── stripe/
│   ├── DESIGN.md        ← AI エージェントが読む
│   ├── preview.html     ← デザインカタログ（ライト）
│   └── preview-dark.html ← デザインカタログ（ダーク）
├── cursor/
│   ├── DESIGN.md
│   ├── preview.html
│   └── preview-dark.html
└── ...
5 — 使い方
2 ステップで導入できる

複雑な設定は一切不要。欲しいブランドの DESIGN.md をコピーしてプロジェクトに置くだけ。

Step 01
DESIGN.md をコピー
欲しいブランドのディレクトリから DESIGN.md をコピーし、プロジェクトのルートに置く。どのブランドのスタイルに近い UI を作りたいかで選ぶ。
Step 02
AI エージェントに指示
AI コーディングエージェントに 「DESIGN.md を参照してこのページを作って」 と伝えるだけ。Google Stitch でもそのまま使える。エージェントが一貫した UI を自動生成する。
Google Stitch との互換性: DESIGN.md フォーマットは Google Stitch が策定した仕様を拡張したもの。Stitch のデザインエージェントはこのファイルをネイティブに解釈できる。
参考・貢献
リソース内容
GitHub — VoltAgent/awesome-design-md 本リポジトリ。すべての DESIGN.md ファイルとプレビュー HTML。
Google Stitch — DESIGN.md Overview DESIGN.md コンセプトの原典ドキュメント。
Google Stitch — DESIGN.md Format フォーマット仕様の詳細。
DESIGN.md リクエスト GitHub Issue テンプレートから追加リクエストを送れる。
VoltAgent このリポジトリの管理元 AI エージェントフレームワーク。
コントリビュート

既存ファイルの改善（色の誤り・トークン不足・記述の弱さの修正）や新しいブランドのリクエストは歓迎。PR を開く前に Issue で事前ディスカッションすることが推奨されている。

ライセンスは MIT。抽出されたデザイントークンは公開 CSS 値の表現であり、各サービスのビジュアルアイデンティティの所有権は主張していない。