Claude Code で生成される UI デザインの品質が急に向上したと話題になっています。その理由は「画像学習」の強化ではなく、「一般的（on distribution）」なデザインから意図的に離れるプロンプト設計にありました。

AIスロップ問題とは

AI が生成するフロントエンドデザインには「AIスロップ（AI slop）」と呼ばれる品質問題があります。特に指示を与えずに UI を生成させると、AI は確率分布の中心付近からサンプリングするため、どこかで見たような「いかにもAIが作った」デザインに収束してしまいます。

具体的には以下のような特徴が見られます:

  • 過度にグラデーションやシャドウを多用する
  • 汎用的すぎるカラーパレット
  • 差別化のないカードレイアウト
  • どのサイトでも見るような Hero セクション

frontend-design スキルの登場

Anthropic は Claude Code 向けに frontend-design という公式スキルをリリースしました。このスキルの核心は、Claude に対して**「一般的な出力に収束しないように」**と明示的に指示することです。

スキルの中には以下のような指針が含まれています:

  • 確率分布の中心（もっとも一般的なデザインパターン）に寄らないこと
  • AIスロップ的な美学を避けること
  • 個性のあるデザインを生成すること

なぜプロンプトで解決できるのか

Claude は十分なデザイン知識を持っています。問題は、指示がないと「安全な」中間値に落ち着いてしまうことでした。frontend-design スキルは、この傾向を明示的に打ち消すプロンプトを提供することで、Claude が持つ本来のデザイン能力を引き出しています。

これは画像生成 AI における「ネガティブプロンプト」に近い考え方です。生成したいものを指定するだけでなく、避けたいもの（一般的すぎるデザイン）を指定することで、出力品質が大きく向上します。

実践のポイント

自分のプロジェクトでも同様のアプローチを取ることができます:

  1. 「一般的にしないで」と明示する ― デザイン生成時に「よくあるパターンを避けて」と指示する
  2. 具体的なリファレンスを与える ― 参考にしたいデザインの方向性を具体的に伝える
  3. frontend-design スキルを活用する ― Claude Code を使っているなら、このスキルを有効にする
1
2

# Claude Code でスキルをインストール
npx skills add anthropics/claude-code

Claude Code 内では /skills コマンドでインストール済みスキルの一覧を確認できます。

まとめ

Claude のデザイン品質向上は、モデル自体の性能変更ではなく、プロンプト設計の工夫によるものでした。AI に「一般的でないもの」を求めるという逆転の発想は、デザイン以外の分野にも応用できる重要な知見です。