DESIGN.mdとは？｜AIが作るUIが毎回バラバラになる「本当の理由」とその解決策

はじめに

AIに「いい感じのモダンなUIで作って」と頼んだら、ページごとにデザインが全部バラバラになりませんか？

マージンが違う。ボタンの角丸がページによって変わる。同じプロダクトなのにカラーパレットがぶれる。

「AIにUI任せるのはまだ無理かな」と半分諦めかけていたとき、Google StitchのDESIGN.mdドキュメントにたどり着きました。
GeminiとNotebookLMに公式ドキュメントを読み込ませて分析してみたら、「なぜUIが崩れるのか」の答えがきれいに出てきました。
AI でデザインを少しでも良くしたい。　この思いからAIと一緒にはじめ、AIで解決するまで進めました。

AI駆動開発の現場で新標準として注目され始めている「DESIGN.md」、その全貌を整理しました。

なぜAIはUIを毎回バラバラに生成するのか

答えはシンプルです。FigmaもPDFも、AIエージェントには直接「読めない」から。

Cursor、Claude Code、Google Stitchなどを使ってUIコードを生成するとき、AIは毎回デザインを「推測」しています。プロジェクトにFigmaファイルが入っていても、AIエージェントはそのバイナリを直接読み込めません。これまでデザイン情報が保管されてきた場所を整理すると、大体この3パターンです。

• FigmaやPenpotなどのデザインツール内

• ブランドガイドラインのPDF

• デザイナーの頭の中

3つとも、AIエージェントには直接読み取れません。

GeminiとNotebookLMに公式ドキュメントを読み込ませたとき、正直これが一番「腑に落ちた」瞬間でした。「AI側の問題じゃなくて、情報がAIの届かない場所に置かれているだけだ」と。

DESIGN.mdとは何か

プレーンテキスト（Markdown形式）で書かれた「AIのためのデザイン説明書」です。

正式に言うと「プロジェクト全体で一貫性のあるUIを生成するために、AIエージェントが読み込むデザインシステムドキュメント」。特別な構文はなく、普通のMarkdownで書けます。

大きな特徴は「人間もAIも読める」という点です。Figmaのデザインデータが「絵」として情報を保持しているのに対し、DESIGN.mdはそれをAIが理解できる「言葉（テキスト）」に変換したもの。デザイン情報を「見るもの」から「読み込めるもの」に変換するファイルです。

README.md、AGENTS.mdとの違い

プロジェクトのルートに置く重要なMarkdownファイルが3つになりました。

README.md は人間向けのプロジェクト概要です。「何を作るか」を定義します。

AGENTS.md はコーディングAI向けの構築指示書です。「どう作るか」を定義します。

DESIGN.md はデザインAIとコーディングAI向けの見た目の仕様書です。「どういうルック＆フィールにするか」を定義します。

README.mdがプロジェクトの「設計図の説明書」だとしたら、DESIGN.mdは「内装の仕様書」に当たります。コードのルールはAGENTS.mdが持ち、見た目のルールはDESIGN.mdが持つ、という役割分担です。

DESIGN.mdに書く5つの要素

Google Stitchなどを使うと、主に5つのセクションが生成されます。

Overview & Creative North Star
プロダクトの全体的なトーン＆マナーです。「ミニマルでクリーンなSaaSツール」「親しみやすいカフェのアプリ」のように、方向性を言語化します。これがあることで、AIが画面を生成するたびに「推測」しなくて済むようになります。

Colors
プライマリ、セカンダリ、背景、テキストなどの具体的なカラーコード（HEX値）。「青っぽい感じで」ではなく #3B82F6 と書くことで、AIがカラーをブレなく適用できます。

Typography
フォントファミリーと、見出し（h1〜h6）から本文までのサイズ・ウェイトの定義。「大きめで」ではなく「32px / font-weight 700」という形で書きます。

Elevation & Depth
コンポーネント間のマージン・パディングのルール、ボタンの角丸のピクセル数、ドロップシャドウの強さ。「8pxベースのグリッドシステム」のように記述します。

Components & Do's and Don'ts
ボタン、カード、入力フォームなどのスタイル指示と、AIに対するデザイン上の制約です。「エラー警告以外で赤系の色を使わない」といったルールを書くことで、AIが勝手に新しいコンポーネントを捏造するのを防ぎます。

DESIGN.mdの3つの作り方

特別なツールは不要です。目的によって方法が変わります。
現在はGoogle Stitch 上で生成するのが簡単です。

① AIに生成させる（プロンプトから）
「温かみのある色使いで、角丸を多用した、親しみやすいカフェの注文アプリ」のように雰囲気をプロンプトで指示すると、AIがカラートークンやガイドラインを含んだDESIGN.mdを生成してくれます。Google Stitchがこれに対応しています。

② 既存ブランドから抽出する（URLや画像から）
既存WebサイトのURLやデザイン画像をAIに読み込ませると、カラーパレット・タイポグラフィ・スタイルパターンを抽出してDESIGN.mdを作成できます。いまのブランドをそのままAIに覚えさせたい場合に向いた方法です。

③ 手書きで作成・調整する
デザイナーやエンジニアが直接Markdownを編集します。特別な構文は不要で、精密なデザインの好みを標準的なMarkdownで記述できます。

どの方法で作ったとしても、DESIGN.mdは一度書いたら終わりの静的ファイルではありません。デザインの進化に合わせて更新していく「生きたドキュメント」として運用します。

実際に自分のサイトで試してみた

今回はDESIGN.mdの概要について解説しました。「わかった。でも実際に使ったらどうなるの？」が気になるところですよね。

自分でもGoogle StitchでDESIGN.mdを生成して、Claude Codeにサイトのデザインをお願いしてみました。「思ってたのと全然違った」という感想もあるし、「これは確かに便利だ」と思った部分もある。

実際の体験と、導入前後でデザインがどう変わったかについては次の記事で詳しく書きます。ぜひ読んでもらえれば嬉しいです。

こちらになります! 
👇

#takibiラボ #takibiラボ_AI #DESIGN_md #Claude_Code #DESIGN #デザイナー #UIUX #Agent #LLM #AI #実験 #Claude #Gemini #Stitch #UI