DESIGN.mdは「借りて」「逆生成」する：AGENTS.md・SKILL.mdとの分担とClaude Designからの受け渡し(2026年10月)

2026年11月2日

「Claudeで作ると、どこかAIっぽい」を減らす近道は、ゼロから指示を書くことではなく、既にある“設計図”を借りて、自分のサイトから逆算して作ることです。今回は、DESIGN.mdを既存ブランドや既存サイトから用意する方法と、AGENTS.md・SKILL.mdとの役割分担、作る前に「計画を書かせる」流れを整理します。

1. 3種類のmdファイルを分ける

エージェント向けの指示ファイルは役割ごとに分けると、見た目のルールが他の指示に埋もれません。紹介記事では次のように整理されています。

ファイル	読むのは	書く内容
AGENTS.md	コーディングエージェント	ビルド・テスト・lintなど、プロジェクトでの作業手順
DESIGN.md	デザインを担うエージェント	色・文字・余白・モーションなど、見た目と雰囲気の決定事項
SKILL.md	エージェント（必要時に呼び出し）	再利用できる専門タスクや手順

DESIGN.mdはGoogleが2026年4月にドラフト仕様をオープンソース化したとされる形式で、自然言語の説明とトークン（名前付きの値）の二層で構成されます。AGENTS.mdはもともと「作り方」、DESIGN.mdは「見た目の決定事項」を担当させる、と覚えると迷いません。

2. 既存ブランドのDESIGN.mdを“お手本”にする

awesome-design-mdは、有名サービスのデザインを解析したDESIGN.mdを集めたリポジトリです。各サイトにDESIGN.mdと、色見本・文字スケール・ボタンやカードを並べたpreview.html（ダークも）が付きます。使い方は、DESIGN.mdをプロジェクト直下に置き、「このDESIGN.mdに従ってページを作って」と頼むだけです。DesignMDのようにコピー用に公開しているサイトもあります。

注意：他社のブランドをそのまま模倣すると権利・信頼の面で問題になりえます。配色の決め方や余白の取り方など「考え方」を学ぶ参照にとどめ、自社トーンに置き換えましょう。
各リポジトリ・サイトのライセンスと利用条件を確認してから使ってください。

3. 既存サイトからDESIGN.mdを逆生成する

create-design-mdはibelick/ui-skillsにあるスキルで、2つのモードがあります。

リポジトリモード：コードを読んでトークンを拾う
URLモード：描画された既存サイトを読む

各トークンに出典と確信度を記録し、DESIGN.mdの仕様に沿ったlintとexportで検証するのが特徴です。「いまのサイトの見た目」を言語化してから改修に入れるため、リニューアルや機能追加で見た目がブレにくくなります。検証手順の詳細は過去記事もご覧ください。

4. Claude Designで作った設計をClaude Codeへ渡す

Claude Designは2026年4月17日に登場したAnthropicのプロンプト型デザインツールで、プロトタイプ・スライド・ワイヤーフレームなどを作り、スタンドアロンHTMLやClaude Codeへ書き出せると紹介されています。デザインシステムを作ったら「design.mdを作って」と頼んでダウンロードし、Cowork/Claude Codeのプロジェクトフォルダに置くと、以降の制作で自動的に参照される、という流れです（Social Media Examiner）。

5. 作る前に「計画」を書かせる

Anthropic公式のfrontend-designスキルは、コードを書く前に色・書体・レイアウトの計画を立て、AIにありがちな既定値と照らして直してから実装する流れを取ります。比較記事では、避ける例として「クリーム背景＋セリフ体＋テラコッタのアクセント」「見出しの1語だけ強調」「見出し上の全大文字ラベル」が挙がっています。プロンプトに次の一文を足すだけでも効果があります。

実装の前に、このサービスのための配色（3色まで）・書体（2種まで）・レイアウト方針を
10行で書いてください。そのうえで、DESIGN.mdと矛盾しないか確認してからコードを書いてください。

6. 部品はshadcn/uiのレジストリから

shadcn/uiは2026年10月にTrace・Code Blockの2コンポーネントとAI Elements（エージェント向けUIのパターン集）を公開しました。npx shadcn@latest mcpでMCPサーバーを動かすと、エージェントがレジストリを検索して部品を導入できます（解説）。Cult UIのようにシェーダーヒーローなど凝った部品を配るレジストリもあり、ゼロから書かせるより安定します。