1. 基本信息
项目自述名称：
web-design-guidelines（SKILL.md 内自述，未带拥有者/仓库前缀；正式名称按合集子技能规则补全为下表名称）
| 项目 | 内容 |
|---|---|
| 名称 | web-design-guidelines-vercel-labs-agent-skills |
| 作者/维护者 | Vercel（Vercel Labs / Vercel Engineering） |
| 来源链接 | https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines |
| 许可证 | 仓库根目录未附 LICENSE 文件（GitHub API 判定为空，来自 GitHub API） |
| GitHub Stars | 29,100（仓库级，来自 GitHub API；合集仓库 stars 不直接代表该子技能热度，见第 6 章说明） |
| Forks | 2,609（来自 GitHub API） |
| 最新版本 | 1.0.0（SKILL.md metadata 字段） |
| 安装方式 | npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines |
2. 功能介绍与亮点
对指定文件或通配符 pattern 做 Web UI 代码合规审计，覆盖无障碍（aria-labels、语义化 HTML、键盘操作）、焦点状态、表单、动画（prefers-reduced-motion）、排版、图片、性能（虚拟化、布局抖动）、导航与状态、深色模式、触控交互、本地化共 11 大类、100+ 条规则。
核心亮点：
- 规则动态拉取：每次审计前实时从姊妹仓库
vercel-labs/web-interface-guidelines拉取最新规则文本，而非打包旧版本，规则始终与官方最新标准同步 - 官方一线出品：Vercel Engineering 直接维护，与同仓库的
react-best-practices、composition-patterns等技能同源 - 输出简洁可操作：审计结果以
file:line格式给出，可直接定位到代码行修复，不产出冗长报告
3. 适用场景
所属分类：前端与设计
适合正在用 Claude Code / Codex 等 agent 编写或审查 Web UI 代码的初中级前端开发者，在提交代码或 code review 前，用一条指令快速捕捉无障碍、性能、UX 层面的违规点，替代人工逐条对照规范手册。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——安装命令与官方文档均以 Claude Code 为目标平台，第三方评测文章（firecrawl.dev）确认实际使用
- Codex：✅ 支持——所属
npx skillsCLI 生态官方文档列出 Codex 为受支持平台，独立评测确认其周活跃安装覆盖包括 Codex 在内的多个平台 - OpenClaw：❓ 未验证——未见官方文档或第三方资料提及
- Hermes Agent：❓ 未验证——同上，未见官方文档或第三方资料提及
5. 推荐理由
Vercel 官方出品，且有第三方独立数据佐证其真实使用规模——总装机 25.6 万次、周装机 13 万次，被 firecrawl.dev《2026 年最佳 Claude Code 技能》榜单评为第 7 名，把 100+ 条业界 UI 审计规则打包成一条指令，能显著提升前端代码审查效率。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9 | 第三方装机数据（总装机 25.6 万次、周装机 13 万次）与独立评测榜单排名（firecrawl.dev《2026年最佳 Claude Code 技能》第 7 名）作为热度依据，合集仓库整体 29.1k stars 属整个合集、不代表本技能自身热度（详见下方取证说明） |
| 可用性 | 8 | npx skills add 一条命令安装，Claude Code、Codex 双平台原生支持（OpenClaw、Hermes Agent 未验证）；规则动态拉取保持与官方标准同步，但需运行时联网，离线环境无法使用；审计结果以 file:line 格式直接定位代码行 |
| 安全性 | 7 | 见下方安全检查清单 |
| 综合 | 8.0 |
受欢迎程度取证说明：合集仓库（vercel-labs/agent-skills，29.1k stars）的整体星数属整个合集，不代表本技能自身热度；本项评分依据的是第三方装机数据（256.2k 总装机 / 133k 周装机）与独立评测榜单排名。
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令及权限范围 | 无 shell 执行，纯只读文件审计，不修改代码 |
| ② 运行时联网外发 | 仅单向拉取同组织（vercel-labs）维护的规则文本到本地，不外发用户代码或数据 |
| ③ API Key / 凭据 | 不需要 |
| ④ 可疑指令（注入迹象） | 未发现注入迹象；架构上把远程规则内容当作审计依据，若上游仓库被攻陷存在被动风险，但目标仓库 web-interface-guidelines 同属 Vercel 官方、MIT 开源、715 stars，风险可控 |
| ⑤ 作者/组织信誉 | Vercel——一线前端基础设施厂商，官方仓库直接维护 |
| ⑥ License 是否明确 | 不明确——仓库根目录未附 LICENSE 文件，扣分点，商用前建议自行核实授权条款 |
| ⑦ 最近维护时间 | 活跃，仓库最近提交时间为 2026-07-15 |
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 与本技能的差异 |
|---|---|---|
| composition-patterns（同仓库） | React 组件组合模式重构指导 | 面向代码架构设计决策，不做规则化审计 |
| react-view-transitions（同仓库） | View Transition API 动效实现指南 | 聚焦单一动效功能实现，非通用 UI 合规审计 |
| react-native-skills（同仓库） | React Native 移动端最佳实践 | 聚焦移动端而非 Web，规则集完全不同 |
frontend-design-anthropics-skills 与本技能定位互补而非竞争：前者偏“如何做设计决策”（生成向），本技能偏“审计已有代码是否合规”（审查向），两者可配合使用而非二选一。
8. 用户评价
该技能目前在公开渠道可查的具名评价仅有 1 条：
- 来源：firecrawl.dev《Best Claude Code Skills to Try in 2026》，将本技能列为榜单第 7 名
- 内容摘要：“Where the Frontend Design skill focuses on creative direction, this Vercel skill is a quality gate.”（与偏创意方向的 Frontend Design 技能形成互补，本技能扮演质量关卡角色），并引用其“133k weekly installs”作为“最广泛采用的 UI/UX 标准之一”的依据
9. 其他补充
技能遵循开放的 Agent Skills 格式（agentskills.io），可通过 npx skills CLI 在包括 Claude Code、Codex 等多个平台间统一安装管理；同仓库另有 writing-guidelines（文档写作规范审计）等姊妹技能，风格与设计理念一致。
10. 安装使用方式
- CLI 一条命令：
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines - 手动方式：克隆仓库，将
skills/web-design-guidelines目录复制进.claude/skills/（或对应 agent 的 skills 目录） - 触发方式：对话中直接说“review my UI”/“check accessibility”/“审查我的界面代码”等自然语言即可触发，需同时指定要审计的文件或通配符 pattern
- 安装后注意：无需重启；该技能运行时会主动发起一次网络请求拉取最新规则，需要 agent 具备联网读取（WebFetch 一类）能力
11. 注意事项
- 仓库根目录未附 LICENSE 文件，用于商业项目前建议先与 Vercel 官方确认授权条款
- 依赖运行时联网拉取远程规则文件，离线或网络受限环境下无法正常工作；规则内容会随上游仓库更新而变化，不是版本锁定的固定规则集
- 官方定位仅覆盖 Web/UI 代码审计场景，不适用于后端代码审查
- OpenClaw、Hermes Agent 生态的兼容性未经验证，若在这两个平台使用建议先小范围测试