DESIGN.mdでAIのUI誤生成を止める｜7つの型を実測

Claude CodeやCursorにUIを作らせると、単体では悪くないのに並べると全部同じ顔になり、一目で「AIが作ったな」と分かるものが出てきます。原因は指示の言い回しではなく、デザインの決定を毎回口で渡しているからです。Xで共有が増えている「DESIGN.md」は、実在プロダクトのデザインをそのままAIエージェントが読めるMarkdownに落とし、生成の前に渡す仕組みです。結論から言えば、これは「AIっぽい汎用UI」を減らすための、現時点でいちばん手軽な一手だと編集部は見ています。

この記事では、DESIGN.mdが何を含むファイルか、これまでの渡し方と何が変わるか、そしてClaude CodeとCursorでの具体的な使い方から、LP制作フローへの組み込み方までを、実際に手を動かせる粒度で書きます。機能紹介ではなく、明日から使うための手順です。

DESIGN.mdとは？AIエージェントに”デザインの決定”を渡すMarkdown

DESIGN.mdは、あるプロダクトのデザインシステムを、AIコーディングエージェントが生成前に読めるMarkdown1枚にまとめたものです。中身は概念的な形容ではなく、具体的なトークンの値・各色の意味（役割）・コンポーネントの使い方・その見た目にした理由で構成されます。エージェントは「premium」「playful」といった曖昧な言葉ではなく、確定した値と使用ルールを受け取るため、生成のブレが小さくなります。

配布しているのはRefero Styles（styles.refero.design）というサービスです。Apple・Notion・Linear・xAIなど、実在するプロダクトのサイトから抽出したデザインシステムを2,000件以上そろえ、それぞれにコピーできるDESIGN.mdを用意しています。掲げているのは「AIのそれっぽい生成（AI slop）ではなく、実在の証拠からデザインする」という考え方です。2026年8月時点ではBetaで、ブラウズとコピーは無料です。

DESIGN.mdに含まれる9つのセクション

Refero Stylesのテンプレートは、次の要素で構成されます。上から順に、生成されるUIへの影響が大きいものです。

セクション	書く内容
プロダクトのトーンと原則	そのデザインが何を優先しているか（密度・落ち着き・力強さ等）
カラー	色の値と、その色に持たせた役割（背景・強調・危険など）
タイポグラフィ	フォントと文字サイズの段階（type scale）
スペーシング	余白の刻みの値
コンポーネント	ボタン・カード等の使い方のルール
レイアウト	情報密度の指針
モーション	アニメーションの原則
アクセシビリティ	満たすべき基準
禁止パターン（Do-not-use）	使ってはいけない見た目の明示

編集部の見立てでは、実務で最も差が出るのは末尾の「禁止パターン」です。AIが放っておくと出す癖（過大な角丸、フラットな単色面、全カードが同じ顔になる等）は、やってよいことを増やすより、やってはいけないことを名指しするほうが確実に消えます。Claude CodeでLPの品質がブレる問題はClaude CodeでLPを毎回同じ品質で出す型でも扱っていますが、その「固定すべき決定」の中身を、実在プロダクトから持ってくるのがDESIGN.mdの立ち位置です。

これまでのデザインの渡し方と何が変わるのか

DESIGN.mdが新しいのは、技術そのものではなく「デザインの渡し方」です。これまでエージェントにデザインを伝える方法は、大きく3つでした。参考プロダクトのスクリーンショットを貼る、チャットで口頭でトンマナを指示する、あるいは何も渡さず汎用生成に任せる。いずれも決定がその場限りで、セッションが変われば消えます。

項目	これまで（スクショ／口頭指示）	DESIGN.md方式	実務での意味
渡す形	画像・チャットの文章	確定した値が入ったファイル	解釈の幅が減り、指示が短くなる
再現性	セッションが変わると消える	ファイルが残り、毎回同じ入力になる	2回目以降も同じ顔で出る
参照元	その場の思いつき・記憶	実在プロダクトから抽出した決定	「なんとなくAI感」から抜けやすい
検査	目視で気づいたら直す	「DESIGN.mdに照らせ」で自己点検	崩れを機械的に拾わせられる

アウトプットにどんな差が出るかは、現時点で編集部が実測した数値はありません。ただ仕様の差から言えば、色・角丸・余白の確定値と禁止パターンを生成前に渡すぶん、角丸や面の処理が一貫し、汎用的な「AIっぽいUI」が出にくくなると想定されます。理由は単純で、モデルが自分のデフォルトに戻る前に、実在プロダクトの決定で上書きしているからです。逆に言えば、DESIGN.mdが薄ければ効果も薄く、そこはDESIGN.mdの書き方しだいです。

DESIGN.mdの中身と書き方｜長くしないのが鉄則

DESIGN.mdは、自分でゼロから書くより、Refero Stylesで近いプロダクトのものをコピーして削る使い方が現実的です。ただしコピーしたまま丸ごと渡すのは失敗のもとで、書き方には明確な原則があります。

短く、直接的に、例つきで書く

配布元がはっきり書いているのは「ファイルが長すぎると、エージェントは重要なルールを無視するか薄めてしまう」という点です。だから生成されるUIに最も頻繁に影響する決定だけを残します。「premium」「playful」のような曖昧な形容は、それを裏づける具体ルール（どの色を・どの余白で・何を禁止するか）とセットにしない限り役に立ちません。

実際のDESIGN.mdは、抽象的な説明でなく、次のように値と使いどころを直接書く形になります。

# DESIGN.md（例：落ち着いた業務プロダクト）

## Tone
情報密度を優先。装飾より可読性。

## Color
- bg:      #ffffff  背景（唯一の面色）
- text:    #14181f  本文
- accent:  #f43000  強調は1色のみ。多用しない
- line:    #e9e6e0  罫・境界

## Radius
- card/button: 5px   （クリスプ。丸めすぎない）
- pill/tag:    999px （小さなラベルだけ丸く）

## Do-not-use
- 左1辺だけ色を付けたカード
- 淡い2色パステルの通知ボックス
- 全カードを同じ枠線＋中央テキストで反復

ポイントは、禁止パターンをコメントでなくルールとして明記することです。角丸を4〜6pxに落とし、ピルだけ999pxで残すといった判断は、口頭では毎回ブレますが、ファイルに1行あれば守られます。

Claude Code・Cursorでの使い方（3ステップ）

使い方は、配布元がまとめている3ステップに沿うのが分かりやすいです。ツールが違っても考え方は同じで、「渡す→優先を言う→照合させる」の順です。

① タスクの前にDESIGN.mdを渡す

UIを作らせる依頼をする前に、DESIGN.mdを渡します。渡し方はツールで少し違いますが、大きく2通りです。プロジェクトのルートにDESIGN.mdとしてファイルを置くか、プロンプトに中身を貼り付けます。

Claude Codeでの渡し方

Claude Codeなら、リポジトリ直下にDESIGN.mdを置き、CLAUDE.mdから参照させるのが手堅い方法です。

# CLAUDE.md に1行足す
UIを実装するときは必ず DESIGN.md のルールに従うこと。
色・角丸・余白・禁止パターンは DESIGN.md を唯一の正とする。

Cursor・Codex・v0・Lovableでの渡し方

Cursor・Codex・v0・Lovableでも、ファイルを開いた状態で参照させるか、プロンプト冒頭に貼れば同じように読ませられます。MCPの仕組みそのものはMCPとは？の解説を参照してください。

② 何を優先するかを名指しする

2つ目のステップは、そのDESIGN.mdの中でタイポグラフィ・色・余白・コンポーネント・情報密度・全体、のどれを最優先で守らせるかを伝えることです。全部を等しく守れと言うより、この画面では何がいちばん結果を左右するかを1つ指定したほうが、生成が安定します。

DESIGN.md に従って料金セクションを作って。
この画面では「情報密度」と「角丸ルール」を最優先で守って。
金額は type scale の最大サイズ、他は従わせて。

③ 生成後にDESIGN.mdへの適合を照合させる

3つ目が、実務でいちばん差が出るステップです。生成が終わったあとに、出力をDESIGN.mdのルールと突き合わせて差分を出させます。

いま生成したUIを DESIGN.md の各ルールに照らして、
違反している箇所を箇条書きで挙げて。角丸・面の処理・
禁止パターンを重点的に確認して、修正案も出して。

この「自己点検させる」一手で、角丸がいつのまにか16pxに戻っていた、禁止したはずのパステル面が出ていた、といった崩れを機械的に拾えます。目視で気づいて直すより速く、漏れも減ります。

Refero MCPでファイルを貼らずに検索させる

ファイルを毎回コピーするのが面倒なら、Refero MCPという方法も用意されています。エージェント側にRefero MCPを繋ぐと、エージェント自身がスタイル・実プロダクトの画面・ユーザーフローを検索できるようになります。Cursor・Claude・Windsurfから接続でき、「Linear風の落ち着いたダッシュボードのDESIGN.mdを探して適用して」といった指示を、ファイルの貼り付けなしで通せます。web制作で使う他のMCPはweb制作のMCPサーバーにまとめています。

【実践】LP制作フローにDESIGN.mdを組み込む

ここからは、編集部が普段LPを作らせている流れに、DESIGN.mdをどう差し込むかを具体的に書きます。単発で使うより、案件のフローに固定したほうが安定します。

手順：コピー → ルート配置 → 参照 → 生成 → 照合

実際の組み込みは、次の順で回します。

1. Refero Styles で案件のトーンに近いプロダクトを選び、DESIGN.md をコピー
2. 60行程度まで削る（禁止パターンと色・角丸・余白だけ残す）
3. リポジトリ直下に DESIGN.md として保存
4. CLAUDE.md に「UIは DESIGN.md を正とする」を1行追記
5. 「DESIGN.md に従って FV を作って」で生成
6. 「DESIGN.md に照らして違反を挙げて」で自己点検 → 修正
7. コントラストなど数値で測れるものは目視でなく機械で0件にする

「削る」工程を飛ばさない

2の「削る」を飛ばさないことが要点です。実在プロダクトのDESIGN.mdは網羅的で、そのまま渡すとモーションやアクセシビリティの細則までノイズになり、肝心の禁止パターンが薄まります。案件で本当に守りたい決定だけに絞ります。

複数案件で使い回すテンプレにする

もう一歩進めるなら、案件ごとにDESIGN.mdをゼロから作らず、自社の基準を書いた土台のDESIGN.mdを1枚持ち、案件ごとに色とトーンだけ差し替える使い方が効率的です。角丸5px・強調は1色・パステル面禁止といった、どの案件でも守る決定を土台に固定しておけば、新規案件はRefero Stylesから色とタイポの段階を移植するだけで済みます。社内の自動化に組み込むなら、案件フォルダを作る段階でこの土台DESIGN.mdを自動でコピーするようにしておくと、置き忘れがなくなります。

この使い方は、バイブコーディングのように勢いで作る場面でも土台が崩れにくくなります。作り方の全体像はバイブコーディングの始め方もあわせて読むと流れがつかめます。

DESIGN.mdを使うときの注意点と限界

便利な一方で、DESIGN.mdは万能ではありません。過信すると別の崩れ方をするので、限界を先に押さえておきます。

渡せるのは「見た目の決定」だけ

DESIGN.mdが持つのは色・タイポ・余白・コンポーネントといったビジュアルの決定です。コピーの中身、情報の並び順、写真の選定、コンバージョン設計は含まれません。LPの成否はむしろこちら側で決まるので、DESIGN.mdで見た目が整っても、構成が弱ければ結果は出ません。あくまで「AIっぽさを消す」ための道具です。

実プロダクトをそのまま真似ると独自性が消える

2,000件から1つ選んでそのまま当てると、そのプロダクトのクローンに近づきます。ブランドの独自性が要る案件では、複数のDESIGN.mdから色は片方・タイポはもう片方、のように混ぜて自社トークンに寄せるほうが安全です。

Betaで、統合方法はツールごとに違う

2026年8月時点でRefero StylesはBetaです。対応をうたうツールでも、ファイルを置くのか貼るのか、MCPで繋ぐのかは各ツールで異なり、挙動が変わることがあります。加えて、DESIGN.mdを毎回コンテキストに載せる分、トークン消費は増えると想定されます。だからこそ短く保つ意味があります。

DESIGN.mdは無料で使える？料金と前提

Refero StylesでのDESIGN.mdのブラウズとコピーは無料です。2026年8月時点でBetaとして公開されており、スタイルライブラリを開いて任意のDESIGN.mdをコピーする範囲であれば、サインアップなしで使えます。エージェントに自動検索させるRefero MCPの接続は任意で、必要な人だけが繋ぐ形です。まずは無料でコピーして1案件に当ててみて、手に馴染むか確かめるのが失敗しない入り方です。

よくある質問（FAQ）

DESIGN.mdは無料で使えますか？

Refero Styles上でのブラウズとコピーは無料です。2026年8月時点でBetaとして公開されています。エージェントに検索させるRefero MCPの接続は任意です。

Claude Codeで使えますか？

使えます。リポジトリ直下にDESIGN.mdを置いてCLAUDE.mdから参照させるか、プロンプトに中身を貼り付ければ読み込みます。Cursor・Codex・v0・Lovableにも対応しています。

日本語で使えますか？

プロンプトは日本語で問題ありません。配布されているDESIGN.mdのルール文は英語主体ですが、値や禁止パターンが中心なので支障は小さく、必要なら自分で日本語に書き直しても機能します。

既存のCLAUDE.mdと併用できますか？

併用できます。CLAUDE.mdに「UIはDESIGN.mdを正とする」という参照を1行足す形が扱いやすく、役割が競合しません。

DESIGN.mdはどのくらいの長さにすべきですか？

短いほど良い、が原則です。配布元は、長すぎるとエージェントが重要なルールを無視・希釈すると明言しています。生成されるUIに最も影響する決定（色・角丸・余白・禁止パターン）に絞ります。

まとめ：まず1案件、DESIGN.mdを当ててみる

DESIGN.mdを入れるかは、Claude CodeやCursorの出すUIが毎回AIっぽくなるのを、指示の言い直しだけで消せているかにかかっています。消せていないなら、決定をファイルに移すだけで再現性は上がります。まずはRefero Stylesで案件に近いプロダクトを1つ選び、禁止パターンと色・角丸・余白だけに削ったDESIGN.mdを、1案件のFVに当ててみるのが手堅い一歩です。品質を固定する型の全体像はClaude CodeでLPを毎回同じ品質で出す型、連携で使うMCPはweb制作のMCPサーバーにまとめています。

出典：Refero Styles（styles.refero.design）／DESIGN.md for AI Agents・DESIGN.md Template・DESIGN.md Resources（いずれもstyles.refero.design、2026年8月時点）