「信頼感のある青」をAIにどう伝えるか
「この青色には、もう少し信頼感を持たせたいんです」
会議室でデザインチームから渡された分厚いPDFのブランドガイドラインを眺めながら、フロントエンドの実装方針に頭を悩ませた経験は、この業界に長くいる人間なら一度や二度ではないはずだ。人間にとっては美しく、ブランドのフィロソフィーを雄弁に語るそのドキュメントは、いざ我々エンジニアがCSSやコンポーネントに落とし込もうとすると、極めて曖昧で解釈の余地が大きすぎた。
時代は進み、今やAIがコードを書く。しかし、AIエージェントにUIを作らせるとき、私たちは再び似たような壁にぶつかっている。「モダンで信頼感のあるUIを作って」というプロンプトは、AIに丸投げするにはルーズすぎるし、かといってチャットウィンドウで毎回「ボタンの角丸は6pxで、プライマリカラーは#0F172Aで……」と指定するのは非効率極まりない。
単発の生成ではなく、プロジェクト全体を通して一貫した「デザインの文脈」をAIに保持させるにはどうすればいいのか。その最適解とも言えるアプローチが、Anthropicの「Claude Design」と、それを駆動するプレーンテキストのフォーマットDESIGN.mdの組み合わせだ。
人間向けのPDFと、機械向けのJSONの間に落ちていたもの
Claude Designは、単なるコード生成用のチャットUIではない。プロジェクトの永続的な「デザインシステム」を保持するためのワークスペースだ。そして、このワークスペースの起爆剤となるのが、ブランドの視覚言語を記述したDESIGN.mdである。
なぜ、わざわざ新しいマークダウンファイルが必要なのか。それは既存のデザイン資産が、AIエージェントの入力として帯に短し襷に長しだったからだ。
| ドキュメント形式 | ターゲット | 特徴と限界 |
|---|---|---|
| ブランドガイドライン (PDF) | 人間 | 「親しみやすさ」「プレミアム感」など抽象的な表現が多く、AIが具体的なコンポーネント設計に変換しづらい。 |
| FigmaのToken Export (JSON) | システム | 「Primary=#0055FF」という結果（What）だけを出力するため、なぜその色なのか（Why）という文脈が欠落する。 |
| DESIGN.md | AIエージェント | トークン（ルール）とその背後にある理由（Rationale）が同居しており、AIが未知のUIを作る際の判断基準となる。 |
例えば、DESIGN.mdの中身は、システムへの厳格な命令と、デザインの「意図」が混ざったような記述になる。
# Design System
Primary Color: #0F172A (Tech-focused, deep and authoritative)
Border Radius: 6px (Slightly rounded for approachability, but still professional)
Figmaのエクスポートは「何を使うか」を教えてくれるが、「なぜ使うか」は教えてくれない。AIエージェントが、事前に定義されていない新しいパターンのUI（例えば、特殊な警告モーダル）を生成しようとしたとき、背後にある「なぜ」を知らなければ、システムから逸脱したトンチンカンなデザインを出力してしまう。DESIGN.mdは、具体的なルールと思想をセットでAIに渡すことで、この問題を鮮やかに解決している。
68種類の「デザインの魂」を一瞬でインストールする
このDESIGN.mdの威力を即座に、かつ最大限に引き出せるのが、GitHub上で公開されている「Awesome Claude Design」というコレクションだ。
ここには、即戦力となる68種類ものDESIGN.mdファイルがストックされている。白紙の状態からAIと対話してデザインの方向性を探る必要はない。自分が求めるプロダクトのVibe（雰囲気）に合ったファイルを一つ選び、Claude Designのワークスペースにドロップするだけでいい。
そこからの体験は魔法のようだ。Claudeはファイルに記述されたルールと文脈を読み込み、カラートークン、タイポグラフィ、ボタン、カード、ナビゲーションといったUIの足場（Scaffold）を一撃で構築し、実際に動くUIキットとして提示してくる。あとは、その盤石なデザインシステムの上で「ダッシュボードの画面を作って」「設定画面を追加して」と指示を出せば、すべての画面が完璧にシステムに準拠した状態で出力される。
これは「コーディングエージェントへの指示書」として定着しつつあるAGENTS.md（または.cursorrules）の、純粋なデザイン版と言えるだろう。
AI時代のフロントエンド開発の新しい起点
我々は長らく、デザイナーの意図を汲み取り、それを変数のリストに翻訳する作業に時間を溶かしてきた。しかし、DESIGN.mdという共通言語の登場により、その翻訳作業そのものが不要になろうとしている。
理想のスタイルファイルを一つ投げ込むだけで、堅牢なデザインシステムが数秒で立ち上がる。フロントエンドのスタート地点は、今日から確実に一つ上のレイヤーへと引き上げられた。
参考リポジトリ: VoltAgent/awesome-claude-design
Photo by Planet Volumes on Unsplash