Claudeに「かっこいいUIを作って」と頼むと、なぜか似たような紫グラデーションと3カード構成に落ち着いてしまう——そんな経験がある人は多いはずだ。今回は、この“AIっぽさ”を消すためにAnthropic自身とコミュニティが積み上げてきた仕組み、frontend-design skill・Taste Skill・DESIGN.mdという型、そしてshadcn/ui側の対応を整理する。
なぜAIが作るUIは「それっぽく」見えてしまうのか
LLMに装飾の指定なしでランディングページを作らせると、Interフォント・白背景に紫グラデーション・控えめなアニメーションという組み合わせに収束しやすい。これは学習データの中で「誰も傷つけない無難な選択」が圧倒的多数を占めているためで、方向性を与えないとClaudeはその確率分布の中心をサンプリングしてしまう。AnthropicのClaude Cookbookのノートブックでは、この現象への対策として「デザインの軸を具体的に指定する」「参照したい世界観を挙げる（模倣ではなく方向性として）」「避けたい定番パターンを明示する」という3つの戦略が効果的だとしている。
Anthropic公式「frontend-design」スキル——2段階の設計プロセス
Claude Codeにはプラグインとしてfrontend-designが同梱されており、UI関連のタスクで自動的に読み込まれる。SKILL.mdの内容を要約すると、Claudeに「独自性のある小さなスタジオのデザインリード」として振る舞わせ、コードを書く前に必ず設計プランを固めさせる二段階の手順になっている。
| 段階 | 内容 |
|---|---|
| Pass 1: 設計プラン | 4〜6色の命名済みカラー、ディスプレイ/本文/補助の書体役割、レイアウトのASCIIワイヤーフレーム、ブリーフを体現する「シグネチャー要素」を1つ決める |
| Pass 2: レビューと批評 | 各要素が「他のどんな案件にも当てはまってしまう」汎用的な選択になっていないか検証し、独自性が確認できてから初めてコードに着手する |
細かい原則として、見出しは対象物の最も特徴的な部分をテーゼとして提示すること、装飾的な区切り線や連番は情報を持つ場合のみ使うこと、モーションは目的があるときだけ使い散漫なエフェクトを避けること、そして仕上げに「アクセサリーを1つ削る」という抑制の指針が明記されている。レスポンシブ対応・キーボードフォーカスの可視化・reduced motionの尊重も品質基準に含まれる。
コミュニティ発、ダイヤルで“趣味”を数値化する「Taste Skill」
Taste Skillは「AIにセンスを持たせる」ことを目的にしたオープンソースのスキル集で、テンプレート感の強い「3カードの機能紹介」や実態のない統計数値の羅列など、AI生成サイトにありがちな“お約束”を禁止するルールブックとして機能する。特徴的なのは、ブリーフの語彙(vibe words)や想定読者からデザインの方向性を推測したうえで、以下3つのダイヤルを設定してからコードに着手する点だ。
| ダイヤル | 意味 | デフォルト値 |
|---|---|---|
| Design Variance | レイアウトがどれだけ非対称・実験的か | 8 |
| Motion Intensity | アニメーションの量と強さ | 6 |
| Visual Density | 1画面あたりの情報量 | 4 |
この設定は「アーティスティックで動きはあるが、混沌としない」バランスを狙ったもので、必要に応じて既存の実在デザインシステムにマッピングする挙動も持つ。コミュニティ主導のプロジェクトとして急速に支持を集め、GitHub上のスター数も伸びている。
ブランドを引き継がせる「DESIGN.md」という発想
frontend-design skillやTaste Skillが「その場でセンスを発揮させる」仕組みだとすると、DESIGN.mdは「決めたセンスを次回以降も引き継がせる」ための仕組みだ。プロジェクトのルートにブランドの配色・タイポグラフィ・コンポーネント・トークンをMarkdownで記述しておき、Claudeがそれを読み込んで一貫したアウトプットを出す運用を指す。まとめリポジトリのawesome-claude-designでは、業種ではなく「視覚的な性格」でデザインシステムを9つのファミリーに分類している。
| ファミリー | 特徴 | 参考例 |
|---|---|---|
| Editorial Minimalism | 落ち着いたニュートラルカラー、セリフの見出し | Linear, Stripe, Vercel |
| Terminal-Core | 等幅フォント、黒地にリン光グリーン | Ollama, Warp |
| Warm Editorial | テラコッタ・粘土色 | Claude/Anthropic, Notion |
| Data-Dense Pro | 詰まった余白、彩度の高いダッシュボード配色 | ClickHouse, PostHog |
| Cinematic Dark | フィルム調グラデーション、大型タイポ | RunwayML, NVIDIA |
| Playful Color | 高彩度、丸みのある形状 | Figma, Duolingo |
| Glass/Soft-Futurism | すりガラス、半透明 | Apple, Arc Browser |
| Neon Brutalist | ハードエッジ、巨大な数字 | The Verge, PlayStation |
| Cult/Indie Picks | 非コーポレート、独自の声 | Criterion, A24 |
同リポジトリは「Linearのタイポグラフィ＋Claudeのテラコッタ差し色」のように、ファミリーを掛け合わせる“リミックスレシピ”も紹介している。また、Claude系ツールが陥りがちな“指紋”——ティール系の差し色や点滅するステータスドット、必要以上のコンテナ入れ子——を名指しし、その対策としてブランド固有のDESIGN.mdと明示的な制約を事前に与えることを勧めている。
shadcn/uiも「エージェント時代」対応を加速
UIコンポーネントライブラリのshadcn/uiも2026年3月のアップデートでAIコーディングエージェント対応を強化した。CLI v4では、プリセットエンジンにより`npx shadcn@latest init –preset [CODE]`のようなコマンドで、色・タイポ・コンポーネント構成をまとめて指定したプロジェクトを一括生成できるようになった。さらにshadcn/skillsが追加され、RadixやBase UIの最新APIやコンポーネントパターン、レジストリの操作方法をエージェントに直接文脈として渡せるようになっている。変更の影響を事前に確認できる`–dry-run`・`–diff`・`–view`といった検査系フラグも今回の目玉だ。
4つの仕組みの使い分け
| 名称 | 役割 | 向いている場面 |
|---|---|---|
| frontend-design skill | Anthropic公式。その場で「独自性のある設計」を強制する二段階プロセス | ゼロから1つのUIを作る、単発のランディングページなど |
| Taste Skill | コミュニティ製。3つのダイヤルで作風を数値制御 | 装飾のトーンを素早く調整したい、複数案を比較したい |
| DESIGN.md | ブランドトークンを永続化し次回以降に引き継ぐ | 継続的なプロダクト開発、複数ページ間の一貫性維持 |
| shadcn/skills + presets | 実装レベルのコンポーネント・レジストリ文脈を提供 | 実際に動くコードへ落とし込む最終段階 |
ゼロからのアイデア出しはfrontend-design skillやTaste Skillに任せ、固まったトーンはDESIGN.mdに落とし込み、実装はshadcn/skillsで支える——という組み合わせが、現時点でのひとつの型になりつつある。
まとめ
「AIに任せると無難になる」問題は、プロンプトの工夫だけでなく、Anthropic公式のスキル・コミュニティ製の数値ダイヤル・ブランドトークンの永続化・コンポーネントライブラリ側の対応という4つのレイヤーで同時に解かれつつある。どれか1つを覚えるより、目的に応じて使い分ける発想がこれからは重要になりそうだ。
主な情報源
- anthropics/claude-code — frontend-design SKILL.md
- anthropics/claude-cookbooks — Prompting for frontend aesthetics
- Taste Skill 公式サイト
- rohitg00/awesome-claude-design
- shadcn/ui — Skills ドキュメント
- shadcn/ui — March 2026 CLI v4 changelog
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。