DESIGN.md とは？AIに「Stripe風」が効かない原因と初心者が10分で試せる3ステップ｜Google Labs公式alpha版

AI に「Stripe みたいなカッコいい画面を作って」と頼んだ結果、
毎回違うものが出てくる。
ボタンの色も、
角の丸みも、
文字の太さも、
聞くたびにバラバラ。
これが DESIGN.md が解こうとしている問題の中心にあります。

Google Labs が公開した DESIGN.md は、
この「AI がブランドを覚えられない問題」に対する答えとして出てきました。
ひと言で書けば、
AI に見た目のルールをまとめて渡す「取扱説明書」です。

本記事では、
AI 予備知識ゼロの読者でも追える水準で噛み砕きつつ、
今日すぐ試せる3ステップまで落として書きます。

DESIGN.md って結局なんなの？

DESIGN.md は、
ウェブサイトやアプリの「見た目のルール」をまとめた小さなファイルです。
拡張子が .md なので Markdown（マークダウン）、
つまりメモ帳で開ける普通のテキストファイル。
難しいプログラムではない。

Google Labs Code 公式 README にはこう書かれています。

"A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system."

（出典: google-labs-code/design.md 公式GitHub）

直訳すると「コーディングするAIエージェントに、
そのサービスの見た目のアイデンティティを伝えるためのフォーマット仕様」。
ざっくり翻訳すると、
AI専用のブランドブックです。

身近なもので例えると、
お弁当箱にマスキングテープで「ここにご飯、
ここにおかず、
ここに果物」と貼っておくようなもの。
毎回詰める人が違っても、
テープ通りに入れればだいたい同じお弁当になる。
DESIGN.md も同じで、
AI が毎回違っても、
ファイルを読めば同じ見た目にたどり着きます。

これ結構便利。

なぜ今 DESIGN.md が話題になってるの？

話題の火付け役は VoltAgent コミュニティが公開した awesome-design-md というリポジトリです。
公式GitHubページの表示でスター数は約64.9k、
フォークは約8kに達しています（出典: VoltAgent/awesome-design-md 公式GitHub）。

OSS リポジトリでこの伸びはかなり異例の部類。
私は開発者たちが「ずっと欲しかった」穴を埋めに来ていると読んでいます。
単なる流行りではなく、
需要に対して後から供給が追いついた形です。

本家の Google Labs Code 側も alpha 版でありながら7.6k スターを集めており、
仕様提案と実装ライブラリの両輪が同時に走っている格好です（出典: google-labs-code/design.md 公式GitHub）。

AI に「Stripe みたいにして」が効かない原因はなに？

副業で LP（ランディングページ）を作ろうとした人が、
Claude や ChatGPT に「Stripe みたいにシュッとしたデザインにして」と頼んで撃沈した経験、
心当たりがあると思います。
私も何度か見てきました。

原因はシンプル。
AI は「Stripe みたい」という言葉から色・フォント・余白・角の丸みを勝手に推測するしかない。
人によって「Stripe っぽい」の解釈が違うのと同じで、
AI も毎回違う解釈をする。

この問題を埋めるのが DESIGN.md の役目です。
公式 README に書かれた設計目的はこう。

"DESIGN.md gives agents a persistent, structured understanding of a design system."

（出典: google-labs-code/design.md 公式GitHub）

訳: 「DESIGN.md はエージェントに、
デザインシステムの永続的で構造化された理解を提供する」。
要は 「推測」から「指示」へ の転換です。
AI が勘で色を選ぶのをやめさせて、
ファイルに書いてある色を使わせる。
これだけ。

DESIGN.md の中身はどうなってるの？

DESIGN.md は2つの部屋でできています。
上半分が YAML フロントマター、
下半分が Markdown 本文。
公式GitHubでもこの二層構成が明記されています。

YAML（ヤムル）と言われると身構えるかもしれませんが、
ざっくり「項目と値のセットを縦に並べたメモ」だと思ってください。
料理レシピの材料表みたいなものです。
卵: 2個、
牛乳: 200ml、
砂糖: 大さじ1。
こう書いてあるのが YAML。

実例を見たほうが早いので、公式 spec.md から最小構成を引用します。

---
name: Daylight Prestige
colors:
  primary: "#1A1C1E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  sm: 4px
spacing:
  base: 16px
---

（出典: google-labs-code/design.md spec.md）

読み方はこうです。

• name: このデザインの名前。ここだけは必須
• colors.primary: メインカラー（濃い灰色）
• typography.h1: 見出し1の文字設定（フォント、サイズ、太さ、行間）
• rounded.sm: 角丸の小サイズ（4ピクセル）
• spacing.base: 基本の余白（16ピクセル）

公式 README は、
上半分（トークン）と下半分（本文）の役割分担をこう整理しています。

"The tokens are the normative values. The prose provides context for how to apply them."

（出典: google-labs-code/design.md 公式GitHub）

訳: 「トークン（上半分の値）がルールで、
文章（下半分）はそれをどう使うかの説明」。
上半分が「絵の具セット」、
下半分が「使い方マニュアル」と考えればいいです。

絵の具セットと説明書。シンプル。

awesome-design-md には何が入ってるの？

VoltAgent コミュニティが整理した awesome-design-md には、
公式GitHubバッジ表示で69 ブランド分の DESIGN.md が登録されています（出典: VoltAgent/awesome-design-md 公式GitHub）。
ここで注意点が1つあります。

awesome-design-md に入っているのは 各社の公式ファイルではなく、
コミュニティが実サイトを見て作った「インスパイア版」です。
「Stripe社の DESIGN.md」ではなく、
「awesome-design-md に収録された Stripe 風の DESIGN.md」という言い方が正しい。
ここは混同しやすいので先に書いておきます。

カテゴリ別の内訳は公式GitHubの目次から拾うと以下のとおり（出典: VoltAgent/awesome-design-md 公式GitHub）。

69ブランドあれば、
どのジャンルのサイトを作りたい人でも「近い雰囲気」が見つかるはずです。
私は副業の LP 作りなら、
Stripe 風・Linear 風あたりから入ると失敗しにくいと思います。

日本語サービスをメインで作りたい場合、
awesome-design-md-jp という派生リポジトリが別に存在。
MUJI、
メルカリ、
SmartHR、
freee、
note、
pixiv、
Zenn など複数の日本ブランド分を収録しており、
日本語フォント・行間・字間のルールまで含まれています。

初心者が DESIGN.md を今日10分で試す3ステップ

ここから具体的な手順です。
awesome-design-md に収録されたファイルをそのまま借りる方法が、
一番ハードルが低い。

VoltAgent 公式GitHubの README には、
使い方が2ステップに整理されています。

"Copy a site's DESIGN.md into your project root. Tell your AI agent to use it."

（出典: VoltAgent/awesome-design-md 公式GitHub）

訳: 「サイトの DESIGN.md をプロジェクトのルートにコピーする。
AI エージェントにそれを使うよう伝える」。
たった2行ですが、
本当にこれだけ。

STEP 1: awesome-design-md から好きなブランドを選ぶ

1. ブラウザで https://github.com/VoltAgent/awesome-design-md を開く
2. 69ブランドの中から、作りたいサイトの雰囲気に近いものを選ぶ（例: シンプルで信頼感重視なら Stripe 風）
3. 該当ブランドのフォルダを開き、DESIGN.md の中身を確認する

期待される結果: 該当ブランドの YAML（colors/typography/spacing 等）が表示される。
表示されない場合はリポジトリの構造が更新された可能性があるので、
トップの README で目次を見直してください。

「Stripe 風」と言われてもピンとこない人は、
実際に stripe.com を開いて見てください。
落ち着いた配色、
細めのフォント、
余白が広い感じ。
これが DESIGN.md に言語化されている、
と思えばOKです。

STEP 2: DESIGN.md ファイルをお手元のプロジェクトに置く

1. VoltAgent 公式GitHub から、選んだブランドの DESIGN.md を表示
2. 右上の Raw ボタンから生テキストを開き、全文をコピー
3. お手元のプロジェクトのルート（一番上の階層）に DESIGN.md という新規ファイルを作って貼り付け

置き場所は以下のイメージ。

your-project/
├── CLAUDE.md
├── DESIGN.md    ← ここに置く
├── src/

期待される結果: プロジェクトルートに DESIGN.md が作成され、
エディタで開くと YAML フロントマターと Markdown 本文が見える。

詰まりどころ: 「プロジェクトルートとは何か」で迷う人が一番多い。
Claude Code を使っているならコードを書いているフォルダ、
Cursor ならワークスペースとして開いているフォルダ、
ノーコード勢（Wix/STUDIO/ペライチ）なら現時点でこの手順は使えません。
AI チャットでコードを生成させて手動コピーする使い方になります。

STEP 3: AI エージェントに「DESIGN.md に従って作って」と伝える

1. Claude Code を使っている場合は、プロジェクトルートに置いてあれば自動でコンテキストに入る（公式 google-labs-code/design.md README がコーディングエージェント向け仕様であることを明示）
2. Cursor を使っている場合は、プロンプトの中に @DESIGN.md と書いてファイル参照させる（Cursor のファイル参照機能を利用）
3. プロンプト例: 「DESIGN.md のトークンに従って、トップページのヒーローセクションを作って」

期待される結果: 生成された HTML/CSS が、
DESIGN.md に書かれた色・フォント・余白を使っている。
同じプロンプトで複数回生成しても、
ボタンの角丸や見出しサイズが揃う。

詰まりどころ: AI が DESIGN.md を読まずに既定値で生成してしまうケース。
プロンプトの冒頭に「DESIGN.md のトークンを必ず参照して」と明示すると改善します。

完璧を目指さず、
まずは awesome-design-md から持ってきたファイルで1回生成させてみる。
これが最短ルートです。

どの AI ツールが DESIGN.md に対応してるの？

公式GitHub の README は「coding agents」全般を対象にすると明記しており、
特定ツール限定ではありません。
ただし実装の親和性には差があります。
2026年4月時点で確認できる範囲を以下にまとめます。

ざっくり整理すると、
Google 系と Anthropic 系（Claude）は強い、
Vercel 系はまだ。
これは Google Labs 発の仕様という出自を考えれば自然です。

業界標準になるかどうかは他ツールの追従次第。
Figma、
v0、
Cursor あたりがネイティブに DESIGN.md を扱えるようになるかが当面の焦点です。

CLI で品質チェックもできる

公式 CLI パッケージ @google/design.md を使うと、
作った DESIGN.md が壊れていないか機械的にチェックできます。
公式 README は CLI の主要機能をこう列挙。

"lint (structure validation), diff (change detection), export (Tailwind/DTCG), spec (output the format spec)."

（出典: google-labs-code/design.md 公式GitHub）

初心者がまず触るなら lint だけで十分。
npx @google/design.md lint DESIGN.md と打てば、
色の組み合わせが読みづらくないか、
ファイル内部のつながりが壊れてないかをまとめて見てくれます。

WCAG（ウェブの読みやすさ世界基準）のコントラスト比チェックも lint の中で走る作りで、
文字と背景の明るさ差が最低 4.5:1 以上ないと警告が出る、
という仕組みです。

ここは正直便利すぎる。

賛否：嬉しいところと引っかかるところ

嬉しい点

• AI の出力が安定する: 推測で生成していた部分がトークン参照に置き換わる。同じプロンプトで何度生成しても色・フォント・角丸が揃う
• 最小構成でも効果がある: name と colors.primary だけ書いても、AI は無指定よりずっとマシな結果を返す
• プロっぽさを借りられる: awesome-design-md の69ブランド分から、実績あるデザインの雰囲気を無料で拝借できる
• WCAG 準拠チェックが自動: lint を回せばアクセシビリティの最低ラインを機械的に通せる

引っかかる点

• まだ alpha 版: 公式が「Expect changes to the format as it matures」（仕様は変わることを想定してね）と明記（出典: 公式GitHub）
• 未対応ツールがまだ多い: v0、Bolt、Lovable はまだネイティブ対応していない
• 動きの哲学までは伝えられない: 静的なトークンで色や余白は揃うが、ホバーやアニメーションの「らしさ」までは現仕様では拾えない
• Google ツールへの依存リスク: Stitch エコシステムと密結合する形で広まっており、中立的な W3C 標準には今のところなっていない
• 未解決課題あり: アニメーション、ダークモード、レスポンシブブレイクポイントの3点は現仕様で薄く、今後の拡張待ち
• 確率的な適用: AI が DESIGN.md を解釈して反映する設計のため、CSS コンパイラのように決定論的に再現されるわけではない

私は副業やノーコード寄りの人が DESIGN.md を触るなら、
awesome-design-md から Stripe 風・Linear 風を1本コピーして、
Claude Code か Gemini に読ませるところから始めるのが無難だと思っています。
CLI や自作は慣れてから、
が現実的。

完璧から入ると止まる。

FAQ

DESIGN.md と CLAUDE.md は何が違うの？

CLAUDE.md は「このプロジェクトはこういうルールで進めるよ」という、
Claude 向けのプロジェクト全体の説明書。
DESIGN.md はその中でも見た目ルールだけを担当する専用ファイルです。
両方置いてあれば、
Claude は両方を参照。
CLAUDE.md の中に「Design system specs in DESIGN.md — follow these rules for all UI generation」のような参照1行を入れておくと、
AI が DESIGN.md を見落としにくくなります。

プログラミング初心者でも使える？

awesome-design-md からコピーして貼るだけなら、
プログラミング知識は要りません。
ファイルを作って中身を貼って、
AI チャットに「これに従って」と言う。
これだけ。
ただし Wix や STUDIO などのノーコードサービス内では現時点で直接読み込む機能はありません。
AI チャットでコードを生成させる使い方になります。

日本語サイトを作るなら何を見ればいい？

awesome-design-md-jp（https://github.com/kzhrknt/awesome-design-md-jp）が有力です。
日本語フォントのフォールバック順序、
行間1.5〜2.0の推奨、
字間0.04〜0.1em、
禁則処理といった日本語固有のルールが盛り込まれています。
欧文前提の DESIGN.md をそのまま日本語サイトに使うと、
フォントが崩れるので注意。

無料で使える？

DESIGN.md 仕様自体は Apache 2.0 ライセンスで無料公開です。
awesome-design-md も無料。
CLI パッケージ @google/design.md も無料で使えます。
AI 側（Claude Code / Cursor など）の利用料は別途必要です。

alpha 版ってどれくらい変わる可能性がある？

公式 README に「The spec, token schema, and CLI are under active development. Expect changes to the format as it matures.」とあり、
仕様・トークン・CLI の3点すべてが変更対象です（出典: 公式GitHub）。
バージョンが上がるたびに awesome-design-md 側も追従する前提で考えたほうが安全です。

出典URL一覧

• 公式GitHub（仕様本体）: https://github.com/google-labs-code/design.md
• 公式 spec.md: https://github.com/google-labs-code/design.md/blob/main/docs/spec.md
• Google Labs 公式ブログ: https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-design-md/
• Stitch 公式ドキュメント: https://stitch.withgoogle.com/docs/design-md/overview/
• awesome-design-md（VoltAgent公式GitHub）: https://github.com/VoltAgent/awesome-design-md
• awesome-design-md-jp: https://github.com/kzhrknt/awesome-design-md-jp

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。