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
安装与使用
项目级安装：把固定 commit 下的 skill 文件夹（包含 SKILL.md 的那个）复制到你的项目中。画廊运行时也是这样安装的。
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
