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: 400Spacing
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32pxComponent 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: 400Spacing
xs: 4px
sm: 8px
md: 16px
lg: 24pxComponents
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と共有する時代は、もう始まっています。プロジェクトに適用するなら、今がいいタイミングかもしれません。