表单难以使用键盘操作
检查相关表单文件中的标签、焦点状态、错误信息和键盘处理。
Web Design Guidelines by Vercel Labs
使用 Vercel Labs 的 Web Design Guidelines，按当前 Web Interface Guidelines 检查界面源码。向 Agent 指定页面或组件，审查交互与无障碍相关实现，获得带文件和行号的问题列表，便于定位、核对与后续修改。
安装与快速上手
选择你使用的 Agent，查看对应的安装或使用方式。在 Floatboat 中，可复制请求让 Agent 读取原始说明；其他选项会显示该 Skill 的安装命令或发布者提供的原生步骤。
选择 Agent
在 Floatboat 中开始
复制请求，粘贴到 Floatboat 对话
请阅读 https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md 中的 Web Design Guidelines 原始说明，介绍它的用途、所需工具和安装方式，再协助我使用。由 Agent 读取原始说明，再确认当前环境的使用方式。
下载 Floatboat ↗试试这样提问
按最新网页界面规范审查结账表单组件，只报告可执行的 file:line 问题。
关于 Web Design Guidelines
Web Design Guidelines 是 Vercel Labs 发布的界面源码审查 Skill，依据 Web Interface Guidelines 检查指定文件。其流程先获取当前规范，再读取用户提供的文件或路径模式，并用文件与行号报告问题，便于将审查结果对应到实际实现。它适合页面上线前复核和共享组件检查，尤其适用于需要明确定位的交互与无障碍问题。Skill 本身是审查入口，规则文档在独立来源维护，每次检查时都应重新获取。源码发现还需要与渲染后的界面核对；涉及键盘或辅助技术体验时，应补充实际操作验证。
网页界面审查的使用场景
探索表单、控件与待发布页面的源码审查场景。依据当前规范检查标签、焦点处理、交互反馈和共享组件，将发现对应到文件位置，再结合用户实际操作核对问题，形成可以继续处理的修改清单。
控件行为不一致
检查导航状态、点击区域、反馈和交互语义，而不只讨论视觉喜好。
新页面上线前需要 UI 复核
把范围限定在新页面及其共享组件，让问题能够对应到负责的代码。
如何使用 Web Design Guidelines
提供待检查的页面或组件文件，并说明用户流程。让 Agent 获取当前规范，在指定范围内审查并报告问题位置；随后对照渲染界面核对结果，再决定需要实施的修改及交互验证。
- 01
指定文件与用户流程
提供页面或组件路径，并说明要审查的交互。包含会影响该流程的共享组件。
- 02
按当前规范检查
让 Agent 获取最新 Web Interface Guidelines 并检查指定文件。要求问题附带文件与行号。
- 03
核对并处理问题
修改前将发现与实际界面对应。改动后验证相关的键盘、焦点和表单行为。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Web Design Guidelines 常见问题
这个 Skill 内置了全部网页设计规则吗？
没有。SKILL.md 指向另一个网页界面规范来源，并要求每次审查时重新获取。
只给网址就能审查吗？
原始流程针对指定源码文件。要检查视觉或浏览器行为，还需要另做页面渲染审查。
结果是什么形式？
原文要求用简洁的文件与行号定位问题，便于核对和修复。
没有报错就代表无障碍合格吗？
不代表。仍需辅助技术和真实交互测试；文件审查只是其中一层。
哪些检查仍需实际操作？
应亲自验证键盘导航、焦点移动、表单错误和窄屏布局。源码能指出潜在问题，但实际交互才说明用户会遇到什么。
改动通用组件后需要重新检查哪些页面？
检查使用该组件的代表页面。按钮、对话框或导航只改一个文件，也可能影响多条路由，不能只验证最初发现问题的页面。
Agent 无法获取规范时怎么办？
检查需要当前规范作为依据。无法获取时，可以恢复访问或使用注明日期的副本；副本检查结果不能证明符合之后更新的规则。