design-taste-frontend (Leonxlnx/taste-skill)

レビュー

専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。全群で ui-ux-pro-max および frontend-design と同じ 3 つのタスク：Tidepool 海藻スナックブランドのランディングページ、自治体の水質ダッシュボード、コンテンツを維持した Granite Peak クライミングジムのホームページのリデザイン。一文プロンプト群は、1 つの具体的なコンセプトとパレット、特徴的な書体の組み合わせと非対称レイアウトを求め、紫のグラデーション／デフォルトの Inter／3 カードのグリッド／番号付きマーカー／大文字のアイブローラベルを禁止し、画像は CSS/SVG で描き、デスクトップとモバイルの幅を確認するよう求めます。ページはオフラインでスクリーンショットを撮り（デスクトップとモバイル）、シャッフルされたコンタクトシートからブラインドで採点しました。

3群の比較

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

判定：状況次第（16.2 / 30）。 出典：Leonxlnx/taste-skill、skills/taste-skill、コミット 12af471 に固定。インストール：npx skills@latest add Leonxlnx/taste-skill --skill taste-skill。ライセンス： MIT（リポジトリの LICENSE）。

概要

design-taste-frontend スキル（Leonxlnx/taste-skill）：Web ページのためのアートディレクションワークフローです。ローカルスクリプトを実行してブリーフからデザインの「方向性」を選び（例：「ページがオブジェクトである」）、方向性ファイルとレポートを .taste-skill/ フォルダに書き込み、それに沿ってページを構築します。汎用的な AI 風レイアウトを禁じるルール、固定のセクションセット、ビジュアルチェックを備えます。

テスト方法

専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。

全群共通のタスクは ui-ux-pro-max と frontend-design と同じ 3 つ：海藻スナックブランド Tidepool のランディングページ、自治体の水質ダッシュボード、Granite Peak クライミングジムのホームページを内容を保ったままリデザインするもの。一文プロンプトは、1 つの具体的なコンセプトとパレット、特徴的な書体の組み合わせと非対称レイアウトを求め、紫のグラデーション／デフォルトの Inter／3 カードグリッド／番号付きマーカー／大文字のアイブロウラベルを禁じ、画像は CSS/SVG で描き、デスクトップとモバイルの幅を確認するよう求めます。ページはオフラインで（デスクトップとモバイルを）スクリーンショットし、シャッフルされたコンタクトシートから盲検で採点しました。

1. ブリーフからの新規ランディングページ — Tidepool（サブスクリプション販売の小ロット海藻スナックブランド。3 フレーバー、1 箱 $14、毎月発送）の単一ページのランディングサイトを作成してください。インライン CSS と、必要な場合のみ最小限の JS を使った、自己完結の index.html を 1 つ書いてください。フレームワークなし、ビルド手順な…
2. データ密度の高いダッシュボード UI — 自治体の水質モニタリングチーム向けのダッシュボードページを作成：6 地点の現在値（pH、濁度、塩素、水温）、各地点の 7 日間トレンド、アラートパネル。インライン CSS/JS とハードコードされた…
3. 既存の味気ないページの作り直し — old.html は Granite Peak Climbing Gym（Boulder, CO）の現在のホームページです。new.html にリデザインしてください。実際のコンテンツ（料金、クラス、営業時間、住所）はすべて残しつつ、このジムにふさわしい見た目にしてください。自己完結の HTML/CSS、フレームワー…

スコアは Grok Bot による盲検（ID をシャッフルし、条件は表示しない）で固定のルーブリックに対して付けられ、実行ごとに 0〜5 点。AI 判定者なので、小さな差はノイズとして扱ってください。

結果

第 3 群に与えた一文プロンプト：「AI スロップに抗してアートディレクションする：この題材に 1 つの具体的なコンセプトとパレットを選び、紫のグラデーション、デフォルトの Inter、凡庸な 3 カードの機能グリッド、01/02 の番号マーカー、大文字のアイブロウラベルを避け、特徴的な書体の組み合わせと非対称な構図を使い、画像は CSS/SVG で描き、ページをデスクトップとモバイルの幅で確認して見た目がおかしい箇所を直す。」

平均スコア：スキルなし 3.96 に対しスキルあり 3.58（差 -0.38）。1実行あたりのトークン：115k 対 431k（3.74x）。時間：175s 対 198s。一文プロンプト群：4.29（一文プロンプトに対するスキルの上積み：-0.71。一文プロンプト自身のスキルなしに対する上積み：+0.33）。一文プロンプトのトークンは 1実行あたり 298k なので、スキルは一文プロンプトの 1.44 倍のコストになります。

何が起きたか

• 盲検の平均：一文プロンプト 4.29、対照群 3.96、スキル 3.58（各 n=6）。タスク別では、スキルはリデザインで 4.5 / 4.5（対照群 4.0、一文プロンプト 4.1）、ダッシュボードで 3.5（対照群 3.75、一文プロンプト 4.4）、ランディングページで 2.75（対照群 4.1、一文プロンプト 4.4）。
• ランディングページの平均が低いのは 1 つの壊れたページが原因です。あるスキルあり群の実行のページでは文字化け（フレーバーセレクタがマークアップをテキストとして書くため、ボタン内に '</span>' が表示される）、崩れたナビゲーション、散らばった図形が見られました。もう一方のスキルありのランディングページは問題ありませんでした（4.0）。スキル自身のワークフローは「ブラウザ検証がブロックされた」と報告したため、ビジュアルチェックなしで出荷されました。その実行を除けば、スキルは平均 4.0 となり、対照群と同水準です。
• スキルはページの見た目を実際に変えます。「スロップ」の痕跡は消えています。ページあたりの大文字アイブロウラベル：対照群 0〜5、スキル 0〜1。01/02 の番号マーカー：対照群は 6 ページ中 3 ページで 3〜6、スキルは全 6 ページで 0。一文プロンプトも同じ痕跡を除去したため（ラベル 0〜1、マーカー 0）、その部分は一文だけで達成できます。
• コストは非常に高いです：スキルは 1実行あたり 431k トークン。一文プロンプトは 298k、対照群は 115k（3.7x と 1.4x）。シェルコマンドは 1実行あたり 25.7 回（対照群は 7.7）。各実行はさらに約 40 個のスキル・方向性ファイルをプロジェクトに落とします（スキルの direction.json と report.md は .taste-skill/ に書き込まれます）。
• .taste-skill/direction.json を伴うスキルあり群のダッシュボードとランディングページは見た目が特徴的でした（編集的な紙とインクのレイアウト）が、対照群と一文プロンプトが収束するシンプルなダークグリーン・セリフイタリックのスタイルより一貫して優れているわけではありませんでした。

評価項目スコア

このテストの限界

• レビュー担当者によるフルページのコンタクトシート（ページあたりデスクトップ 600 px、モバイル 300 px）からの盲検のビジュアル判定。0.25 の差は判定者のノイズの範囲内です。壊れた 1 ページがスキルの平均を約 0.3 動かします。
• セルごとに n=2、タスクは 3 つ。壊れた 1 ページは体系的な欠陥というより不運の可能性があります。
• フォントはオフラインでは読み込まれないため、書体の組み合わせの選択は見えません。
• スキル自身のブラウザスクリーンショット手順はサンドボックスで実行できず、これが他群よりもスキルに不利に働いた可能性があります。
• タスクごとに各群 n=2。約 1 点未満の差はノイズです。
• 盲検 AI 判定：判定者は 1 人で、判定者間の一致確認はありません。当初の対照群／スキルあり群の実行と、後に行った一文プロンプト群の実行は別セッションで判定されました（一文プロンプトは 2026-11-02）。そのためセッション間のずれが起こり得ます。

セキュリティ

security.md を参照。スキャン：CRITICAL 10 / HIGH 44 / MEDIUM 9。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。

結論

汎用的な AI 風の見た目を排除し、ここでは最良のリデザインを生みましたが、トークンが 3.7x かかり、6 回中 1 回は明らかに壊れたページを気づかずに出荷しました。一文のアートディレクションプロンプトは約 3 分の 1 のトークンでより高いスコアを出しました。人間が結果を確認するアートディレクション主体のマーケティングページには試す価値がありますが、無人のデフォルトとしては使わないでください。