CursorやWindsurf、GoogleStitchなどのAIコーディングエージェントを活用した開発は最初は楽しいのですが、次第に苦行になっていきます。その原因のひとつに「AIが出力するデザインが思っていたものと違う」があります。
こうした問題を解決するためのベストプラクティスとして、Googleが公式に「DESIGN.md」の書き方ガイドライン（Google Stitch DESIGN.md）を公開しました。本記事では、このガイドラインの概要と、実際の開発での活用例、そしてすぐにプロジェクトに導入できる汎用テンプレートをご紹介します。
Google公式が提唱した「DESIGN.md」とは？
AIにUIの構築を依頼すると、「修正を頼むたびにボタンの形が変わる」「ページごとに色のトーンがバラバラになる」といった、デザインの一貫性が保てない問題に直面します。
この「AIがバラバラなUIを作る問題」に対し、Google LabsのStitchチームが2026年3月に公式ブログで提示した解決策が、プロジェクトのルートディレクトリ（最上層のフォルダ）に配置する「DESIGN.md」ファイルです。
参照：https://stitch.withgoogle.com/docs/design-md/overview
これは、AIが理解するために最適化されたデザインシステム用のドキュメントです。Markdown（見出しやリストによる構造化テキスト）を活用することで、人間が読んで理解しやすいだけでなく、AIに読み込ませた際にも正確にルールを反映できる設計になっているとのこと。
なんだそんなことか。と思うかもしれないが、Googleの開発チームが提示しているということに意味がある。つまり、AIエージェントの構造を理解している人たちが、伝えるべき情報はこれです。と言っているようなもので、個人で適当に作るより遥かに理にかなっているはずだ。
公式ドキュメントによると、「DESIGN.md」は以下のような要素を定義すると良いとの事。
- プロジェクトのビジュアルテーマと雰囲気
- 色（カラーパレットとHexコード）
- タイポグラフィ（文字のデザインとウェイト）
- 余白（Margin/Padding）の具体的なルール
- コンポーネント（ボタン、カード等）のスタイル
AIエージェントはコードを記述する際、このDESIGN.mdを読み取ることで、プロジェクト固有の「デザインのコンテキスト（文脈）」を把握します。これにより、AIがブランドのトーン＆マナーを外さず、常に一貫したUIを出力できるようになります。
元々はStitch向けに発表されたフォーマットですが、あらゆるAIコーディング環境で有効な手法ではないかと思うので気になる方はチェックしてみてください。
私のプロジェクトでの活用例
私が個人で開発しているではこの「DESIGN.md」を活用して、フルAIによるコーディングをしています。
ファイル内に「余白はTailwindの mb-8 を基準とする」「アイコンはHeroiconsに統一する」といった具体的なルールを定義しておくことで、AIの出力のブレや、不要なライブラリの混入を未然に防ぐことができています。
DESIGN.md 汎用テンプレートの配布
DESIGN.mdの公式ドキュメントは英語なので、分かりやすいよう日本語のフォーマットに整理してみました。ノンプログラマーでもすぐに自分のプロジェクトで使えるテンプレートのセットとして配布します。
もしAIエージェントやバイブコーディングをしているが、デザイン品質を高めたい、これからAIによる個人開発をしてみたいという方は参考にしてみて下さい。
テンプレートの内訳は以下です。
DESIGN.md
私が使用しているファイル本体です。どう書けばいいかの参考にしてみてください。書き方はプロジェクトごとに最適なものが変わるので、参考に活用してください。
DESIGN-temp.md
DESIGN.md本体だけだと、どのように自分のプロジェクトに編集したらいいのか分からないと思うので、カスタマイズ用ファイルを同梱します。[ ] の部分を自分のプロジェクトに合わせて書き換えてください。
readme.txt
DESIGN.mdの役割や、Tailwind CSSを使っていない場合のカスタマイズ方法などを解説した簡単なマニュアルです。デザインやTailwind CSSもし使い方が分からない方は読んでください。
これらのファイルをプロジェクト内に配置し、AIエージェントに「DESIGN.mdのルールに従って」と一度指示するだけで、出力精度がグッと上がるはずです。デザイン修正の手間を省き、本来の機能開発に集中したい方はぜひチェックしてみてください。
記事を購入で「DESIGN.md」をDL
こちらの記事を購入していただけると、以下の内容がDL可能です。
- DESIGN.md
- DESIGN-temp.md
- readme.txt