Claude Codeのfrontend-designスキルあり/なしで比較しました

Claude Code公式プラグインのfrontend-designスキルは、「AI生成っぽいありきたりなデザイン」にならないようにすることができます。今回は、スキルのあり/なしでどのような違いが現れるか検証を行い、実際に優れた成果が得られるという結論に至りました。

このスキルは2026/09/02に更新があり、これまでよりもさらに洗練されたデザインができるようにするとともに、ありきたりにならないための指定も更新されました。

検証は、同じお題でスキルのあり/なしをそれぞれ10回ずつ独立に作らせるという方法で行います。同一セッション内で作業すると前の案を知った上で次を作ってしまうため、全て別のサブエージェントに委譲しています。お題はSaaSの料金プランページ（ヒーロー＋料金カード3枚）としました。

frontend-designなし：9/10がTailwindのindigoテーマに

スキルを使わない場合、htmlの構成はこのようになりました。

<head/>タグ内でTailwindのcdnを読み込む
Tailwind.Configのカスタマイズや、追加のcssクラスはなし
<body/>末尾にjavascriptコードを書いているものは1案のみ

カラーデザインも非常に似通ったものになりました。

9案がTailwindのindigoを使用。1案がpurpleを使用。

フォントも8案がTailwindのデフォルト指定のままでした。個人的な感想ですが、見た目の印象として、こだわり感の弱い、簡単に作られたランディングページだなというものでした。

frontend-designを使わず実装した料金ページ10パターン。ほぼ全てがTailwindのindigo系配色で統一されている

バニラ状態でClaudeにデザインをさせると、確かに「ありきたり」なWebページが作られてきました。

では、スキルを使うとどうでしょうか。

frontend-designあり：背景は9/10が明るい紙色に

まずhtmlの中身を見てみます。

Tailwindのcdn: 変わらず、10案全てで利用
Tailwindのデフォルト色クラス: 10案中9案が一切使わず、独自のhexカラーをゼロから定義（1案のみindigo等を部分使用）
javascriptコード: 7案でVanillaJSによる動的な動き（トグル切り替え等）を実装

このようにスキルなしと共通する要素もありつつ、オリジナリティは増し、コードの長さも、スキルなしの約2.5倍（平均156.9行→393.3行）に増えていました。印象を大きく決めるヒーロー部分の実装を見ると、アニメーションを活用したバージョン、ファイル管理をアイコン的に表したイメージのある案など、わかりやすく伝える工夫が見られます。

肝心の配色は、9案が白〜生成り紙色系の明るい背景、1案のみ黒背景でした。共通のアクセントカラーは見当たらず、ネイビーや藍色が多めというくらいで、色相はかなりバラバラです。また、フォントの選定も個性が出ており、キャッチコピーと本文で差をつける表現も多く採用されています。なお、言語の指定をしていないためか、英語での作成が多くなりました。おそらくスキルの実装が英語で行われているためではないかと思われます。

frontend-designスキルを使って実装した料金ページ10パターン。ほとんどが明るい紙色系の背景で統一感がなく、配色がバラバラになっている

	スキルなし	`frontend-design`スキルあり
Tailwind cdnの利用	10/10本	10/10本
背景の明暗	10/10本が明るい背景	9/10本が明るい背景、1/10本が暗い背景
アクセントカラー	`indigo`系9/10本、`purple`系1/10本	共通軸なし。ネイビー・藍系がやや多いが色相はバラバラ
追加css、カラー指定等	Tailwindデフォルトのみ。カスタム定義は1本のみ	9本がTailwindのデフォルト色クラスを一切使わず、独自hexカラー（6〜19色）をゼロから定義
javascriptコード	1本のみ（`tailwind.config`の定義のみ）	7本にインラインJS（トグル切り替え等の動的ロジック）
平均行数	156.9行	393.3行（約2.5倍）

明示的に「AIスロップ」パターンを避ける指定

公式frontend-designスキルでは、実は5種類の「AIスロップ（AIが生み出す低品質な"泥水"のような出力）」的なスタイルを挙げ、それをしないように指示しています。

クリーム背景（#F4F1EA前後）＋テラコッタ/暖色系アクセント（#D97757前後——Anthropic自身のブランドカラーに近く、むしろ「AIが作った目印」として読めてしまうと指摘）
黒に近い背景＋単色の明るいアシッドグリーンかバーミリオンのアクセント
罫線・角丸ゼロ・新聞のような密な段組みのブロードシート風レイアウト
同一角丸・同一グレーの影・装飾的なグラデーションで揃えた「SaaSカードキット」
主題を問わず出てくるテンプレ装飾（ALL-CAPSの見出しラベル、中黒でつないだメタ文字列「A・B・C」、末尾に「→」を付けたボタンなど）

10案中8案は、実装時のコメントで「クリーム×テラコッタ」「黒背景×ネオン」のような、いわゆるAI生成デザインにありがちな配色を明示的に避けたと述べていました。まさに上述の指定が効いていることがわかります。

さらにこの検証の直前（2026-09-02）にスキルの更新がリリースされており、上記の4つ目「SaaSカードキット」もこのときにアンチパターンに追加されました。このことが今回の検証に大きく影響を与えていると考えられます。確かに作成されたデザインは、トレンドでもある「よくあるSaaSの紹介ページ」ではないからです。「よくあるデザイン」は常に更新されていくため、このスキルも随時改定する必要があるのでしょう。

まとめ

frontend-designスキルを使うと、配色・書体・コード量のいずれもスキルなしより多様になった
SKILL.mdが名指しで避けるよう指示している配色パターンを、多くの案が意識的に回避していた
最新の改定によって、今のトレンドを安易に模倣するデザインに陥らないよう、修正が加えられていた