无障碍
表单难以使用键盘操作
检查相关表单文件中的标签、焦点状态、错误信息和键盘处理。
01 / Skill 档案 · 网页 UI · 设计审查
Web Design Guidelines：从界面代码找出具体问题
一个审查型 Skill：先获取最新网页界面规范，再阅读指定文件，并按文件和行号报告问题。
发布方、原始来源与安装方式
原发布方 Vercel Labs · 类型: UI 代码审查 Skill
本页为独立介绍；Vercel Labs 未对 Floatboat 作出背书。
上游安装方式
npx skills add vercel-labs/agent-skills --skill web-design-guidelines上游 Skills CLI 命令。实际审查时，该 Skill 还会从另一个来源获取最新规范。
一个具体请求
安装的 SKILL.md 是简短审查流程，不是固定不变的规则全集。Agent 每次先获取最新规范，再检查指定文件，并输出简洁的问题定位。
向 Agent 提问
“按最新网页界面规范审查结账表单组件，只报告可执行的 file:line 问题。”
应该得到什么
合格结果应指出具体控件与行号，解释交互问题，避免无法定位的审美评论。
Web Design Guidelines 适合审查什么
给它具体文件范围和界面问题，结论才容易核实。
交互
控件行为不一致
检查导航状态、点击区域、反馈和交互语义，而不只讨论视觉喜好。
审查
新页面上线前需要 UI 复核
把范围限定在新页面及其共享组件，让问题能够对应到负责的代码。
代码审查不能证明什么
- 证明渲染后的页面在所有视口都正确；仍需实际看页面。
- 没有可检查源码的开放式视觉概念设计。
界面规范审查如何进行
原始流程先获取当前规则，再检查指定文件，最后报告可定位的问题。
- 01
确定文件
指定页面或组件文件；原始流程在没有路径时会先询问。
- 02
获取当前规则
读取实时规范来源，而不是依赖旧检查清单。
- 03
核对定位结果
修改前，把报告中的 file:line 问题与实际界面对应起来。
02 / 使用指南
把规范转成可定位的问题
有价值的产出是能在文件和行号上核对的问题，不是泛泛的重新设计建议。
设计检查规则来自哪里？
SKILL.md 要求 Agent 每次审查前，从 Vercel Labs 独立的网页界面规范来源获取最新规则。安装的 Skill 是工作流程，具体规则在审查时读取。
它能提供无障碍合规认证吗？
不能。文件级检查能发现实现问题，但渲染行为、辅助技术、设备交互及适用标准仍需另行测试。
你能拿到什么
- 按文件和行号定位的 UI 问题
- 针对指定源码的审查
- 待在实际页面验证的问题
使用前先核对
- 是否获取了最新规范来源？
- 问题是否对应指定文件？
- 实际页面能否复现问题？
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
常见问题
这个 Skill 内置了全部网页设计规则吗？
没有。SKILL.md 指向另一个网页界面规范来源，并要求每次审查时重新获取。
只给网址就能审查吗？
原始流程针对指定源码文件。要检查视觉或浏览器行为，还需要另做页面渲染审查。
结果是什么形式？
原文要求用简洁的文件与行号定位问题，便于核对和修复。
没有报错就代表无障碍合格吗？
不代表。仍需辅助技术和真实交互测试；文件审查只是其中一层。