DESIGN.md完全ガイド — AIにデザインを正確に伝える新手法

AIコーディングエージェントに「Stripeっぽいデザインで作って」と頼んだことはありませんか？ 結果は…なんとなく似ているけれど、色が微妙に違う、フォントの太さが間違っている、影の付け方がまるで別物。「もうちょっと紫を…」「影をもう少し…」と何度も修正を繰り返す。

この問題を根本から解決するのがDESIGN.mdという新しいアプローチです。Google Stitchが提唱し、世界中の開発者が注目しているこの手法は、デザインシステムをMarkdownファイルに書き出し、AIエージェントに直接読み込ませるというシンプルかつ強力な発想に基づいています。

本記事では、awesome-design-mdという実践的なコレクション（58の有名ブランドのデザインシステムを収録）を題材に、DESIGN.mdの全貌を徹底解説します。

リア

DESIGN.mdって初めて聞いたー！ Markdownファイルをポンって置くだけでAIがいい感じのUIを作ってくれるの？

メカ

その理解で概ね正確です。AGENTS.mdがコーディングエージェントに「どう作るか」を伝えるのに対し、DESIGN.mdはデザインエージェントに「どう見えるべきか」を伝えます。Markdownなので特別なツールは不要。LLMが最も読みやすいフォーマットです。

DESIGN.mdとは何か

DESIGN.mdは、プレーンテキストのデザインシステムドキュメントです。UIの色、フォント、コンポーネント、レイアウトルールをMarkdown形式で記述し、プロジェクトのルートに配置します。AIコーディングエージェント（Claude Code、Cursor、Google Stitch等）がこのファイルを読み取ることで、指定されたデザインに忠実なUIコードを生成できるようになります。

重要なのは、DESIGN.mdは既存のツールチェインに何も追加しないという点です。Figmaプラグインもインストール不要、JSONスキーマの変換も不要、特別なCLIツールも不要。ただのMarkdownファイルです。

DESIGN.mdの構造 — 9つのセクション

awesome-design-mdコレクションのすべてのDESIGN.mdファイルは、Google Stitch DESIGN.mdフォーマットに準拠した標準化された9セクション構成（約310行、約10KB）で記述されています。各セクションが何を定義し、なぜ重要なのかを見ていきましょう。

• 1
  Visual Theme & Atmosphere — サイト全体のムード、デザイン哲学、ブランドパーソナリティを言語化。AIが「雰囲気」を理解するための最も重要なセクション。
• 2
  Color Palette & Roles — セマンティック名 + HEXコード + 機能的役割のセットで、全カラーを定義。Primary / Secondary / Surface / Neutral / Semanticに分類。
• 3
  Typography Rules — フォントファミリー、完全な型スケール表（Role / Font / Size / Weight / Line Height / Letter Spacing）を定義。
• 4
  Component Stylings — ボタン、カード、フォーム入力、ナビゲーション等のスタイルを、ホバー・アクティブ・フォーカス状態まで含めて定義。
• 5
  Layout Principles — スペーシングスケール（8px基準）、グリッドシステム、余白の哲学を定義。
• 6
  Depth & Elevation — シャドウシステムの階層（Level / Treatment / Use）を定義。ブランドごとに大きく異なる個性的な領域。
• 7
  Do's and Don'ts — デザインのガードレール。「やるべきこと」と「やってはいけないこと」でAIの暴走を防ぐ。
• 8
  Responsive Behavior — ブレークポイント表、タッチターゲットサイズ、要素の折りたたみ戦略を定義。
• 9
  Agent Prompt Guide — AIエージェント向けのクイックリファレンスとコピペ可能なプロンプト例。

リア

9セクションもあるの!? かなり詳しく書いてあるんだねぇ。

メカ

各ファイルは約310行、約10KBです。人が読んでも理解でき、AIが読んでも正確にパースできる絶妙なバランスです。特にセクション7の「Do's and Don'ts」は、AIが自己判断で余計なスタイルを付与するのを防ぐガードレールとして極めて有効です。

実例で見る — 3つのブランドのDESIGN.md

抽象的な説明だけでは伝わりにくいので、実際のDESIGN.mdファイルから具体例を見ていきましょう。awesome-design-mdには58サイト分のファイルが収録されていますが、ここでは特に個性的な3つを取り上げます。

Claude（Anthropic）— 温かみのエディトリアルデザイン

Claude（Anthropic）のDESIGN.mdは、「文学サロンをプロダクトページとして再構成した」と表現されます。テック系サイトにありがちな冷たい未来的デザインとは正反対の、温かく知的な雰囲気が特徴です。

## 1. Visual Theme & Atmosphere

Claude's interface is a literary salon reimagined as a product page
— warm, unhurried, and quietly intellectual. The entire experience
is built on a parchment-toned canvas (#f5f4ed) that deliberately
evokes the feeling of high-quality paper rather than a digital surface.

カラーパレットの特徴: すべてのグレーに黄褐色のアンダートーンが入っています。クールなブルーグレーは一切使われません。

タイポグラフィの独自性: カスタム「Anthropic Serif」フォントをウェイト500のみで使用。太字（700以上）は禁止というDo's and Don'tsルールが設定されています。見出しはline-height: 1.10のタイトな行間で、書籍のタイトルのような威厳を醸し出します。

シャドウシステム: ドロップシャドウではなく「リングシャドウ」を使用。box-shadow: 0px 0px 0px 1px #d1cfc5という、ぼかしゼロの1ピクセルの影でボーダーのような効果を生み出します。

Stripe — テクニカル・ラグジュアリー

Stripeは「世界最高水準のタイプファウンドリーがリデザインした金融機関」と形容されるデザインです。最大の特徴は、見出しにウェイト300（極細）を使うという大胆な選択です。

## Typography Rules

| Role        | Font      | Size  | Weight | Letter Spacing |
|-------------|-----------|-------|--------|----------------|
| Display Hero| sohne-var | 56px  | 300    | -1.4px         |
| Display Lg  | sohne-var | 48px  | 300    | -0.96px        |
| Section     | sohne-var | 32px  | 300    | -0.64px        |

OpenType Features: "ss01" enabled globally, "tnum" for financial data

カラーパレット:

シャドウの革新: Stripeの影はブランドカラーで色付けされています。rgba(50,50,93,0.25)という青みがかった影色は、青紫のブランドパレットと直結しており、要素の浮き上がりすらもブランド体験の一部にしています。

Vercel — エンジニアリング・ミニマリズム

Vercelのデザインは「ミニマリズムをエンジニアリング原則として実践」したものです。不要なトークンをすべて削除した、まるでminifyされたコードのようなUIが特徴です。

## Shadow System (shadow-as-border philosophy)

/* 従来のCSSボーダーの代わりにシャドウをボーダーとして使用 */
box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px;

/* カードの完全なシャドウスタック（4層構造） */
box-shadow:
  rgba(0,0,0,0.08) 0px 0px 0px 1px,   /* ボーダー層 */
  rgba(0,0,0,0.04) 0px 2px 2px,        /* 微小な浮き */
  rgba(0,0,0,0.04) 0px 8px 8px -8px,   /* 環境光 */
  #fafafa 0px 0px 0px 1px;             /* 内側のハイライト */

タイポグラフィ: Geist Sansフォントのレタースペーシングが-2.4pxから-2.88pxと、極端に詰まっています。テキスト自体がminifyされたコードのように、圧縮され、即応的で、エンジニアされた印象を与えます。

各セクションの詳細解説

セクション1: Visual Theme & Atmosphere

DESIGN.mdで最も「人間的」なセクションです。色やフォントの数値ではなく、デザインの雰囲気や哲学を自然言語で記述します。AIエージェントがデザインの「意図」を理解するために不可欠な部分です。

たとえばClaudeのDESIGN.mdでは「literary salon reimagined as a product page（文学サロンをプロダクトページとして再構成）」と記述され、Ferrariでは「digital editorial — magazine where brand presented with art institution gravitas（デジタルエディトリアル — 美術機関の威厳でブランドを提示する雑誌）」と表現されています。

このセクションには必ずKey Characteristicsリストが含まれ、重要な視覚的特徴を箇条書きでまとめます。AIエージェントはここを最初に読み取り、以降のセクションの数値をどう適用するかのコンテキストを掴みます。

セクション2: Color Palette & Roles

単なるHEXコードの羅列ではなく、各色にセマンティック名と機能的役割を付与するのがポイントです。

### Primary
- **Terracotta Brand** (#c96442): The core brand color — a burnt
  orange-brown used for primary CTA buttons, brand moments,
  and the signature accent. Deliberately earthy and un-tech.

### Surface & Background
- **Parchment** (#f5f4ed): The primary page background — a warm
  cream with a yellow-green tint that feels like aged paper.
  The emotional foundation of the entire design.

「#c96442をプライマリCTAに使う」という指示だけでなく、「意図的にアーシーでアンテック（非テック的）」という感情的な文脈も付与されています。これにより、AIが「似たような色だけど少しテック寄りの色」を誤って選ぶことを防ぎます。

セクション3: Typography Rules

フォントファミリーの指定に加え、10〜15段階の完全な型スケール表が定義されます。

OpenType機能（"liga"合字、"ss01"スタイルセット、"tnum"等幅数字）まで明記されているため、AIは金融データ表示に等幅数字を使うといった細かい判断も正確にできます。

セクション4: Component Stylings

ボタン、カード、入力フォーム、ナビゲーションの具体的なスタイルが、状態ごと（通常・ホバー・アクティブ・フォーカス）に定義されます。

たとえばボタンなら：

• Primary CTA — 背景色、テキスト色、パディング、角丸、影
• Ghost / Outlined — 透明背景 + ボーダーの控えめなスタイル
• Pill Badges — border-radius: 9999pxのステータスバッジ
• Text Links — 最小限のスタイル、ホバーで下線表示

サイト固有の独自コンポーネントも記述されます。Stripeなら破線ボーダーのドロップゾーン、Vercelならワークフローパイプライン（Develop → Preview → Ship）といった要素です。

セクション5-6: Layout & Depth

レイアウトでは8pxベースのスペーシングスケール、最大幅（通常1080-1200px）、セクション間の余白（64-120px）が定義されます。角丸のスケールも「Micro（2px）→ Full Pill（9999px）」まで段階的に記述されます。

深度・エレベーションは各ブランドで最も個性が出るセクションです。Claudeのリングシャドウ、Stripeの青色多層シャドウ、Vercelのシャドウ=ボーダー、Ferrariのほぼフラット（1pxの「ささやき」シャドウのみ）など、影の付け方だけでブランドのアイデンティティが決まるといっても過言ではありません。

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

リア

やっちゃダメなこと、って例えばどんなの？

メカ

Claudeの例で言うと「Don't: Use cool blue-grays anywhere（クールなブルーグレーをどこにも使うな）」「Don't: Use bold (700+) weight on Anthropic Serif（Serifフォントに太字を使うな）」といったルールです。AIは指示がなければ一般的なデザインパターンに従おうとするため、このガードレールが品質を守る防波堤になります。

セクション8-9: Responsive & Agent Guide

レスポンシブでは標準的な6段階ブレークポイント（<400px〜>1200px）、WCAG準拠のタッチターゲット（最小44x44px）、要素の折りたたみ戦略が定義されます。

Agent Prompt Guideは、AIエージェントが即座に使えるクイックリファレンスです。「Quick Color Reference」でセマンティック名とHEXコードの早見表が、「Example Component Prompts」でコピペ可能な生成指示が提供されます。

preview.html — 人間向けのビジュアルカタログ

各ブランドのフォルダには、DESIGN.mdの内容を視覚的に確認できるpreview.htmlとpreview-dark.htmlが付属しています。約800行の完全自己完結型HTMLファイルで、外部依存なしにブラウザで開くだけで全デザイントークンを確認できます。

preview.htmlに含まれる要素：

• カラースウォッチグリッド — 全色をグループ別に表示。名前・HEXコード・役割を併記
• タイポグラフィスケール — 64pxから12pxまでの実サイズサンプル
• ボタンショーケース — 全バリエーション + ホバー状態のデモ
• カード・コンテナ — シャドウバリエーションの比較
• フォーム入力 — テキスト入力・テキストエリア・フォーカス/エラー状態
• スペーシングスケール — 4px〜64pxのビジュアルブロック
• 角丸スケール — 4px → 9999pxの段階的表示

すべてCSS Custom Properties（--color-*, --font-*, --shadow-*）で定義されており、トークンベースのアーキテクチャを実際のHTMLで体験できます。

収録されている58サイトのコレクション

awesome-design-mdには、AI・開発ツール・フィンテック・デザイン・エンタープライズ・自動車ブランドまで、多様なジャンルの58サイトが収録されています。

実践的な使い方

DESIGN.mdの使い方は驚くほどシンプルです。以下の3ステップで完結します。

リア

えっ、本当にコピーして「この通りに作って」って言うだけ!? めちゃくちゃ簡単じゃん！

メカ

その通りです。ただし、より効果的に使うためのコツがあります。

効果的な使い方のコツ

• そのまま使う: 「Stripeっぽいランディングページを作って」→ StripeのDESIGN.mdをコピーして「DESIGN.mdに従って作って」と指示する方が、圧倒的に正確な結果が得られます
• カスタマイズして使う: 複数のDESIGN.mdを参考に、自分のプロジェクト用のDESIGN.mdを作成できます。たとえば「Vercelのタイポグラフィ + Stripeの影システム + 自社ブランドカラー」のようなミックスも可能です
• 学習リソースとして使う: 世界クラスのデザインシステムがどのように構造化されているかを学ぶための教材として活用できます
• デザイン監査に使う: 自社サイトのデザインを有名ブランドと比較し、一貫性の不足を特定できます

DESIGN.mdのメリットと注意点

メリット

注意すべき点

• カスタムフォントは含まれない: Anthropic Serif、sohne-var、FerrariSans等のプロプライエタリフォントは含まれていません。フォールバックフォント（Georgia, Arial等）で代替する必要があります
• 静的なスナップショット: デザインシステムは常に進化するため、抽出時点のスナップショットです。最新のデザインとは差異がある可能性があります
• インタラクティブ状態が不完全な場合がある: ホバー・アクティブ・フォーカス状態の一部は推測に基づく場合があります
• フレームワーク非依存: React / Vue / Svelte等の特定フレームワークのコンポーネントライブラリは含まれていません。CSS/HTMLレベルの定義です

58サイトから見えるデザインパターン

58のDESIGN.mdファイルを横断的に分析すると、現代のWebデザインにおける興味深いパターンが浮かび上がります。

カラー哲学の5つの流派

タイポグラフィの共通トレンド

• ネガティブレタースペーシング: 見出しで文字間隔を詰める手法がほぼ全サイトで採用。-0.64px〜-2.88pxの範囲で圧縮される
• 3-4ウェイト体系: 400（通常）、500（ミディアム）、600（セミボールド）、700（ボールド）の4段階が標準
• OpenType機能の活用: "liga"（合字）、"ss01"（スタイルセット）、"tnum"（等幅数字）が頻出
• カスタムフォント: トップブランドはほぼ全て独自フォントを使用（sohne-var, Geist, FerrariSans等）

シャドウ戦略の4分類

• リングシャドウ（Claude, Notion）— ぼかしゼロの1pxシャドウでボーダーを表現
• カラードシャドウ（Stripe）— ブランドカラーを溶かし込んだ多層シャドウ
• アーキテクチュラルスタック（Vercel）— ボーダー層+エレベーション層+環境光層の機能分離
• ミニマル/フラット（Ferrari, Tesla）— シャドウをほぼ使わず、写真とコントラストで奥行きを出す

まとめ

DESIGN.mdは、AIにデザインを正確に伝えるための新しい標準となりつつあります。そのポイントをまとめると：

• シンプルさ: ただのMarkdownファイル。特別なツールは一切不要
• 精度: HEXコード、ピクセル値、OpenType機能まで具体的な数値で定義
• 文脈: 数値だけでなく、デザイン哲学や「やってはいけないこと」まで記述し、AIの理解を深める
• 実用性: 58の世界クラスブランドのDESIGN.mdがすぐに使える
• 汎用性: Claude Code、Cursor、Google Stitch、その他あらゆるAIコーディングツールで利用可能

「AIにUI作らせたけど、なんか微妙…」という経験のある方は、ぜひDESIGN.mdを試してみてください。デザインの「なんとなく」を「正確な仕様」に変えるこのアプローチは、AI時代のUI開発を大きく変える可能性を秘めています。

リア

Markdownファイル1枚でこんなに変わるなんてすごいね！ 私もさっそくStripeのDESIGN.md使ってカッコいいページ作ってみようっと！

メカ

良い選択です。なお、awesome-design-mdはMITライセンスで公開されています。自分のプロジェクト用にカスタマイズしたDESIGN.mdを作成することも推奨されています。まずは既存のファイルを参考に、自分のブランドに合ったDESIGN.mdを作ることから始めてみてください。