ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
22 の技術スタックに対応し、スタイル、配色、フォント、UX ルール、グラフに関する UI/UX ガイドとローカルデータを提供します。
ui-ux-pro-max：デザインシステムのスクリプトを毎回実行しますが、ブラインド判定されたページは良くなっていません（対照群 4.0、一文プロンプト 3.9、スキル 4.0）。トークンは 1.4 倍です。
Codex CLI · gpt-6-astra
20.9 / 30
スキルなしに対するリフト：-0.04 · 状況次第 · 18 実行
状況次第：合計 20.9/30 が 22 未満 と リフト -0.04 が +1.0 未満。推奨には合計 22/30、出力品質 3.5、リフト +1.0 が必要です。
SOTA
合格Codex でテスト済み。
カバー対象 Codex, Claude Code
Codex CLI 0.166（SOTA ティア）：採点対象 18 実行。当ティアのルールでは、ここでの合格は Claude Code もカバーします。第2ティアについては何も述べません。
スコア
各ディメンションは 0〜5 点で、6 つの合計が 30 点満点の合計スコアになります。すべてのディメンションで 5 が最良です。コスト 5 は低コストで高速、インストール 5 は簡単であることを意味します。
- トリガーの信頼性
- 5.0
- スキルなしに対するリフト
- 2.0
- 出力品質
- 4.0
- トークンと時間のコスト
- 3.0
- インストールと移植性
- 3.0
- 安全性
- 4.0
セキュリティレビュー
安全静的スキャン：CRITICAL 0 / HIGH 3 / MEDIUM 3。手動レビュー：ネットワーク無効のサンドボックスで実行しても安全（スキャナの指摘は確認済み）。クリーンなスキャン結果はスキルの安全性を証明しません。
インストール
npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
固定コミット: 3a13158ff1f32156cbe144108de48eda2ecaed9a
テスト済み: 2026-11-02
テスト内容
- ブリーフからの新規ランディングページ — Tidepool（定期購入で販売する少量生産の海藻スナックブランド。3 種類のフレーバー、1 箱 $14、毎月発送）向けに 1 ページのランディングサイトを作ってください。インライン CSS と、必要な場合のみ最小限の JS を含む自己完結した index.html を 1 つ書いてください。フレームワークやビルドは使わ…
- データ密度の高いダッシュボード UI — 自治体の水質監視チーム向けのダッシュボードページを作ってください：6 つの観測所の現在値（pH、濁度、塩素、水温）、それぞれの 7 日間のトレンド、アラートパネル。インライン CSS/JS とハードコードされた…を備えた自己完結の dashboard.html を 1 つ作ってください。…
- 既存の素朴なページを作り直す — old.html は Granite Peak Climbing Gym（Boulder, CO）の現在のホームページです。new.html にリデザインしてください：実際の内容（料金、クラス、営業時間、住所）はすべて残しつつ、このジムらしい見た目にしてください。自己完結の HTML/CSS、フレームワークは…
長所
- スキルは名前を出さずとも採用されました：スキルあり群 6/6 実行でスキルファイルが読み込まれました。
短所
- スキルなしに対する有意なリフトなし（-0.04、ノイズの範囲内）。
- 一文プロンプトは 3.92、スキルありは 3.96（+0.04）。
- テスト上の注意：スキルのデザインシステムのスクリプトはスキルあり群 6/6 実行で実行されましたが、ブラインドのコンタクトシートには目に見えるリフトは現れませんでした。
- タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
レビュー
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。3 つのタスクは全群で同じプロンプト：架空のスナック定期購入ブランド（Tidepool）のランディングページ、自治体の水質ネットワークの管理ダッシュボード、素朴なクライミングジムのホームページ（old.html）を内容を保ってリデザインするもの。一文プロンプト群には、スキルの優先事項（コントラスト 4.5:1、44 px のターゲット、モバイルファースト、SVG アイコン、タイプスケール、モーション低減）を列挙した一文を追加します。ページはオフラインでスクリーンショットされ（デスクトップとモバイル）、条件ラベルなしでシャッフルされたコンタクトシートからブラインド採点されました。
3群の比較
| 群 | 平均スコア（0〜5） | 1実行あたりのトークン |
|---|---|---|
| スキルなし | 4.0 | 116k |
| 一文プロンプト | 3.92 | 123k |
| スキルあり | 3.96 | 160k |
Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 20.9 / 30、判定は 状況次第。
開示事項 スキルのデザインシステムスクリプトはスキルあり群 6/6 実行で実行されましたが、ブラインド方式のコンタクトシートでは目に見えるリフトはありませんでした。
判定：状況次第（20.9 / 30）。 出典：nextlevelbuilder/ui-ux-pro-max-skill、.claude/skills/ui-ux-pro-max、コミット 3a13158 に固定。インストール：npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max。ライセンス： MIT（リポジトリの LICENSE）。
概要
ui-ux-pro-max スキル（nextlevelbuilder/ui-ux-pro-max-skill）：同梱された CSV データ（スタイル、パレット、書体の組み合わせ、製品タイプ別ルール、UX ガイドライン）に対するローカル Python 検索ツール（scripts/search.py）を備えた UI/UX デザインのナレッジベースです。主な流れは、製品の「デザインシステム」推奨を生成し（--design-system -p <name>）、それに沿って優先順位付きのルールセット（アクセシビリティ、タッチターゲット、レスポンシブ、モーション）で UI を構築することです。
テスト方法
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。
タスクは 3 つで、プロンプトは全群共通：架空のスナックサブスクリプションブランド（Tidepool）のランディングページ、自治体の水質ネットワークの管理ダッシュボード、味気ないクライミングジムのホームページ（old.html）を全内容を保ってリデザインするもの。一文プロンプト群はスキルの優先事項（コントラスト 4.5:1、44 px のターゲット、モバイルファースト、SVG アイコン、タイプスケール、reduced motion）を列挙した 1 文を追加します。ページはオフラインで（デスクトップとモバイルを）スクリーンショットし、条件ラベルなしでシャッフルされたコンタクトシートから盲検で採点しました。
- ブリーフからの新規ランディングページ — Tidepool（サブスクリプション販売の小ロット海藻スナックブランド。3 フレーバー、1 箱 $14、毎月発送）の単一ページのランディングサイトを作成してください。インライン CSS と、必要な場合のみ最小限の JS を使った、自己完結の index.html を 1 つ書いてください。フレームワークなし、ビルド手順な…
- データ密度の高いダッシュボード UI — 自治体の水質モニタリングチーム向けのダッシュボードページを作成：6 地点の現在値（pH、濁度、塩素、水温）、各地点の 7 日間トレンド、アラートパネル。インライン CSS/JS とハードコードされた…
- 既存の味気ないページの作り直し — old.html は Granite Peak Climbing Gym（Boulder, CO）の現在のホームページです。new.html にリデザインしてください。実際のコンテンツ（料金、クラス、営業時間、住所）はすべて残しつつ、このジムにふさわしい見た目にしてください。自己完結の HTML/CSS、フレームワー…
スコアは Grok Bot による盲検（ID をシャッフルし、条件は表示しない）で固定のルーブリックに対して付けられ、実行ごとに 0〜5 点。AI 判定者なので、小さな差はノイズとして扱ってください。
結果
第 3 群に与えた一文プロンプト：「優先順位の順に UI/UX のベストプラクティスに従う：まずアクセシビリティ（4.5:1 のコントラスト、alt テキスト、目に見えるフォーカスリング、ラベル）、少なくとも 44 px で 8 px 間隔のタッチターゲット、viewport meta 付きで横スクロールなしのモバイルファーストのレスポンシブレイアウト、SVG アイコン（絵文字なし）で製品に合わせたスタイル、一貫したタイプスケール（16 px ベース、1.5 の行間）とセマンティックなカラートークン、prefers-reduced-motion を尊重するモーション。」
| タスク | 対照群スコア | 一文プロンプト | スキルあり | 対照群のトークン | 一文プロンプトのトークン | スキルありのトークン | スキル読み込み |
|---|---|---|---|---|---|---|---|
| t1-landing | 4.12 | 3.75 | 4.12 | 125k | 96k | 152k | 2/2 |
| t2-dashboard | 3.88 | 3.88 | 3.75 | 124k | 123k | 147k | 2/2 |
| t3-redesign | 4.0 | 4.12 | 4.0 | 99k | 149k | 179k | 2/2 |
平均スコア：スキルなし 4.0 に対しスキルあり 3.96（差 -0.04）。1実行あたりのトークン：116k 対 160k（1.37x）。時間：186s 対 184s。一文プロンプト群：3.92（一文プロンプトに対するスキルの上積み：+0.04。一文プロンプト自身のスキルなしに対する上積み：-0.08）。一文プロンプトのトークンは 1実行あたり 123k なので、スキルは一文プロンプトの 1.30 倍のコストになります。
何が起きたか
- 目に見える品質差はありません：盲検の平均は対照群 4.00、一文プロンプト 3.92、スキル 3.96（各 n=6）。タスク別の群間差は最大 0.25 点で、セルごとに 2 実行では検出できる差を下回ります。18 ページすべてが磨かれており、レスポンシブで、似た見た目を共有しています（クリーム色または淡いグリーンの地、ダークグリーンのアクセント、セリフのディスプレイ書体）。
- スキルは実際に使われました：スキルあり群 6 実行すべてが SKILL.md を読み、
search.py --design-systemを実行しました（例：'snack subscription playful coastal'）。スクリプトはシステム Python で Windows 上で動作します。 - アクセシビリティの基本は素の Codex の出力ですでに標準的です：viewport meta、@media クエリ、フォーカススタイルが 18/18 ページ、prefers-reduced-motion が 17/18（唯一の見落としは対照群のダッシュボード）。そのためスキルの「アクセシビリティ最優先」ルールが付け加える余地はほとんどありませんでした。
- コスト：スキルは 1実行あたり 160k トークン。対照群 116k、一文プロンプト 123k（1.4x と 1.3x）。実時間は同じでした（約 185s）。スキルあり群の実行はさらにスキルフォルダをプロジェクト（.agents）にコピーし、余分なトークンはここに費やされます。
- 1 つのチェックが誤動作しました：'keeps pricing ($22/$79/$720)' は、対照群とスキル群のリデザイン 6 実行中 4 実行で不合格でした。それらのページがドル記号を別の
<sup>要素（<sup>$</sup>79）に書いたためです。スクリーンショットでは価格は無傷です。これはスコアには反映されません。
評価項目スコア
| 評価項目 | スコア | 理由 |
|---|---|---|
| 1_output_quality | 3.96 | スキルありの平均スコアは 5 点中 3.96（プログラム的チェック。タスク別の表を参照）。 |
| 2_lift_vs_no_skill | 1.96 | スキルなしの 4.00 に対し -0.04 点（タスクごとに n=2。約 1 点未満の差はノイズ）。 |
| 3_trigger | 5.0 | スキルあり群 6/6 実行でスキルファイルが読み込まれました。 |
| 4_instructions_portability | 3 | SKILL.md と参照フォルダ、CSV データ同梱の Python スクリプト。検索スクリプトは Python 3 だけで動きます。 |
| 5_efficiency | 3 | トークン 1.37x（1実行あたり 160k 対 116k）、時間 0.99x（184s 対 186s）。 |
| 6_safety_hygiene | 4 | スキャナは CRITICAL 0 / HIGH 3 / MEDIUM 3、すべて無害（端末の色の環境変数。subprocess/eval はユニットテスト内のみ）。 |
このテストの限界
- レビュー担当者によるフルページのコンタクトシート（ページあたりデスクトップ幅 600 px、モバイル 300 px）からの盲検のビジュアル判定。0.25 の差は判定者のノイズの範囲内です。ページはフル解像度でもインタラクティブにも比較していません。
- セルごとに n=2、タスクは 3 つだけ。長いマルチページの製品でのスキルの価値はカバーしていません。
- スキルのデータ駆動の推奨（パレットとフォントの組み合わせ）はオフラインで Web フォントを読み込めません。ページはシステムフォントにフォールバックし、タイポグラフィの選択は隠れます。
- タスクごとに各群 n=2。約 1 点未満の差はノイズです。
- 盲検 AI 判定：判定者は 1 人で、判定者間の一致確認はありません。当初の対照群／スキルあり群の実行と、後に行った一文プロンプト群の実行は別セッションで判定されました（一文プロンプトは 2026-11-02）。そのためセッション間のずれが起こり得ます。
セキュリティ
security.md を参照。スキャン：CRITICAL 0 / HIGH 3 / MEDIUM 3。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。
結論
有能なベースモデルならページはすでに良い出来です。このスキルはデザインシステムの推奨ステップを加えますが、ここでは測定可能な品質向上はなく、トークンは 1.4x です。期待される品質向上としてではなく、アイデア生成やチェックリストとして使ってください。
トランスクリプト
実行ログ：ui-ux-pro-max (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 列：タスク、群-回、スコア（0-5）、トークン、秒、合格したチェック、エージェントが開いたスキルファイル。 t1-landing control-1: スコア 4.25, トークン 123829, 秒 182.9, チェック 5/5, 開いたファイルなし t1-landing control-2: スコア 4.0, トークン 126682, 秒 204.0, チェック 5/5, 開いたファイルなし t1-landing oneliner-1: スコア 3.75, トークン 108982, 秒 162.5, チェック 5/5, 開いたファイルなし t1-landing oneliner-2: スコア 3.75, トークン 83600, 秒 165.0, チェック 5/5, 開いたファイルなし t1-landing treatment-1: スコア 4.25, トークン 121048, 秒 155.5, チェック 5/5, 開いたファイル ui-ux-pro-max t1-landing treatment-2: スコア 4.0, トークン 184353, 秒 178.8, チェック 5/5, 開いたファイル ui-ux-pro-max t2-dashboard control-1: スコア 4.0, トークン 138942, 秒 215.4, チェック 5/5, 開いたファイルなし t2-dashboard control-2: スコア 3.75, トークン 109416, 秒 178.3, チェック 4/5, 開いたファイルなし t2-dashboard oneliner-1: スコア 3.75, トークン 132667, 秒 205.9, チェック 5/5, 開いたファイルなし
18 実行、3 成果物
サンプル出力
SOTA · With the skill: index.html (t1-landing, run 1, Codex)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#f7f3e7"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big-hearted flavours. Find your favourite and make it a monthly ritual for $14 a box."> <title>Tidepool — A little ocean. A lot of crunch.</title> <style> :root{--paper:#f7f3e7;--ink:#183e47;--yellow:#f6d975;--green:#b6cab0;--pink:#eaa78f;--line:#183e4733}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit}button,input{font:inherit}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid var(--ink);outline-offset:5px}.skip{position:absolute;top:-100px;left:20px;background:var(--paper);padding:10px;z-index:5}.skip:focus{top:10px}.announcement{background:var(--ink);color:var(--paper);text-align:center;font-size:11px;letter-spacing:1.8px;padding:9px 16px;text-transform:uppercase}header{max-width:1370px;margin:auto;padding:21px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-family:Georgia,serif;font-weight:900;font-size:38px;letter-spacing:-2px;text-decoration:none;line-height:1}.logo small{font-family:Arial,sans-serif;font-size:10px;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 3px}nav{display:flex;gap:32px;align-items:center;font-size:13px}nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:5px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 25px;border-radius:40px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;transition:background .2s,transform .2s}.pill:hover{background:#2d5960;transform:translateY(-2px)}nav .pill{padding:10px 20px}.hero{max-width:1370px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;min-height:640px;padding:60px 5% 55px;gap:30px;align-items:center}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:normal;letter-spacing:-3.5px;line-height:1.02}h1{font-size:clamp(64px,6.2vw,90px);margin-bottom:24px}h1 em{font-weight:normal} .intro{max-width:350px;font-size:16px;line-height:1.75;margin-bottom:28px}.fine{font-size:12px;margin:13px 0 0}.hero-art{position:relative;min-width:0}.hero-art svg{display:block;width:100%;height:auto;overflow:visible}.art-note{text-align:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:0}.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--yellow);display:flex;justify-content:space-evenly;gap:20px;padding:17px 20px;font-size:11px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase}.ticker span:before{content:'✳';font-size:20px;ver [... excerpt: first 3200 of 17993 characters]