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

Vlad Solomakha

2026/04/22

移動

タイトル

AIを使用してUIデザインとワイヤーフレームを生成

デザインを生成する

design.mdについて知っておくべきことをまとめました。概要、すぐ使えるファイルの入手先、AIコーディングエージェントでの使い方まで。

Design.mdとは

Design MDは、AIコーディングエージェントやAIビルダーが一貫したUIを作るための視覚ルールをまとめたMarkdownファイルです。色、タイポグラフィ、余白、コンポーネントのパターンを含みます。

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

Design.mdの中身

design.mdの構成に厳密な決まりはありませんが、通常はプロジェクトの見た目を定義する明確なセクションで整理します。

Colors: メイン、ニュートラル、セマンティックカラー（成功、警告、エラー）を、正確なhexコードと使い方のガイド付きで管理します。

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

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

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

Elevation: レイヤー化されたUIのためのシャドウ値と奥行きの指標です。

実際のファイル例はこんな感じです:

## カラー
- **Primary** (#1A73E8): ボタンとリンクのメインブランドカラー
- **Background** (#FFFFFF): ページ背景
- **Surface** (#F8F9FA): カードや浮き上がった面
- **Text Primary** (#202124): メインテキストカラー
  
## タイポグラフィ  
- **Heading 1**: Inter, 32px, 700 weight- **Body**: Inter, 16px, 400 weight
  
## コンポーネント
- **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リポジトリ

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

以下の企業のデザインシステムを再現したファイルが見つかります:

Claude: 温かいテラコッタのアクセントと、すっきりした編集系レイアウト
Vercel: Geistフォントの黒白ベースの精密な表現
Stripe: 代名詞の紫グラデーションと上品なタイポグラフィ
Linear: 超ミニマルで精密、紫のアクセント付き
Airbnb: 温かいコーラルのアクセントと丸みのあるUI要素

DESIGNmd.ai

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

Design.mdの使い方

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

手動で使う方法

上のリソースからDesign.mdをダウンロードするか、自作します。
ファイルをプロジェクトのルートに置き、agents.mdやclaude.mdのすぐ隣に配置します。
AIコーディングエージェント（Claude Code、Cursor、Lovableなど）に指示するときは、そのファイルを参照するよう明示します。例: “価格ページを作成し、すべてのスタイル判断に@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エージェントでUIを生成するなら、design.mdをワークフローに加えるのは、最も効果の大きい改善の一つです。

vibe codingの大きな課題、つまりすべてのコーディングエージェントが陥りがちな、ありきたりで雑なデザインを解決します。

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