【getdesign.md】AIにデザインを覚えさせる「DESIGN.md」の使い方

「Claude Codeで作ったUIがなんか素人っぽい…」と感じたことはありませんか。 コードは動く。ロジックも正しい。 でも仕上がりを見ると、余白が不自然で、色もフォントも「なんとなく感」が漂う。

その原因は、AIに「どんなデザインにすべきか」の基準が与えられていないことにあります。 そこで注目されているのが DESIGN.md という考え方と、そのコレクションサービス getdesign.md です。

Markdownファイルを1つプロジェクトに置くだけで、AIが自動的に一貫したデザインを適用してくれます。 デザインの知識がなくてもプロっぽいUIが作れる、そのしくみをまるごと解説します。 ぜひ最後までご覧ください。

DESIGN.mdとは何か

AIが読む「デザインの指示書」

DESIGN.mdは、Webサイトのデザインシステムをmarkdown形式でまとめたテキストファイルです。 通常、デザインのルール（色やフォント、余白など）はFigmaなどのツール内に保存されますが、DESIGN.mdはそれを Markdown形式のテキストファイルとして書き出したものです。

DESIGN.mdは「デザインのこだわりをAIが理解できる言葉に言語化したもの」です。 これがあるおかげで、AIは「なんとなく」ではなく、デザインの意図を理解してUIを作れるようになります。

CLAUDE.mdとの関係

Claude Codeを使っている方ならCLAUDE.mdに馴染みがあるはずです。 コーディング規約のCLAUDE.mdがコードの品質を担保するように、デザインの品質を担保するためのファイル——それがDESIGN.mdです。

特別な機能ではなく、単なるMarkdownファイルです。 Claude Codeの仕組みとしてはCLAUDE.mdと同じで、プロジェクトのコンテキストとして読み込まれるだけです。

DESIGN.mdの中身

各ファイルは以下のようなセクションで構成されています。

特にDo’s and Don’tsセクションでAIに「やってはいけないこと」を明示できる点が、従来の「いい感じにして」型プロンプトとの決定的な違いになります。

getdesign.mdとは

有名サイトのDESIGN.mdが集まるコレクション

getdesign.mdは、人気WebサイトのデザインシステムをまとめたDESIGN.mdファイルのコレクションです。 プロジェクトにひとつ入れるだけで、AIコーディングエージェントがそのサイトに合ったUIを生成してくれます。

Vercel、Stripe、Figma、Notion、Linear、Airbnb、Apple、Claude など多数のブランドに対応しています。 Getdesign 2026年4月時点で66ファイル以上が公開されており、数は増え続けています。

DESIGN.mdファイルはリファレンス素材であり、各企業の公式デザインシステムではありません。 公開されているCSSやパターンから観察・整理された「インスピレーション素材」として、AIにUIを作らせる際の土台として活用するものです。 Getdesign

どんなブランドが収録されているか

テックサービスからラグジュアリーブランドまで幅広く揃っています。 目的別に選ぶと迷いにくいです。

getdesign.mdの使い方

npxコマンドで取得する（最速）

インストール不要で、npxで即実行できます。プロジェクトのルートディレクトリで以下を実行するだけです。

# Vercelスタイルを導入
npx getdesign@latest add vercel

# ブランド一覧を確認
npx getdesign@latest list

# 出力先を指定したい場合
npx getdesign@latest add claude --out ./docs/DESIGN.md

# 既存のDESIGN.mdを上書き
npx getdesign@latest add linear --force

実行すると、プロジェクトのルートに DESIGN.md が生成されます。

Claude Codeで使う3つの方法

方法①：CLAUDE.mdに直接貼り付ける

特定サイトのDESIGN.mdの内容を、そのままCLAUDE.mdにコピーペーストする方法です。 Claude Codeは会話開始時にCLAUDE.mdを自動で読み込むため、「Notion っぽくして」と言わなくてもデザインが自動適用されます。

方法②：プロジェクトルートにDESIGN.mdを置く（推奨）

npxでDESIGN.mdを生成したあと、CLAUDE.mdに以下の1行を追加します。

## デザインシステム
UIを実装するときは必ず @DESIGN.md を参照してスタイルを適用すること

この1行がないと、Claude CodeがDESIGN.mdをUI用ファイルとして認識しないケースがあります。

方法③：複数ブランドを使い分ける

2つ目以降のブランドは、ブランド名フォルダに配置されます。プロジェクトごとに異なるDESIGN.mdを参照させることで、用途に合わせた使い分けが可能です。

AIへの指示の出し方

DESIGN.mdが置かれていれば、日本語で普通に指示するだけです。 「Notion風で」と書かなくても、DESIGN.mdのスタイルが自動的に反映されます。

さらに細かく制御したいときは、以下のように書き分けます。

日本語サイトに使う場合の注意点

awesome-design-md-jpという選択肢

awesome-design-md-jpは日本語サービスに特化したDESIGN.mdコレクションです。 SmartHR、freee、note、無印良品、メルカリ、LINE、Qiita、Zennなど24サイトを収録しています。

awesome-design-mdは欧米サービスのみで日本語タイポグラフィ（和文フォントのフォールバック、禁則処理、混植ルール）をカバーしていないため、日本語UIをAIで開発する場合はこちらが有用です。

DESIGN.mdはあくまでガイド

DESIGN.mdは確率的に解釈されます。 AIが仕様を理解して適用しますが、CSSコンパイラのようにピクセル単位で正確に再現するわけではありません。 DESIGN.mdはガイドであり、コンパイラではありません。

また、VercelのGeistやStripeの sohne-var など、カスタムフォントは利用できません。 InterなどのWebフォントで近似する必要があります。

既存サイトから抽出したDESIGN.mdは「現在の見た目」のスナップショットです。 サイトが更新されると乖離するため、正規のデザイントークンをベースにするのが理想です。

まとめ

getdesign.mdとDESIGN.mdの要点を整理します。

「AIが作ったUIはなんか微妙」という悩みは、多くの場合デザインの指示書が不足していることが原因です。 DESIGN.mdを1枚用意するだけで、AIは一貫したデザインルールに従ってコードを出力してくれます。

まずは npx getdesign@latest list でブランド一覧を眺めて、気に入ったスタイルを試してみてください。 最後までご覧いただき、ありがとうございます。