Claudeのデザインが急に良くなった理由 ― frontend-design スキルと「一般的」から離れるプロンプト
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 における「ネガティブプロンプト」に近い考え方です。生成したいものを指定するだけでなく、避けたいもの(一般的すぎるデザイン)を指定することで、出力品質が大きく向上します。 実践のポイント 自分のプロジェクトでも同様のアプローチを取ることができます: 「一般的にしないで」と明示する ― デザイン生成時に「よくあるパターンを避けて」と指示する 具体的なリファレンスを与える ― 参考にしたいデザインの方向性を具体的に伝える frontend-design スキルを活用する ― Claude Code を使っているなら、このスキルを有効にする 1 2 # Claude Code でスキルをインストール npx skills add anthropics/claude-code Claude Code 内では /skills コマンドでインストール済みスキルの一覧を確認できます。 ...