Design.mdとは？
Design.mdは、AIコーディングエージェントやAIビルダーが、一貫したユーザーインターフェース（カラー、タイポグラフィ、スペーシング、コンポーネントパターンなど）を構築するために参照する、すべてのビジュアルルールをまとめたMarkdownファイルです。
ClaudeやCursorなどのエージェントに対し「モダンでクリーンな見た目にして」といった曖昧な指示を与える代わりに、プロジェクトのルートディレクトリにdesign.mdを配置するだけ。エージェントがそれを自動で読み込み、正確なスタイルをすべてのデザインに適用します。
誰がDesign.mdを作ったのか？
agents.mdと同様に、スタイル設定などの嗜好を別ファイルのmd指示書として切り出す試みは、バイブコーディング（vibe coding）コミュニティの実験から始まりました。
2026年3月、Googleは新しいAIデザインツールGoogle Stitchの一部としてこれを採用。Stitchはこのファイルを利用して、生成するすべての画面やコンポーネントが一貫したビジュアル言語に従うように制御します。
Googleは最初の開発者ではありませんが、何が含まれるべきか、どのような順序であるべきかという、初の「標準化」の提案を行いました。
Design.mdの構成例
design.mdの構成に厳格なルールはありませんが、通常はプロジェクトのビジュアルプリミティブを定義する明確なセクションに分かれています。
Colors（カラー）: メインパレット、ニュートラルスケール、セマンティックカラー（成功、警告、エラー）を、正確なカラーコードと使用ガイドライン付きで定義。
Typography（タイポグラフィ）: 見出しや本文用のフォントファミリー、サイズ、ウェイト、行高を定義。
Spacing（スペーシング）: ベースユニット（通常は4pxまたは8px）と、パディング、マージン、ギャップに使用するスケール値を定義。
Components（コンポーネント）: ボタン、インプット、カードなど、共通要素の角丸（border radius）や境界線スタイルなどの個別ルールを定義。
Elevation（エレベーション）: 階層化されたUIのためのシャドウ値と奥行きのルールを定義。
実際のファイルの仕様は以下のようになります：
Design.mdファイルの作り方
DESIGN.mdファイルを一から書く必要はありません。コミュニティには、すぐに使えるデザインシステムの大規模なライブラリがすでに存在します。
Awesome-design-md (GitHubリポジトリ)
最も人気のあるリソースは、VoltAgentが公開している awesome-design-md GitHubリポジトリです。おなじみの主要開発者向けツールやテックブランドのトーン＆マナーから着想を得た、良質なDesign.mdテンプレートが集まっています。
例えば以下のようなブランドの、洗練されたデザインシステムを再現したファイルが入手可能です：
Claude: 温かみのあるテラコッタの配色と、すっきりしたエディトリアルレイアウト
Vercel: Geistフォントを使用した、黒と白の極めて精密なデザイン
Stripe: 特徴的なパープルのグラデーションとエレガントなタイポグラフィ
Linear: 極限までミニマルかつ精密、パープルの配色
Airbnb: 温かみのあるコーラルカラーと丸みを帯びたUI要素
DESIGNmd.ai
もう一つの優れたリソースが、100以上の無料デザインシステムを公開しているコミュニティプラットフォーム designmd.ai です。「dark」「saas」「minimal」「fintech」などのタグから検索し、対応するMarkdownファイルをそのままダウンロードできます。
DESIGN.md Generator (Figmaプラグイン)
Figmaで作業中の方は、DESIGN.md Generator プラグインが便利。ファイルをスキャンしてカラー、タイポグラフィ、スペーシング、コンポーネントを自動抽出し、記述済みのMarkdownファイルに変換してくれます。あとはClaude CodeやCursor、各種AIアプリビルダーに貼り付けるだけで、デザインシステムを瞬時に引き継げます。
Design.mdの使い方
AIエージェントを使用するワークフローにDESIGN.mdファイルを組み込むのは、非常に簡単です。
手動での連携方法
上記のリソースなどからDesign.mdファイルをダウンロードするか、自作します。
プロジェクトのルートディレクトリ（agents.mdやclaude.mdと同じ階層）にファイルを配置します。
AIコーディングエージェント（Claude Code、Cursor、Lovableなど）へのプロンプト入力時に「料金ページを作成し、スタイル全般の決定には @DESIGN.md ファイルを参照してください」といった形で、明確にファイルの使用を指示します。
AI UIツールの利用
Banani AI のような最先端のAI UIデザインツールを使えば、デザイン生成を行うと同時に、design.mdファイルが自動生成・更新されます。
Bananiは、プロジェクト作成プロセスの中でデザインスタイルを自動で定義してくれるため、手動で作る手間が完全に省けます。 AIで生成するプロジェクトのビジュアル要件に変更が生じても、その場で即座に反映され、常に最新の.mdファイルを維持可能。
また、MCPサーバーも用意されているため、ご使用のコーディングエージェントから最新バージョンへ容易にアクセスが可能です。
Banani AIでUIをデザインする（無料） >
design.mdを使用するべきか？
AIエージェントを用いてUI構築を行っているなら、ワークフローにdesign.mdを追加することは極めて効果的な投資です。これだけで、バイブコーディング や バイブデザイン で起きがちな大問題である「AIエージェントがお決まりの洗練されていないUIを生成してしまう問題」を一挙に解決できます。
awesome-design-mdリポジトリや Figmaプラグイン からファイルをダウンロードし、プロジェクトにドロップするのに1分もかかりません。UIデザインの一貫性は、導入直後から目に見えて劇的に向上します。
あるいは、まずはデザイン作成から始めて並行して後から使うためのdesign.mdを用意したい場合は、Banani AI UI Generatorから始めましょう。 キャンバス上にデザインシステム（Design MDファイルの代替）が構築され、最新のデザインバージョンに応じてリアルタイムに自己更新、編集も容易で、アプリ開発プロジェクト全体で参照できます。
Design.mdに関するよくある質問
design.mdはどうやって書けばいい？
まずはブランド概要を書き、次にカラー（カラーコードと用途）、タイポグラフィ（フォント、サイズ、ウェイト）、余白のルール（ベースとなる単位とスケール）、そしてコンポーネントの基本スタイルを設定します。「プライマリーボタン：背景 #1A73E8、テキスト白、角丸 8px」のように具体的なMarkdownの見出しと例を用いて記述してください。
これにより、AIエージェントが曖昧な解釈をせずに厳密なルールに従えるようになります。
また、 Banani AI UI Designer を使えば、design.mdと同等のデザインシステムを自動生成できます。
design.mdの「MD」とは？
MDは「Markdown（マークダウン）」の略です。 テキストベースのシンプルな仕様（拡張子 .md）で、人間にとっても読み書きが非常に容易です。基本的な記法（見出しの「#」や、リストの「-」など）で情報を構造化するため、AIエージェントにとっても解析・理解しやすいドキュメント形式です。
Google Stitchでdesign.mdを使うには？
既存のdesign.mdファイルをお持ちの場合、推奨される方法は、Google Stitch で新規プロジェクトのデザイン生成を始める際に、インプットとしてアップロードすることです。その際、design.mdを反映するように指示を出すプロンプトを入力します。例：「従業員向けHRアプリのオンボーディングUIを作成してください。すべてのスタイル設定には @design.md ファイルを参照してください。」
これによりStitchはファイルを読み込み、設定されているカラー、タイポグラフィ、コンポーネントのルールを自動適用し、生成されるすべての画面において確かな一貫性を担保します。
