Awesome DESIGN.md
VoltAgent/awesome-design-md — 開発者向けサイトから抽出した DESIGN.md を、AI コーディングエージェントが読めるプレーンテキストのデザインシステムとして公開するコレクション。
Awesome DESIGN.md は、Stripe・Vercel・Notion など実在する開発者向けサイトのビジュアル言語を、DESIGN.md という単一 Markdown ファイルに落とし込んだカタログ。Figma エクスポートや JSON スキーマは不要で、プロジェクトルートにコピーするだけでエージェントが色・タイポ・コンポーネント規約を参照できる。
各エントリは公開サイトの CSS 値を分析した「インスパイア解釈」であり、トークン・パターン・ルールまで含む実装向けの記述を目指している。README では「build me a page that looks like this」と指示するだけで、表面だけでない UI 生成を狙うと説明されている。
Google Stitch が提唱するプレーンテキストのデザインシステム文書。LLM が最も読みやすい Markdown 形式のため、パーサや専用ツールなしでエージェントに渡せる。
| ファイル | 読者 | 定義する内容 |
|---|---|---|
AGENTS.md | コーディングエージェント | プロジェクトのビルド方法・規約・作業手順 |
DESIGN.md | デザインエージェント | 見た目・雰囲気・コンポーネントのルール |
colors / typography など）を持つ。
awesome-design-md/
├── README.md # コレクション一覧・使い方
├── CONTRIBUTING.md # 既存ファイル改善の手順
├── LICENSE
├── .github/
│ └── ISSUE_TEMPLATE/
│ └── design-md-request.yml
└── design-md/
├── vercel/
│ ├── DESIGN.md
│ ├── README.md
│ ├── preview.html
│ └── preview-dark.html
├── stripe/
│ └── …
└── …（73 サイト分）サイトごとに design-md/<slug>/ ディレクトリが割り当てられる。スラッグはドメイン名ベース（例: linear.app、nintendo-2001）。公開配布は getdesign.md でも行われ、README の各リンクはそちらのパスを指す。
| # | セクション | 記録内容 |
|---|---|---|
| 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 | エージェントが読む本体 |
preview.html | 色見本・タイプスケール・ボタン等のビジュアルカタログ（ライト） |
preview-dark.html | 同上（ダークサーフェス） |
README.md | サイト名と一行説明（各ディレクトリ） |
README の「Collection」は用途別に 10 群へ整理されている。件数は README 掲載分の概数。
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#d4ede0', 'primaryTextColor': '#0f2a1f', 'primaryBorderColor': '#3d9970', 'lineColor': '#3d9970', 'fontSize': '14px'}}}%%
flowchart TD
A[コレクションからサイトを選ぶ] --> B[DESIGN.md をプロジェクトルートへコピー]
B --> C[AGENTS.md やスキルで参照を明示]
C --> D[エージェントに UI 生成を依頼]
D --> E[preview.html でトークンを目視確認]
- 目的のブランドに近い
design-md/<slug>/DESIGN.mdを選ぶ（または getdesign.md から取得）。 - 自分のリポジトリルートに
DESIGN.mdとして配置する。 - 「この DESIGN.md に従ってページを作って」とエージェントへ指示する。セクション 9 の Agent Prompt Guide に例文がある。
- 必要なら
preview.html/preview-dark.htmlをブラウザで開き、色とタイポの期待値を確認する。
# 例: ルートに配置後の指示
このリポジトリの DESIGN.md に従い、
ランディングページのヒーローと機能セクションを実装して。| 経路 | 内容 |
|---|---|
| getdesign.md/request | 特定サイトの DESIGN.md 生成を依頼。非公開・優先配送オプションあり。 |
GitHub Issue（design-md-request テンプレート） | URL・配送メール・優先度を記載してオープンリクエスト。 |
| 既存ファイルの PR | 誤った hex・不足トークン・説明の改善は歓迎。ただし新規 DESIGN.md の PR は受け付けない（品質維持のため）。 |
改善 PR では live サイトと照合し、トークン変更時は preview.html / preview-dark.html も更新する。着手前に Issue で変更内容を共有するよう CONTRIBUTING.md が求めている。
- GitHub: VoltAgent/awesome-design-md — 本体リポジトリ
- getdesign.md — 公開配布とリクエスト窓口
- Google Stitch — DESIGN.md 概要
- Stitch DESIGN.md 仕様
- VoltAgent — 同一エコシステムの TypeScript AI エージェントフレームワーク