DESIGN.mdは、AI時代の「見た目の仕様書」なのか
AIにUIを作らせると、たいてい最初にぶつかるのは機能の不足ではなく、統一感の不足です。
ボタンの角丸が画面ごとに違う。
余白の取り方が毎回ずれる。
同じプロダクトのはずなのに、ページごとに別の人が作ったように見える。
この問題に対して、最近ひとつの答えとして浮上してきたのがDESIGN.mdです。
DESIGN.mdを一言で言えば、色、文字、余白、コンポーネントの癖を、AIが読みやすい文章にしたファイルです。コミュニティではしばしば、AGENTS.md が「どう作るか」を書くのに対して、DESIGN.md は「どう見えるべきか」を書くものだと整理されています。つまり実装の契約と、見た目の契約を分ける発想です。
この分離は、かなり本質的だと思います。
これまで私たちは、AIへの一回きりの指示の中に、技術要件とデザイン要件を一緒くたに押し込んでいました。
Next.jsで作って、アクセシブルにして、モダンにして、でも遊びすぎず、少しNotionっぽくて、余白は広めで、文字は読みやすくて……という具合です。
これでは、会話のたびに制約が揺れます。
AIが悪いというより、前提が毎回揺れている。
DESIGN.mdが面白いのは、その揺れる前提を会話の外に出せることです。
その場のノリではなく、ファイルとして置いておける。
しかもMarkdownなので、人にも読めるし、差分も追えるし、修正も雑に始めやすい。
コミュニティで広く共有されている章立てを見ると、DESIGN.mdは単なる配色メモではありません。
ビジュアルテーマと雰囲気
カラーパレットと役割
タイポグラフィのルール
コンポーネントのスタイル
レイアウトの原則
奥行きと重なりの表現
やること / やらないこと
レスポンシブ時の振る舞い
エージェント向けプロンプトガイド
といった形で、かなり具体的に「見た目の判断基準」を文章化するものとして扱われています。
ここで重要なのは、DESIGN.mdはセンスを自動生成する魔法の紙ではない、ということです。
むしろ逆で、曖昧だった美意識を、逃げられない形で言語化するためのファイルです。
「スタイリッシュに」ではなく、
「背景はオフホワイト、本文は黒寄りのグレー、見出しはやや詰める、カードは影を弱く、角丸は小さく」
のように、判断を具体化する。
AIにとって効くのは、形容詞より制約です。
DESIGN.mdは、その制約を蓄積する置き場です。
たとえば、最小限ならこれくらいから始められます。
DESIGN.md
ビジュアルテーマと雰囲気
落ち着いていて、ミニマルで、読みやすいこと。
静かなトーンを保つこと。派手なグラデーションは使わない。過剰な装飾はしない。
カラーパレットと役割
背景色: #FAFAF7
本文テキスト: #1F1F1F
補助テキスト: #5F5F5F
アクセントカラー: #2F6FED
境界線: #E7E5E4
タイポグラフィのルール
見出しは太字で、文字間はやや詰める。
本文は通常の太さで、可読性を高く保つ。
モバイルでは見出しを大きくしすぎない。
コンポーネントのスタイル
ボタン: 角丸は8px、影は控えめにする。
カード: 白背景、細い境界線を使う。
入力欄: シンプルでフラットにし、フォーカス時は分かりやすい表示にする。
やること / やらないこと
やること:
余白は広めに取る
情報の階層は落ち着いて見せる
やらないこと:
ネオンカラーは使わない
複数の異なる影スタイルを混在させない
このくらいでも、毎回プロンプトで「いい感じに整えて」と祈るより、ずっと強いです。
ただし、ここでひとつ冷静でいたい点もあります。コミュニティで広まっているDESIGN.mdのライブラリは、公開サイトから抽出したデザイントークンをもとにしたもので、提供側も「公開されているCSS値を使ったものであり、各サイトの視覚的アイデンティティの所有権を主張しない」と明記しています。つまり、流通しているDESIGN.mdの多くは公式のブランドガイドそのものではなく、公開面から再構成した参考資料です。
この点はかなり大事です。
DESIGN.mdは、他社の雰囲気をコピーするための道具として使うより、自分のプロダクトの判断を固定するために使ったほうが強い。
模倣のテンプレートとして使うと、どうしても「それっぽい」止まりになります。
でも、自分の色、文字、余白、禁止事項を書き始めると、そこから急に設計になります。
たぶんDESIGN.mdの本当の価値は、AIが賢くなることではありません。
人間側の美意識が、ようやく再利用可能な資産になることです。
これまでデザインの意図は、Figmaの奥や口頭のニュアンスや、なんとなくの空気に埋もれがちでした。
DESIGN.mdはそれを、AIにも人にも読める平文へ引きずり出す。
その意味では、これは単なる流行のファイル名ではなく、AI時代の設計文化が少し変わり始めた兆候なのだと思います。