Claude Code frontend-design skillで「AIっぽいUI」を直す6つのプロンプト設計

こんにちは、プロンプト画伯です。

AIにUIを作らせると「どこかで見たやつ」になりませんか。

中央寄せのヒーロー、紫グラデのCTA、見覚えのある3カラム。

「これ、AIに頼む意味あったかな」とじわっとストレスになってくる。

あの感覚、ずっと気になっていました。

2026年6月時点でAnthropicが公式スキルとして出している Claude Code frontend-design skill の中身を読み解きます。

SKILL.mdの思想を「6つのプロンプト技術」として翻訳しました。

引用元: Anthropic公式の frontend-design Skill（SKILL.md）。

AIっぽいUIはなぜ生まれるのか——AIが選ぶ「最も無難な答え」の仕組み

AIは確率的に「もっとも無難な選択」を取り続けるからです。

ヒーローと言われれば学習済みデータの平均値をなぞる。

タイポはInterかSan Francisco風の何かを置く。

性能の問題ではなく、性質の問題です。

SKILL.mdが冒頭で AI slop という強い言葉を使うのはここで、放っておいたClaudeは「generic」な方向に流れます。

スキル側から押し戻す指示が要る。

自分でUIを依頼するときも、同じ重力に逆らう必要があります。

ここからの6つは、その「逆らい方」を技術に落とした話です。

1つ目——「小さなデザインスタジオのリード」を演じさせるペルソナ指示のプロンプト技術

最初の技術はAIに「役」を与えることです。

Claude Codeでデザインの指示を出すとき、ペルソナの粒度を上げるだけで結果が変わります。

「デザイナーとして振る舞って」では弱く、「複数のクライアントを抱える小さなデザインスタジオのデザインリードとして振る舞って」まで具体化すると出力の分布が一段ずれます。

ペルソナが具体になるほどAIが参照する母集団が小さくなるからです。

「デザイナーの平均」ではなく「小規模スタジオで個性を売る人の平均」を取りに行く。

肩書き自体にテンプレを出さない動機が含まれているのがうまい。

画像生成プロンプトでも「illustrator」より「東京のZINE作家」と書くと変わるのと同じ構造です。

自分のプロンプトに置き換えるなら、「どんな人が作ったら、このアウトプットは個性的になるか」を一文で書くだけ。

職業でも流派でも制作背景でも機能します。

2つ目——「テンプレは却下されてきた」前提を埋め込むプロンプト技術

次に効くのは過去の文脈を混ぜることです。

「このスタジオでは、テンプレに見える提案は何度も却下されてきた」と1行入れる。

これだけでAIっぽいUIを直すためのプロンプトとして十分に機能します。

AIに「無難を選ぶと損をする」という条件付けを先に持たせる仕組みです。

Claudeは出力候補から「ありがちなやつ」を除外し始める。

SKILL.md自体も「generic」に流れる癖を明文化し、反対方向に縛りをかけている。

判断軸を書き換える技術です。

「失敗の文脈を先に置く」発想は、画像生成でも効く。

「以前の量産品っぽいイラストでは通らなかった」などと一行添えてみてください。

3つ目——曖昧な依頼を「3つの問い」で精度ある依頼に変えるプロンプト技術

AIにデザインを依頼するときのコツで見落とされがちなのが、依頼そのものの精度です。

「ECサイトのトップを作って」では何百通りの平均値が返ってきます。

効くのはAI自身に先に質問させること。

本題前に3つを定義させます。

何のサービスか、誰向けか、このページの目的は何か。

SKILL.mdが Design Thinking で Purpose Tone Constraints Differentiation を先に固めろと書くのはここに対応します。

「会員登録の獲得」か「世界観の提示」かでヒーローも配色も変わる。

「本題前にサービス・想定読者・ゴールを3行で書いてから提案して」の一文で十分です。

依頼の粒度と出力の個性は、思っている以上に連動しています。

4つ目——6段階プロセスで「AIに途中で立ち止まらせる」プロンプト技術

frontend-design skillのプロンプト設計の肝は、AIを一気に走らせないことです。

SKILL.mdを読みながら6段階に整理しました。

Brainstorm で広げ、Exploreで参照を集め、Planで構造を決め、Critique で自案に難癖をつけ、Buildで実装し、Critique Again でもう一度叩く。

最後がBuildで終わらず Critique Again に戻るのが要点です。

AIは放っておくと1ショットで出して満足する。

自己批評を2回挟むと最初のドラフトの平均的な無難さが弾かれる。

「最初の案を出したあと、テンプレ感を3点指摘してから書き直して」と添えるだけで立ち止まりが発生します。

ここは効きます。

5つ目——抽象的なデザイン原則を「命令に翻訳する」プロンプト技術

SKILL.mdには Typography、Color & Theme、Motion、Spatial Composition、Backgrounds & Visual Details の5領域が並びます。

私はここに「コピーもデザイン」を加えて6原則として読みました。

問題は抽象語をそのままAIに投げても動かないことです。

「タイポに人格を持たせて」では出力が変わらない。

「本文と見出しで対比的な書体を選び、見出しは個性のある表示用フォントを優先」「アニメは装飾ではなく次の動作への誘導目的に限定」のように観測可能な指示に置き換える。

「ヒーローは主張」なら「製品の核を一文で置き、装飾より文言の強度で勝負」。

翻訳できるかどうかで解像度が変わります。

「好きなデザイナーの言葉を、AIが実行できる動詞で書き直す」——この作業の積み重ねが、自分だけのプロンプト語彙になっていきます。

6つ目——「他案件に流用できるなら却下」自己レビュー指示のプロンプト技術

最後の技術は一番ずるく効きます。

AIに最終チェックを1行で持たせる。

「このデザインを別業種の別サービスにそのまま流用できるなら、個性が足りない。やり直し」。

SKILL.mdが Differentiation を重視し「No design should be the same」と書くのは、この自己レビューと地続きです。

AIに「他にも転用できそうか」を自問させると、テンプレに収まった出力を自分で弾いてくれる。

凡庸さは外から指摘するよりAI自身に言わせる方が速く落ちます。

自分の制作に持ち帰る——プロンプト画伯流まとめ

6つを並べ直すと、自分のプロンプトに移植できる型になります。

• 役は「小規模スタジオのデザインリード」まで具体化する
• 「テンプレ案は却下されてきた」と前提を植える
• 本題前にサービス・読者・目的を3行で定義させる
• 「最初の案にテンプレ感を3点指摘してから書き直す」を挟む
• 抽象原則は観測可能な指示に翻訳する
• 末尾に「他案件に転用できそうな箇所を3つ挙げて差し替え」を入れる

UI生成の技術として書きましたが、6つとも画像生成プロンプトに効きます。

AIに平均から外れたものを作らせる設計は、領域を越えて同じ顔をしていたのが、SKILL.mdを読んでの発見でした。

次にClaudeにUIや画像を依頼するとき、この型のうち1つだけ添えてみてください。