frontend-design (Anthropic)
為新介面或改版介面提供視覺設計、字型與美學方向上的指引。
frontend-design 評測：去掉了制式破綻，但去不掉千篇一律
Codex CLI · gpt-6-astra
25.5 / 30
相對未使用技能的提升：+0.25 · 視情況推薦 · 18 次執行
視情況推薦：提升幅度 +0.25 低於 +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.3
- 產出品質
- 3.8
- Token 與時間成本
- 5.0
- 安裝與可攜性
- 4.5
- 安全性
- 5.0
安全審查
安全靜態掃描：0 CRITICAL / 0 HIGH / 0 MEDIUM。人工審查：可安全執行（未發現問題）。掃描結果乾淨，不代表技能一定安全。
安裝
npx skills@latest add anthropics/skills --skill frontend-design
固定 Commit: ca45fc496a3436251f191354091d557da31c15b5
測試日期: 2026-11-02
我們測了什麼
- 依簡報製作新著陸頁
- 資料密集的儀表板 UI
- 重塑現有的平淡頁面
優點
- 技能即使未被點名也會被採用：6/6 次實驗組執行都在未點名的情況下讀取了技能檔案；自動觸發對 UI 建置提示詞確實有效。
- 沒有 Token 額外負擔：Token 用量是未使用技能的 0.95 倍。
缺點
- 相對未使用技能沒有可測量的提升（+0.25，落在雜訊範圍內）。
- 一句話提示得分 3.75，使用技能則為 3.75（+0.00）。
- 每個任務的每個組別 n=2；約 1 分以內的差異屬於雜訊。
評測
Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案，技能已安裝或未安裝，每個組別各執行 2 次，關閉網路。我們在提示詞中從未提及技能，因此這也測試了自動觸發。三個任務：為虛構的海藻零食訂閱服務（Tidepool）製作著陸頁、一個附範例資料的水質監測儀表板，以及重新設計一個刻意平淡的攀岩館首頁，且必須保留所有內容。我們在無網路沙箱中以 Playwright 渲染每個頁面（桌面 1440 px、行動版 390 px），並從截圖盲評計分，0 到 5 分。我們也計算了 HTML 中的特定功能。
三組對照
| 組別 | 平均分數（0-5） | 每次執行 Token 用量 |
|---|---|---|
| 未使用技能 | 3.5 | 93k |
| 一句話提示 | 3.75 | 125k |
| 使用技能 | 3.75 | 88k |
以 Codex CLI 執行 18 次，採規則式檢查評分，不經 LLM 評審。總分 25.5 / 30，評級為 視情況推薦。
判定：視情況而定（25.5 / 30，我們最初三篇中最高的）。 來源：anthropics/skills，skills/frontend-design，固定於提交 ca45fc4。安裝：npx skills@latest add anthropics/skills --skill frontend-design。Apache-2.0。
這是什麼
單一文字檔案，沒有指令碼。它要求代理扮演一家已經否決過老套提案的設計工作室的設計總監：依需求簡報選擇專屬的色盤、字體與版面，避開常見的「AI 生成」預設風格（奶油色背景搭配赤陶色強調色、每個標題上方都放全大寫的眉標、不表示順序的 01/02/03 編號標記），分兩階段進行（先規劃、對照需求簡報審視計畫，再開始建置），最後進行自我批判。它也列出品質底線：對行動裝置具回應性、鍵盤焦點可見、尊重減少動態效果。
我們如何測試
使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行使用全新的暫存專案，安裝技能或未安裝，每組執行兩次，網路關閉。我們在提示詞中從未提及技能，因此這也測試了自動觸發。三項任務：一個虛構海藻零食訂閱服務（Tidepool）的登陸頁、一個含範例資料的水質監測儀表板，以及重新設計一個刻意平淡的攀岩館首頁，且必須保留所有內容。我們在無網路沙箱中以 Playwright 渲染每個頁面（桌面 1440 px、行動裝置 390 px），並根據螢幕截圖盲評，0 到 5 分。我們也計算了 HTML 中的特定功能。
實際發生了什麼
它會自行觸發。 技能檔案在全部六次實驗組執行中都被讀取，完全沒有提示。沒有人需要輸入任何指令。
它點名的破綻確實消失了。 平均每頁而言，對照組頁面使用了 3.2 個全大寫標籤與 1.5 個編號標記；使用技能的頁面則為 0.3 與 0。這是技能自身的建議反映在輸出上。兩組都沒有使用它警告的奶油色與赤陶色十六進位色值，漸層使用量也相同（每頁 0.17）。由於沙箱離線，兩組的字型家族都僅限於系統字型，這對重視排版的技能不利。我們預期使用網頁字型時會有不同結果。
整體品質大致相同。 盲評分數在使用技能時平均為 3.75，未使用時為 3.5。登陸頁在使用技能時表現較好（4.0 對 3.25），儀表板與重新設計則打成平手。每個儲存格只有兩次執行，這屬於雜訊。所有頁面都有一定水準：階層清楚、間距合理、沒有版面破損。
同質性並未改變。 四個登陸頁中有三個，無論有無技能，都使用了相同的主標題「A little ocean. A lot of crunch.」；第四個（一次實驗組執行）寫了「A little sea.」，文案不同。四個頁面共享相同的整體版面：產品包裝袋與頁面中段的價格卡。技能要求「針對這份簡報提出獨特的觀點」，但同一個模型從相同提示詞執行兩次，仍會收斂到自己的預設風格。技能移除的是表面的老套，並未讓底層想法更多樣。重新設計任務在字體上產生了稍微多一點的變化：對照組使用 Arial/Helvetica 與 Courier，實驗組則選擇 Impact 風格的展示字體搭配 Helvetica Neue 或 Avenir Next。那只是系統字型的變化。
品質底線同樣達成。 Viewport meta 標籤、@media 查詢與 :focus 樣式在兩組的每個頁面中都出現。兩組的兩個儀表板都缺少減少動態效果的處理。12 個頁面中有 10 個行動版溢出為零；每組各有一個登陸頁溢出 2 到 6 像素。
沒有成本。 使用技能的執行平均花費 87,900 Token，未使用時為 93,000（0.95 倍），耗時 155 秒對 189 秒。相較於頁面本身，讀取這個檔案的成本很低。
關於我們自身檢查的一點提醒
我們針對「保留 $22 / $79 / $720 價格」的自動檢查，在四種重新設計執行中有三種失敗，兩組皆然。這是我們正規表示式的缺陷，不是頁面的問題：價格被拆散在 <span> 標籤中，而螢幕截圖顯示三個價格都在。我們並未在分數中使用那項檢查。
安全性審查
一個 Markdown 檔案與一個授權檔案。掃描器沒有發現任何問題；唯一的網域是授權文字中的 apache.org。沒有指令碼、二進位檔、隱藏字元或關於機密的指示。見 security.md。
分數
| 面向 | 分數 | 原因 |
|---|---|---|
| 輸出品質 | 3.75 | 精緻、有水準的頁面 |
| 相較無技能的提升 | 2.25 | +0.25，在雜訊範圍內 |
| 觸發 | 5.0 | 6/6 次執行未經提示即讀取 |
| 指令與可攜性 | 4.5 | 純文字，沒有工具名稱；假設可以截圖 |
| 效率 | 5 | 0.95 倍 Token |
| 安全性與衛生 | 5 | 未發現任何問題 |
誰適合使用
如果你的代理產出的頁面總是帶著相同的全大寫眉標與 01/02/03 標記，這項技能能可靠地阻止這種情況，且不增加 Token 成本，因此沒什麼理由不讓它保持安裝。如果你期望它能讓一般模型產出明顯更原創的設計，我們並沒有看到：你仍會得到一個看起來像該模型平常會做的那種有水準頁面。要可靠地解決同質性，得靠你提供更有力的簡報（一組色盤、一個參考、一種氛圍）；技能也說，簡報本身的文字永遠優先於技能。
這項測試的限制
每個儲存格兩次執行、一個模型、離線沙箱搭配系統字型、三項任務，由一位盲評者而非評審小組評分。設計判斷是主觀的。根據本站規則，Codex 層級同時適用於 Codex 與 Claude Code。
更新（2026 年 11 月 2 日）：新增一句話提示組
我們新增了第三組：沒有技能，但在提示詞後附加一句話，承載技能的核心規則（「給頁面一個具體、大膽的視覺觀點……避免泛濫的 AI 設計破綻，例如紫色漸層、全大寫眉標、01/02 編號標記與一模一樣的三卡片格線」）。6 次執行，在 Windows 機器上以相同的 Codex 組建執行，網路關閉。
| 組別 | 盲評平均分數（0-5） | 每次執行 Token 數 |
|---|---|---|
| 無技能 | 3.50 | 93k |
| 一句話 | 3.75 | 125k |
| 已安裝技能 | 3.75 | 88k |
那一句話的表現與技能相當（技能相較它的增益：0.00），並比無技能高出 0.25，在 n=2 時全都在雜訊範圍內。一句話提示的執行花費約為對照組 Token 的 1.4 倍；技能則沒有。整組中最好看的頁面（襯線字體的儀表板標題「A clear view of your water.」）來自一次一句話提示的執行，而唯一明顯有問題的頁面（一個亂碼跑馬燈，含有字面的 ?/b> 文字）則來自重新設計任務中另一次一句話提示的執行。新組別的分數是在與最初六次執行比較分開的盲評場次中給予的，因此可能有些微漂移（同一個登陸頁在某場次得到 4.5，在另一場次平均得到 3.25）。技能不花成本的部分仍然相同：它會移除自己點名的特定破綻。一句話提示也能做到大部分。
完整紀錄
執行日誌：frontend-design (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 欄位：任務、組-輪次、得分（0-5）、token、秒、通過的檢查、代理開啟的 skill 檔案。 t1-landing control-1: 得分 3.5, token 82271, 秒 186.0, 檢查 5/5, 未開啟 t1-landing control-2: 得分 3, token 71992, 秒 148.5, 檢查 5/5, 未開啟 t1-landing oneliner-1: 得分 4, token 97532, 秒 173.6, 檢查 5/5, 未開啟 t1-landing oneliner-2: 得分 3.5, token 97406, 秒 150.6, 檢查 5/5, 未開啟 t1-landing treatment-1: 得分 4, token 102012, 秒 167.9, 檢查 5/5, 開啟 frontend-design t1-landing treatment-2: 得分 4, token 84401, 秒 169.4, 檢查 5/5, 開啟 frontend-design t2-dashboard control-1: 得分 4, token 99830, 秒 215.1, 檢查 4/5, 未開啟 t2-dashboard control-2: 得分 3, token 138278, 秒 252.2, 檢查 4/5, 未開啟 t2-dashboard oneliner-1: 得分 4, token 117512, 秒 188.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="#e3eee4"><meta name="description" content="Meet Tidepool: small-batch, big-crunch seaweed snacks. Three bright flavours, one $14 box, delivered monthly."> <title>Tidepool — A little sea. A lot of crunch.</title> <style> :root{--ocean:#163e4b;--glass:#e3eee4;--green:#becfa3;--yellow:#f6cf58;--pink:#e9ad9c;--paper:#faf9ef;--line:#163e4b30}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--glass);color:var(--ocean);font-family:"Trebuchet MS",Arial,sans-serif;font-size:16px;line-height:1.6}button,a,input{font:inherit}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bd552d;outline-offset:5px}.wrap{max-width:1320px;margin:auto;padding:0 6%}.announcement{text-align:center;background:var(--ocean);color:var(--paper);font-size:12px;letter-spacing:.4px;padding:8px 16px}.nav{display:flex;align-items:center;justify-content:space-between;height:106px;gap:24px}.logo{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:43px;font-weight:900;letter-spacing:-3px;text-decoration:none;line-height:1}.logo span{display:inline-block;transform:rotate(-14deg)}.nav-links{display:flex;gap:33px;align-items:center}.nav-links a{text-decoration:none;font-size:14px}.nav-links a:hover{text-decoration:underline}.button{border:1.5px solid var(--ocean);border-radius:40px;display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--ocean);color:var(--paper);padding:14px 25px;text-decoration:none;font-weight:700;cursor:pointer;line-height:1.3}.button:hover{background:#285664}.button.small{padding:11px 23px;font-size:13px}.button .arrow{font-size:23px;line-height:.8}.hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;min-height:574px;padding-top:25px;padding-bottom:65px;gap:20px}.hero h1{font-size:clamp(58px,6.5vw,88px);font-weight:900;line-height:.99;letter-spacing:-5px;margin:0 0 27px;max-width:650px}.hero p{font-size:17px;max-width:355px;margin:0 0 28px}.note{font-size:12px;margin-top:14px;display:block}.product-scene{height:480px;position:relative;isolation:isolate}.halo{position:absolute;inset:34px -10px 0;background:#ccddca;border-radius:50%}.pouch{position:absolute;width:205px;height:302px;border-radius:8px 8px 24px 24px;background:var(--green);box-shadow:10px 18px 20px #183e4822,inset -8px 0 18px #213f3412,inset 7px 0 12px #ffffff40;overflow:hidden;text-align:center;color:var(--ocean)}.pouch:before,.pouch:after{content:"";position:absolute;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,transparent 0 3px,#163e4b12 3px 4px);border-bottom:1px solid #163e4b20;top:0}.pouch:after{top:auto;bottom:0;border-top:1px solid #163e4b20}.pouch-brand{font-size:38px;line-height:1;font-weight:900;letter-spacing:-2.8px;margin-top:35px;display:block}.pouch-tag{font-size:8px;letter-spacing:1.1px;margin:8px 0}.pouch svg{width:110px;height:120px;display:block;margin:0 auto}.pouch-f [... excerpt: first 3200 of 18232 characters]