design-taste-frontend (Leonxlnx/taste-skill)
為到達頁與應用程式畫面提供有主張的設計方向，並透過截圖檢查修正千篇一律的結果。
design-taste-frontend：去除「AI 味」破綻（全大寫的眉標、01/02 編號標記），並在重新設計任務中勝出，但平均分數低於對照組（3.6 對 4.0），因為有一個著陸頁壞掉，Token 用量為 3.7 倍
Codex CLI · gpt-6-astra
16.2 / 30
相對未使用技能的提升：-0.38 · 視情況推薦 · 18 次執行
視情況推薦：總分 16.2/30 低於 22，並且提升幅度 -0.38 低於 +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
- 相對未使用技能的提升
- 1.6
- 產出品質
- 3.6
- Token 與時間成本
- 0.0
- 安裝與可攜性
- 3.0
- 安全性
- 3.0
安全審查
注意靜態掃描：10 CRITICAL / 44 HIGH / 9 MEDIUM。人工審查：可執行，但有以下注意事項：內附 Node 腳本，掃描器的發現已逐一說明。掃描結果不能證明技能一定安全。
安裝
npx skills@latest add Leonxlnx/taste-skill --skill taste-skill
固定 Commit: 12af471f627f866411b4bd785b19646d3672784c
測試日期: 2026-11-02
我們測了什麼
- 依簡報製作新著陸頁 — 為 Tidepool 建立單頁式落地網站；Tidepool 是小批量海藻零食品牌，以訂閱制販售（三種口味，每盒 $14，每月出貨）。撰寫一個自包含的 index.html，使用行內 CSS，必要時才用最少的 JS。不要框架、不要建置步…
- 資料密集的儀表板 UI — 為市政水質監測團隊建立儀表板頁面：6 個測站的當前讀數（pH、濁度、氯、溫度）、每個測站的 7 天趨勢，以及警報面板。單一自包含的 dashboard.html，使用行內 CSS/JS 與寫死的讀…
- 重塑現有的平淡頁面 — old.html 是 Granite Peak Climbing Gym（Boulder, CO）目前的首頁。把它重新設計成 new.html：保留所有真實內容（價格、課程、營業時間、地址），但讓頁面看起來像是屬於這家特定的攀岩館。自包含 HTML/CSS，不要框…
優點
- 技能即使未被點名也會被採用：6/6 次實驗組執行都讀取了技能檔案。
缺點
- 相對未使用技能沒有可測量的提升（-0.38，落在雜訊範圍內）。
- 一句話提示得分 4.29，使用技能則為 3.58（-0.71）。
- Token 用量是未使用技能的 3.74 倍。
- 測試注意事項：有一頁實驗組頁面壞掉，且技能的 Token 用量是未使用技能的 3.7 倍。分數來自盲評的縮圖拼版。
- 每個任務的每個組別 n=2；約 1 分以內的差異屬於雜訊。
評測
Codex CLI 0.166（gpt-6-astra，低推理）在專用的 Windows 測試電腦上，每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取，技能已安裝（實驗組）或未安裝（對照組），或未安裝但把技能的核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務的每個組別執行 2 次，關閉網路，封鎖 /tmp 寫入。提示詞從未提及技能（除非下方註明的措辭）。所有組別都使用與 ui-ux-pro-max、frontend-design 相同的三個任務：Tidepool 海藻零食品牌的著陸頁、市政水質儀表板，以及保留原有內容重新設計 Granite Peak 攀岩館首頁。一句話提示組要求一個具體概念與調色盤、鮮明的字型搭配與非對稱版面配置，不要紫色漸層／預設 Inter／三卡格線／編號標記／全大寫眉標，圖像以 CSS/SVG 繪製，並檢查桌面與行動版寬度。頁面在離線狀態下截圖（桌面與行動版），並從打亂順序的縮圖拼版中盲評計分。
三組對照
| 組別 | 平均分數（0-5） | 每次執行 Token 用量 |
|---|---|---|
| 未使用技能 | 3.96 | 115k |
| 一句話提示 | 4.29 | 298k |
| 使用技能 | 3.58 | 431k |
以 Codex CLI 執行 18 次，採規則式檢查評分，不經 LLM 評審。總分 16.2 / 30，評級為 視情況推薦。
揭露事項：有一個實驗組頁面壞掉，且技能的 Token 用量是未使用技能的 3.7 倍。分數來自盲評的縮圖拼版。
判定：視情況而定（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）：一套為網頁進行藝術指導的工作流程：執行本地腳本，從命題中挑選一個設計「方向」（例如「頁面本身就是物件」），把方向檔案與報告寫進 .taste-skill/ 資料夾，再依此建構頁面；內含防止千篇一律 AI 感版面的規則、一組固定區塊與視覺檢查。
我們如何測試
在專用 Windows 測試 PC 上使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存 HOME/TMPDIR/快取，安裝技能（實驗組）、未安裝（對照組），或未安裝但將技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務每組執行 2 次，網路關閉，/tmp 寫入封鎖。提示詞從未提及技能（以下註明的措辭除外）。
所有組別都使用與 ui-ux-pro-max、frontend-design 相同的三項任務：Tidepool 海藻零食品牌的著陸頁、市政水質儀表板，以及保留原有內容重新設計 Granite Peak 攀岩館首頁。一句話提示要求一個具體概念與配色、獨特的字體搭配與不對稱版面，不要紫色漸層／預設 Inter／千篇一律的三卡片格線／編號標記／大寫眉標，圖像以 CSS/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 評審，小幅差距請視為雜訊。
結果
提供給第三組的一句話提示：「以藝術指導對抗 AI 廉價感：為這個主題選擇一個具體概念與配色，避開紫色漸層、預設 Inter、千篇一律的三卡片功能格線、編號 01/02 標記與大寫眉標，使用獨特的字體搭配與不對稱構圖，以 CSS/SVG 繪製圖像，並在桌機與手機寬度檢查頁面，修正看起來不對勁的地方。」
| 任務 | 對照組分數 | 一句話提示 | 使用技能 | 對照組 Token 數 | 一句話提示 Token 數 | 使用技能 Token 數 | 技能讀取 |
|---|---|---|---|---|---|---|---|
| t1-landing | 4.12 | 4.38 | 2.75 | 101k | 312k | 397k | 2/2 |
| t2-dashboard | 3.75 | 4.38 | 3.5 | 115k | 330k | 600k | 2/2 |
| t3-redesign | 4.0 | 4.12 | 4.5 | 128k | 252k | 296k | 2/2 |
平均分數：未使用技能 3.96，使用技能 3.58（差異 -0.38）。每次執行 Token 數：115k 對 431k（3.74 倍）；時間 175 秒對 198 秒。一句話提示組：4.29（技能相較一句話提示的增益：-0.71；一句話提示相較無技能的增益：+0.33）；一句話提示每次執行 298k Token，因此技能的成本是一句話提示的 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）。
- 著陸頁平均偏低，來自一個壞掉的頁面：實驗組某次執行的頁面出現文字亂碼（口味選擇器把標記當文字寫入，因此按鈕內出現 '</span>'）、導覽列塌陷、圖形四散；另一個實驗組著陸頁則正常（4.0）。技能本身的工作流程回報「瀏覽器驗證遭到封鎖」，因此它在沒有視覺檢查的情況下就交付了。若扣除該次執行，技能平均會是 4.0，與對照組持平。
- 技能確實會改變頁面的樣貌：它所點名的 AI 廉價特徵都消失了。每頁的大寫眉標：對照組 0-5 個、技能 0-1 個；編號 01/02 標記：對照組 6 頁中有 3 頁出現 3-6 個，技能 6 頁全部為 0。一句話提示也移除了同樣的特徵（0-1 個眉標、0 個標記），所以光靠那句話就能達成這部分。
- 成本非常高：技能每次執行 431k Token，一句話提示 298k，對照組 115k（3.7 倍與 1.4 倍），每次執行有 25.7 個 shell 指令（對照組 7.7 個）。每次執行還會把約 40 個技能與方向檔案放進專案（技能會把 direction.json 與 report.md 寫在
.taste-skill/底下）。 - 帶有
.taste-skill/direction.json的實驗組儀表板與著陸頁，外觀確實獨特（編輯風的紙墨版面），但並未穩定優於對照組與一句話提示共同收斂到的樸素深綠色襯線斜體風格。
各面向分數
| 面向 | 分數 | 原因 |
|---|---|---|
| 1_輸出品質 | 3.58 | 使用技能時平均分數 3.58/5（程式化檢查，見各任務 表格）。 |
| 2_相較無技能的提升 | 1.62 | 相較未使用技能的 3.96，-0.38 分（每項任務 n=2；約 1 分以下 屬於雜訊）。 |
| 3_觸發 | 5.0 | 技能檔案在 6/6 次實驗組執行中被讀取。 |
| 4_指令可攜性 | 3 | 規模龐大：SKILL.md、方向資料庫、CSS 資源，以及會寫入專案的 腳本；它假設有瀏覽器可供視覺檢查。 |
| 5_效率 | 0 | 3.74 倍 Token（每次執行 431k 對 115k）與 1.14 倍時間（198 秒對 175 秒）。 |
| 6_安全性與衛生 | 3 | 會把 |
這項測試的限制
- 由審查者從整頁縮圖拼版進行盲評（桌機每頁 600 px、手機 300 px）；0.25 的差異在評審雜訊範圍內。一個壞掉的頁面會讓技能平均分移動約 0.3。
- 每個儲存格 n=2，共三項任務；那個壞掉的頁面可能只是運氣不好，而非系統性缺陷。
- 字體在離線環境未載入，因此看不出字體搭配的選擇。
- 技能本身的瀏覽器截圖步驟無法在沙箱中執行，這對它的傷害可能大於其他組。
- 每項任務每組 n = 2：約 1 分以下的差異屬於雜訊。
- 盲評由 AI 進行：單一評審、沒有評分者間一致性檢查；原本的對照組／實驗組執行與後來的一句話提示執行是在不同場次評分（一句話提示於 2026-11-02），因此可能出現跨場次漂移。
安全性
見 security.md。掃描：CRITICAL 10 / HIGH 44 / MEDIUM 9。判定：可安全執行（網路關閉的沙箱）。乾淨的掃描結果不能證明技能安全。
總結
它消除了千篇一律的 AI 感，也在本次產出最好的重新設計，但成本達 3.7 倍 Token，且 6 次執行中有 1 次交付了明顯壞掉的頁面卻未察覺；一句話的藝術指導提示以約三分之一的 Token 拿到更高分。若有人工把關成果，可用於需要藝術指導的行銷頁面；不建議當成無人看管的預設做法。
完整紀錄
執行日誌：design-taste-frontend (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 100863, 秒 169.3, 檢查 5/5, 未開啟 t1-landing control-2: 得分 4.0, token 101753, 秒 206.0, 檢查 5/5, 未開啟 t1-landing oneliner-1: 得分 4.25, token 279371, 秒 224.5, 檢查 5/5, 未開啟 t1-landing oneliner-2: 得分 4.5, token 345398, 秒 247.5, 檢查 5/5, 未開啟 t1-landing treatment-1: 得分 1.5, token 433869, 秒 267.5, 檢查 5/5, 開啟 taste-skill t1-landing treatment-2: 得分 4.0, token 360647, 秒 199.4, 檢查 5/5, 開啟 taste-skill t2-dashboard control-1: 得分 3.75, token 114229, 秒 178.7, 檢查 4/5, 未開啟 t2-dashboard control-2: 得分 3.75, token 117234, 秒 192.6, 檢查 4/5, 未開啟 t2-dashboard oneliner-1: 得分 4.25, token 411906, 秒 237.5, 檢查 4/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="#163e32"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big flavours. Your monthly crunch, $14 a box."> <title>Tidepool 鈥?A little sea. A lot of crunch.</title> <style> :root{--green:#163e32;--paper:#f5f3e9;--lime:#e1f184;--pink:#edb7c6;--blue:#bfd9ec;--ink:#163e32;--body:Arial,Helvetica,sans-serif;--display:'Arial Black',Arial,Helvetica,sans-serif;--gutter:clamp(22px,4vw,64px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}a,button{transition:transform .2s}a:hover,button:hover{transform:translateY(-3px)}a:active,button:active{transform:translateY(1px)}::selection{background:var(--pink);color:var(--green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.055em;line-height:.98}h2{font-size:clamp(40px,5.5vw,76px)}h3{font-size:30px}p{max-width:48ch}.skip{position:absolute;top:-100px;background:var(--paper);padding:14px;z-index:10}.skip:focus{top:0}.announcement{background:var(--lime);text-align:center;padding:9px 20px;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--green);color:var(--paper)}.logo{font-family:var(--display);font-weight:900;font-size:38px;letter-spacing:-3px;line-height:1}.logo span{display:inline-block;transform:rotate(-12deg)}nav{display:flex;align-items:center;gap:34px;font-size:15px}.nav-cta{background:var(--paper);color:var(--green);padding:12px 23px;border-radius:50px}.hero{background:var(--green);color:var(--paper);padding:35px var(--gutter) 0;overflow:hidden}.hero h1{font-size:clamp(66px,10.8vw,164px);letter-spacing:-.065em;line-height:.89;position:relative;z-index:1}.hero h1 span{display:block;animation:rise .8s both}.hero h1 span:last-child{animation-delay:.1s}.hero-bottom{display:grid;grid-template-columns: .85fr 1.15fr;min-height:405px;align-items:center}.hero-copy{padding:40px 0 55px;max-width:410px}.hero-copy p{font-size:19px;line-height:1.5;margin-bottom:27px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-radius:50px;background:var(--lime);color:var(--green);padding:17px 27px;font-weight:700;cursor:pointer}.button .arrow{font-size:24px;line-height:1}.note{display:block;font-size:14px;margin-top:13px}.hero-art{height:420px;position:relative;align-self:end}.pack{width:230px;height:315px;background:var(--lime);color:var(--green);padding:22px 18px 17px;position:absolute;display:flex;align-items:center;flex-direction:column;clip-path:polygon(0 0,100% 0,98% 4%,100% 8%,98% 96%,100% 100%,0 100%,2% 95%,0 7%,2% 3%);isolation:isolate}.pack:before,.pack:after{content:'';position:absolute;left [... excerpt: first 3200 of 17282 characters]