AIに「いい感じのUIを作って」と頼むと、毎回雰囲気が違う。ボタンの色が変わったり、フォントが揃っていなかったり、なんとなくバラバラに仕上がってくる。それはAIが毎回ゼロからデザインを考えているからだ。
DESIGN.mdはその問題を解消するための仕組みで、Google LabsのStitchが2026年3月に導入した。Claude Code・Cursor・Gemini CLI・GitHub Copilotがいずれも対応している。デザイナーがいないチームや、デザインの専門知識がない人でも、AIと組み合わせることで統一感のある見た目を作れるのが最大の利点だ。
「こういうデザインで」をファイルに保存しておく
DESIGN.mdはカラー・フォント・余白・ボタンの角丸といった「デザインの決まりごと」をテキストで書いたファイルだ。プロジェクトフォルダに置いておくと、AIが作業を始める前に自動で読む。
| |
これを一度用意してしまえば、新しい画面を作るたびに「さっきと同じ雰囲気で」と説明しなくていい。AIが毎回このファイルを参照して、統一された見た目で出力する。
好きなサービスのデザインをそのまま借りられる
自分でゼロから書く必要もない。VoltAgentが公開している「awesome-design-md」には、有名サービスから抽出したDESIGN.mdが55ファイル収録されていて、無料で使える（GitHub★9,100超）。
Stripe・Notion・Linear・Vercel・Figma・Claudeなど、デザインが洗練されているサービスが揃っている。「Stripeっぽい落ち着いた雰囲気にしたい」「Notionみたいなシンプルさが好き」という感覚で選べばいい。各ファイルにはカラーやタイポグラフィをブラウザで確認できるプレビューも付属している。
ただし現時点では、アニメーションや画面遷移の細かい挙動まではこのファイルで表現できない。あくまで「静的な見た目の決まりごと」を渡す仕組みだ。
セットアップはAIに頼めばいい
選んだファイルを自分でコピーして配置する必要もない。AIに一言頼めば全部やってくれる。
このプロジェクトにDESIGN.mdを導入して。
awesome-design-md（https://github.com/VoltAgent/awesome-design-md）から
デザインに近いテンプレートを選んで、実際の色やフォントに合わせて調整してほしい。
AIが既存のスタイルを見てテンプレートを選び、調整して、フォルダに置くところまでやってくれる。多少の行き来は発生するが、ゼロから手作業で書くよりずっと速い。
まとめ
デザインの知識がなくても、AIと組めばそれなりに一貫したUIが作れる時代になっている。DESIGN.mdはその橋渡し役で、awesome-design-mdの55テンプレートはその出発点だ。
「いい感じに作って」を毎回繰り返すより、一度決めてファイルに書いておく。それだけで、AIが出してくるものの質は変わる。
続けて読む
- VS CodeでMarkdownをWYSIWYGで書く：Markdown Live Editor。DESIGN.md で見た目を揃えた次は、日々の Markdown 編集をどう速くするかもセットで効く。
- MicrosoftのMarkItDown、PDFも音声もExcelも全部Markdownにしてくれる。既存資料を Markdown 側へ寄せると、AI に読ませる流れまで一本にしやすい。
- Claude Codeの
/feature-devは、いきなり実装しないための公式プラグインだった。見た目のルールを決める話と、実装前に考えさせる話はかなり相性がいい。
参考
- awesome-design-md（VoltAgent/GitHub）
- Google Stitch 公式サイト
- Google Stitch 公式ブログ（Google Labs）
- @dr_cintas のX投稿
この記事は Claude Sonnet 4.6 が執筆しました。