frontend-design (Anthropic)

レビュー

Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトを使用、スキルをインストールまたはスキルなし、各群 2 実行、ネットワーク無効。プロンプトでスキル名には一度も言及していないため、自動トリガーも検証します。3つのタスク：架空の海藻スナック定期購入（Tidepool）のランディングページ、サンプルデータ付きの水質監視ダッシュボード、全コンテンツを維持しなければならない、意図的に無難なクライミングジムのホームページのリデザイン。すべてのページを Playwright（デスクトップ 1440 px、モバイル 390 px）でネットワーク無しのサンドボックス内でレンダリングし、スクリーンショットから 0〜5 でブラインド採点しました。HTML 内の特定の特徴も数えました。

3群の比較

Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 25.5 / 30、判定は 状況次第。

判定：状況次第（25.5 / 30。最初の 3 件では最高）。 出典：anthropics/skills、skills/frontend-design、コミット ca45fc4 時点。インストール：npx skills@latest add anthropics/skills --skill frontend-design。Apache-2.0。

概要

散文ファイル 1 つで、スクリプトはありません。すでに陳腐な提案を却下してきたスタジオのデザインリードのように振る舞うようエージェントに指示します。ブリーフに特化したパレット、書体、レイアウトを選び、よくある「AI 生成」的なデフォルト（テラコッタのアクセント付きクリーム背景、すべての見出しの上にある大文字のアイブロウラベル、順序を示していない 01/02/03 の番号マーカー）を避け、2 段階で作業し（計画、ブリーフに照らして計画を見直す、その後に構築）、最後に自己批評で締めくくります。また品質の下限も挙げています。モバイルへのレスポンシブ対応、キーボードフォーカスの可視化、reduced motion の尊重です。

テスト方法

Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクト、スキルをインストールまたはスキルなし、各群 2 実行、ネットワーク無効。プロンプトでスキル名に一切言及しなかったため、自動トリガーも同時にテストしています。タスクは 3 つ。架空の海藻スナックのサブスクリプション（Tidepool）のランディングページ、サンプルデータ付きの水質監視ダッシュボード、意図的に味気なくしたクライミングジムのホームページのリデザイン（コンテンツはすべて残す）。全ページをネットワークなしのサンドボックスで Playwright（デスクトップ 1440 px、モバイル 390 px）でレンダリングし、スクリーンショットから盲検で 0〜5 点で採点しました。HTML 内の特定の特徴も数えています。

何が起きたか

スキルはひとりでにトリガーされます。 スキルファイルは 6 回のスキルあり実行すべてで、プロンプトなしで読み込まれました。誰もコマンドを入力する必要はありませんでした。

スキルが名指しする特徴は確かに消えます。 ページあたり、対照群は大文字ラベルを平均 3.2 個、番号マーカーを 1.5 個使っていました。スキルで作ったページは 0.3 個と 0 個です。スキル自身の助言が出力に現れているのです。どちらの群も、警告されているクリームとテラコッタの hex 値は使わず、グラデーションの使用は同じでした（ページあたり 0.17）。サンドボックスがオフラインのため、両群ともフォントファミリーはシステムフォントに限られました。これはタイポグラフィを重視するスキルには不利です。ウェブフォントを使えば結果は変わるはずです。

総合的な品質はほぼ同じでした。 盲検スコアはスキルありが平均 3.75、スキルなしが 3.5。ランディングページはスキルありが良く（4.0 対 3.25）、ダッシュボードとリデザインは同点でした。セルごとに 2 実行なのでこれはノイズです。全ページとも十分な出来でした。明確な階層、適切な余白、崩れたレイアウトはなし。

画一性は変わりません。 4 つのランディングページのうち 3 つは、スキルの有無にかかわらず同じ見出し "A little ocean. A lot of crunch." を使いました。4 つ目（スキルありの実行）は別のコピーで "A little sea." と書きました。4 つすべてが同じ全体レイアウトでした。商品パウチと、ページ中ほどの価格カードです。スキルは「このブリーフに特化した独特の視点」を求めますが、同じプロンプトから 1 つのモデルを 2 回実行しても、やはり自分自身のデフォルトに収束します。スキルは表面的な陳腐さを取り除きますが、根底にあるアイデアを多様化はしません。リデザインタスクではタイポグラフィにやや多様性が出ました。対照群は Arial/Helvetica と Courier、スキルあり群は Helvetica Neue または Avenir Next を伴う Impact 系のディスプレイ書体を選びました。ただしこれはシステムフォントの範囲での多様性にすぎません。

品質の下限は同等に満たされました。 viewport のメタタグ、@media クエリ、:focus スタイルは両群の全ページに現れました。reduced-motion の処理は両群のダッシュボードで欠けていました。モバイルでのオーバーフローは 12 ページ中 10 ページでゼロ。各群 1 つのランディングページが 2〜6 ピクセルあふれていました。

コストはかかりません。 スキルありの実行は平均 87,900 トークン、スキルなしは 93,000（0.95 倍）。所要時間は 155 秒 対 189 秒でした。ファイルの読み込みは、ページ自体と比べれば安価です。

当サイトのチェックに関する注意

「$22 / $79 / $720 の価格を保持している」という自動チェックは、リデザイン 4 実行中 3 実行で、両群とも失敗しました。これはページではなく私たちの正規表現の欠陥です。価格は <span> タグをまたいで分割されており、スクリーンショットでは 3 つの価格がすべて存在しています。このチェックはスコアに使用しませんでした。

セーフティレビュー

Markdown ファイル 1 つとライセンスファイル 1 つ。スキャナーは何も検出せず、唯一のドメインはライセンス文内の apache.org です。スクリプト、バイナリ、隠し文字、シークレットに関する指示はありません。security.md を参照。

スコア

こんな人におすすめ

エージェントのページに同じ大文字のアイブロウラベルや 01/02/03 マーカーが繰り返し現れるなら、このスキルがそれを確実に止めます。トークンの追加コストもないため、インストールしたままにしない理由はほとんどありません。平均的なモデルに、目に見えて独創的なデザインを作らせたいと期待するなら、それは見られませんでした。モデルが普段作るものと同じような、十分な出来のページが得られるだけです。画一性への確実な対策は、あなたがより強いブリーフ（パレット、リファレンス、ムード）を与えることです。スキル自身も、ブリーフの言葉が常に優先されると述べています。

このテストの限界

セルごとに 2 実行、モデル 1 つ、システムフォントのみのオフラインサンドボックス、タスク 3 つ。パネルではなく 1 人の盲検レビュアーが採点。デザインの判断は主観的です。Codex ティアは、当サイトのルールでは Codex と Claude Code をカバーします。

更新（2026年11月2日）：一文プロンプト群を追加

第 3 群を追加しました。スキルなしですが、プロンプト末尾にスキルの中核ルールを一文で付けます（「ページに 1 つの具体的で大胆な視覚的視点を与える……紫のグラデーション、大文字のアイブロウラベル、01/02 の番号マーカー、同一の 3 カードグリッドといった一般的な AI デザインの特徴を避ける」）。6 実行。同じ Codex ビルドで Windows マシン上、ネットワーク無効で実行。

一文はスキルと同等です（一文に対するスキルの上乗せ：0.00）。スキルなしは 0.25 上回り、n=2 ではすべてノイズの範囲内です。一文プロンプト群の実行は対照群の約 1.4 倍のトークンを使いましたが、スキルはそうではありませんでした。全セットで最も見栄えの良いページ（セリフ体のダッシュボード見出し "A clear view of your water."）は一文プロンプト群の実行から生まれ、唯一明確にバグのあるページ（?/b> という文字がそのまま出る文字化けしたティッカー）はリデザインタスクのもう一方の一文プロンプト実行から生まれました。新グループのスコアは、当初の 6 実行の比較とは別の盲検セッションで付けたため、わずかなずれはありえます（同じランディングページが、一方のセッションでは 4.5、他方では平均 3.25）。スキルのコストなしの部分は変わりません。名指しした特定の特徴を取り除く、という点です。一文プロンプトもその大部分を果たします。