ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)

Name: ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill) review
Item: ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
Rating: 20.9
Author: Agent Skills

提供 UI/UX 指引與本機設計資料，涵蓋風格、配色、字型、UX 規則與圖表，支援 22 種技術堆疊。

ui-ux-pro-max：每次執行都會跑它的設計系統腳本，但盲評頁面並沒有更好（對照組 4.0、一句話提示 3.9、技能 4.0），Token 卻是 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；但這不代表第二等級的結果。

分數

每個維度為 0 到 5 分，六個維度相加即為滿分 30 的總分。每個維度都是 5 分最好。成本 5 分代表便宜又快速；安裝 5 分代表容易安裝。

觸發可靠性: 5.0
相對未使用技能的提升: 2.0
產出品質: 4.0
Token 與時間成本: 3.0
安裝與可攜性: 3.0
安全性: 4.0

安全審查

安全

靜態掃描：0 CRITICAL / 3 HIGH / 3 MEDIUM。人工審查：可在無網路沙箱中安全執行（已說明掃描器的發現）。掃描結果不能證明技能一定安全。

安裝

npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

來源

固定 Commit: 3a13158ff1f32156cbe144108de48eda2ecaed9a

測試日期: 2026-11-02

我們測了什麼

依需求建立新著陸頁 — 為 Tidepool 建立單頁著陸網站；Tidepool 是一個小型海藻零食品牌，以訂閱制販售（三種口味、每盒 $14、每月出貨）。撰寫單一自包含的 index.html，使用行內 CSS，必要時才用最少的 JS。不要用框架、不要建置…
資料密集的儀表板介面 — 為市政水質監測團隊建立儀表板頁面：6 個測站的即時讀數（pH、濁度、餘氯、溫度）、每個測站 7 天趨勢，以及警示面板。單一自包含的 dashboard.html，使用行內 CSS/JS 與寫死的讀…
改造既有的平淡頁面 — 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 分以內的差異屬於雜訊。

評測

Codex CLI 0.166（gpt-6-astra，低推理）在專用的 Windows 測試電腦上執行，每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取；技能已安裝（實驗組）、未安裝（對照組），或未安裝但把技能的核心要求濃縮成一句話附在提示詞後（一句話提示組）。每個任務的每個組別執行 2 次，關閉網路，封鎖 /tmp 寫入。提示詞從未提及技能（下方註明的措辭除外）。三個任務的所有組別都使用相同提示詞：虛構零食訂閱品牌（Tidepool）的著陸頁、市政水質監測網路的後台儀表板，以及重新設計攀岩館 Granite Peak 的樸素首頁（old.html）並保留所有內容。一句話提示組多加一句話，列出技能的優先事項（對比 4.5:1、44 px 點擊目標、行動優先、SVG 圖示、字級階層、減少動態效果）。頁面以離線方式截圖（桌機與行動版），並從打亂順序的縮圖拼版盲評，不標示組別。

三組對照

組別	平均分數（0-5）	每次執行 Token 用量
未使用技能	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）：一個 UI/UX 設計知識庫，內含本地 Python 搜尋工具（scripts/search.py），可搜尋隨附的 CSV 資料（風格、配色、字體搭配、產品類型規則、UX 指南）。主要流程是為產品產生「設計系統」建議（--design-system -p <name>），再依此建置 UI，並有一套依優先順序排列的規則（無障礙、觸控目標、響應式、動態）。

我們如何測試

在專用 Windows 測試 PC 上使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存 HOME/TMPDIR/快取，安裝技能（實驗組）、未安裝（對照組），或未安裝但將技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務每組執行 2 次，網路關閉，/tmp 寫入封鎖。提示詞從未提及技能（以下註明的措辭除外）。

三項任務，所有組別使用相同提示詞：虛構零食訂閱品牌 Tidepool 的著陸頁、市政水質監測網路的管理儀表板，以及保留所有內容重新設計一個平淡的攀岩館首頁（old.html）。一句話提示組多加一句，列出技能的優先事項（對比 4.5:1、44 px 目標、行動優先、SVG 圖示、字級比例、減少動態）。頁面在離線環境截圖（桌機與手機），並從打亂的縮圖拼版盲評計分，不顯示組別標籤。

依命題製作全新著陸頁 — 為 Tidepool 建立單頁著陸網站，這是一個小批次海藻零食品牌，以訂閱制販售（三種口味，每盒 $14，每月出貨）。寫出單一自含的 index.html，內嵌 CSS，必要時才用最少的 JS。不要框架，也不要建置步…
資料密集的儀表板 UI — 為市政水質監測團隊建立儀表板頁面：6 個測站目前的讀數（pH、濁度、餘氯、溫度）、各站 7 天趨勢，以及警示面板。單一自含的 dashboard.html，內嵌 CSS/JS，並使用硬編碼的讀…
改造既有的平淡頁面 — old.html 是 Granite Peak 攀岩館（科羅拉多州博爾德）目前的頁面。把它重新設計成 new.html：保留所有真實內容（價格、課程、營業時間、地址），但讓頁面看起來像屬於這間特定的攀岩館。自含的 HTML/CSS，不要框…

分數由 Grok Bot 依固定評分量表盲評（編號打亂、不顯示組別），每次執行 0–5 分；由於是 AI 評審，小幅差距請視為雜訊。

結果

提供給第三組的一句話提示：「依優先順序遵循 UI/UX 最佳實務：無障礙優先（4.5:1 對比、alt 文字、可見的 focus 外框、標籤）、觸控目標至少 44 px 且間距 8 px、行動優先的響應式版面並含 viewport meta 且沒有水平捲動、風格與產品相符並使用 SVG 圖示（不用 emoji）、一致的字級比例（16 px 基準、1.5 行高）與語意化顏色 token，以及尊重 prefers-reduced-motion 的動態。」

任務	對照組分數	一句話提示	使用技能	對照組 Token 數	一句話提示 Token 數	使用技能 Token 數	技能讀取
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）。每次執行 Token 數：116k 對 160k（1.37 倍）；時間 186 秒對 184 秒。一句話提示組：3.92（技能相較一句話提示的增益：+0.04；一句話提示相較無技能的增益：-0.08）；一句話提示每次執行 123k Token，因此技能的成本是一句話提示的 1.30 倍。

實際發生了什麼

沒有可見的品質差異：盲評平均對照組 4.00、一句話提示 3.92、技能 3.96（各 n=6）。各任務中，各組最多相差 0.25 分，低於每個儲存格兩次執行能分辨的程度。18 個頁面都很精緻、響應式，且外觀相似（奶油色或淺綠色底、深綠色重點、襯線標題字）。
技能確實被使用：6 次實驗組執行都讀了 SKILL.md 並執行 search.py --design-system（例如為 'snack subscription playful coastal'）。腳本在 Windows 上以系統 Python 運作正常。
無障礙基本功在原生 Codex 輸出中已是標準：viewport meta、@media 查詢與 focus 樣式在 18/18 個頁面都有，prefers-reduced-motion 在 17/18（唯一漏掉的是對照組的儀表板）。因此技能「無障礙優先」的規則沒什麼可補充的。
成本：技能每次執行 160k Token，對照組 116k、一句話提示 123k（1.4 倍與 1.3 倍）；實際耗時相同（約 185 秒）。實驗組執行還把技能資料夾複製到專案（.agents），額外 Token 就花在這裡。
有一項檢查誤判：「保留價格（$22/$79/$720）」在對照組與技能組的 6 次重新設計執行中有 4 次失敗，因為那些頁面把美元符號寫在獨立的 <sup> 元素中（<sup>$</sup>79）；截圖顯示價格完好。它不計入分數。

各面向分數

面向	分數	原因
1_輸出品質	3.96	使用技能時平均分數 3.96/5（程式化檢查，見各任務表格）。
2_相較無技能的提升	1.96	相較未使用技能的 4.00，-0.04 分（每項任務 n=2；約 1 分以下屬於雜訊）。
3_觸發	5.0	技能檔案在 6/6 次實驗組執行中被讀取。
4_指令可攜性	3	SKILL.md 加上 references 資料夾，以及內含 CSV 資料的 Python 腳本；搜尋腳本只需要 Python 3。
5_效率	3	1.37 倍 Token（每次執行 160k 對 116k）與 0.99 倍時間（184 秒對 186 秒）。
6_安全性與衛生	4	掃描器 0 CRITICAL / 3 HIGH / 3 MEDIUM，全部無害（終端機顏色環境變數；subprocess/eval 只出現在單元測試中）。

這項測試的限制

由審查者從整頁縮圖拼版進行盲評（桌機每頁 600 px 寬、手機 300 px）；0.25 的差異在評審雜訊範圍內。頁面沒有以完整解析度或互動方式比較。
每個儲存格只有 n=2，共三項任務；技能在長期、多頁面產品上的價值未被涵蓋。
技能以資料驅動的建議（配色與字體搭配）在離線時無法載入網頁字體；頁面退回系統字體，因而看不出字體選擇。
每項任務每組 n = 2：約 1 分以下的差異屬於雜訊。
盲評由 AI 進行：單一評審、沒有評分者間一致性檢查；原本的對照組／實驗組執行與後來的一句話提示執行是在不同場次評分（一句話提示於 2026-11-02），因此可能出現跨場次漂移。

安全性

見 security.md。掃描：CRITICAL 0 / HIGH 3 / MEDIUM 3。判定：可安全執行（網路關閉的沙箱）。乾淨的掃描結果不能證明技能安全。

總結

對於能力足夠的基礎模型，頁面本來就很好；技能增加了一個設計系統建議步驟，但在此沒有可測量的品質增益，代價是 1.4 倍 Token。把它當成點子產生器或檢查清單，而不是預期中的品質升級。

完整紀錄

執行日誌：ui-ux-pro-max (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
欄位：任務、組-輪次、得分（0-5）、token、秒、通過的檢查、代理開啟的 skill 檔案。

t1-landing control-1: 得分 4.25, token 123829, 秒 182.9, 檢查 5/5, 未開啟
t1-landing control-2: 得分 4.0, token 126682, 秒 204.0, 檢查 5/5, 未開啟
t1-landing oneliner-1: 得分 3.75, token 108982, 秒 162.5, 檢查 5/5, 未開啟
t1-landing oneliner-2: 得分 3.75, token 83600, 秒 165.0, 檢查 5/5, 未開啟
t1-landing treatment-1: 得分 4.25, token 121048, 秒 155.5, 檢查 5/5, 開啟 ui-ux-pro-max
t1-landing treatment-2: 得分 4.0, token 184353, 秒 178.8, 檢查 5/5, 開啟 ui-ux-pro-max
t2-dashboard control-1: 得分 4.0, token 138942, 秒 215.4, 檢查 5/5, 未開啟
t2-dashboard control-2: 得分 3.75, token 109416, 秒 178.3, 檢查 4/5, 未開啟
t2-dashboard oneliner-1: 得分 3.75, token 132667, 秒 205.9, 檢查 5/5, 未開啟

18 次執行、3 個產出檔案

範例產出

SOTA · 装了 skill：index.html（t1-landing，第 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]

檢視 Pro