2026年4月4日時点で、Google Stitch のドキュメントを見ていて、これはかなりわかりやすいと思ったのが DESIGN.md です。
ひとことで言うと、AIに見た目のルールを渡すための Markdown ファイルです。
これまで、デザインの空気感は Figma やブランドガイド、あるいは担当者の頭の中に残りがちでした。
でも AI に画面を作らせるなら、それでは足りません。
AI が読める形で、色、文字、余白、部品の使い方を持っておく必要があります。
Stitch の DESIGN.md は、そのための入口としてかなり筋がいいです。
まず元ページの見た目を見たほうが早いです。
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がたたき台を作り、人が直し、また次の画面に反映する前提です。
何が入るのか
公式サンプルを見ると、最低限ここが入ります。
- 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 は見た目ルール。
この整理で見ると、何に効くのかがかなりわかりやすいです。
