Agent skill 给网页带来了什么变化
同样的题目，分别交给 Codex 和 Claude Code，每个 agent 都在用与不用网页设计 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
一个前端设计 skill，输出总是 HTML（页面、看板、原型、幻灯片、数据可视化）。它先确定设计方向，并自带 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：无障碍、响应式的界面，包括加载、空和错误状态、语义化令牌，以及一张要避开的“AI 风格”默认做法对照表。只有说明文字，没有脚本。
addyosmani/agent-skills · MIT · 8 / 8 格
theme-factory
Anthropic 的主题工具包：十套预设配色及字体搭配（或生成一套自定义主题），套用到已完成的作品上，比如落地页。只管颜色和字体，不管版式。包括说明、十个小主题文件和一份展示 PDF。
anthropics/skills · Apache-2.0 · 6 / 6 格
题目
SaaS 落地页
Rotaline 的营销页面，这是一个虚构的值班排班工具。页面包括带产品插图的首屏、功能、步骤、成效、用户评价、可切换月付/年付的价格、FAQ 和页脚。
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 中加载原始的
index.html（sandbox="allow-scripts"，没有同源访问权限）。 - 无障碍扫描
- 每个页面还会用自动化无障碍扫描工具检查一遍，按严重程度显示违规数量。自动化扫描只能覆盖一部分无障碍问题（比如替代文字和焦点顺序是否合理，它判断不了），所以这些数字只是提示，不是结论。
- 滚动录屏
- 有些格子还附带页面在桌面宽度下滚动的短录屏，因为动效在截图里看不出来。只有在单格页点了播放才会加载。
- 运行日期
- 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，还有一个用了运行者 npm 缓存里的 Playwright。更强的隔离（单独的用户账号或容器）留待以后实现。 - 截图中的固定侧边栏。整页截图对尺寸为
100vh的position: fixed或sticky元素，只按首屏高度绘制，所以看板的侧边栏可能看起来在 900 px 处就断了。这是截图方式造成的，不是页面本身的问题。 - 一次采样不等于基准测试。每格只生成一次。请把画廊当作 skill 大致效果的示例，而不是评分。