はじめに
Claude Codeにコンポーネントを作ってもらうと、こんなUIが出てくることがある。グレースケールベースの配色、角丸で清潔感があるが無個性なカード、Interフォント、どこかで見たようなレイアウト——。
これが「AIスロップ（AI Slop）」だ。大量生成された没個性なAI生成コンテンツの総称で、フロントエンドではClaude Codeがデフォルトで「安全で汎用的な」UIを生成するために起こる。
なぜこうなるのか。指示なしでは「最も一般的なパターン」を選択するからだ。デザイン方針（トーン・美的方向性）がコンテキストに含まれておらず、コンポーネント単体で考えるため一貫したデザインシステムが生まれない。
この記事では、AIスロップを構造的に解決するAnthropicの公式frontend-designスキルと、CLAUDE.md・Vercelプラグインを組み合わせた実践手法を解説する。
Anthropic公式frontend-designスキル——AIスロップ問題の解決策
2026年3月のClaude Marketplaceローンチと同時に、Anthropicはfrontend-designスキルを公式提供した。リリース直後から多くのインストールを記録し、最もよく使われるClaude Codeスキルの一つとなっている。
/plugin install frontend-design@anthropics
このスキルをインストールすると、Claude Codeはフロントエンド作業に着手する前に必ず「目的・トーン・差別化ポイント」を確認し、大胆な美的方向性を選択してからコードを書くようになる。
| 美的方向性 | 特徴 |
|---|---|
| Brutally Minimal | 要素を極限まで削ぎ落とす |
| Maximalist Chaos | 情報密度高・視覚的豊かさ |
| Retro-Futuristic | 80年代SF的なデジタル美学 |
| Luxury / Refined | プレミアム感・余白・タイポグラフィ重視 |
| Playful / Toy-like | キャラクター感・遊び心 |
| Brutalist / Raw | 生のHTML的な粗さを意図的に演出 |
| Art Deco / Geometric | 幾何学的・装飾的 |
スキルなしとの違いは明確だ。
Before（スキルなし）：
「ランディングページを作って」
↓
グレーベース・Inter・角丸カード・どこかで見たレイアウト
↓
「AIっぽいな...」
After（frontend-designスキルあり）：
「ランディングページを作って」
↓
Claude: 「ターゲット：若年層・目的：プレミアム感・方向性：Luxury/Refinedで進めます」
↓
意図的な余白・目的のある色・個性的なタイポグラフィ
↓
「これはちゃんと設計されたUIだ」
CLAUDE.mdによるデザインシステムの定義
frontend-designスキルは美的方向性を選択させるが、チーム固有のデザインシステムまでは持っていない。CLAUDE.mdにデザイントークンを定義することで、Claude Codeが一貫したUIを生成するようになる。
## フロントエンド設計ルール
技術スタック
- Next.js 15 App Router
- TypeScript 5.x（strict: true）
- Tailwind CSS v4
- shadcn/ui（ベースコンポーネント）
- React Hook Form + Zod（フォーム）
デザイントークン
- プライマリ: #0F172A（Slate 900）
- アクセント: #6366F1（Indigo 500）
- フォント: DM Sans（見出し）、Inter（本文）
- 角丸: 4px（ボタン）、8px（カード）
- アニメーション: 200ms ease-out
コンポーネント原則
- Server Componentsを優先（必要なときだけ'use client'）
- Compound Componentパターンで再利用性を高める
- CVA（Class Variance Authority）でバリアントを管理
- アクセシビリティ（WCAG 2.2 AA）を必ず考慮
禁止事項
- インラインスタイル禁止
- マジックナンバー禁止（デザイントークンを使う）
- any型禁止
コンポーネントフォルダに特化した詳細ルールは .claude/rules/design-system.md でパスベースフィルタリングを使うと、src/components/** を編集したときだけ自動ロードされる。
---
paths:
- "src/components/**"
- "src/app/**/*.tsx"
コンポーネント設計ルール
- 全コンポーネントはStorybook対応（props定義を明示）
- ローディング状態・エラー状態・空状態の3状態を実装
- モバイルファースト（sm: → md: → lg:の順）
Next.js App Router × Claude Code：実践ワークフロー
Server ComponentsとClient Componentsの判断
「このコンポーネントをServer ComponentとClient Componentのどちらで実装すべきか判断して：
- ユーザーインタラクション（クリック・フォーム）があるか
- useState/useEffectが必要か
- ブラウザAPIを使うか
判断根拠と共にコードを生成して」
App Routerのルート構造を一括生成
Next.js 15 App Routerで以下のルート構造を生成して：
- /dashboard（認証必須・layoutあり）
- /dashboard/users（一覧・検索・ページネーション）
- /dashboard/users/[id]（詳細・編集フォーム）
各ページに：
- loading.tsx（Suspenseフォールバック）
- error.tsx（エラーバウンダリ）
- metadata export（SEO）
を含めること
Vercel公式プラグイン（2026年3月リリース）
2026年3月17日、Vercelが公式Claude Codeプラグインをリリースした。多数のスキルと専門サブエージェントを搭載している。
/plugin install vercel@official
このプラグインをインストールすると、Claude CodeはNext.js App Router・Server Actions、Vercel Functions・Edge Runtime、Turborepo、Vercel AI SDK（ストリーミング）、Vercel Storage（Blob・KV・Postgres）のベストプラクティスを自動適用する。7つのライフサイクルフックを持っており、APIルートファイルを編集中には自動的にEdge Runtimeのベストプラクティスが適用されるような設計だ。
コンポーネント設計のベストプラクティス
アプローチ：コンセプトとアーキテクチャを人間が先に決める
「コンポーネントを作って」だけで渡すと、例外なく汎用的な何かが生成される。これはClaude Codeの問題ではなく、コンテキストが足りないだけだ。モノレポ構成・技術スタック・デザイン方針まで先に書き下してから渡すと、出てくるものが全然変わる。
このコンポーネントを実装して：
# 決定事項（事前に人間が決めた）
- 目的: 商品カタログの一覧表示
- デザイン方向性: minimalist、商品写真を主役
- 技術: Next.js Image、Tailwind、Server Component
- バリアント: grid（3列）・list（1列）
# 実装してほしいこと
- フィルタ（カテゴリ・価格帯）
- ソート（新着・価格順）
- infinite scroll（Intersection Observer）
- スケルトンローディング
実装パターン：Compound Componentで再利用性を高める
複雑なコンポーネントは最初からCompound Componentパターンで設計させると、後の拡張コストが大きく下がる。
TableコンポーネントをCompound Componentパターンで設計して：
<Table>
<Table.Header>
<Table.Row>
<Table.Head>ユーザー</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>...</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
- TypeScriptで型安全に
- CVAでバリアント（compact/comfortable/loose）を管理
- アクセシビリティ（role・aria-label）を適切に設定
- shadcn/uiのTableをベースにカスタマイズ可能な設計で
品質チェックプロンプト
コンポーネントを生成したら、このプロンプトでレビューをかけると品質が安定する。
このコンポーネントを以下の観点でレビューして：
1. パフォーマンス
- 不要な再レンダリングはないか（useMemoの過剰使用も含む）
- 画像最適化（next/imageを使っているか）
2. アクセシビリティ（WCAG 2.2 AA）
- キーボードナビゲーション
- スクリーンリーダー対応（aria-label・role）
- カラーコントラスト比（4.5:1以上）
3. レスポンシブ
- モバイル（375px）で崩れないか
- タブレット（768px）の表示
4. 型安全
- any型がないか
- PropsにReadonlyを使っているか
Before/After
Before（デザイン方針なし）
「商品一覧ページを作って」
↓
グレーカード・Inter・padding-4・flex-wrap
↓
「Tailwind UIのサンプルそのままだ...」
↓
AIスロップ完成
After（frontend-designスキル + CLAUDE.md）
CLAUDE.mdにデザイントークン定義（Luxury方向）
↓
frontend-designスキルが美的方向性を確認
↓
「Luxury/Refinedで進めます。DM Sansの28px・余白多め・商品写真主役」
↓
意図のあるデザインが生まれる
↓
「チームのUIっぽさが出てきた」
まとめ
AIスロップを量産してしまう時期は、誰にでもある。指示なしで「作って」と渡していた時期だ。デザイン方針をきちんと渡すようにしてから、生成されるUIの質感が変わった実感がある。
何から始めるかは状況によるが、この順番が無駄が少ない。
今すぐ（5分）：/plugin install frontend-design@anthropics でfrontend-designスキルをインストールし、次のコンポーネント生成でどう変わるか体験する。「美的方向性の確認」が入るだけで生成されるUIの質感が変わる。
今日中：CLAUDE.mdにデザイントークン（カラー・フォント・角丸・アニメーション）を定義する。プロジェクト固有のデザインシステムをここに書いておくことで、全セッションで一貫したUIが生成される。
チーム展開：.claude/rules/design-system.md を作成してパスベースフィルタリングを設定し、Vercel公式プラグインもインストールする。frontend-designスキル・デザイントークン・Vercelプラグインの3つが揃うと、AIスロップからの脱出が構造的に実現できる。
コメント