2026年4月4日時点で、Google Stitch のドキュメントを見ていて、これはかなりわかりやすいと思ったのが DESIGN.md です。
ひとことで言うと、AIに見た目のルールを渡すための Markdown ファイルです。
これまで、デザインの空気感は Figma やブランドガイド、あるいは担当者の頭の中に残りがちでした。
でも AI に画面を作らせるなら、それでは足りません。
AI が読める形で、色、文字、余白、部品の使い方を持っておく必要があります。
Stitch の DESIGN.md は、そのための入口としてかなり筋がいいです。
まず元ページの見た目を見たほうが早いです。
Stitch公式の What is DESIGN.md?
先に結論
DESIGN.md の便利さはここです。
- AIに見た目の共通ルールを渡せる
- 画面ごとの雰囲気がばらけにくい
- 人も読めるし、あとで直しやすい
開発側の感覚で言うと、AGENTS.md が「どう進めるか」のルールなら、DESIGN.md は「どう見せるか」のルールです。
Stitch公式ではどう説明されているか
公式の What is DESIGN.md? では、DESIGN.md は AIエージェントが読めるデザインシステム文書として説明されています。
同じページでは、次の対比も出ています。
README.md: 何のプロジェクトかAGENTS.md: どう作るかDESIGN.md: どう見えるべきか
この整理がかなり良いです。
非デザイナーでも役割がすぐわかります。
しかも Stitch は、DESIGN.md をただの設定ファイルではなく、デザインと一緒に育つ文書として扱っています。
最初に作って終わりではなく、AIがたたき台を作り、人が直し、また次の画面に反映する前提です。
Stitch DocsのDESIGN.mdはAIに見た目の前提を渡す入口
What is DESIGN.md? や Stitch docs で探している人は、まず役割だけ押さえると早いです。
DESIGN.md は、画面を作る前にAIへ見た目の前提を渡すファイルです。
色だけではなく、余白、文字、部品、やってよいこと、避けることまで書けます。
つまり、AIに「この雰囲気で作って」と毎回説明する代わりに、先に読むルールとして置くものです。
何が入るのか
公式サンプルを見ると、最低限ここが入ります。
- Overview
- Colors
- Typography
- Components
- Do's and Don'ts
つまり、単なるカラーパレットではありません。
「どんな雰囲気のUIか」「ボタンやカードをどう見せるか」「やってよいことと避けたいこと」まで、文章で残せます。
ここが便利です。
スクリーンショット1枚だけでは伝わりにくいルールも、Markdownなら補えます。
作り方は3つある
公式の概要ページでは、DESIGN.md の作り方は3つに整理されています。
1. プロンプトから作る
「やさしい雰囲気のカフェ注文アプリ」のように雰囲気を伝えると、Stitch が色や文字や部品ルールまでまとめます。
最初のたたき台を早く作りたい人向けです。
2. URLや画像から作る
すでにブランドサイトや参考画面があるなら、そこから見た目の傾向を抜き出して DESIGN.md にできます。
既存サービスの雰囲気を崩したくないときに向いています。
3. 手書きする
細かく決めたい人は、Markdownとして自分で書けます。
特別な記法ではなく、見出しと箇条書きで持てるのがわかりやすいです。
どんな人に便利か
特に向いているのは次の人です。
- AIでUIのたたき台を速く作りたい人
- デザイナー不在でも見た目のルールを残したい人
- 複数画面を作るたびに雰囲気がぶれるのを減らしたい人
- コード側にもデザインの意図を渡したい人
逆に、チームで重いデザイン運用をすでに回している場合は、これだけで全部置き換える話ではなさそうです。
ただ、少なくとも「AIに何を守ってほしいか」をテキストで持てるのは大きいです。
便利だと思った理由
自分が一番良いと思ったのは、見た目のルールを会話ではなくファイルに落とせることです。
AIに毎回
- この青を使って
- 角は丸めて
- 情報量は多めで
- カードは影を弱くして
と説明し直すのはつらいです。 DESIGN.md があれば、その説明を毎回やり直さなくて済みます。
これは以前書いた Claude CodeはAGENTS.mdを読まない？ 公式ドキュメントからわかることと対処法 にも少し近いです。
AI運用は、その場の会話より、先に読ませる共通ルールがあるほうが安定します。
まず試すなら、ここだけ見ればいい
最初に全部覚える必要はありません。
まずは公式の概要ページを見て、次の3点だけ掴めば十分です。
DESIGN.mdは AIが読むデザインルール- 色だけでなく、文字や部品や禁止事項まで持てる
- プロンプト、URL/画像、手書きの3通りで作れる
ここがわかるだけでも、Stitch をただの画面生成ツールとして見るのとは印象が変わります。
まとめ
Google Stitch の DESIGN.md は、AIに見た目のルールを渡すためのファイルです。
便利なのは、雰囲気を Markdown で残せることです。
画面を1枚ずつ作るだけなら不要かもしれません。
でも、複数画面をAIで回したいなら、かなり大事になります。
AGENTS.md が作業ルールなら、DESIGN.md は見た目ルール。
この整理で見ると、何に効くのかがかなりわかりやすいです。
FAQ
DESIGN.md はデザイナー向けだけですか？
そうとは限りません。
むしろ、非デザイナーや開発者が AI に見た目の共通ルールを渡したいときに意味があります。
Figma がいらなくなる話ですか？
この概要ページだけを見る限り、そこまでは言えません。
今回は DESIGN.md の便利さに絞って見たほうが安全です。
まず何を見ればいいですか？
まずは公式の概要ページです。
そのあとで、必要なら The format を見て、どの項目をどう書くのかを確認すると流れが自然です。
