🖌️ 実践 15frontend-design｜Claude Code の公式スキルで「AIっぽいページ」は変わる？同じ文で作り比べた

Anthropic が出している Claude Code の公式スキル、frontend-design（フロントエンド・デザイン）。入れる前と後で、まったく同じ文で「街のパン屋さんのホームページ」と「飲食店の売上を見る管理画面」を作らせて比べました。結論から言うと、スキルを呼ぶと AIっぽい癖が5から0に減り、見た目も別物になりました。ただし、入れただけでは使われず、見た目もスキルなしとほぼ同じでした。

frontend-design ってなに？

作っているところ — Anthropic の公式プラグイン。無料（Apache 2.0）
できること — ページを書く前に、色・書体・配置の方針を決めて、見直してから書かせる
中身 — AI が作るページによくある癖が、名指しで書かれている。今回はこれを13項目にして、できたページの中身から数えました
負担 — 入れておくだけなら毎回約80トークン。呼んだときは約3,000トークン

今回の流れ

PART 1 スキルなしで作る — お店のページと管理画面
PART 2 スキルを入れる — コマンド1行
PART 3 入れただけで同じ文を送る — 使われるかを見る
PART 4 スキルを呼んで同じ文を送る — お店のページと管理画面
PART 5 並べて比べる — 癖の数・時間・使用量・スマホの幅

試した環境と、頼んだ文

パソコン — UTM の仮想 Mac（macOS）。開いたブラウザは Safari
AI — Claude Code（Opus 5.5・auto mode）
お店 — 「街のパン屋さんのホームページを作って。ファイル１枚で、このフォルダに保存して。」
管理画面 — 「飲食店の売り上げを見る管理画面を作って。ファイル１枚で、このフォルダに保存して。」

どの回も、新しい空のフォルダで Claude Code を開き直し、一字一句同じ文を送りました。試したのは2026年10月27日です。

PART 1　スキルなしで作る

お店の名前も色も、中身も見た目も指定しません

頼む文はこれだけ

お店のページは2分27秒で完成。使用量は API の料金に直すと0.71ドル分でした。

スキルなしのお店：クリーム色の地にレンガ色、見出しは明朝体

店名は「こむぎ堂ベーカリー」。見出しの上に小さな英語の大文字（NEWS・OUR STORY）、「こだわり」に01・02・03の番号。でも中身は順番のない3つでした。

スキルなしの管理画面：白い角丸のカードに、大きな数字と小さな折れ線

3分57秒・1.26ドル分。スキルなしでも、Claude Code に最初から入っている「グラフ用の指針」（dataviz）を自分で読み込み、画面を撮って確かめ、スマホの幅で重なったラベルを自分で直していました。中身を同じ形のカードに切り分けるのは、スキルが「よくある型」と書いている形です。

PART 2　スキルを入れる

入れ方は1行です

/plugin install frontend-design@claude-plugins-official

作者は Anthropic、入るのはスキル1つ。「Install for you (user scope)」（自分用に入れる）を選びます。入れたあと、条件をそろえるため Claude Code を開き直しました。

PART 3　入れただけで、同じ文を送る

説明には「自動で使う」とあります

あれ？見た目がスキルなしとほとんど同じ

クリーム色の地にレンガ色、明朝体の見出し。2分24秒・0.74ドル分で、時間も使用量もスキルなしとほぼ同じでした。

記録に、スキルを呼んだ行がない

フォルダを見たあと、いきなりファイルを書いています（Write）。今回は、入れただけではスキルは使われませんでした。

PART 4　スキルを呼んで、同じ文を送る

頭に /frontend-design を付けます

「/frontend」まで打つと候補が出る。Tab で決める

/frontend-design のあとに、スキルなしのときと同じ文を書いて送信します。

書く前に方針を宣言：主役は焼き上がり時刻表、色は藍・金・白

2分26秒で完成。終わりには「よくあるクリーム色の背景にテラコッタの配色は避けた」と自分で書いていました。

使用量の「スキル」の欄に frontend-design。今度は使われた

使用量は0.83ドル分。スキルなしより0.12ドル多いだけでした。

呼んだお店：濃い青の地に太い黄色の文字、右は駅の発車標のような時刻表

ただ、店名の「屋」は極太の書体で黒く潰れました。また、このときは「ブラウザがないので見た目は確かめていない」と書いていました（実際は Safari があります）。店名の「よぶ」は、フォルダの名前（yobu-shop）から付いたようです。

管理画面も、スキルを呼んで同じ文で

方針は、架空の居酒屋「こまどり食堂」・藍の配色・明朝と UD ゴシック・夜の売上の波が主役。書いたあと自分で画面を撮り、「気になった4点を直す」と言って、数字が背景に沈む所や注記が線に重なる所を直しました。

呼んだ管理画面：カードを並べず、今日の売上を大きく

右に月の目標と売上カレンダー、下によく出た品のランキングと支払い方法の割合。5分9秒・1.49ドル分で、スキルなしより1分12秒長く、0.23ドル多くかかりました。

カレンダーの日付を押すと、画面全体がその日に切り替わる

PART 5　並べて比べる

スキルに書かれた癖を13項目にして、ページの中身から数えました

実際に試した結果（2026年10月27日・仮想 Mac）

AIっぽい癖（13項目中） — お店はスキルなし5 → 入れただけ7 → 呼んだ0。管理画面はスキルなし2 → 呼んだ0
見た目 — お店はクリーム色＋レンガ色 → 濃い青＋太い黄色の時刻表。管理画面は同じ形のカードの並び → 今日の売上が主役の1枚
入れただけ — スキルは呼ばれず、見た目もスキルなしとほぼ同じ
かかった時間 — お店 2分27秒・2分24秒・2分26秒。管理画面 3分57秒 → 5分9秒
使用量（API の料金に直すと） — お店 0.71・0.74・0.83ドル。管理画面 1.26 → 1.49ドル
スマホの幅（375px） — どのページも横にはみ出さなかった

スマホの幅で開くと：左がスキルなし、右がスキルを呼んだもの

どちらもはみ出しはありません。ただ、呼んだほうの時刻表は、時刻がパンの名前に重なり「く」が隠れました（10:30 くるみとレーズン）。

まとめ　向く人・向かない人と、頼み方のコツ

呼ぶと見た目は別物になり、癖も減りました。ただ、入れただけでは使われず、時間と使用量は少し増えます

向く人・向かない人

AI に作らせたページが、どれも同じに見える — 向く。同じ文でも、呼ぶと癖が0になり見た目も変わった
お店や会社の色・書体が決まっている — 文に書けば使える。スキルに「頼んだ文がいつも優先」とある
急ぎで、仕上がりを確かめる時間がない — 向かない。時間と使用量が少し増え、文字の潰れや重なりも残った

頼み方のコツ

頼む文の頭に /frontend-design を付ける — 入れただけでは呼ばれなかった
決まっている色・書体は、文に書く — スキルの方針より、頼んだ文が優先される
できたら自分の目で見る（スマホの幅も） — 「屋」の潰れや時刻の重なりは、AI が見落とした

Claude Code のほかのスキルや使い方は、AI勉強会の記事と YouTube で、実際の画面で試しています。