frontend-design
Anthropic 官方的前端設計 skill。它要求 agent 在寫程式碼之前先確定設計方向（配色、字型、版面、原則），並對照 AI 常見的預設做法檢查一遍。只有指示，沒有腳本。
每個題目固定以 2×2 顯示：Codex 原生、Codex + skill、Claude Code 原生、Claude Code + skill。點選截圖可查看整頁。安裝與使用 ↓
擅長什麼
以下是 skill 自己的文件中宣稱的優勢，並附上出處。這些只是宣稱，不是結論，請與下方的實際結果對照著看。
- 有辨識度、有意圖的視覺設計，看起來不像範本預設值 出處
- 針對需求，在配色、字體與版面上做出審慎且有主見的選擇，讓每個客戶都有獨特的視覺形象 出處
- 字體承載頁面的個性 出處
測試範圍：SaaS 到達頁面、資料儀表板、個人部落格與作品集。不在範圍內的題目標示為「不適用」，而不是待執行。
在 v0 執行之後才對照 skill 原文核對（並非事先決定）；原文沒有排除任何頁面類型。
- 模型
gpt-6.1-sol · high- 時間
- 7m 51s
- Token 數
- in 424k · out 24.5k
- 是否使用 skill
- 不適用
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Codex + frontend-design
成功
- 模型
gpt-6.1-sol · high- 時間
- 7m 57s
- Token 數
- in 370k · out 23.5k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
- 模型
claude-opus-5-5 · high- 時間
- 7m 11s
- Token 數
- in 30 · cache 873k · out 37.6k
- 是否使用 skill
- 不適用
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-26
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Claude Code + frontend-design
成功
- 模型
claude-opus-5-5 · high- 時間
- 17m 23s
- Token 數
- in 66 · cache 2.51M · out 51.7k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-26
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
- 模型
gpt-6.1-sol · high- 時間
- 6m 56s
- Token 數
- in 326k · out 25.8k
- 是否使用 skill
- 不適用
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Codex + frontend-design
成功
- 模型
gpt-6.1-sol · high- 時間
- 11m 32s
- Token 數
- in 439k · out 30.6k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 較嚴重 2▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
- 模型
claude-opus-5-5 · high- 時間
- 8m 03s
- Token 數
- in 34 · cache 1.08M · out 46.4k
- 是否使用 skill
- 不適用
- 外部資源
- 無
- 執行日期
- 2026-10-26
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Claude Code + frontend-design
成功
- 模型
claude-opus-5-5 · high- 時間
- 6m 08s
- Token 數
- in 26 · cache 628k · out 38.7k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-26
a11y：未發現問題▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
- 模型
gpt-6.1-sol · high- 時間
- 4m 59s
- Token 數
- in 218k · out 19.8k
- 是否使用 skill
- 不適用
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Codex + frontend-design
成功
- 模型
gpt-6.1-sol · high- 時間
- 7m 35s
- Token 數
- in 262k · out 21.7k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-25
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
- 模型
claude-opus-5-5 · high- 時間
- 10m 28s
- Token 數
- in 24 · cache 661k · out 41.1k
- 是否使用 skill
- 不適用
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-26
a11y 較嚴重 1▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
Claude Code + frontend-design
成功
- 模型
claude-opus-5-5 · high- 時間
- 6m 29s
- Token 數
- in 28 · cache 816k · out 37.8k
- 是否使用 skill
- 是
- 外部資源
- fonts.googleapis.com, fonts.gstatic.com
- 執行日期
- 2026-10-26
a11y：未發現問題▶ 錄影
👍 0 · 去投票
開啟頁面 · run.json
安裝與使用
專案層級安裝：把 skill 資料夾（含有 SKILL.md 的那一個）以固定 commit 的版本複製到你的專案中。畫廊的執行也是用同樣的方式安裝。
Claude Code
安裝
把資料夾複製到 <project>/.claude/skills/frontend-design/。
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .claude/skills/frontend-design
使用
# 互動模式
/frontend-design <你的任務>
# 或在任何請求的結尾加上
Use the frontend-design skill.
# 非互動模式，與畫廊的執行方式相同
claude -p '<你的任務> Use the frontend-design skill.'
若要讓所有專案都能使用，請改把資料夾放到 ~/.claude/skills/frontend-design/。當請求符合 skill 的描述時，Claude Code 也可以自行載入這個 skill。
Codex
安裝
把資料夾複製到 <project>/.agents/skills/frontend-design/。
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .agents/skills/frontend-design
使用
# 互動模式：直接提到它，或從 /skills 選取
$frontend-design <你的任務>
# 非互動模式，與畫廊的執行方式相同
codex exec -s workspace-write '<你的任務> Use the $frontend-design skill.'
若要讓所有專案都能使用，請改把資料夾放到 ~/.agents/skills/frontend-design/。Codex 也可以依據 skill 的描述自行選用。
備註
- 同一份 SKILL.md 也發布在 anthropics/claude-plugins-official 和 anthropics/claude-code；本畫廊使用的是 anthropics/skills。
- 上游在 2026 年多次改寫這個 skill，所以請務必使用固定 commit。
中繼資料：skills/frontend-design/meta.yaml
