Design.mdとは何か、使い方は？（例付き）

Design.mdとは何か

Design.mdは、AIコーディングエージェントやAIビルダーが一貫したユーザーインターフェースを作るために使う、色、タイポグラフィ、余白、コンポーネントパターンなどの視覚ルールをまとめたMarkdownファイルです。

「モダンで洗練された感じにして」のような曖昧な指示でClaudeやCursorに頼む代わりに、design.mdファイルをプロジェクトのルートに置きます。エージェントはそれにアクセスし、設計するものすべてにあなたの正確なスタイルを自動で適用します。

Design.mdの中身

design.mdの構成に厳密な決まりはありませんが、通常はプロジェクトの視覚プリミティブを定義する、わかりやすいセクションに分かれています。

Colors: プライマリーパレット、ニュートラルスケール、セマンティックカラー（success、warning、error）を、正確なhexコードと使い方のガイド付きで記載します。

Typography: 見出しと本文用のフォントファミリー、サイズスケール、ウェイト、行間を定義します。

Spacing: ベース単位（通常は4pxか8px）と、padding、margin、gapに使うスケール値です。

Components: ボタン、入力欄、カードなどの共通要素に対する具体的なスタイルルール。border-radiusやborder styleも含みます。

Elevation: レイヤーUI向けのシャドウ値と奥行きの手がかりです。

実際のファイルがどう見えるか、最小例は次のとおりです:

## Colors
- **Primary** (#1A73E8): Main brand color for buttons and links
- **Background** (#FFFFFF): Page background
- **Surface** (#F8F9FA): Cards and elevated surfaces
- **Text Primary** (#202124): Main text color
  
## Typography  
- **Heading 1**: Inter, 32px, 700 weight- **Body**: Inter, 16px, 400 weight
  
## Components
- **Buttons**: Primary filled (bg #1A73E8, white text, 8px radius)
- **Cards**: White bg, 1px solid #E8EAED border, 12px radius

Design.mdの例/テンプレート

DESIGN.mdファイルを一から書く必要はありません。コミュニティには、すぐ使えるデザインシステムの豊富なライブラリがすでにあります。

Awesome-design-md repo

最も人気のあるリソースは、VoltAgentが管理するGitHubリポジトリawesome-design-mdです。人気のある開発者向けサイトやテックブランドに着想を得たDesign.mdファイルの厳選コレクションが入っています。

次のような企業のデザインシステムをそのまま再現したファイルが見つかります:

• Claude: 温かみのあるテラコッタのアクセントと、すっきりした編集レイアウト

• Vercel: Geistフォントを使った白黒の精密さ

• Stripe: 代名詞の紫グラデーションと上品なタイポグラフィ

• Linear: 超ミニマルで精密、紫のアクセント付き

• Airbnb: 温かみのあるコーラルのアクセントと丸みのあるUI要素

DESIGNmd.ai

もうひとつ優れたリソースがdesignmd.aiです。100以上の無料デザインシステムをホストするコミュニティプラットフォームで、「dark」「saas」「minimal」「fintech」などのタグで探して、対応するMarkdownファイルを直接ダウンロードできます。

Design.mdの使い方

AIエージェントのワークフローにDESIGN.mdファイルを組み込むのは、驚くほど簡単です。

手動の方法

1. 上のリソースからDesign.mdファイルをダウンロードするか、自分で書きます。

2. ファイルをプロジェクトのルートに置きます。agents.mdやclaude.mdのすぐ隣です。

3. Claude Code、Cursor、LovableのようなAIコーディングエージェントに指示するときは、必ずそのファイルを参照するよう明示します。例: 「価格ページを作成し、すべてのスタイル判断に@DESIGN.mdファイルを使ってください」

Banani AI

Banani AIやGoogle Stitchのような最新のAI UIデザインエディタは、デザイン生成中にdesign.mdファイルを自動で作成・更新します。

Bananiは、あなたがプロジェクトを作成している間にデザインスタイルを具体化してくれるので、自分で手動で行う必要がありません。AIで生成中のプロジェクトの見た目の好みが変わっても、その場で更新されるため、常に最新の.mdファイルを保てます。MCPサーバーを使えば、コーディングエージェントが最新バージョンにアクセスできます。

Design.md作成者

agents.mdと同様に、vibe codingコミュニティでは、スタイルの好みを別のmd指示ファイルへ移す実験が始まりました。

2026年3月、Googleは新しいAIデザインツールGoogle Stitchの一部としてこれを追加しました。Stitchはこのファイルを使い、生成するすべての画面やコンポーネントが一貫したビジュアル言語に従うようにします。

作成者ではありませんが、Googleは何をどの順番で含めるべきかについて、最初の「標準化」提案を行いました。

design.mdを使うべきか

AIエージェントでユーザーインターフェースを生成しているなら、ワークフローにdesign.mdファイルを加えるのは、最も効果の大きい改善のひとつです。

これは、すべてのコーディングエージェントがデフォルトで寄りがちな、無難で雑なデザインスタイルというvibe codingの大きな問題を解決します。

awesome-design-mdリポジトリからファイルをダウンロードしてプロジェクトに置くのに30秒しかかかりません。UIの一貫性は、すぐに、はっきり向上します。