awesome-design-md

Awesome DESIGN.md

実際の開発者向けウェブサイトから抽出した、厳選された 54 個の DESIGN.md ファイルを集めました。それぞれのファイルは、AI エージェントが読み取り、ピクセル単位で正確かつブランドに一貫性のある UI を生成できる、完全なデザインシステム仕様です。

DESIGN.md とは？

DESIGN.md は、Google Stitch が提唱したコンセプトです。AI エージェントが一貫性のある UI を生成するために読み取る、プレーンテキスト形式のデザインシステムドキュメントです。通常の Markdown ファイルなので、プロジェクトのルートに配置するだけで、AI コーディングエージェントが UI の見た目をすぐに理解できます。

使い方

1. ユーザーが「[ブランド] のような見た目にして」と言う → 下記から該当するリファレンスファイルを探します
2. references/{site-name}.md のリファレンスファイルを読み取ります
3. DESIGN.md の内容をユーザーのプロジェクトのルートに DESIGN.md としてコピーします
4. UI コードの生成時にデザイントークン（色、タイポグラフィ、余白、コンポーネント）を使用します

利用可能なデザインシステム

AI と機械学習

サイト	リファレンス	スタイル
Claude	references/claude.md	温かみのあるテラコッタのアクセント、すっきりとしたエディトリアルレイアウト
Cohere	references/cohere.md	鮮やかなグラデーション、データ豊富なダッシュボードの美しさ
ElevenLabs	references/elevenlabs.md	暗く映画的な UI、オーディオ波形の美しさ
Minimax	references/minimax.md	ネオンのアクセントが際立つ大胆なダークインターフェース
Mistral AI	references/mistral.ai.md	フランス流のミニマリズム、紫を基調としたデザイン
Ollama	references/ollama.md	ターミナル優先、モノクロのシンプルさ
OpenCode AI	references/opencode.ai.md	開発者中心のダークテーマ
Replicate	references/replicate.md	清潔感のある白いキャンバス、コードを前面に出したデザイン
RunwayML	references/runwayml.md	映画的なダーク UI、メディア豊富なレイアウト
Together AI	references/together.ai.md	技術的で設計図を思わせるデザイン
VoltAgent	references/voltagent.md	漆黒のキャンバス、エメラルドのアクセント、ターミナルネイティブ
xAI	references/x.ai.md	無機質なモノクロ、未来的なミニマリズム

開発者向けツールとプラットフォーム

サイト	リファレンス	スタイル
Cursor	references/cursor.md	洗練されたダークインターフェース、グラデーションのアクセント
Expo	references/expo.md	ダークテーマ、狭い文字間隔、コード中心
Linear	references/linear.app.md	徹底的にミニマルで精密、紫のアクセント
Lovable	references/lovable.md	遊び心のあるグラデーション、親しみやすい開発者向けの美しさ
Mintlify	references/mintlify.md	すっきりとしたデザイン、緑のアクセント、読みやすさを重視
PostHog	references/posthog.md	遊び心のあるハリネズミのブランディング、開発者に使いやすいダーク UI
Raycast	references/raycast.md	洗練されたダーククローム、鮮やかなグラデーションのアクセント
Resend	references/resend.md	ミニマルなダークテーマ、等幅フォントのアクセント
Sentry	references/sentry.md	ダークなダッシュボード、データ密度が高く、ピンクと紫のアクセント
Supabase	references/supabase.md	ダークエメラルドのテーマ、コード優先
Superhuman	references/superhuman.md	プレミアムなダーク UI、キーボード優先、紫の輝き
Vercel	references/vercel.md	白黒を精密に使ったデザイン、Geist フォント
Warp	references/warp.md	IDE のようなダークインターフェース、ブロックベースのコマンド UI
Zapier	references/zapier.md	温かみのあるオレンジ、親しみやすいイラスト主体

インフラストラクチャとクラウド

サイト	リファレンス	スタイル
ClickHouse	references/clickhouse.md	黄色のアクセント、技術ドキュメント風のスタイル
Composio	references/composio.md	カラフルな連携アイコンを使ったモダンなダークデザイン
HashiCorp	references/hashicorp.md	エンタープライズ向けのすっきりとした白黒デザイン
MongoDB	references/mongodb.md	緑の葉のブランディング、開発者向けドキュメントを重視
Sanity	references/sanity.md	赤のアクセント、コンテンツを前面に出したエディトリアルレイアウト
Stripe	references/stripe.md	独自の紫のグラデーション、ウェイト 300 の優雅さ

デザインと生産性

サイト	リファレンス	スタイル
Airtable	references/airtable.md	カラフルで親しみやすく、構造化データを思わせるデザイン
Cal.com	references/cal.md	すっきりとしたニュートラルなUI、開発者向けのシンプルさ
Clay	references/clay.md	有機的な形、柔らかなグラデーション、アートディレクションされたレイアウト
Figma	references/figma.md	鮮やかなマルチカラー、遊び心がありながらプロフェッショナル
Framer	references/framer.md	大胆な黒と青、モーション重視、デザイン主導
Intercom	references/intercom.md	親しみやすいブルーパレット、会話型UIのパターン
Miro	references/miro.md	明るい黄色のアクセント、無限キャンバスを思わせるデザイン
Notion	references/notion.md	温かみのあるミニマリズム、セリフ体の見出し、柔らかな面
Pinterest	references/pinterest.md	赤のアクセント、メイソンリーグリッド、画像重視
Webflow	references/webflow.md	青をアクセントにした、洗練されたマーケティングサイトのデザイン

フィンテックと暗号資産

サイト	リファレンス	スタイル
Coinbase	references/coinbase.md	すっきりとしたブルーのブランドイメージ、信頼を重視した、機関投資家向けの印象
Kraken	references/kraken.md	紫をアクセントにしたダークUI、データ密度の高いダッシュボード
Revolut	references/revolut.md	洗練されたダークインターフェース、グラデーションカード、フィンテックらしい精密さ
Wise	references/wise.md	明るいグリーンのアクセント、親しみやすく分かりやすいデザイン

エンタープライズとコンシューマー

サイト	リファレンス	スタイル
Airbnb	references/airbnb.md	温かみのあるコーラルのアクセント、写真主導、角丸のUI
Apple	references/apple.md	ゆとりあるプレミアムな余白、SF Pro、シネマティックな画像
BMW	references/bmw.md	ダークでプレミアムな表面、精密なドイツのエンジニアリングを思わせるデザイン
IBM	references/ibm.md	Carbon デザインシステム、構造化されたブルーパレット
NVIDIA	references/nvidia.md	グリーンとブラックの力強さ、技術的なパワーを感じさせるデザイン
SpaceX	references/spacex.md	starkな白黒、画面いっぱいの画像、未来的なデザイン
Spotify	references/spotify.md	ダークな背景に鮮やかなグリーン、大胆な文字、アルバムアート主導
Uber	references/uber.md	大胆な白黒、引き締まった文字、都会的なエネルギー

各 DESIGN.md の内容

すべてのファイルは、9つのセクションで構成される Google Stitch DESIGN.md format に準拠しています。

1. ビジュアルテーマと雰囲気 — ムード、密度、デザイン哲学
2. カラーパレットと役割 — 意味を表す名前＋16進数＋機能上の役割
3. タイポグラフィのルール — フォントファミリー、完全な階層表
4. コンポーネントのスタイル — 状態ごとのボタン、カード、入力欄、ナビゲーション
5. レイアウトの原則 — 余白のスケール、グリッド、ホワイトスペースの考え方
6. 奥行きとエレベーション — 影のシステム、サーフェスの階層
7. 推奨事項と禁止事項 — デザインのガードレールとアンチパターン
8. レスポンシブ動作 — ブレークポイント、タッチターゲット、折りたたみ方針
9. エージェント向けプロンプトガイド — 色のクイックリファレンス、そのまま使えるプロンプト

ワークフロー

1. ユーザーがブランドを指定する → 直接一致

User: "Build me a landing page that looks like Stripe"
→ Read references/stripe.md
→ Copy content to user's project as DESIGN.md
→ Use the design tokens to generate UI code

2. ユーザーが一覧を見たい → 絞り込んで提案

User: "Show me dark-themed design systems"
→ Suggest: Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, etc.
→ Let user pick, then load that reference

3. ユーザーがスタイルを指定しない場合 → スマートな提案

ユーザーがブランドやスタイルの希望に触れずに UI の構築を依頼した場合（例：「ランディングページを作って」「ダッシュボードを書いて」「SaaS の公式サイトを作って」）、プロジェクトの種類に応じて 3～5 種類のデザインシステムを積極的に提案します。

プロジェクトの種類	おすすめのスタイル	理由
SaaS の公式サイト／ランディングページ	Stripe, Vercel, Linear	定番のコンバージョン率の高い SaaS スタイルで、シンプルかつプロフェッショナル
開発者向けツール／テクノロジー製品	Vercel, Cursor, Raycast, Supabase	ダークカラー、コードとの親和性、ギークな雰囲気
AI 製品／チャット UI	Claude, Mistral AI, ElevenLabs	AI ネイティブなデザイン言語で、温かみまたは未来感がある
フィンテック／金融製品	Stripe, Revolut, Coinbase	信頼感、精密さ、データ密度の高さ
効率化ツール／生産性向上製品	Notion, Linear, Superhuman	ミニマル、高い情報密度、キーボード操作を優先
E コマース／消費者向けブランド	Airbnb, Apple, Spotify	ビジュアル重視、大きな画像、感情に訴えるデザイン
社内向け管理画面／ダッシュボード	Sentry, PostHog, ClickHouse	データ密度の高いダークテーマのダッシュボード
クリエイティブツール／デザインツール	Figma, Framer, Clay	大胆な配色、躍動感あふれるデザイン
エンタープライズ／B2B	IBM, HashiCorp, MongoDB	落ち着きがあり、構造化され、成熟したデザインシステム

おすすめの手順：

User: "帮我做一个 AI 聊天产品的界面"
→ Agent: "推荐以下设计风格供你选择：
   1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
   2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
   3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
   4. ⬛ Vercel — 黑白精准，极致简约
   5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
   选一个编号，我直接用对应的设计系统帮你生成。"
→ User picks one → Load reference → Generate UI

ユーザーが「何でもいい」または「任せる」と言った場合：

• デフォルトでは Vercel を選びます（最も無難で、幅広く使える選択肢：すっきり、モダン、プロフェッショナル）
• 選択したスタイルを伝え、変更できることを案内します：「まずは Vercel スタイル（シンプルな白黒）で進めます。気に入らなければいつでも変更できます。」