frontend-designからUI/UX Pro Maxまで――Claude Codeの“デザインスキル”でAIっぽくないUIを作る

2026年8月10日

「Claude Codeで作るとなぜかInterフォント＋紫グラデーション＋角丸カードになる」――通称”AIスロップ”問題に対して、2026年はAnthropic公式やVercel Labsなどが次々に”デザインスキル”を公開し、Claude自身にデザインの引き出しを持たせる動きが進んでいる。今回はそうした具体的なスキル・ツールを、実際に使う場面のイメージが湧くようにまとめた。

なぜ”AIっぽいUI”が生まれるのか

Claudeや他のコーディングAIにUIを作らせると、Interフォント・紫〜青のグラデーション・中央寄せのヒーローセクション・同じ形のカードグリッドといった、判で押したような見た目に収束しやすい。これは学習データの多数派パターンに引き寄せられる結果で、業界では”AI slop”と呼ばれている。この”没個性”を避けるために、デザインの判断基準そのものをAIに渡す「スキル」という仕組みが広がっている。

frontend-design――Anthropic公式のデザインスキル

frontend-designは、Claude Codeに標準で同梱されている公式スキルで、コードを書く前に「大胆な美的方向性」を1つ決めさせ、ブルータリズムから高級感まで、方向性に一貫して従わせる設計になっている。紹介記事によれば導入数は40万件超、GitHubスター14万超という、公式スキルの中でも最も使われているものの一つだ。使い方はシンプルで、Claude Code内で次のように打つだけでよい。

npx skills add anthropics/skills --skill frontend-design

Vercel Labsのスキル集――デザインを”監査”する視点

Vercelのエンジニアチームが公開しているagent-skillsは、作るだけでなく「作ったUIを監査する」方向のスキルが特徴。中心となるweb-design-guidelinesは、アクセシビリティ・パフォーマンス・UXにまたがる100以上のルールでコードを審査し、”file:line”形式で指摘を返す。あわせてReact/Next.jsのパフォーマンス最適化に特化した「React Best Practices」なども公開されており、インストールにはVercel製のCLInpx skillsや、スキルの検索サイトskills.shが使える。

UI/UX Pro Max――検索できる”デザインの知識ベース”をClaudeに持たせる

UI/UX Pro Maxは、84種のUIスタイル（グラスモーフィズム、ベントーグリッド、AIネイティブUIなど）、192種の配色パレット、74種のフォントペアリング、GSAPのモーションプリセットなどをローカルデータベース化し、Claudeがプロジェクトの要件に応じて検索・提案できるようにするスキル。React・Vue・Svelte・shadcn/ui・SwiftUIなど22種のスタックに対応し、--variance（重心の強さ）や--motion（モーションの複雑さ）といった”ダイヤル”でデザインの方向性を数値で調整できるのも特徴的だ。

インターフェースデザインの基本原則を示すスライド — Photo: juhansonin, CC BY-SA 2.0（Openverse経由）

Superdesign――IDEの中に”デザインエージェント”を置く

Superdesignはオープンソースの設計エージェントで、Claude Code・Cursor・Windsurf・VS Codeから呼び出せる。プロンプト一つで複数のUIモックアップ・コンポーネント・ワイヤーフレームを生成し、専用のキャンバス上でフォーク・比較・反復できるのが他のスキルとの違い。Claude Code内では/superdesignスラッシュコマンドで起動し、生成物はプロジェクト内の.superdesign/に保存される。「1案だけでなく10案を試す」という設計思想どおり、迷ったときのアイデア出しに向いている。

スキル選びの目安

スキル	得意なこと	使うタイミング
frontend-design	方向性を決めてゼロから実装	新規ページ・コンポーネントを書き始める前
web-design-guidelines	既存UIのアクセシビリティ・UX監査	実装後のレビュー・PR前チェック
UI/UX Pro Max	配色・フォント・モーションの具体案検索	デザインシステムを固めたいとき
Superdesign	複数案の並行生成・比較	方向性自体を迷っているとき