emil-design-eng (emilkowalski/skills)
套用 Emil Kowalski 的 UI 打磨、元件設計與動畫決策原則。
emil-design-eng：加入單純 Codex 從不撰寫的按壓回饋與自訂緩動（0/6 提升到 6/6），但一句話版本幾乎就能涵蓋全部
Codex CLI · gpt-6-astra
26.2 / 30
相對未使用技能的提升：+1.42 · 推薦 · 18 次執行
推薦：總分 26.2/30 至少 22，產出品質 4.8 至少 3.5，提升幅度 +1.42 至少 +1.0。
SOTA
透過使用 Codex 測試。
涵蓋 Codex, Claude Code
Codex CLI 0.166（SOTA 等級）：18 次評分執行。依我們的等級規則，在這裡通過也涵蓋 Claude Code；但這不代表第二等級的結果。
分數
每個維度為 0 到 5 分，六個維度相加即為滿分 30 的總分。每個維度都是 5 分最好。成本 5 分代表便宜又快速；安裝 5 分代表容易安裝。
- 觸發可靠性
- 5.0
- 相對未使用技能的提升
- 3.4
- 產出品質
- 4.8
- Token 與時間成本
- 4.0
- 安裝與可攜性
- 4.0
- 安全性
- 5.0
安全審查
安全靜態掃描：0 CRITICAL / 0 HIGH / 0 MEDIUM。人工審查：可在無網路沙箱中安全執行（未發現問題）。掃描結果乾淨，不代表技能一定安全。
安裝
npx skills@latest add emilkowalski/skills --skill emil-design-eng
固定 Commit: a81dbca07f2217b7103e510c0f13f8d5b017afc9
測試日期: 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，不要框…
優點
- 相對未使用技能，平均分數從 3.33 提升到 4.75（+1.42）。
- 技能即使未被點名也會被採用：6/6 次實驗組執行都讀取了技能檔案。
- 使用技能後的絕對品質很高：4.75 / 5。
缺點
- 測試注意事項：動態檢查清單是規則導向，且部分與技能自身的規則循環論證；靜態截圖無法區分各組。
- 每個任務的每個組別 n=2；約 1 分以內的差異屬於雜訊。
評測
Codex CLI 0.166（gpt-6-astra，低推理）在專用的 Windows 測試電腦上，每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取，技能已安裝（實驗組）或未安裝（對照組），或未安裝但把技能的核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務的每個組別執行 2 次，關閉網路，封鎖 /tmp 寫入。提示詞從未提及技能（除非下方註明的措辭）。與 frontend-design 測試相同的三個簡報（Tidepool 著陸頁、水質儀表板、攀岩館首頁重新設計），皆寫成單一自包含 HTML 檔案。提示詞沒有提到動畫或技能；實驗組只是安裝了技能。
三組對照
| 組別 | 平均分數（0-5） | 每次執行 Token 用量 |
|---|---|---|
| 未使用技能 | 3.33 | 133k |
| 一句話提示 | 4.5 | 127k |
| 使用技能 | 4.75 | 149k |
以 Codex CLI 執行 18 次，採規則式檢查評分，不經 LLM 評審。總分 26.2 / 30，評級為 推薦。
揭露事項： 動態檢查清單是規則導向，且部分與技能自身的規則循環論證；靜態截圖無法區分各組。
判定：推薦（26.2 / 30）。 來源：emilkowalski/skills，skills/emil-design-eng，固定於提交 a81dbca。安裝：npx skills@latest add emilkowalski/skills --skill emil-design-eng。授權條款： MIT（儲存庫 LICENSE）。
這是什麼
emilkowalski/skills 的 emil-design-eng 技能：Emil Kowalski 針對 UI 細節打磨的設計工程規則，單一 SKILL.md 約 4,000 字。內容涵蓋何時該完全不使用動畫、以自訂 ease-out 曲線取代預設值、150-300 ms 的時長、只對 transform 與 opacity 做動畫、按壓回饋（在 :active 使用 scale(0.97)）、絕不從 scale(0) 開始做動畫、錯開進場、以 (hover: hover) 限制 hover 效果、減少動態，以及點擊目標這類看不見的細節。沒有腳本。
我們如何測試
在專用 Windows 測試 PC 上使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存 HOME/TMPDIR/快取，安裝技能（實驗組）、未安裝（對照組），或未安裝但將技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務每組執行 2 次，網路關閉，/tmp 寫入封鎖。提示詞從未提及技能（以下註明的措辭除外）。
與 frontend-design 測試相同的三項命題（Tidepool 著陸頁、水質儀表板、攀岩館首頁重新設計），皆寫成單一自含的 HTML 檔案。提示詞沒有提到動畫或技能；技能組只是安裝了技能。
- 依命題製作全新著陸頁 — 為 Tidepool 建立單頁著陸網站，這是一個小批次海藻零食品牌，以訂閱制販售（三種口味，每盒 $14，每月出貨）。寫出單一自含的 index.html，內嵌 CSS，必要時才用最少的 JS。不要框架，也不要建置步…
- 資料密集的儀表板 UI — 為市政水質監測團隊建立儀表板頁面：6 個測站目前的讀數（pH、濁度、餘氯、溫度）、各站 7 天趨勢，以及警示面板。單一自含的 dashboard.html，內嵌 CSS/JS，並使用硬編碼的讀…
- 改造既有的平淡頁面 — old.html 是 Granite Peak 攀岩館（科羅拉多州博爾德）目前的頁面。把它重新設計成 new.html：保留所有真實內容（價格、課程、營業時間、地址），但讓頁面看起來像屬於這間特定的攀岩館。自含的 HTML/CSS，不要框…
評分方式為程式化檢查（隱藏測試／預埋問題召回／限制條件檢查／視情況進行渲染與 OCR），每次執行 0–5 分。沒有任何 LLM 評審決定分數。由於這項技能談的是截圖看不出來的動態與互動細節，分數是對產生的 CSS 執行規則式檢查清單（10 項檢查：:active 按壓回饋、自訂 cubic-bezier、不得使用 ease-in/linear/預設 ease、不得使用 transition: all、只對 transform/opacity/顏色做動畫、時間 <= 300 ms、減少動態、錯開進場、不得從 scale(0) 開始、hover 以 (hover: hover) 限制），每次執行 0-5 分。這與技能自身的規則高度一致，因此衡量的是「它是否遵循技能」，而不是「頁面是否更好」。
結果
提供給第三組的一句話提示：「像設計工程師一樣打磨：使用自訂緩動曲線（進場用 ease-out，絕不用預設或 ease-in）、150-300 ms 時長、只對 transform 與 opacity 做動畫、以 :active 上的 scale(0.97) 提供按壓回饋、絕不從 scale(0) 開始做動畫、錯開進場、尊重 prefers-reduced-motion，並細究看不見的細節（hover、active、focus 狀態，44 px 點擊目標）。」
| 任務 | 對照組分數 | 一句話提示 | 使用技能 | 對照組 Token 數 | 一句話提示 Token 數 | 使用技能 Token 數 | 技能讀取 |
|---|---|---|---|---|---|---|---|
| t1-landing | 3.25 | 4.5 | 5.0 | 89k | 103k | 130k | 2/2 |
| t2-dashboard | 3.5 | 4.5 | 4.25 | 202k | 145k | 135k | 2/2 |
| t3-redesign | 3.25 | 4.5 | 5.0 | 106k | 133k | 181k | 2/2 |
平均分數：未使用技能 3.33，使用技能 4.75（差異 +1.42）。每次執行 Token 數：133k 對 149k（1.12 倍）；時間 178 秒對 163 秒。一句話提示組：4.5（技能相較一句話提示的增益：+0.25；一句話提示相較無技能的增益：+1.17）；一句話提示每次執行 127k Token，因此技能的成本是一句話提示的 1.17 倍。
實際發生了什麼
- 原生 Codex 從不寫按壓回饋或自訂緩動曲線：0/6 個對照組頁面有
:active縮放規則或cubic-bezier，而一句話提示組是 6/6，技能組則是 6/6（按壓）與 5/6（曲線）。分數：對照組 3.33、一句話提示 4.50、技能 4.75。 - 一句話提示唯一沒涵蓋的規則——以
@media (hover: hover)限制 hover 樣式——在技能組有 5/6 頁面遵守，其他頁面則是 0/12。這就是技能相較那句話的全部優勢（+0.25）。 - 本來就好的習慣在各組都很常見：沒有
transition: all、只對 transform/opacity/顏色做動畫、支援減少動態、不從 scale(0) 開始。對照組 6/6 次都做對，因此技能加入的是特定的細節規則，而非基本功。 - 盲看頁面（桌機截圖、順序打亂），18 個頁面都很精緻，沒有一個壞掉；三組的靜態設計品質無法分辨。技能改變的是你感受得到的行為，而不是截圖看得出的東西。
- 成本：每次執行 149k Token，對照組 133k（1.12 倍），一句話提示組 127k，是我們在設計類技能中測到最低的技能額外成本。
各面向分數
| 面向 | 分數 | 原因 |
|---|---|---|
| 1_輸出品質 | 4.75 | 使用技能時平均分數 4.75/5（程式化檢查，見各任務 表格）。 |
| 2_相較無技能的提升 | 3.42 | 相較未使用技能的 3.33，+1.42 分（每項任務 n=2；約 1 分以下 屬於雜訊）。 |
| 3_觸發 | 5.0 | 技能檔案在 6/6 次實驗組執行中被讀取。 |
| 4_指令可攜性 | 4 | 純文字加上 CSS/React 片段；假設是網頁 UI 專案；frontmatter 有效 且含觸發措辭。 |
| 5_效率 | 4 | 1.12 倍 Token（每次執行 149k 對 133k）與 0.92 倍時間（163 秒對 178 秒）。 |
| 6_安全性與衛生 | 5 | 單一 Markdown 檔案、沒有腳本、掃描器無發現、MIT。 |
這項測試的限制
- 動態規則是從 CSS 文字檢查，而非實際觀看頁面；轉場可能存在，但感受仍然不對。
- 檢查清單源自技能自身的規則，而一句話提示已列出其中大部分，因此一句話提示組算是短提示的上限。
- 只有三項靜態頁面命題；技能著墨最多的互動元件（下拉選單、Toast、抽屜）並未被要求。
- 每項任務每組 n = 2：約 1 分以下的差異屬於雜訊。
- 規則式評分只能衡量檢查看得到的部分；無法評判品味，也無法判斷結果是否為最佳可能。
安全性
見 security.md。掃描：CRITICAL 0 / HIGH 0 / MEDIUM 0。判定：可安全執行（網路關閉的沙箱）。乾淨的掃描結果不能證明技能安全。
總結
如果你想要頁面自動具備按壓回饋、ease-out 曲線與 hover 限制，而不必特別要求，這項技能幾乎不花額外 Token 就能做到。一句列出相同規則的話就能達到 94%，因此技能的價值在於你不必自己懂這些規則。
完整紀錄
執行日誌：emil-design-eng (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 欄位：任務、組-輪次、得分（0-5）、token、秒、通過的檢查、代理開啟的 skill 檔案。 t1-landing control-1: 得分 3.0, token 87031, 秒 180.3, 檢查 5/5, 未開啟 t1-landing control-2: 得分 3.5, token 91542, 秒 176.7, 檢查 5/5, 未開啟 t1-landing oneliner-1: 得分 4.5, token 124122, 秒 175.9, 檢查 5/5, 未開啟 t1-landing oneliner-2: 得分 4.5, token 82163, 秒 143.1, 檢查 5/5, 未開啟 t1-landing treatment-1: 得分 5.0, token 132827, 秒 151.2, 檢查 5/5, 開啟 emil-design-eng t1-landing treatment-2: 得分 5.0, token 128585, 秒 170.2, 檢查 5/5, 開啟 emil-design-eng t2-dashboard control-1: 得分 3.5, token 270891, 秒 204.0, 檢查 5/5, 未開啟 t2-dashboard control-2: 得分 3.5, token 134118, 秒 172.6, 檢查 5/5, 未開啟 t2-dashboard oneliner-1: 得分 4.5, token 154395, 秒 240.7, 檢查 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="#f7f3e9"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks with a big ocean crunch. Three flavours. $14 a box. A fresh delivery every month."> <title>Tidepool — A little ocean. A lot of crunch.</title> <style> :root{--paper:#f7f3e9;--ink:#183d48;--coral:#ed674c;--line:#cbd0c3;--green:#dce5bd}*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button,input{font:inherit}a,button,label,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid var(--coral);outline-offset:5px}.skip{position:absolute;left:16px;top:-60px;background:var(--paper);padding:12px;z-index:10}.skip:focus{top:12px}.wrap{width:min(1240px,90%);margin:auto}.topline{text-align:center;padding:10px 16px;background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.nav{display:flex;align-items:center;justify-content:space-between;min-height:100px;border-bottom:1px solid var(--line);gap:24px}.logo{font-family:Georgia,serif;font-size:42px;font-weight:bold;letter-spacing:-3px;text-decoration:none}.logo sup{font:11px Arial;letter-spacing:0;vertical-align:top;display:inline-block;margin-top:12px}.links{display:flex;gap:32px;font-size:13px}.links a{text-decoration:none}.links a:hover{text-decoration:underline;text-underline-offset:5px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:17px 24px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:4px;text-decoration:none;font-size:14px;font-weight:bold;transition:transform 150ms cubic-bezier(.23,1,.32,1)}.button:active{transform:scale(.97)}.nav .button{padding:13px 20px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:66px 0 58px;gap:20px}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,6.9vw,96px);line-height:.98;letter-spacing:-5px;font-weight:normal;margin:0 0 28px}h1 em{color:var(--coral);font-weight:normal}p{line-height:1.65}.intro{max-width:360px;font-size:16px;margin-bottom:28px}.small{font-size:12px}.hero-note{margin-top:14px;color:#53676a}.art{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center}.orb{position:absolute;width:440px;height:440px;max-width:100%;border-radius:50%;background:#e4e8d6}.pack{width:190px;height:285px;position:relative;background:var(--green);border-radius:9px 9px 20px 20px;color:var(--ink);box-shadow:8px 18px 20px #173c4820,inset 6px 0 14px #ffffff55,inset -5px 0 10px #0000000d;text-align:center;overflow:hidden;padding:29px 10px 15px;border:1px solid #193e4825}.pack:before,.pack:after{content:'';position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transpa [... excerpt: first 3200 of 16222 characters]