Google StitchのDESIGN.mdがオープンソース化 — AIにデザインシステムを渡す新しい方法

Google Labsは先月、デザインシステムの新しい標準フォーマット「DESIGN.md」をオープンソース化しました。これまで、AIにデザインの意図を伝えるのは非常に難しかった。スクリーンショット、Figmaファイル、テキスト説明が分散していて、一貫性を保つのが困難でした。

DESIGN.mdは、その問題を根本から解決する仕様です。

DESIGN.mdとは

DESIGN.mdは、Markdownベースのデザインシステム定義フォーマットです。プロジェクトのルートに置かれた単一のファイルが、色・タイポグラフィ・スペーシング・コンポーネント設計の全てを機械可読な形で記述します。

Google LabsのStitchプロジェクトでは、このフォーマットを使ってGeminiに自動UIを生成させています。つまり、テキストプロンプトだけでなく、プロジェクト固有のデザイン言語を正確に反映したコンポーネントを生成できるということです。

DESIGN.mdの構造

基本的な構成は以下の通り：

# Design System
 
## Design Tokens
 
### Colors
```yaml
primary: "#0066FF"
secondary: "#666666"
success: "#00AA44"
warning: "#FF9900"
error: "#CC0000"
neutral-50: "#FAFAFA"
neutral-900: "#111111"

Typography

heading-1:
  font-family: "Roboto"
  font-size: 32px
  font-weight: 700
  line-height: 1.2
 
body:
  font-family: "Roboto"
  font-size: 16px
  font-weight: 400
  line-height: 1.5
 
caption:
  font-family: "Roboto"
  font-size: 12px
  font-weight: 400

Spacing

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px

Component Specifications

Button

Design Intent: ユーザーアクションのエントリーポイント。明確な視覚階層で優先度を表現する。

Variants:

Primary: 背景 primary, テキスト白
Secondary: 背景 neutral-100, テキスト neutral-900
Danger: 背景 error, テキスト白

Properties:

Padding: md (vertical), lg (horizontal)
Border-radius: 4px
Transition: すべてのプロパティ 200ms

Input

Design Intent: テキスト入力を促す。フォーカス時に明確なフィードバックを返す。

States:

Default: Border neutral-300
Focused: Border primary, Box-shadow あり
Error: Border error, ヘルプテキスト赤


このフォーマットの賢いところは、**YAMLとMarkdownのハイブリッド**になっていることです。デザイントークン（色・フォント）はYAMLで構造化し、コンポーネント説明や設計思想はMarkdownで自然言語で記述できます。

## CLIツールとエクスポート

Google Labsは同時に、DESIGN.mdを検証・比較・エクスポートするCLIツールもリリースしました。

```bash
# DESIGN.mdの妥当性をチェック
design-cli validate ./DESIGN.md

# Tailwind CSSのコンフィグにエクスポート
design-cli export --format tailwind ./DESIGN.md > tailwind.config.js

# W3C DTCG (Design Tokens Community Group) フォーマットに変換
design-cli export --format w3c ./DESIGN.md > tokens.json

# 2つのDESIGN.mdの差分を表示（チームレビュー向け）
design-cli diff ./DESIGN_old.md ./DESIGN_new.md

このツールチェーンがあれば、デザイナーとエンジニアの認識ズレが極めて少なくなります。バージョン管理もGitで完全に可能です。

ライセンスと成熟度

DESIGN.mdはApache 2.0ライセンスで提供されています。まだアルファ版（0.9.0）ですが、Google Labs内では既に実運用で使われていると聞いています。

つまり、破壊的変更の可能性は低いものの、マイナーアップデートはあり得るということ。本番運用を始める場合は、バージョンピンを明記するのが無難です。

実装：プロジェクト用DESIGN.mdを作成する

自分のプロジェクトにDESIGN.mdを導入するなら、最小限のテンプレートがこちらです。

# 私たちのデザインシステム
 
## Design Tokens
 
### Colors
```yaml
primary: "#3B82F6"
secondary: "#8B5CF6"
success: "#10B981"
warning: "#F59E0B"
error: "#EF4444"

Typography

heading-large:
  font-family: "Inter"
  font-size: 24px
  font-weight: 700
 
body:
  font-family: "Inter"
  font-size: 14px
  font-weight: 400

Spacing

xs: 4px
sm: 8px
md: 16px
lg: 24px

Components

Card

Purpose: コンテンツをグループ化し、視覚的に分離する

Appearance:

Background: white
Border: 1px solid border-color
Border-radius: 8px
Padding: md
Box-shadow: 0 1px 3px rgba(0,0,0,0.1)


このテンプレートを出発点に、プロジェクト特有のコンポーネントを追加していきます。重要なのは、**設計思想（Purpose）と実装詳細の両方を記述する**ことです。AIがそれらを読み込むと、より文脈に合ったコンポーネントを生成できるようになります。

## Gemini/AIツールとの連携

DESIGN.mdの威力は、Gemini APIやローカルLLMと組み合わせた時に発揮されます。

```python
import anthropic

# DESIGN.mdを読み込む
with open("DESIGN.md", "r") as f:
    design_system = f.read()

client = anthropic.Anthropic()

# Geminiに設計ガイドを与えて、UIを生成
message = client.messages.create(
    model="claude-3-5-sonnet-20241022",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": f"""
このDESIGN.mdに従って、ユーザープロフィールエディタのHTMLを生成してください。

DESIGN.md:
{design_system}

要件:
- 名前、メール、プロフィール写真のフィールド
- 保存ボタン（Primary）とキャンセルボタン（Secondary）
- レスポンシブデザイン

HTML/CSSのみで出力してください。
"""
        }
    ]
)

print(message.content[0].text)

DESIGN.mdを事前にAIに渡すことで、生成されるUIが自動的にプロジェクトのトーンに合わせられます。これはデザイナーが手作業でAIの出力をチェック・修正する手間を大幅に削減します。

なぜこれが重要なのか

これまで、AIツールにUIを生成させようとすると、2つの問題が生じました。

ブランド一貫性の喪失: AIが汎用的なUIを生成してしまい、プロジェクト固有のスタイルが反映されない
ドキュメント分散: デザイナーとエンジニア、そしてAIが参照するドキュメントが別々になり、ズレが発生

DESIGN.mdはこれらを**単一の真実の源（Single Source of Truth）**にまとめます。

加えて、Gemini/GemmaのようなAIが「デザインシステムを理解している状態」で生成を行えば、自動生成コンポーネントの品質が飛躍的に向上するのです。

次のステップ

Stitch DESIGN.mdを試す準備ができたら、公式ドキュメント（GitHub）をチェックしてください。

また、このフォーマットはGeminiに限りません。Claudeやローカルモデルも同様に活用できます。

デザインシステムをAIと共有する時代は、もう始まっています。プロジェクトに適用するなら、今がいいタイミングかもしれません。

Google StitchのDESIGN.mdがオープンソース化 — AIにデザインシステムを渡す新しい方法

DESIGN.mdとは

DESIGN.mdの構造

Typography

Spacing

Component Specifications

Button

Input

ライセンスと成熟度

実装：プロジェクト用DESIGN.mdを作成する

Typography

Spacing

Components

Card

なぜこれが重要なのか

次のステップ

お読みいただきありがとうございます

関連記事