AIにUIを作らせると、毎回違う色、違うフォントサイズ、違う余白のページが返ってきます。 「Stripeっぽく」と指示しても、AIが勝手に解釈した「それっぽい」結果しか得られません。 この問題を、1枚のMarkdown仕様書で解決するのがDESIGN.mdです。

まず「DESIGN.mdがあると何が変わるのか」を1枚で見てください。 まったく同じ指示「ヒーローセクションを作って」を同じAIに渡した結果です。左はDESIGN.mdなし、右はVercelのDESIGN.mdを1つ置いただけの出力です。

DESIGN.mdなしでAIが生成した汎用的な紫グラデーションのランディングページ

DESIGN.mdなし
紫グラデ・pill型ボタン・個性なし

Vercelの DESIGN.md を1つ置くだけでAIが生成した白黒ミニマルなランディングページ

Vercel DESIGN.md を1つ置いただけ
白黒精密・Develop→Preview→Ship 再現

同じAI・同じプロンプトでも、DESIGN.mdを1枚渡すだけで出力が根本的に変わる（当サイト検証。DESIGN.mdは VoltAgent/awesome-design-md より）

この「右側」を73ブランド分キュレーションして、コピー1つで配布しているのが、本記事で扱う awesome-design-md です。

30秒で理解する awesome-design-md

・DESIGN.mdとは、AIエージェントにUI仕様（色・フォント・余白・Do/Don’t）を伝えるMarkdownファイル。Google Stitch発祥で、2026年4月に Google公式OSS化（@google/design.md v0.1.0） された
・awesome-design-mdは、Vercel/Stripe/Claudeなど73ブランドのDESIGN.mdをコピー1つで導入できるOSS。GitHub 95,000★超で2026年最速級の伸び（GitHub全体で約150位）
・日本語UIには awesome-design-md-jp（182サイト・CJKタイポ拡張）と jp-ui-contracts（5プロファイル契約）を組み合わせるのが定番
・Anthropic公式のAIデザインツール本体を知りたいなら、ハブ記事 Claude Designとは｜料金・始め方・使い方とFigma/v0比較をまとめて解説 を先に読むと、DESIGN.mdの位置づけが立体的につかめる

この記事ではUIデザインに特化して扱います。 デザインシステムやUI生成全般の基礎は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに解説 をご覧ください。

design.mdとは — AIエージェント向けMarkdown設計仕様書を3分で理解

「design.mdとは何か」を一言で言うと、AIにUIの色・フォント・余白・禁則ルールを伝えるためのMarkdownファイルです。 READMEが「人間に読ませる説明書」なら、DESIGN.mdは「AIに読ませるデザイン仕様書」にあたります。

プロジェクトルートに DESIGN.md を置くだけで、Claude Code・Cursor・Google Stitch・v0がUI生成時に自動参照します。 これにより、毎回ブレていたデザインを一貫させられます。

Google Stitchで導入されたこの仕様では、デザインシステムの全要素をMarkdownで記述します。 2026年4月にはGoogleが @google/design.md v0.1.0 として公式OSS仕様を公開し、YAML+Markdownの2層構造・W3C Design Tokens互換・lint/diff/export CLIまで整いました。 基本の書き方や最小テンプレートは DESIGN.md入門 にまとめているので、初めて触る場合はそちらを先に読むとスムーズです。

「design.md」表記ゆれと検索意図

DESIGN.md / design.md / design md（スペース付き）はすべて同じファイルを指します。 GitHub上の慣習は大文字 DESIGN.md ですが、Google公式の名前空間パッケージは @google/design.md と小文字です。 本記事では、仕様名は大文字、検索表記に合わせる箇所は小文字を使い分けています。

ファイル 対象読者 定義内容
README.md 人間 プロジェクトの使い方
AGENTS.md コーディングエージェント プロジェクトの構築方法
DESIGN.md デザイン/コーディングエージェント UIの外観・色・フォント・余白の全仕様

awesome-design-mdは、このDESIGN.mdを73ブランド分キュレーションしたOSSリポジトリです。 Vercel、Stripe、Claude、Linear、Notion、Figma、Airbnb、SpaceXなど、一流企業のデザインシステムを分析したDESIGN.mdをコピー1つ（またはnpxコマンド）で導入できます。 2026年3月31日の公開直後から急成長し、現在は95,000スターを超え、GitHub全体でも約150位、今年最速で伸びたリポジトリの1つになりました。

AI向け設計ドキュメントとしてのdesign.mdの書き方

「ai design.md」で情報を探す読者が最初に押さえたいのは、「design.mdとは何のためのファイルで、どう書けばAIが正しく解釈するのか」という点です。 DESIGN.mdはLLM・AIエージェントに読ませることを目的とした設計ドキュメントで、人間向けREADMEとは役割が明確に異なります。

AI向け設計ドキュメントとしてDESIGN.mdを書くコツは、以下の5点です。

ポイント 書き方 AIが解釈しやすい理由
①セクション見出しを番号付きで固定 ## 1. Visual Theme, ## 2. Color Palette 参照箇所が安定する
②色はHex値とロールを対にする - Primary (#0052CC): CTA, リンク 曖昧な色指定を排除
③タイポグラフィはテーブル形式 Role / Size / Weight / Letter Spacing 各フォント設定を機械的に抽出
④Do’s and Don’tsを明示 Don't use weight 700 on body text 禁止事項をAIに強制できる
⑤Agent Prompt Guideを付ける そのままエージェントに渡せる例文 プロンプト設計の手間を削減

awesome-design-mdが配布するDESIGN.mdは、9セクション構成（数百行規模）で、上記5つのパターンをすべて網羅しています。 最小構成なら、以下の3セクションだけでも実用できます。

# My Product Design System

## Color Palette
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #0052CC | CTA, リンク |
| Background | #ffffff | ページ背景 |
| Text | #171717 | 本文 |

## Typography
| Role | Size | Weight |
|------|------|--------|
| Heading | 32px | 600 |
| Body | 16px | 400 |

## Do's and Don'ts
### Don't
- border-radius を 12px 以上にしない
- グラデーション背景を使わない
- 本文に weight 700 を使わない

AI向け設計ドキュメントとしてDESIGN.mdを採用する最大の利点は、確率的に出力するLLMに「境界条件」を明示的に与えられる点です。 READMEやFigmaのスクリーンショットだけでは伝わらない「やってはいけないこと」を、AIが参照できる構造化ドキュメントに落とし込めます。 これにより、v0・Claude Code・Cursorのどれを使っても同じブランドトーンのUIに収束させられます。

AGENTS.md × CLAUDE.md × DESIGN.md — 3層のMarkdown仕様書

AIエージェント向けのコンテキストファイルは、役割が分かれています。 DESIGN.mdだけを見ても全体像はつかめないので、関連する3つのMarkdownの分業を先に整理します。

CLAUDE.mdの書き方は Karpathy流CLAUDE.md解説 が、さらに抽象度を上げた「スキル」という概念は Claude Skills解説 で詳しく扱っています。

flowchart LR A["ユーザー指示
『ダッシュボード画面を作って』"] --> B["AIエージェント
(Claude Code / Cursor / Stitch)"] B -->|"① プロジェクト構造"| C["AGENTS.md
ビルド・テスト・依存関係"] B -->|"② プロジェクト固有ルール"| D["CLAUDE.md
コーディング規約・命名"] B -->|"③ 見た目の仕様"| E["DESIGN.md
色・フォント・余白・Do/Don't"] C --> F["最終出力
ブランド一貫のUI + 正しいビルド"] D --> F E --> F style C fill:#e8f5e9,stroke:#43a047 style D fill:#e3f2fd,stroke:#1e88e5 style E fill:#fff3e0,stroke:#fb8c00
観点 AGENTS.md CLAUDE.md DESIGN.md
主管 OpenAI/Codex中心に策定 Anthropic（Claude Code標準） Google Stitch発祥、VoltAgentが拡散
定義対象 ビルド・テスト・依存関係 コーディング規約・禁止事項 UI仕様（色/タイポ/余白/Do’s & Don’ts）
参照シーン npm install、テスト、CI 関数命名、型定義、配置 UIコンポーネント生成、スタイル付け
書き手 バックエンド/DevOps テックリード デザイナー/フロントエンド
置き場所 リポジトリルート リポジトリルート リポジトリルート（またはdocs/）

この3つが揃うと、AIは「ビルドが通る・規約を守った・ブランドらしい」コードを生成できます。 awesome-design-mdは、このうちDESIGN.mdだけを専門にキュレーションしているプロジェクトです。

awesome-design-mdの使い方 — コピー1つ、または npx で即導入

awesome-design-mdの使い方は、突き詰めると「DESIGN.mdをプロジェクトルートに置いて、AIに使えと伝える」だけです。特別なツールも設定も要りません。READMEの「How to Use」も、たった2行で説明されています。

・手順1：使いたいサイトの DESIGN.md を自分のプロジェクトルートにコピーする
・手順2：AIエージェントに「このDESIGN.mdを使ってUIを作って」と伝える

DESIGN.mdの入手方法は、次の3ルートがあります。どれを選んでも中身は同じファイルです。

・① Webカタログからコピー/ダウンロード（推奨） — getdesign.md でブランドを選び、ページ上の Download DESIGN.md ボタンかコピーでファイルを取得。ブラウザで色・タイポ・コンポーネントのプレビュー（Light / Dark）を確認してから選べる
・② GitHubから直接コピー — awesome-design-md のリポジトリを開き、目的ブランドの DESIGN.md を丸ごとコピーする
・③ npxコマンド — 各ブランドページに表示される次のコマンドを実行すると、同じ DESIGN.md がプロジェクトルートに落ちてくる

# getdesign.md の各ブランドページに表示されるコマンド。
# 実行するとプロジェクトルートに DESIGN.md が生成される
npx getdesign@latest add vercel

# 別ブランドの DESIGN.md を取得する場合はブランド名を変えるだけ
npx getdesign@latest add stripe
npx getdesign@latest add claude

導入後、AIに渡す一言（コピペ可）

DESIGN.mdを置いたら、以下のように指示するだけで各社トーンのUIが返ってきます。

プロジェクトルートの DESIGN.md を厳守して、ランディングページのヒーローセクションを作って。DESIGN.mdに無い色・フォント・余白は使わないこと。

導入したDESIGN.mdには、単なる色コードだけでなく、実サイトから分析したパターン・トークン・ルールが入っています。READMEが「表面的な出力ではなく、本物のデザインの深さ（real design depth）で作られている」と強調するのはこの点です。

現在収録されているのは73ブランド（Webカタログ上は75+）。主なカテゴリは以下のとおりです。

カテゴリ ブランド例
AI・LLM Claude, Cursor（IDE）, Ollama, Together AI, ElevenLabs, Mistral AI, xAI, Runway, Replicate, VoltAgent
開発者ツール・IDE Vercel, Cursor, Warp, Raycast, Expo, Superhuman, Lovable
バックエンド・DB・DevOps Supabase, MongoDB, ClickHouse, HashiCorp, Sentry, PostHog, Sanity, Composio
生産性・SaaS Linear, Notion, Intercom, Zapier, Cal.com, Mintlify, Resend
デザイン・クリエイティブ Figma, Framer, Miro, Webflow, Airtable, Clay
フィンテック・暗号資産 Stripe, Coinbase, Revolut, Wise, Kraken, Binance, Mastercard
EC・小売 Airbnb, Shopify, Nike, Starbucks, Meta
メディア・家電 Apple, NVIDIA, IBM, HP, Spotify, Pinterest, PlayStation, WIRED, The Verge, Uber, SpaceX, Vodafone
自動車 Tesla, BMW, BMW M, Bugatti, Ferrari, Lamborghini, Renault

さらに毎週土曜更新の 「Retro Web / DESIGN.md Nostalgia」 シリーズでは、1990年代〜2000年代のWebを分析した DESIGN.md も配布されています。Dell (1996)（カタログ時代のエンタープライズWeb、黒フレーム＋GIFステッカー）や Nintendo.com (2001)（Y2Kの”コンソールクロム”UI）を置けば、AIに時代考証されたレトロUIを作らせることもできます。

DESIGN.mdの中身 — 9セクション構成の設計仕様書

生成されるDESIGN.mdは、Stitchの DESIGN.md フォーマットを拡張した9セクション構成です。READMEが定義する全セクションは以下のとおりで、色だけでなくコンポーネントの状態・レイアウト・影・レスポンシブ・プロンプト例までを1ファイルに畳み込みます。

# セクション 何を定義するか
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（ダーク版） が同梱されます。導入前に「このDESIGN.mdはどんな見た目か」をブラウザで確認できるわけです。

実際にVercelのDESIGN.mdから抜粋して中身を見てみます。

セクション1: Visual Theme（デザイン哲学）

デザインの方向性を言語化したセクションです。 AIはこれを読んで「このブランドらしさ」を判断します。

# Design System Inspiration of Vercel

## 1. Visual Theme & Atmosphere

Vercel's website is the visual thesis of developer infrastructure
made invisible — a design system so restrained it borders on
philosophical. This isn't minimalism as decoration; it's minimalism
as engineering principle.

セクション2-3: Color Palette + Typography

全色のHex値と役割、全フォントサイズ・ウェイト・字間の対応表が、テーブル形式で定義されます。

## 2. Color Palette & Roles

### Workflow Accent Colors
- **Ship Red** (`#ff5b4f`): the "ship to production" workflow step
- **Preview Pink** (`#de1d8d`): the preview deployment workflow
- **Develop Blue** (`#0a72ef`): the development workflow

## 3. Typography Rules

| Role | Size | Weight | Letter Spacing | Notes |
|------|------|--------|----------------|-------|
| Display Hero | 48px | 600 | -2.4px | Maximum compression |
| Body Large | 20px | 400 | normal | Feature descriptions |
| Mono Caption | 13px | 500 | normal | Code labels |

セクション7: Do’s and Don’ts

AIに「やるな」を明確に指示するセクションです。 これがDESIGN.mdの最大の強みになります。

## 7. Do's and Don'ts

### Don't
- Don't use weight 700 (bold) on body text — 600 is the maximum
- Don't use traditional CSS `border` — use shadow-border technique
- Don't use pill radius (9999px) on primary buttons — pills are for badges only
- Don't skip the inner #fafafa ring in card shadows

セクション9: Agent Prompt Guide

AIエージェントにそのまま渡せるプロンプト例が記載されます。

## 9. Agent Prompt Guide

### Example Component Prompts
- "Create a hero section on white background. Headline at 48px
   weight 600, letter-spacing -2.4px, color #171717."
- "Design a card: no CSS border. Use shadow stack:
   rgba(0,0,0,0.08) 0px 0px 0px 1px."

DESIGN.mdあり/なしで出力はどう変わるか — 検証結果

同じ指示「ランディングページのヒーローセクションを作って」をAIに渡し、DESIGN.mdの有無・ブランド別で比較した結果を、CSSレベルで分解します。

DESIGN.mdなし — AIが「それっぽく」判断した汎用デザイン

冒頭の左画像がこれです。紫グラデーション背景、pill型ボタン、半透明カード。 どこかで見たような、個性のないUIです。 これは「悪いAI」ではありません。AIが「ランディングページ」と聞いて連想した平均値が出力されているだけで、指示から制約を与えていない以上これが自然な結果です。

Vercel DESIGN.md準拠 — 白と黒の精密なミニマリズム

冒頭の右画像がこれです。白背景に #171717 テキスト。 枠線はCSSの border ではなく box-shadow: 0px 0px 0px 1px で表現するVercel独自の手法です。 見出しの字間は -2.4px で圧縮され、Develop（青）→Preview（ピンク）→Ship（赤）の3色パイプラインが再現されます。 DESIGN.mdの Do’s and Don’ts と Component Stylings が、この細部をAIに強制しています。

Stripe DESIGN.md準拠 — 極細フォントと青みシャドウの高級感

同じプロンプトに、今度はStripeのDESIGN.mdを渡すと、まったく別のブランドトーンに収束します。

Stripe の DESIGN.md 準拠でAIが生成した、極細見出しと青みシャドウのランディングページ
Stripe DESIGN.md 準拠のAI出力（当サイト検証）。weight 300 の極細見出しと青みがかった多層シャドウが特徴

見出しが font-weight: 300 の極細。 CTAは #533afd パープルで、カードのシャドウは rgba(50,50,93,0.25) という青みがかった色です。 Stripeの「金融×高級感」がそのまま出力されます。

flowchart TD A["同じプロンプト
「ヒーローセクションを作って」"] --> B["DESIGN.mdなし"] A --> C["Vercel DESIGN.mdあり"] A --> D["Stripe DESIGN.mdあり"] B --> B1["紫グラデ背景
pill型ボタン
半透明カード
汎用的・個性なし"] C --> C1["白背景 #ffffff
shadow-as-border
letter-spacing -2.4px
Develop→Preview→Ship"] D --> D1["weight 300 極細見出し
#533afd パープルCTA
青みシャドウ
#1c1e54 紺セクション"] style B1 fill:#f0f0f0,stroke:#ccc style C1 fill:#ffffff,stroke:#171717 style D1 fill:#f8f6ff,stroke:#533afd
比較項目 DESIGN.mdなし Vercel準拠 Stripe準拠
背景色 AIが勝手に紫グラデ #ffffff 白 #ffffff 白
見出しweight 700（太字） 600 300（極細）
字間 0（デフォルト） -2.4px（圧縮） -1.4px
ボタン形状 pill（丸型） 6px radius 4px radius
枠線 border: 2px solid 影で枠線を表現 1px solid #e5edf5
シャドウ 黒の単層 多層スタック 青みがかった多層
ブランド個性 なし Vercelそのもの Stripeの高級感

同じ「ヒーローセクションを作って」という指示でも、DESIGN.mdがあるだけで出力が根本的に変わります。 特にVercelの「shadow-as-borderテクニック」やStripeの「weight 300見出し」など、各ブランド固有のデザイン判断がAIの出力に反映されます。

DESIGN.md vs Figma Make vs v0 vs Google Stitch — 使い分けの基準

AIでUIを生成する手段はDESIGN.mdだけではありません。 Figma Make（FigmaのAIデザイン生成）、v0（Vercelのプロンプト→React UI）、Stitch（GoogleのAIデザイナー）が主要な選択肢として並びます。 プロジェクトの段階に応じて使い分けるのが、2026年の実践パターンです。

ツール 主な用途 入力 出力 ブランド一貫性
DESIGN.md 既存プロジェクトに一貫性を足す Markdown仕様書 Claude/Cursorが生成するReact/HTML ◎（仕様書で厳密に制御）
Figma Make Figma上で詳細デザインを詰める プロンプト + Guidelines.md Figma上のデザイン + コード ◯（Guidelinesで制御）
v0.dev プロンプトだけで素早くプロトタイプ 自然言語プロンプト Reactコンポーネント △（都度ブレる）
Google Stitch デザインの方向性を探る 参考画像 + プロンプト デザイン + DESIGN.md ◯（DESIGN.md出力可）

2026年の実践ワークフローは、3ツールの合わせ技が主流です。 Stitchで方向性を探り、Figma Makeで詳細を詰め、Claude Code + DESIGN.mdで実装するパイプラインです。

flowchart LR A["① 方向性決定
Stitch
参考画像 → デザイン案"] --> B["② 詳細設計
Figma Make
Guidelines.md + DESIGN.md"] B --> C["③ 実装
Claude Code
DESIGN.md参照でReact出力"] C --> D["④ 微調整
人間 + Cursor
ピクセル単位の修正"] style A fill:#f3e5f5,stroke:#8e24aa style B fill:#e3f2fd,stroke:#1e88e5 style C fill:#e8f5e9,stroke:#43a047 style D fill:#fff3e0,stroke:#fb8c00

v0だけで作り続けると「毎回微妙に違うUI」が量産され、ブランド崩壊につながります。 DESIGN.mdを挟むことで、v0出力もClaude Code出力も同じ色・同じフォント・同じ余白に収束します。

Claude Code・Cursor・Google Stitchでの活用方法

Claude Codeで使う場合

DESIGN.mdをプロジェクトルートに置き、CLAUDE.mdに参照指示を追加します。

# CLAUDE.md に追記する内容

## デザインルール
- UIコンポーネント生成時は必ず DESIGN.md を参照すること
- DESIGN.md で定義された色・フォント・余白のみ使用
- 新しいデザイン値を勝手に発明しない

これだけで Claude Codeがデザイン仕様を自動的に読み込み、指示に従ったUIを生成します。

Cursorで使う場合

.cursor/rules にDESIGN.mdの参照ルールを追加します。 Cursor 3.0のマルチエージェント機能と組み合わせると、複数コンポーネントを並列生成しながらデザイン一貫性を保てます。

Google Stitchで使う場合

Google StitchはDESIGN.mdをネイティブサポートしています。 プロジェクトにDESIGN.mdを含めるだけで、Geminiが全プロンプトに対してデザイン仕様を自動適用します。

awesome-design-md-jp — 日本語サービス特化の拡張

本家awesome-design-mdは海外ブランド中心で、日本語UIの細かな作法（縦書き対応、和文欧文混植、句読点の扱い、CJKフォントのウェイト差など）はカバーされていません。 この隙間を埋めるのが awesome-design-md-jp（スター670+）です。

SmartHR、freee、note、メルカリ、LINE、Qiita、Zenn、無印良品、トヨタ、Apple Japan、任天堂、虎屋など182サイトのDESIGN.mdを収録しています。 本セクションは要点のみ押さえるので、日本語タイポ拡張の中身・本家との差分・落とし穴は専用記事の awesome-design-md-jp｜182サイトの日本語UI DESIGN.md集（CJKタイポグラフィ拡張） を参照すると深く把握できます。

カテゴリ 収録ブランド例 日本語UI特有のポイント
SaaS・B2B SmartHR, freee, Sansan, MoneyForward, Cybozu 密度の高い情報表示、表組み優先
メディア・UGC note, Qiita, Zenn, pixiv, WIRED.jp 縦長テキスト、句読点字詰め
EC・決済 メルカリ 価格表記の視認性、バッジ多用
コミュニケーション LINE, connpass 吹き出しUI、絵文字前提
ライフスタイル 無印良品, Cookpad, 食べログ 余白多め、和モダン配色
エンタープライズ トヨタ, Apple Japan, ABEMA グローバル×日本語の混植

CJKフォントの扱いは、DESIGN.mdの追加セクション「Japanese Typography Rules」で明示されます。 例えばnoteのDESIGN.mdは、以下のような項目を含みます。

## Japanese Typography Rules

| Role | Font | Size | Line Height | Letter Spacing |
|------|------|------|-------------|----------------|
| Heading JP | "Noto Sans JP" 700 | 28px | 1.5 | 0.02em |
| Body JP | "Noto Sans JP" 400 | 16px | 1.85 | 0.05em |
| Caption JP | "Noto Sans JP" 400 | 13px | 1.6 | 0.04em |

### Don't
- 日本語本文に letter-spacing: 0 を使わない（字詰めが崩れる）
- 縦書きモードで font-variant-east-asian: proportional-width を指定しない
- 全角スペースを padding の代わりに使わない

jp-ui-contracts — 日本語UI設計の「契約書」

jp-ui-contracts は、awesome-design-md-jpとは異なるアプローチで日本語UIの品質を担保するプロジェクトです。 DESIGN.mdが「ビジュアルの仕様書」なら、jp-ui-contractsは「AIが日本語UIを壊さないための契約書」という位置づけになります。

jp-ui-contractsの作者hirokaji氏は、AI生成UIの問題を「AIの精度不足ではなく、日本語UI設計の契約が不十分」と分析しています。 具体的には、以下の崩れが頻発します。

問題 原因 jp-ui-contractsの対策
見出しの折り返しが不自然 word-break: break-all の誤用 禁則処理ルールで制御
本文の行間が狭すぎる 欧文基準の line-height: 1.4 日本語は 1.7〜2.0 を契約で指定
英語サービス名との混在が不自然 和文欧文のスペーシング未定義 混植ルールをCSS変数で定義
フォームが窮屈 本文タイポがフォームに漏れる コンテキスト別プロファイルで分離
テーブルが読みにくい body用の行間がテーブルに適用 テーブル専用の密度設定

jp-ui-contractsの特徴は用途別の5プロファイルです。 「メディアサイト」と「管理画面」では最適な密度やタイポグラフィが異なる、という考え方に基づきます。

プロファイル 用途 特徴
base 共通基盤 最小限の共有契約。全プロファイルの土台
media 記事・ブログ 段落のリズム重視。行間広め、読みやすさ優先
saas 管理画面・B2Bツール 高密度。フォーム・テーブルの情報量重視
docs 技術ドキュメント コードブロックとテキストのバランス
dashboard アナリティクスUI 可読性重視。数字の視認性、チャート配色

日本語UIの品質を確保するには、以下の3つを組み合わせるのが定番化しつつあります。

・本家 awesome-design-md — ベースとなるデザインシステムの雛形
・awesome-design-md-jp — 日本語タイポグラフィの仕様拡張
・jp-ui-contracts — 用途別の契約テンプレート＋バリデーション

Claude Design がコードベースからデザインシステムを自動構築する際も、DESIGN.mdに日本語タイポグラフィルールが明記されているかどうかで出力品質が大きく変わります。

関連プロジェクトとエコシステム

awesome-design-mdを中心に、関連ツールが成長しています。

プロジェクト スター 内容
awesome-design-md 95,000+ 本体。73ブランドのDESIGN.md集
awesome-design-md-jp 670+ 日本語版。182サイト、CJKフォント・禁則処理対応
jp-ui-contracts 54 日本語UI設計契約キット。テンプレ+CSS+バリデーション
awesome-design-md-skills 54 Claude/Codex/Gemini向けスキルファイル
figma-design-system-to-design-md 15 FigmaデザイントークンをDESIGN.md形式に変換
getdesign.md — ブラウザで閲覧・Download/コピーできるWebカタログ（各ブランドのプレビュー付き）

UIコンポーネント集と組み合わせるなら、shadcn studioのテーマジェネレータやSquare UIのレイアウトコレクションのトークンをDESIGN.mdに流し込むワークフローが実用的です。 AIエージェントフレームワークと組み合わせれば、デザイン生成を自動パイプラインに組み込むこともできます。

導入時の注意点と限界

DESIGN.mdは確率的に解釈されます。 AIが仕様を「理解」して適用しますが、CSSコンパイラのようにピクセル単位で正確に再現するわけではありません。 DESIGN.mdはガイドであり、コンパイラではありません。

知っておくべき制約は以下のとおりです。

・公式デザインシステムではない — 各企業の公開CSS/パターンから読み解いた「インスピレーション」ファイル
・カスタムフォント問題 — Vercelの Geist やStripeの sohne-var は利用不可。Inter等の代替で近似する
・プロダクション運用 — 成熟したチームはDESIGN.md（AI向け）と従来のデザイントークン（CSS向け）を併用する
・CJKフォント — 日本語プロジェクトではawesome-design-md-jpの拡張が必要になる場合がある

各ブランドのカスタムフォントは有料・非公開のものが多く、そのままでは再現できません。 実用的な代替フォントの対応表を下にまとめます。Google Fontsで揃うものを優先しています。

オリジナル 代替フォント 使用ブランド
Geist Sans Inter, Space Grotesk Vercel
sohne-var Manrope, Sora Stripe
Tiempos Headline Fraunces, Playfair Display Stripe見出し
Inter Display Inter（weight 600以上） Linear, Notion
Söhne Inter, IBM Plex Sans ChatGPT
Styrene A Satoshi, Söhne代替 Claude
SF Pro -apple-system, Inter Apple系

DESIGN.md内の font-family 定義を書き換える際は、CSS変数経由で差し替えられるように記述しておくと切り替えが楽になります。

:root {
  --font-sans: "Inter", -apple-system, "Noto Sans JP", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

2026年のDESIGN.mdエコシステム — どこまで来たか

公開から3ヶ月でエコシステムは大きく動きました。 検索ボリュームでも「design.md」「design md」「design.md とは」のクエリが安定して伸びており、AIコーディング界隈で標準フォーマットの座を取りつつあります。

時期 出来事 影響
2026-03-31 VoltAgent が awesome-design-md を公開 公開3日で5,000★突破、週間トレンド1位
2026-04-09 awesome-design-md-jp が日本語UI 24サイトで公開 CJKタイポ・禁則処理を仕様化
2026-04-14 DESIGN.md 入門記事が公開 「design.md とは」検索意図に対応
2026-04-23 Google が @google/design.md v0.1.0 を公式OSS公開 YAML+Markdown 2層、W3C互換
2026-05-中旬 awesome-design-md-jp が 182サイト・670★ に拡大 SmartHR/freee/note/メルカリ等を網羅
2026-05-下旬 jp-ui-contracts が 5プロファイル化 base/media/saas/docs/dashboard の用途別契約
2026-06 導入方式が「コピー/Download」中心に整理、Retro Webシリーズ追加 getdesign.md でプレビュー→取得の流れが定着
2026-07-上旬 awesome-design-md が 95,000★ を突破（73ブランド） 2026年最速級で伸びたリポジトリ、GitHub全体で約150位

VoltAgentのawesome-design-mdは「キュレーション集」ですが、Google公式の @google/design.md はDESIGN.mdフォーマット自体の仕様を定義します。 これにより、各ツール（Claude Code・Cursor・Stitch・v0）が同じ仕様で DESIGN.md を解釈できる土台ができました。

---
# YAML 層 (フロントマター): 機械可読なデザイントークン
spec: design.md/v0.1
tokens:
  color:
    primary: "#0052CC"
    background: "#ffffff"
  font:
    body: { family: "Inter", size: 16, weight: 400 }
---

# Markdown 層: 人間 + AI 向けの説明
## Visual Theme
...

このフォーマットにより、design.md lint で文法チェック、design.md diff で差分確認、design.md export --to=css-vars でCSS変数化など、エンジニアリング的な扱いができるようになりました。 詳細は Google が公式OSS化した design.md フォーマットの解説記事 を参照してください。

まとめ — awesome-design-mdはDESIGN.mdの最短の教材

awesome-design-mdは「AIにUIを作らせるとデザインがブレる」問題を、9セクションのMarkdown仕様書で解決するツールです。

getdesign.md で選んだDESIGN.mdをコピーして置くだけ（npxコマンドでも可）で、73ブランドのデザイン仕様を導入でき、Claude Code・Cursor・Google Stitchでそのまま使えます。 特にDo’s and Don’tsセクションでAIに「やってはいけないこと」を明示できる点が、従来の「いい感じにして」型プロンプトとの決定的な違いです。冒頭の左右比較が示すとおり、同じAI・同じ指示でも、DESIGN.mdを1枚置くかどうかで出力は別物になります。

awesome-design-mdが「既存ブランドのDESIGN.mdを配布する」のに対し、Anthropicの Claude Design は「自社コードからDESIGN.mdを抽出する」役割です。 両者は競合せず、awesome-design-mdでブランドの方向性を決め、Claude Designで自社用に派生させる流れが組めます。 Claude Design本体の料金・始め方・使い方は、ハブ記事 Claude Designとは｜料金・始め方・使い方とFigma/v0比較をまとめて解説 にまとめています。

なお、DESIGN.mdフォーマットの提唱元であるGoogleは、2026年4月にそのフォーマット仕様をOSSとして公式公開しました。 @google/design.md v0.1.0 では、YAML+Markdownの2層構造・W3Cデザイントークン互換・lint/diff/export CLIまで仕様化されています。

参照ソース

</content>