铁律
在审查任何文件之前，请先获取最新的指南。绝不要应用记忆或假设的规则——始终从源 URL 获取最新内容。如果 WebFetch 失败，报告失败，不要用猜测的规则继续。
Web 界面指南审查
对照 Vercel 的 Web 界面指南审计 UI 代码。输出结构化的
file:line发现。
何时使用此技能
当用户提出以下要求时加载此技能：
- “审查我的 UI”
- “检查无障碍性”
- “审计设计”
- “评审 UX”
- “检查我的站点/组件是否符合指南”
- 在 PR 前进行设计合规性检查
工作原理
- 获取指南 —— 使用 WebFetch 从源 URL 检索最新规则
- 读取文件 —— 读取指定文件（或询问用户要审查哪些文件/模式）
- 应用规则 —— 根据获取指南中的每条规则检查所有文件
- 输出发现 —— 以
file:line: [规则违规]格式报告违规
指南来源
在每次审查会话前获取最新指南：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
使用 WebFetch 检索最新规则。获取的内容包含所有规则和输出格式说明。请勿跨会话缓存或记忆规则——始终获取最新内容。
使用方法
当用户提供文件或路径模式时：
- 从源 URL 获取指南
- 读取指定文件
- 应用获取指南中的所有规则
- 使用指南中指定的格式输出发现
当未指定文件时：
询问用户：“我应该审查哪些文件或目录？（例如 src/app/features/dashboard/ 或 *.component.html）”
输出格式
严格按照获取指南中指定的格式执行。默认结构：
file:line — [规则名称]: [违规描述]
示例：
dashboard.component.html:34 — 空状态: 未为零数据条件定义空状态
dashboard.component.html:67 — 焦点管理: 交互元素缺少可见焦点指示器
order-list.component.ts:89 — 加载状态: 异步操作缺少加载反馈
失败处理
如果 WebFetch 无法检索指南 URL：
- 报告：“无法从源 URL 获取 Web 界面指南。获取失败：[错误]”
- 不要用猜测或记忆的规则继续
- 建议：“请重试，或检查到 raw.githubusercontent.com 的网络访问”
如果获取失败，绝不编造规则发现。
此技能在审查栈中的定位
此技能是 UI 审查的第三层——运行全部三个工具可得到完整覆盖：
| 层 | 工具 | 检测内容 |
|---|---|---|
| 第 1 层——设计令牌 | /lint-design-system | 硬编码颜色、原始间距、内联排版、触摸目标违规 |
| 第 2 层——WCAG 无障碍性 | accessibility-auditor 代理 | 对比度比率、ARIA 标签、键盘导航、语义 HTML |
| 第 3 层——Web 界面模式 | web-design-guidelines（此技能） | 加载状态、空状态、错误处理、交互模式、焦点管理 |
相关技能
frontend-design—— 在此技能之前运行，用于确立美学方向和 DFII 分数design-system—— 令牌合规性强制（Angular + Flutter）angular-ui-patterns—— Angular 特定的加载/错误/空状态规范accessibility-audit—— WCAG 2.1 AA 合规审计器