Claude CodeなどのコーディングAIは優れたフロントエンドコードを書けるが、見た目の判断は「学習データの平均値」に寄りがちで、Interフォント・紫グラデーション・角丸カードといった“いかにもAI製”な見た目に収束しやすい。この問題に対して2026年に入って登場した、Claudeで作るUIを「おしゃれ」に安定させるための4つの代表的な手法（公式スキル・軽量スキル・設定ファイル・外部ツール連携）を整理する。
なぜAIのUIは「同じ顔」になるのか
Anthropicは公式ブログ「Improving frontend design through Skills」で、この現象を「distributional convergence（分布の収束）」と呼んでいる。モデルは学習データの中で最も頻出するデザイン判断を再現する傾向があるため、指示なしで生成すると、どのAIも似たようなInter/Roboto/Arialフォント、紫〜青のグラデーション背景、角丸の白カードに落ち着きやすい。これを避けるには、コードを書く前に「デザインの方向性」を明示的に決めさせる仕組みが必要になる。
Anthropic公式「frontend-design」スキル
その解決策として2026年2月に登場したのが、Anthropicが公式に提供するfrontend-designスキルだ。Claudeに小さなデザインスタジオのデザインリードという役割を与え、コードを書く前にタイポグラフィ・配色・モーション・レイアウトを含む「トークン設計プラン」を必ず作らせる。旧バージョンではInter・Roboto・Arial・Space Groteskといった多用されがちなフォントを名指しで禁止していたが、現在のバージョンはブラックリスト方式から、AIのデザインが陥りがちな3つの“ありがちな見た目”を説明した上で、プラン作成→自己批評という2段階のプロセスに進化している。2026年9月時点でのインストール数は86万件超と、Claude向けスキルの中でも屈指の採用数を記録している。
軽量版「Taste Skill」という選択肢
frontend-designがフルセットのデザインプロセスを強制するのに対し、より軽量な選択肢として登場したのがTaste Skillだ。設定できるパラメータはわずか3つに絞られており、フォントや配色を細かく指定したいというより「ある程度お任せしつつ方向性だけ軽く操作したい」場合に向く。狙いはfrontend-designと同じく分布の収束を避けることだが、markdownファイル1枚で完結する手軽さが特徴で、プロジェクトごとに使い分ける選択肢として紹介されることが多い。
DESIGN.mdでデザインの「記憶」を持たせる
もう一つの潮流が、プロジェクトのルートにDESIGN.mdというファイルを置く手法だ。Claude Codeは基本的にセッションをまたいだ記憶を持たないため、DESIGN.mdをコミットしておかないと、プロンプトのたびにフォント・配色・余白の判断がぶれてしまう。効果的なDESIGN.mdは「概要→トークン（意図と適用範囲）→タイポグラフィ（判断基準）→コンポーネント→やってはいけないこと」という順で構成するとよいとされ、一度Claudeに既存リポジトリを監査させてこのファイルを書かせておけば、以降のプロンプトはすべて同じルールを引き継ぐ。プロジェクト指示ファイルであるCLAUDE.mdから参照させる運用も一般的だ。既存のデザインシステムを流用したい場合は、68種類のデザイン系統をDESIGN.md形式でまとめたawesome-claude-designのようなオープンなテンプレート集も参考になる。
shadcn/ui側もAIエージェント対応を強化
UIコンポーネント側の動きとして見逃せないのがshadcn/uiだ。2026年3月のアップデートでCLI v4・AI向けスキル・デザインシステムのプリセット機能を投入し、「エージェント時代」を前提にした作りに刷新した。MCPサーバー経由でClaude Codeをレジストリに直結できるため、存在しないpropsを幻覚で生成したり、インストールが壊れたりすることなく、コンポーネント・ブロック・アイコンを検索してそのまま導入できる。CLI v4では--dry-runや--diffといったフラグで、ファイルを書き込む前に変更内容を確認できるようになった。さらにregistry:baseを使うと、コンポーネント一式・依存関係・CSS変数・フォント・設定までをまとめて1回のインストールで配布できる、デザインシステムのプリセット機能も追加されている。
4つの手法を比較する
| 手法 | 粒度 | 向いている場面 |
|---|---|---|
| frontend-design（公式スキル） | フル：プラン作成＋自己批評まで強制 | 新規UIを一から作り込みたい時 |
| Taste Skill | 軽量：パラメータ3つのみ | 方向性だけ軽く操作したい時 |
| DESIGN.md | プロジェクト単位の設定ファイル | セッションをまたいで表記ゆれを防ぎたい時 |
| shadcn/ui + MCP | コンポーネント供給側の仕組み | 実装を壊さずコンポーネントを増やしたい時 |
使い分けのヒント
- ゼロから世界観を作るならfrontend-designで骨太な設計プランを立てさせる。
- 細部までは縛りたくないが「AIっぽさ」だけ避けたいならTaste Skillのような軽量スキルで十分なことが多い。
- チームで長期運用するプロジェクトでは、方向性が固まった時点でDESIGN.mdに落とし込み、以降のセッションのブレを防ぐ。
- 実装段階ではshadcn/uiのMCP連携でコンポーネントの幻覚や壊れたインストールを防ぐ、という組み合わせが現実的だ。
主な情報源
- Improving frontend design through Skills（Claude by Anthropic 公式ブログ）
- Agents with Taste（emilkowal.ski）
- How to Use DESIGN.md with Claude Code（DesignMD）
- Writing a DESIGN.md file Claude can actually use（Process to Pixels）
- awesome-claude-design（GitHub）
- March 2026 – shadcn/cli v4（shadcn/ui 公式changelog）
- MCP Server（shadcn/ui 公式ドキュメント）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。