Agent skill 對網頁有什麼影響
同樣的題目，由 Codex 和 Claude Code 分別製作，各自在使用與不使用網頁設計 skill（SKILL.md）的情況下各做一次。每個題目都以 2×2 的方式執行：Codex 原生、Codex + skill、Claude Code 原生、Claude Code + skill。原生格子由所有 skill 共用。
46 格中已執行 46 格。
總覽
每一列是一個 skill，每一欄是一個題目。每個方格左邊是 Codex 的結果，右邊是 Claude Code 的結果（頁面頂端，桌面版寬度）。
landing-saasdashboardblog-portfolio
Skill
frontend-design
Anthropic 官方的前端設計 skill。它要求 agent 在寫程式碼之前先確定設計方向（配色、字型、版面、原則），並對照 AI 常見的預設做法檢查一遍。只有指示，沒有腳本。
anthropics/skills · Apache-2.0 · 6 / 6 格
ui-ux-pro-max
社群製作的 UI/UX 知識庫 skill：包含本機 CSV 資料（風格、配色、字型搭配、UX 規則、圖表類型、技術堆疊），以及一支 Python 搜尋腳本，會在 agent 寫頁面之前先產出一套設計系統。
nextlevelbuilder/ui-ux-pro-max-skill · MIT · 6 / 6 格
web-design-engineer
一個輸出一律是 HTML 的前端設計 skill（網頁、儀表板、原型、簡報、資料視覺化）。它先從確定設計方向的步驟開始，並附帶 25 套風格範本。只有指示，沒有腳本。
ConardLi/garden-skills · MIT · 6 / 6 格
taste-skill (
design-taste-frontend)taste-skill v2：為網站與應用程式畫面提供美術方向。腳本會從一個研究過 247 個網站的方向庫中給出三個方向，agent 依選中的方向做出頁面，再用內附的檢查工具在真實瀏覽器中檢查。包含說明與 Node 腳本；需要 Node 22+、Chrome，找圖片時需要連網。
Leonxlnx/taste-skill · MIT · 6 / 6 格
frontend-ui-engineering
Addy Osmani 的工程品質前端 skill：無障礙、響應式的介面，包括載入、空白與錯誤狀態、語意化 token，以及一張要避開的「AI 風格」預設做法對照表。只有說明文字，沒有腳本。
addyosmani/agent-skills · MIT · 8 / 8 格
theme-factory
Anthropic 的主題工具包：十套預設配色與字體搭配（或產生一套自訂主題），套用到已完成的作品上，例如到達頁面。只處理顏色與字體，不處理版面。包含說明、十個小主題檔與一份展示 PDF。
anthropics/skills · Apache-2.0 · 6 / 6 格
題目
SaaS 到達頁面
虛構值班排班工具 Rotaline 的行銷頁面：附產品插圖的主視覺區、功能、使用步驟、成效、客戶推薦、可切換月付／年付的價格方案、常見問題與頁尾。
landing-saas· 版本 1 · 14 / 14 格資料儀表板
Kestrel Coffee Roasters 的銷售與營運儀表板：KPI 卡片、可依通路篩選的每月營收圖表、各品類占比、可排序的咖啡館列表、最近訂單和庫存警示，全部使用固定資料。
dashboard· 版本 1 · 14 / 14 格個人部落格與作品集
虛構產品設計師 Maya Lindqvist 的單頁網站：四個案例研究、可篩選的文章列表、一篇完整文章、附時間軸的「關於我」區塊、電子報訂閱表單，以及淺色／深色切換。
blog-portfolio· 版本 1 · 14 / 14 格表單與回饋元件狀態 展示題
一家虛構網路銀行的表單與回饋元件參考頁，所有狀態同時可見：輸入欄位、選擇控制項、按鈕、轉帳清單（載入、空白、錯誤、有資料）、提示訊息，以及一張轉帳表單。
form-states· 版本 1 · 4 / 4 格
方法
| Agent | 模型 | Effort | CLI 版本 | 執行次數 |
|---|---|---|---|---|
| Codex CLI | gpt-6.1-sol | high | 0.164.0 | 23 次執行 |
| Claude Code | claude-opus-5-5 | high | 2.1.308 | 23 次執行 |
模型和 effort 都固定寫在執行腳本裡。表格顯示的是 run.json 檔案記錄的內容。
- 每格只取樣一次，不挑選結果
- 每個格子只生成一次，一次完成，沒有後續對話。結果照原樣呈現，失敗的執行也一樣。如果某格重新執行，先前的嘗試會保存在
runs/<prompt>/_attempts/。 - 四個格子用同一個題目
- 題目用字中性，不含風格形容詞。使用 skill 的格子會在結尾多加一句指名該 skill 的話：Claude Code 用
Use the <name> skill.，Codex 用Use the $<name> skill.。 - 隔離
- 每次執行都從儲存庫外一個全新的拋棄式目錄開始，
HOME是空的，有自己的設定目錄（CLAUDE_CONFIG_DIR或CODEX_HOME），環境也是從頭建立。不會載入任何使用者設定、外掛、使用者層級的 skill、MCP 伺服器或記憶。受測的 skill 只會複製到這個拋棄式專案的 skill 資料夾（.claude/skills/或.agents/skills/）。各 CLI 內建的 skill 仍可使用，算作原生。證據來自各 agent 自己的日誌，存放在run.json的isolation底下。 - Skill 必須真的觸發
- 對使用 skill 的格子來說，日誌必須顯示 skill 已被載入（
skill_triggered）。如果沒有，該格會標為「失敗」，而不會當成 skill 的結果顯示。 - 截圖
- 整頁截圖的寬度為 1440 與 390 CSS px，在網路閒置、字型載入完成後擷取，並停用動畫（playwright 1.64.1, playwright-chromium 156.0.8078.4）。縮圖顯示頁面頂端。「開啟頁面」會在沙箱 iframe（
sandbox="allow-scripts"，沒有同源存取權）中載入原始的index.html。 - 無障礙掃描
- 每個頁面也會用自動化無障礙掃描工具檢查一次，並依嚴重程度顯示違規數量。自動化掃描只能涵蓋一部分無障礙問題（例如替代文字與焦點順序是否合理，它無法判斷），所以這些數字只是提示，不是結論。
- 捲動錄影
- 有些格子還附有頁面在桌面版寬度下捲動的短錄影，因為動態效果在截圖中看不出來。只有在單格頁按下播放才會載入。
- 執行日期
- 2026-10-25 – 2026-10-26（UTC），共 46 格。
- 投票
- 每個結果頁都可以透過 giscus 按 👍 投票。giscus 是第三方元件，只在開啟結果頁之後才會載入，畫廊的其他頁面不會載入它。投票需要登入 GitHub。票數以 reaction 的形式存放在本儲存庫的 GitHub Discussions 中，每格一個討論串，所有語言共用。比較頁上的票數每幾個小時更新一次。票數只代表訪客的偏好，不是評測結論。
已知限制
- 「原生」指的是開箱即用的狀態，不是完全沒有 skill。每一格（包括原生格）都能使用 agent 內建的 skill：Claude Code 內建的 19 個 skill，以及 Codex 的系統 skill（
imagegen、openai-docs、skill-creator、skill-installer）。在dashboard這道題目裡，Claude Code 內建的datavizskill 自行觸發了兩次，claude__native一次、claude__frontend-design一次，記錄在run.json的builtin_skills_used中。這是刻意保留的：比較的是讀者安裝 agent 之後實際得到的效果。 - 隔離指的是「什麼都不載入」，不是「什麼都讀不到」。agent 仍然可以讀取磁碟上的其他內容：Codex 預設的
workspace-write沙箱可以讀取/，而使用bypassPermissions的 Claude Code 則沒有沙箱。在 v0 的執行中，有 agent 到上層目錄尋找AGENTS.md，也有一個 agent 用了操作者 npm 快取裡的 Playwright。更嚴格的隔離（另開使用者帳號或使用容器）留待日後處理。 - 截圖中的固定側邊欄。整頁截圖只會以第一個畫面的高度繪製尺寸為
100vh的position: fixed或sticky元素，所以儀表板的側邊欄看起來可能在 900 px 處就斷了。這是截圖造成的，不是頁面本身的問題。 - 單次取樣稱不上評測。每格都只生成一次。請把這個畫廊當成 skill 傾向產生什麼結果的範例，而不是分數。