DESIGN.md（デザイン・エムディー）というテキストファイルを1枚プロジェクトに置くだけで、AIが作るWebサイトのデザインが全ページ統一される。
Google Stitch発の仕組みで、Claude Code・Cursor・Gemini CLI・GitHub Copilotなど主要AIコーディングツールのほぼ全てが対応。Stripe、Vercel、Notionなど50社以上のDESIGN.mdが無料公開されていて、そのまま使える。
この記事では、DESIGN.mdの仕組み・導入手順・有名企業のテンプレ活用法まで全部解説する。
AIにサイトを作らせてるけどページごとにデザインがバラバラになる人、テキストファイルだけでデザイン管理したい人向け。
DESIGN.mdで「毎回同じデザイン指示を書く」がなくなるのはなぜか？
AIにデザインを指示する時、こんなことを書いてませんか。
「メインカラーは青（#1A73E8）で、フォントはInter、ボタンは角丸8pxで…」
で、次のページを作る時にも同じことを書く。
3ページ目も同じ。4ページ目も同じ。
そう。だるいんです。
しかも、毎回手で書くから微妙にズレる。
DESIGN.mdは、このルールを1つのファイルにまとめておく。
色、フォント、余白、ボタンの形、影の付け方。
ぜんぶマークダウン（テキストの書き方のルール）で書いてある。
AIはコードを書く前に、まずこのファイルを読む。
だから「さっきと同じデザインで」って言わなくても、最初からルール通りに作ってくれる。
仕組みとしてはClaude Codeの「CLAUDE.md」（AIへの指示書）と似てる。
CLAUDE.mdがAIの「働き方」を指定するファイルだとしたら、DESIGN.mdはAIの「デザインセンス」を指定するファイル。
この2つをセットで置くだけで、AIが「仕事の進め方もデザインも統一して」動いてくれる。
使ってみてわかったんですけど、これがあるとないとでは、AIの出力の一貫性がまるで違います。
DESIGN.mdはどんな場面で使えるか？
Stripeみたいなサイトが「設計書なし」で作れる
たとえばStripe（決済サービス）のWebサイト。
あの紫のグラデーション、洗練されたタイポグラフィ、余白の使い方。
「あんな感じで作って」ってAIに言っても、微妙に違うものが出てくる。
でも、StripeのDESIGN.mdファイルがすでに用意されてるんです。
これをプロジェクトに置いてからClaude Codeに「LP作って」って言うと、Stripe風のデザインが最初から適用される。
色もフォントも余白も、ぜんぶDESIGN.mdに書いてあるから。
AIが「毎回推測する」必要がなくなるんですよね。
チームで作っても「デザインがブレない」
たとえば友達と2人でサイトを作ってるとする。
自分はトップページ担当、友達は料金ページ担当。
それぞれがAIに指示すると、デザインがバラバラになる。
でもDESIGN.mdを共有してれば、同じルールでAIが動く。
人間のデザイナーがいなくても、ファイル1枚が「デザインルールブック」の役割を果たす。
「既存サイトのデザインを引き継ぐ」のにも使える
すでにサイトを持ってて、新しいページを追加したい時。
Google StitchにサイトのURLを入れると、そのサイトのデザインルールを自動で抽出してDESIGN.mdを作ってくれる。
色、フォント、余白、コンポーネントのスタイルを読み取って、テキストファイルに変換してくれる。
これをClaude Codeに渡せば、「既存のサイトと統一されたデザイン」で新しいページが作れる。
リニューアルとか、ページの追加とかで重宝しそう。
DESIGN.mdを使うのに必要なものは？
DESIGN.md自体は、ただのテキストファイル。
特別なソフトは不要。
使う側で必要なのは、AIコーディングツール。
Claude Code、Cursor、Gemini CLI、GitHub Copilotなどが対応してます。
自分はClaude Codeを使ってますが、DESIGN.mdをプロジェクトフォルダに置くだけで自動的に読み取ってくれます。
料金は、DESIGN.mdファイル自体は完全無料。
50社以上のDESIGN.mdテンプレートも、GitHub上でMITライセンス（自由に使ってOK）で公開されてる。
商用利用もOK。
DESIGN.mdはどうやって導入するか？（テンプレート選びから設置まで）
ステップ1: テンプレートを選ぶ
GitHub（https://github.com/VoltAgent/awesome-design-md）にアクセス。
50社以上のDESIGN.mdファイルが並んでる。
Stripe、Vercel、Notion、Airbnb、Spotify、Uber…。
自分が「こんなデザインにしたい」と思うサイトを選ぶ。
各サイトには3つのファイルがある。
DESIGN.md（ルールファイル本体）、preview.html（色やコンポーネントの見本）、preview-dark.html（ダークモード版の見本）。
まずpreview.htmlを開いてデザインの雰囲気を確認。
気に入ったらDESIGN.mdをダウンロード。
ステップ2: プロジェクトのルートに置く
ダウンロードしたDESIGN.mdを、自分のプロジェクトフォルダの一番上の階層に置く。
README.mdと同じ場所です。
これだけ。
Claude Codeなら、次に起動した時に自動で読み取ってくれます。
ステップ3: AIに指示する
あとは普通にAIに指示するだけ。
「ランディングページ作って」「料金ページ追加して」「ダッシュボード画面作って」。
DESIGN.mdのルールに沿ったデザインで生成される。
いちいち「色は#XXXXXXで…」って指示する必要がない。
ステップ4: 自分用にカスタマイズ（応用）
テンプレートをそのまま使ってもいいし、自分のブランドに合わせて編集してもいい。
DESIGN.mdはただのテキストファイルなので、メモ帳で開いて色を変えたりフォントを変えたりできる。
「この部分だけ変えたいんだけど、どう書き換えればいい？」ってClaudeに聞けば教えてくれます。
自分のサイトの色に合わせたDESIGN.mdを1回作っておけば、次のプロジェクトでも使い回せる。
よくある疑問
Q. Google Stitchを使わないとDESIGN.mdは作れない？
作れます。DESIGN.mdはただのマークダウンファイルなので、テキストエディタで自分で書いてもいいし、Claudeに「こういうデザインルールでDESIGN.mdを書いて」って頼んでもOK。Google Stitchは「既存のサイトから自動抽出する」のに便利なだけで、必須ではないです。
Q. Figmaを使ってるけど、DESIGN.mdのほうがいい？
Figmaの代わりではなく、補完的な関係かなと。Figmaは人間がデザインする時のツールで、DESIGN.mdはAIがコードを書く時のガイド。Figmaでデザインを作って、そのルールをDESIGN.mdに書き出す、みたいな使い方もできます。
Q. Claude Code以外のAIツールでも使える？
Cursor、Gemini CLI、GitHub Copilotでも使えます。DESIGN.mdはただのテキストファイルなので、プロジェクトフォルダに置いてあれば、ファイルを読めるAIツールなら何でも対応できる仕組みです。
DESIGN.mdの注意点と限界は？
DESIGN.mdで指定できるのは、あくまで「見た目のルール」。
アニメーションとか、複雑なインタラクション（マウスオーバーの動き等）は、テキストだけでは伝えきれない場面がある。
「ボタンを押したらフワッと出てくる」みたいな表現は、言葉で書いても精度が落ちがち。
あと、テンプレートのDESIGN.mdはあくまで「インスパイア」であって、Stripeの公式デザインそのものではない。
「Stripeっぽい」けど「Stripeと同じ」ではない。
商用で使う場合、ブランドの類似性には気をつけてください。
もう1つ。
awesome-design-mdリポジトリ（https://github.com/VoltAgent/awesome-design-md）はオープンソースで、MITライセンスです。
Star数は数千（2026年4月時点、急成長中）。
オープンソースは誰でもコードを変更できるので、最終更新日とIssue（バグ報告や要望が集まる場所）を確認してから使ってください。
DESIGN.mdはテキストファイルなのでセキュリティリスクは低いですが、初めて使うテンプレートは念のためClaude Codeに「このDESIGN.mdファイル読んで、問題ないか確認して」って聞いてから使うのが安心です。
preview.htmlを開く場合も、Claude Codeに「このHTMLファイル、安全か確認して」って聞いてからブラウザで開くのがおすすめです。
「DESIGN.md」が広まると何が変わるか？
今まで、デザインの統一って「デザイナー」の仕事だったんですよね。
デザインガイドラインを作って、スタイルガイドを書いて、コンポーネントライブラリを整備して。
これに何十万円、何百万円かかってた。
DESIGN.mdは、その役割をテキストファイル1枚に圧縮する。
しかもAIが直接読める。
人間用のデザインガイドは、人間が読んでコードに変換する必要があった。
DESIGN.mdは、AIが読んで直接コードに反映する。
「デザインガイド → 人間 → コード」から「DESIGN.md → AI → コード」へ。
中間の「人間が読み取る」ステップが消える。
だから、ブレない。
README.mdが「プロジェクトの説明書」として定着したように、DESIGN.mdが「プロジェクトのデザインルール」として定着していくんじゃないかなと思ってます。
DESIGN.mdは結局どんな人に向いているか？
DESIGN.mdは、AIに「デザインの統一ルール」を教えるためのテキストファイル。
プロジェクトフォルダに1枚置くだけで、ページごとにデザインがバラバラになる問題が解決する。
50社以上のテンプレートがGitHubで無料公開されてるので、好みのデザインを選んでコピーするだけで始められる。
まずは1つ、気になるテンプレートをダウンロードして、自分のプロジェクトに置いてみてください。
「あれ、AIの出力がいつもと違う」って実感できるはずです。
参考リンク
・awesome-design-md（50社以上のテンプレート集）: https://github.com/VoltAgent/awesome-design-md
・Google Stitch（DESIGN.md自動生成ツール）: https://stitch.withgoogle.com/
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。