AIにUIを作らせると、どこかで見たような画面ができあがる。紫のグラデーション、白い背景、InterかRobotoのフォント、均等に並んだカード——いわゆる「AIスロップ」だ。
この問題にAnthropicが公式に取り組んだのが、Claude Codeのfrontend-designスキルである。本記事では、このスキルの設計思想から、Figma MCP連携によるデザイン↔コード双方向ワークフロー、実務で使えるプロンプトテクニックまでを解説する。
※本記事で紹介するX投稿は、すべてX社が公式に提供する埋め込み機能（oEmbed API）を使用して表示しています。
「AIスロップ」問題——なぜAI生成UIは同じに見えるのか
AI生成のフロントエンドが画一的になる原因は、学習データの偏りにある。Tailwind UIやshadcn/uiのテンプレートが大量に学習されている結果、AIは「最も一般的なUI」を出力する。
AIスロップの典型パターンは以下の通りだ。
| 要素 | AIスロップ | 本物のデザイン |
|---|---|---|
| 配色 | 紫グラデーション + 白背景 | ブランドに根ざした配色体系 |
| フォント | Inter / Roboto / システムフォント | 意図的なタイポグラフィペアリング |
| レイアウト | 均等グリッド + カード | 非対称レイアウト + 余白の緊張 |
| アニメーション | fade-in のみ | スタガード表示 + マイクロインタラクション |
| 全体の印象 | 「テンプレートっぽい」 | 「誰かがデザインした」 |
frontend-designスキル——Anthropic公式の回答
Anthropicが公開したfrontend-designスキルは、Claude Codeのフロントエンド出力品質を根本から変える。導入はコマンド1つだ。
npx skills add anthropics/claude-code/plugins/frontend-design
このスキルが有効になると、Claudeは以下のデザイン原則に従ってUIを生成する。
- システムフォントを避け、意図的なタイポグラフィペアリングを使用
- 紫グラデーション + 白背景の組み合わせを拒否
- 非対称的な空間構成で「テンプレート感」を排除
- グラデーションメッシュやノイズテクスチャなど、洗練された背景技法を採用
- スタガードアニメーションによる動きのあるUI
エンジニアのあきらパパ氏（@akira_papa_IT）は、frontend-designスキルの効果についてXで次のように共有している。
Figma MCP——デザインとコードの壁を壊す
2026年、FigmaはClaude Code連携のためのMCPサーバーを公式リリースした。これにより、コードからFigma、Figmaからコードの双方向ワークフローが実現した。
Code to Canvas（コード → Figma）
Claude Codeで構築したUIを、Figmaの編集可能なレイヤーとして送信できる。
Claude Codeで:
「このUIをFigmaに送って」
結果:
- テキストは編集可能なテキストレイヤーに
- ボタンは独立したコンポーネントに
- レイアウトはAuto-Layoutを使用
Canvas to Code（Figma → コード）
Figma上で修正したデザインを、コードに反映することもできる。デザイナーがFigmaで色を調整し、エンジニアがClaude Codeでその変更をコードに適用する——この往復がシームレスに行える。
Figma CEOのDylan Field氏（@zoink）も、Claude Code to Figma連携のリリースをXで発表している。
FigmaのMCP連携についての公式ブログが詳しい。
プロンプトテクニック——デザイン品質を引き上げる指示の出し方
frontend-designスキルを入れただけでは不十分な場合もある。より高品質なUIを得るためのプロンプトテクニックを紹介する。
① デザインの方向性を具体的に指示する
❌ 「かっこいいランディングページを作って」
✅ 「ブルータリスト・ミニマリズムのLPを作って。
配色はオフホワイト(#F5F5F0)に黒アクセント、
タイポグラフィはSpace Grotesk + Inter Tight、
ヒーローは全幅のテキストのみ、画像なし」
② 参照サイトを指定する
「stripe.comのプライシングページを参考に、
同じレベルのビジュアル品質でSaaSのプライシングを作って。
ただしカラーは自分たちのブランドカラー(#1A1A2E)を使って」
③ 「何を避けるか」を明示する
「以下のパターンは使わないで:
- 紫〜青のグラデーション
- 3カラムの均等カードレイアウト
- "Get Started"ボタン
- ストック写真風のヒーロー画像」
実践ワークフロー
デザインの品質を担保するための推奨ワークフローをまとめる。
| ステップ | アクション | ツール |
|---|---|---|
| 1 | デザインコンセプトを言語化 | Plan Mode |
| 2 | frontend-designスキルを有効化 | Skills |
| 3 | 参照サイトとNG要素を指定してUI生成 | Claude Code |
| 4 | ブラウザでプレビュー確認 | Playwright MCP |
| 5 | Figmaに送信してデザイナーレビュー | Figma MCP |
| 6 | Figmaでの修正をコードに反映 | Figma MCP |
Claude Codeで「AIスロップ」から脱却するために最も重要なのは、スキルの導入でもMCPの設定でもなく、自分のデザインの意図を言語化する力だ。
あなたのプロダクトは、どんなデザイン言語を話すべきだろうか。
参考文献
- frontend-design SKILL.md — Anthropic公式
- From Claude Code to Figma — Figma Blog
- Claude Code公式プラグイン「frontend-design」完全解説 — AI-Driven Lab
- フロントエンド・UI/UXデザイナー向け Claude Code設定ガイド — Zenn
