DESIGN.md（デザインシステム）
Google Stitch が自動生成するデザインルールファイル。Google は DESIGN.md を「agent-friendly markdown file」と定義している。デザインルールをマークダウン形式で記述し、他のデザインツールやコーディングエージェント（Claude Code など）にそのまま渡せる。
目的
- デザインルールを言語化・持ち運び可能にする
- 別プロジェクトへのルール移植（毎回ゼロから作り直さない）
- AI コーディングツールへのデザイン仕様の受け渡し
- チーム間・ツール間でのデザイン認識の統一
Stitch での生成方法
デザインシステム生成を指示すると DESIGN.md は自動で作成される。「DESIGN.md を作って」と別途指示する必要はない。
生成後は右パネルの「DESIGN.md」タブで内容を確認し、「Save」ボタンで保存できる。
DESIGN.md の構成要素（5セクション）
| セクション | 内容 |
|---|---|
| Color | 色の役割（Primary / Secondary / Text / Muted / Surface / Border 等） |
| Typography | 見出し・本文・補足の文字ルール（フォント・サイズ・太さ・行間） |
| Spacing | 余白のルール（セクション間・要素間・カード内・ボタン周辺） |
| Components | ボタン・カード・タグ・ナビゲーションの形状とバリエーション |
| Layout | 最大幅・セクション構成・視線の流れ・レスポンシブルール |
記述原則
- 具体的な値で書く — 「落ち着いた色」ではなく
#1B3A5C - 各値に役割を併記する — 「何に使う色か」「どこの余白か」が分かるように記述する
この形式にすることで、Stitch に戻しても Claude Code に渡しても解釈がぶれない。
DESIGN.md の記述例
# Visual Theme & Atmosphere
- 印象: 信頼感、整理されている、親しみやすい
- トーン: 落ち着き重視。派手な装飾は使わない
- 背景: 白ベース。セクションの区切りに #F8F9FA（薄いグレー）を交互に使う
# Color Palette & Roles
- Primary: #1B3A5C（ネイビー）— ナビゲーション、見出し、CTA ボタン
- Secondary: #3B82F6（ブルー）— リンク、ホバー時のアクセント
- Text: #1A1A1A（ほぼ黒）— 本文
- Muted: #6B7280（グレー）— 補助テキスト、日付、キャプション
- Surface: #F8F9FA（薄いグレー）— カード背景、交互セクション背景
- Border: #E5E7EB — カード・入力フィールドの境界線
# Typography
- Font: "Inter", "Noto Sans JP", sans-serif
- h1: 40px / font-weight: 700 / line-height: 1.2 / color: Primary
- h2: 28px / font-weight: 700 / line-height: 1.3 / color: Text
- Body: 16px / font-weight: 400 / line-height: 1.8 / color: Text
# Spacing
- セクション間: 96px（モバイル: 64px）
- カード内の padding: 24px
- 8px 単位で統一する
# Components
## Button
- Primary: 背景 #1B3A5C / 文字 #FFFFFF / border-radius: 6px
- Secondary: 背景 transparent / border: 1px solid #1B3A5CStitch 以外で DESIGN.md を活用する
Stitch の出力が物足りなければ手書きしても構わない。重要なのは「具体的な値 + 役割の記述」の原則を守ること。
活用先の例：
- AI Studio — Stitch で作ったルールを AI Studio に渡してさらに設計を進める
- Claude Code —
DESIGN.mdを参照させながら余白・ボタン・カードの微修正を依頼する - 別の Stitch プロジェクト — 既存プロジェクトのルールを新プロジェクトにインポートする
DESIGN.md と CLAUDE.md の類比
DESIGN.md と CLAUDE.md は同じ「agent-friendly markdown」という思想を共有している。
| ファイル | 役割 | 読む AI |
|---|---|---|
CLAUDE.md | プロジェクトの開発ルール・制約を記述 | Claude Code |
DESIGN.md | デザインシステムのルールを記述 | Stitch / Claude Code / AI Studio |
どちらも「人間が意図を言語化 → AI が一貫した行動を取る」という設計思想に基づく。
日本版 DESIGN.md コレクション
有志が作成した日本語向け DESIGN.md サンプル集が GitHub で公開されている。
- awesome-design-md-jp（github.com/kzhrknt/awesome-design-md-jp）: 日本語プロジェクト向けのDESIGN.mdテンプレート・サンプル集。「まずDESIGN.mdとは何か」を理解するためのハンズオンリソースとしても機能する。
DESIGN.md Style Extractor（Chrome拡張）
既存サイトのデザインスタイルをワンクリックで DESIGN.md 形式に変換する Chrome 拡張機能。
- アイコンをクリックするだけで、そのページのスタイル（色のhex値全部・フォント・余白等）を抽出
- 出力形式: DESIGN.md / SKILL.md の2種類から選択可能
- 競合サイトや参考サイトのデザインシステムを瞬時にキャプチャし、自プロジェクトのDESIGN.mdに転用できる