「AIに作らせたUIはどれも同じ顔になる」——Interフォント、紫のグラデーション、安全すぎる配色のカード。この“AIスロップ”を卒業するために、Anthropic公式のfrontend-designスキルやコミュニティ製のtaste-skill、デザインシステムを持ち運ぶDESIGN.md方式、実装まで任せるshadcn/ui MCPなど、Claudeに「おしゃれ」を仕込む手法が急速に整理されてきました。今日はこの4つの技を、どう使い分けるかまで含めて紹介します。
なぜAIのUIは「金太郎飴」になるのか
Claude CodeやCursorなどのコーディングエージェントに「ダッシュボードを作って」とだけ頼むと、白背景に紫グラデーション、Interフォント、丸角カードという“いつもの見た目”に収束しがちです。これは技術的には正しくても、視覚的にはどのAI生成物とも見分けがつかない「AIスロップ」と呼ばれる現象です。原因は単純で、モデルにとって最も無難で統計的に平均的な選択肢が、まさにこの組み合わせだからです。
Anthropic公式「frontend-design」スキルとFrontend Aesthetics Cookbook
Anthropicはこの問題に対し、Claude Codeの公式プラグインとしてfrontend-designスキルを配布しています。コードを書く前に「デザインリード」としてトークンシステム（配色・タイポグラフィ・余白のルール）を決めさせ、ありがちな“AIっぽい見た目”を名指しで避けさせるのが特徴です。skills.sh系カタログでは2026年9月時点で86万件超のインストールを記録し、公開されているAnthropic製スキルの中で最も使われているものの一つです。
あわせて公開されているFrontend Aesthetics Cookbookには、プロンプトだけで見た目を底上げする3つの戦略がまとまっています。
| 戦略 | やること |
|---|---|
| デザインの観点を個別に指定する | タイポグラフィ・配色・モーション・背景をそれぞれ具体的に指示し、模範解答任せにしない |
| インスピレーション源を挙げる | 「エディタのダークテーマ風」「◯◯年代のカルチャー」など、押し付けにならない範囲で参照点を示す |
| ありがちな“無難”を名指しで禁止する | Inter・Arial・紫グラデーションなど、モデルが逃げ込みやすい定番をあらかじめ封じる |
特にタイポグラフィは効果が大きく、Cookbookでは「Editorial系（Playfair Display, Fraunces）」「Startup系（Clash Display, Satoshi）」「Technical系（IBM Plex）」のようにカテゴリごとにフォント候補を用意し、プロジェクトの温度感に合わせて選ばせる手法が紹介されています。
コミュニティ製「taste-skill」で好みを強制する
公式スキルが“考え方”を教えるのに対し、Leon Linが公開するtaste-skillは「Anti-Slop Frontend Framework」を掲げ、より具体的な方向性をパッケージ化しています。ミニマルで編集的なトーンのminimalist-ui、Swiss書体×ミリタリー端末風のindustrial-brutalist-uiなど、あらかじめ用意された美的方向性から選んで適用する形式で、GitHub Topics「claude-design」でも上位に並ぶ人気コレクションになっています。画像生成→分析→実装という組み合わせにも対応しており、参考画像を先に作ってからコードに落とし込む使い方もできます。
DESIGN.md方式でデザインシステムを持ち運ぶ
プロジェクトをまたいでトーンを固定したい場合は、デザイントークンをMarkdown1枚にまとめて毎回プロンプトの先頭に貼る「DESIGN.md」方式が広がっています。DesignMDのようなサイトでは、有名プロダクトの配色・タイポグラフィ・余白ルールをDESIGN.md形式やshadcn/Tailwindのトークンとしてエクスポートでき、そのままAIエージェントへの指示に転用できます。Claude公式のClaude Designヘルプページも「デザインシステムをプロジェクトに読み込ませてから作り始める」ことを基本フローとして推奨しており、行き当たりばったりなプロンプトより、先にルールを固定するアプローチが定着しつつあります。
shadcn/ui MCPサーバーで実装まで一気通貫
方向性を決めたあとの実装フェーズでは、shadcn/ui公式のMCPサーバーを使うと、Claude Codeが対話の中でレジストリのコンポーネントを検索・追加してくれます。「acmeレジストリのコンポーネントでランディングページを作って」のように頼むだけで、依存関係の解決やインポートまで面倒を見てくれるのが利点です。サードパーティでは、Linear・Stripe・Vercel・Notion風など31種のブランドテーマとデザイントークンをまとめて提供するbetter-designのようなオープンソースMCPサーバーも登場しており、「トーンを選ぶ→コンポーネントを入れる」までをワンストップにする流れが加速しています。
4つの技、どう使い分けるか
| 手法 | 役割 | 向いている場面 |
|---|---|---|
| frontend-designスキル | コーディング前に方向性を決めさせる汎用の思考プロセス | 特定のブランドがなく、まず“それっぽさ”を脱したい新規プロジェクト |
| taste-skill | あらかじめ用意された美的方向性をそのまま適用 | 迷わず特定のトーン（ブルータリズム、エディトリアル等）で揃えたいとき |
| DESIGN.md方式 | 既存ブランド・デザインシステムをトークンとして固定 | 社内プロダクトなど、毎回同じトーンを再現したいとき |
| shadcn/ui MCP | 方向性が決まった後の実装（コンポーネント検索・追加） | デザイン方針は決まっており、素早く手を動かしたいとき |
実務では「frontend-designかtaste-skillで方向性を決める→DESIGN.mdとして固定する→shadcn/ui MCPで実装する」という組み合わせが無理がありません。いずれもClaudeまかせにせず、最終的な見た目は人の目でチェックするのが前提です。
主な情報源
- Anthropic frontend-design plugin (GitHub)
- Prompting for frontend aesthetics | Claude Cookbook
- 14 Best Claude Code Skills for Developers in 2026 | Firecrawl
- Leonxlnx/taste-skill (GitHub)
- Claude Design system, tokens and DESIGN.md | DesignMD
- Get started with Claude Design | Claude Help Center
- MCP Server | shadcn/ui docs
- marvkr/better-design (GitHub)
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。