Google Stitch DESIGN.md 完全解説 — AIエージェントが読めるデザインシステム記法

DESIGN.md とは何か

Google Stitch が2026年3月のアップデートで導入した DESIGN.md は、デザインシステムをMarkdownファイルとして記述する新しいフォーマットだ。

従来のデザインシステムは Figma のスタイルライブラリや JSON トークンファイルとして管理されてきた。DESIGN.md はそれらと根本的に異なるアプローチを取る。

人間にもAIエージェントにも読める「セマンティックなデザイン言語」 で書かれる。

つまり border-radius: 12px ではなく「Gently rounded corners（やわらかく丸みを帯びた角）」、#294056 ではなく「Deep Muted Teal-Navy（深く落ち着いたティールネイビー）」と記述する。技術値はカッコ内に補足として添える。

なぜ Markdown なのか

観点	JSON トークン	Figma スタイル	DESIGN.md
人間の可読性	△ 構造的だが冗長	○ ビジュアル	◎ 自然言語
AIエージェント対応	○ パース可能	△ API必要	◎ そのまま読める
ツール間ポータビリティ	△ 変換必要	✕ Figma依存	◎ プレーンテキスト
バージョン管理	○ Git対応	△ 外部プラグイン	◎ Git標準
デザイン意図の伝達	✕ 値のみ	△ コメント依存	◎ 意図が本文

Markdown だから Git で差分管理でき、プルリクエストでデザイン変更をレビューできる。Claude Code や Cursor など AIコーディングエージェントのコンテキストとしてそのまま渡せる のが最大の利点だ。

---

DESIGN.md の5セクション構成

DESIGN.md は以下の5セクション（＋オプション1セクション）で構成される。Google が公開した stitch-skills リポジトリ の公式仕様に基づく。

セクション1: Visual Theme & Atmosphere（ビジュアルテーマと雰囲気）

デザイン全体の「空気感」を自然言語で記述する。ここが DESIGN.md の最も特徴的な部分だ。

## 1. Visual Theme & Atmosphere

The interface embodies a **sophisticated, minimalist sanctuary** 
that marries the pristine simplicity of Scandinavian design with 
the refined visual language of luxury editorial presentation.

The overall mood is **airy yet grounded**, creating an aspirational 
aesthetic that remains approachable and welcoming.

**Key Characteristics:**
- Expansive whitespace creating generous breathing room
- Photography-first presentation with minimal UI interference
- Whisper-soft visual hierarchy that guides without shouting

書き方のポイント：

• 形容詞を2〜3個組み合わせて雰囲気を表現する（例: 「Airy」「Dense」「Minimalist」「Utilitarian」）
• 太字 で重要なキーワードを強調する
• 具体的なデザイン哲学やインスピレーション源に言及する
• 「何を目指しているか」だけでなく「何を避けているか」も書く

セクション2: Color Palette & Roles（カラーパレットと役割）

DESIGN.md の色指定は、描写的な名前 + HEXコード + 機能的役割 の3点セットで書く。

## 2. Color Palette & Roles

### Primary Foundation
- **Warm Barely-There Cream** (#FCFAFA) – Primary background color. 
  Creates an almost imperceptible warmth that feels more inviting 
  than pure white.
- **Crisp Very Light Gray** (#F5F5F5) – Secondary surface color 
  used for card backgrounds. Provides subtle visual separation.

### Accent & Interactive
- **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent. 
  Used exclusively for primary CTAs, active navigation links, 
  and selected filter states.

### Typography & Text Hierarchy
- **Charcoal Near-Black** (#2C2C2C) – Primary text color. 
  Softer and more refined than pure black.
- **Soft Warm Gray** (#6B6B6B) – Secondary text for body copy.

記法ルール：

• 色名は「Blue」ではなく「Ocean-deep Cerulean」のように、色の性格が伝わる描写的な名前 を付ける
• HEXコードをカッコ内に必ず併記する（AIが正確な値を参照できるように）
• 各色に 機能的役割（何に使うか）を明記する
• カテゴリごとにグルーピングする（Foundation / Accent / Typography / Functional States）

セクション3: Typography Rules（タイポグラフィルール）

## 3. Typography Rules

**Primary Font Family:** Manrope
**Character:** Modern, geometric sans-serif with gentle humanist 
warmth. Slightly rounded letterforms.

### Hierarchy & Weights
- **Display Headlines (H1):** Semi-bold weight (600), generous 
  letter-spacing (0.02em), 2.75-3.5rem size.
- **Section Headers (H2):** Semi-bold weight (600), subtle 
  letter-spacing (0.01em), 2-2.5rem size.
- **Body Text:** Regular weight (400), relaxed line-height (1.7), 
  1rem size.
- **CTA Buttons:** Medium weight (500), subtle letter-spacing 
  (0.01em), 1rem size.

書き方のポイント：

• フォントファミリーの「性格」を自然言語で説明する
• 見出しレベルごとにウェイト・サイズ・letter-spacingを明記する
• 技術値（rem, em, px）は記述するが、それだけでなく「relaxed」「generous」など質感も伝える

セクション4: Component Stylings（コンポーネントスタイル）

## 4. Component Stylings

* **Buttons:**
  - Shape: Subtly rounded corners (8px/0.5rem radius)
  - Primary CTA: Deep Muted Teal-Navy (#294056) background 
    with pure white text
  - Hover: Subtle darkening, smooth 250ms ease-in-out transition

* **Cards/Containers:**
  - Corner Style: Gently rounded (12px/0.75rem radius)
  - Shadow: Flat by default. On hover, whisper-soft diffused 
    shadow (0 2px 8px rgba(0,0,0,0.06))
  - Internal Padding: Generous 2-2.5rem

* **Inputs/Forms:**
  - Stroke: Refined 1px border in Soft Warm Gray
  - Focus: Border color shifts to primary accent with subtle glow

記法ルール：

• rounded-xl ではなく「generously rounded corners」と書く
• shadow-sm ではなく「whisper-soft diffused shadows」と書く
• インタラクション状態（hover, focus, active）も記述する
• Tailwind/CSS クラス名は使わない。自然言語 + 技術値の併記 が原則

セクション5: Layout Principles（レイアウト原則）

## 5. Layout Principles

### Grid & Structure
- Max Content Width: 1440px
- Grid: Responsive 12-column with fluid gutters (24px mobile, 32px desktop)
- Product Grid: 4→3→2→1 columns (responsive)

### Whitespace Strategy
- Base Unit: 8px for micro-spacing, 16px for component spacing
- Section Margins: Generous 5-8rem (80-128px) between major sections
- Hero Sections: Extra-generous 8-12rem top/bottom padding

### Alignment & Visual Balance
- Text: Left-aligned for body, centered for hero headlines
- Image to Text Ratio: 70-30 split (photography-first)

書き方のポイント：

• レスポンシブブレイクポイントを明記する
• 余白戦略を「breathing room（呼吸する余白）」のように意図を込めて記述する
• タッチターゲットサイズ（44x44px 以上）などアクセシビリティ要件も含める

セクション6（オプション）: Stitch Generation Notes

Stitch 固有のプロンプトヒントを書くセクション。他のツールに渡す場合は不要。

## 6. Design System Notes for Stitch Generation

**Language to Use:**
- Atmosphere: "Sophisticated minimalist sanctuary"
- Button Shapes: "Subtly rounded corners" (not "rounded-md")
- Shadows: "Whisper-soft diffused shadows on hover"

**Color References:**
- Primary CTA: "Deep Muted Teal-Navy (#294056)"
- Background: "Warm Barely-There Cream (#FCFAFA)"

---

DESIGN.md の作り方：3つの方法

方法1: Stitch から自動抽出

Stitch 上で既存プロジェクトのスクリーンを分析し、DESIGN.md を自動生成できる。

1. Stitch でプロジェクトを開く
2. デザインシステム機能から「Extract」を選択
3. DESIGN.md がダウンロードされる

方法2: URL から抽出

任意のWebサイトのURLを指定すると、そのサイトのデザインシステムを DESIGN.md として抽出できる。自社サイトや参考にしたいサイトのデザインルールをキャプチャするのに便利だ。

方法3: Agent Skill で生成

Claude Code や他の AI エージェントで、stitch-skills の design-md スキル を使って生成する。

npx skills add google-labs-code/stitch-skills --skill design-md --global

このスキルは Stitch MCP Server と連携し、以下のパイプラインで DESIGN.md を生成する：

1. Retrieval — Stitch MCP Server からスクリーン・HTML・メタデータを取得
2. Extraction — カラー、タイポグラフィ、スペーシング、コンポーネントパターンを抽出
3. Translation — CSS/Tailwind の技術値を描写的な自然言語に変換
4. Synthesis — セマンティックなデザインシステムとして DESIGN.md を生成

---

実践：DESIGN.md を活用するワークフロー

Stitch → 開発ツールへの橋渡し

Stitch でデザイン
    ↓ DESIGN.md をエクスポート
AI Studio / Antigravity / Claude Code
    ↓ DESIGN.md をコンテキストとして読み込み
実装コードを生成

DESIGN.md は AI Studio や Antigravity にインポートできる。開発者がコードを書く際、デザイナーの意図が自然言語で伝わるため、「Figma を見ながら色コードをコピーする」作業が不要になる。

プロジェクト間のデザイン共有

プロジェクトAで作った DESIGN.md をプロジェクトBの Stitch にインポートすれば、同じデザインシステムで新しいスクリーンを生成できる。ブランドの一貫性を保ちながら、毎回ゼロからデザインルールを設定する手間がなくなる。

stitch-loop: 自動化ワークフロー

stitch-skills リポジトリには stitch-loop というスキルもある。これは DESIGN.md と SITE.md（プロジェクトの「憲法」となるファイル）を組み合わせて、AI エージェントが自律的にスクリーンを生成・改善し続けるループを実現する。

SITE.md（プロジェクトビジョン）
  + DESIGN.md（デザインルール）
  + Baton ファイル（次のタスク指示）
    → AI エージェントがスクリーン生成
    → 検証・フィードバック
    → 次の Baton を更新
    → ループ

---

DESIGN.md 記法の核心：「セマンティックデザイン言語」

DESIGN.md の最も重要な特徴は、技術値を自然言語で包む という記法ルールだ。

❌ やってはいけない書き方

- Primary color: #294056
- Border radius: rounded-xl
- Shadow: shadow-sm
- Background: #FCFAFA

✅ 正しい書き方

- **Deep Muted Teal-Navy** (#294056) — Primary accent for CTAs. 
  This sophisticated anchor color creates visual focus points 
  without disrupting the serene neutral foundation.
- Corner Style: **Gently rounded corners** (12px/0.75rem radius) 
  creating soft, refined edges
- Shadow: **Whisper-soft diffused shadow** 
  (0 2px 8px rgba(0,0,0,0.06)) on hover
- **Warm Barely-There Cream** (#FCFAFA) — Almost imperceptible 
  warmth that feels more inviting than pure white

この記法は一見冗長に見えるが、AI がデザインの「意図」を理解して新しいスクリーンを生成する際の精度を大幅に上げる。「#294056を使って」と指示するより「Deep Muted Teal-Navy をプライマリアクションに使って」と指示した方が、AIはデザインシステム全体との整合性を保った生成ができる。

---

個人開発者にとっての DESIGN.md

DESIGN.md は、個人開発者にとって特に価値がある。

1. デザインの属人化を防ぐ

自分の頭の中にあるデザインルールを、AIが読める形式で外部化できる。半年後の自分が「このボタン何色だっけ」と迷わなくなる。

2. AIコーディングとの相性が最高

Claude Code や Cursor で新しい画面を作るとき、DESIGN.md をコンテキストに渡すだけで既存デザインと一貫した UI が生成される。

3. ツールロックインからの解放

プレーンテキストだから、Stitch → Figma → コードエディタ → 別のAIツール、どこにでも持ち運べる。特定のツールに縛られない。

4. バイブコーディングのデザイン版

バイブコーディングが「意図を伝えてコードを生成する」なら、DESIGN.md は「意図を伝えてデザインを生成する」ためのフォーマットだ。Google が「バイブデザイン」と呼ぶ概念の中核にある。

---

まとめ

項目	内容
形式	Markdown（プレーンテキスト）
構成	5セクション + オプション1
核心	セマンティックデザイン言語（自然言語 + 技術値）
生成方法	Stitch自動抽出 / URL抽出 / Agent Skill
活用先	Stitch / AI Studio / Antigravity / Claude Code / Cursor
Git管理	◎ 差分管理・PRレビュー可能

DESIGN.md は「デザイントークンの次」を示すフォーマットだ。値だけでなく意図を伝え、人間にもAIにも同じように読める。バイブコーディングが広がる中で、デザインの一貫性を保つための新しい標準になる可能性がある。

一次ソース:

• Google公式ブログ: Introducing "vibe design" with Stitch
• stitch-skills/design-md（GitHub）
• DESIGN.md 公式ドキュメント
• DESIGN.md 公式サンプル（Furniture Collections）

---