Web制作やアプリ開発でAIコーディングエージェントを使うとき、「機能はちゃんと動くのに、見た目がなんとなく安っぽい」と感じたことはないでしょうか。原因の多くは、AIがそのプロダクトの「デザインのルール」を知らないまま作っていることにあります。この記事では、Figmaのファイルを渡さなくても、1枚のMarkdownファイルだけでAIにブランドの世界観を伝える「DESIGN.md」という仕組みと、GitHubで10万を超えるスターを集めた活用事例を紹介します。読み終える頃には、次にAIへデザインを依頼するときの伝え方が変わっているはずです。

なぜ「AIに任せたのに垢抜けない」が起きるのか

AIコーディングエージェントは、機能を実装するコードは正確に書けても、そのプロダクトが本来どんな色使いで、どんな余白の取り方をし、どんなトーンで作られるべきかという情報を持っていません。結果として、見た目がテンプレート的で、ブランドごとの個性が出ないUIが量産されがちです。この問題を解決する伝統的な方法は、Figmaで細かくデザインを作り込んでからエンジニアやAIに渡すことでしたが、それには相応の作業時間と、Figma自体を操作するスキルが必要でした。

DESIGN.mdとは何か——「README.mdのデザイン版」

DESIGN.mdは、GoogleのAI UIデザインツール「Stitch」が提唱した概念です。2026年4月21日にGoogle Labsが仕様をApache 2.0ライセンスでオープンソース公開し、特定のツールに縛られない汎用フォーマットとして誰でも使えるようになりました。考え方はシンプルで、README.mdがプロジェクトの仕様をコーディングエージェントに伝えるファイルだとすれば、DESIGN.mdは見た目とトーンをデザインエージェントに伝えるファイルです。中身は「タイポグラフィ・カラー・スペーシング・シャドウ・モーション」という5種類のデザイントークンを、ただのプレーンテキストで書き下したもの。JSONスキーマも専用ツールも不要で、Gitでバージョン管理できる点も、エンジニアにとって扱いやすいポイントです。

73社分のDESIGN.mdが並ぶ「虎の巻」——awesome-design-md

このDESIGN.mdという発想を、実際のプロダクトに当てはめて公開しているのが、VoltAgent社によるGitHubリポジトリ「awesome-design-md」です。Stripe、Vercel、Linear、Notion、Supabase、Apple、Spotify、Claudeなど73のプロダクトから抽出したDESIGN.mdファイルが並び、それぞれ「配色とその役割」「タイポグラフィの階層」「ボタンやカードなどのコンポーネント仕様」「余白やグリッドの原則」「シャドウ・階層表現」「やってはいけないこと」「レスポンシブ挙動」「AIへの指示文サンプル」まで、9項目にわたって整理されています。公開から短期間でGitHubのスター数は10万3,000を超え(2026年7月時点)、GitHub全体のランキングでも150位にランクインするほどの反響を呼びました。使い方はいたって単純で、真似したいプロダクトのDESIGN.mdをプロジェクトのルートフォルダに置くだけ。Claude CodeやCursor、Gemini CLIといった主要なAIコーディングツールが、このファイルを自動的に読み取って生成物に反映してくれます。

実践ステップ：Figmaを開かずにUIを作る

試す手順は次の4つです。

  1. awesome-design-mdから、作りたい世界観に近いプロダクトのDESIGN.mdを選ぶ(または自社サイトの傾向を言語化して自作する)
  2. そのファイルをプロジェクトのルートに置く
  3. AIエージェントに「DESIGN.mdの通りに、料金ページを作って」のように具体的な画面を指示する
  4. 生成されたUIを確認し、色味やフォントなど気になる箇所だけDESIGN.md側を書き直して再生成する

ポイントは、Figma上でパーツを一つひとつ配置し直す代わりに、「ルール」そのものを直すという発想の転換です。ルールを直せば、その後にAIが生成するすべての画面に一貫して反映されます。

画像素材まで「AIに全部任せる」時代へ

UIのレイアウトやトーン&マナーだけでなく、アイコンや装飾画像の生成にもAIが使われるようになってきています。Googleが2026年に公開した最新の画像生成モデル「Nano Banana 2」(Gemini 3.1 Flash Image)は、高解像度な画像を生成しながら文字を崩さずに描ける精度の高さが特徴で、UIに使うアイコンや説明図の生成にも向いています。DESIGN.mdでレイアウトとトーンを固定し、画像生成AIで素材を作る——この組み合わせは、デザインの工程をAIだけで完結させる新しいワークフローとして注目され始めています。

この流れが示すもの

DESIGN.mdが示しているのは、「デザインを言葉で厳密に定義できれば、AIはそれを再現できる」というシンプルな事実です。Figmaのようなビジュアルツールでの細かな調整が不要になるわけではありませんが、AIに一貫したアウトプットを出させるための「共通言語」として、Markdownという最も枯れたフォーマットが選ばれたことには納得感があります。AIと一緒にものづくりをする人にとって、DESIGN.mdは覚えておいて損のない引き出しの一つになりそうです。