floatboat
打开导航菜单

Web Design Guidelines by Vercel Labs

使用 Vercel Labs 的 Web Design Guidelines，按当前 Web Interface Guidelines 检查界面源码。向 Agent 指定页面或组件，审查交互与无障碍相关实现，获得带文件和行号的问题列表，便于定位、核对与后续修改。

把界面规范落实到具体问题

选择需要重点审阅的页面或交互，要求发现能够对应代码位置和实际行为。请求中区分键盘访问、控件语义与反馈问题，再决定哪些修复需要进入本次实施范围。

提供文件与检查重点，例如键盘操作或表单错误。

复制请求，在 Floatboat 新对话中粘贴，并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制，不会从此处自动发送。

参考来源: Web Design Guidelines
https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。

我的任务:
按最新网页界面规范审查结账表单组件，只报告可执行的 file:line 问题。

期望交付:
可执行的文件与行号问题，说明受影响的操作及预期行为。

关于 Web Design Guidelines

Web Design Guidelines 是 Vercel Labs 发布的界面源码审查 Skill，依据 Web Interface Guidelines 检查指定文件。其流程先获取当前规范，再读取用户提供的文件或路径模式，并用文件与行号报告问题，便于将审查结果对应到实际实现。它适合页面上线前复核和共享组件检查，尤其适用于需要明确定位的交互与无障碍问题。Skill 本身是审查入口，规则文档在独立来源维护，每次检查时都应重新获取。源码发现还需要与渲染后的界面核对；涉及键盘或辅助技术体验时，应补充实际操作验证。

Web Design Guidelines Skill的使用场景

键盘导航、控件行为不一致和发布前审查会暴露不同界面问题。了解 Web Design Guidelines 如何将交互表现对应到源代码位置，让发现能够指导具体修复及修改后的操作检查。

表单难以使用键盘操作

键盘难以操作的表单，需要结合代码检查真实焦点路径和验证失败状态。一起审阅标签、焦点样式、错误提示与键盘处理逻辑，将问题定位到文件和行。这样修复针对实际导航障碍，而不只是调整表单外观。

控件行为不一致

相似控件即使外观一致，也可能有不同的操作行为。比较各实现的激活与导航状态、触控目标、反馈和交互语义，按行为类型归纳差异，再提出统一建议。审阅关注使用者实际上能做什么，不只讨论视觉偏好。

新页面上线前需要 UI 复核

新页面发布前的界面检查，应限定到本次差异、涉及的共享组件和验收交互。将发现对应到相关代码负责人，修复后检查代表性操作。保持结果可执行，也避免把单页发布检查静默扩展成其他页面的重新设计。

检查加载与空状态反馈

数据延迟、缺失或无法提交时，页面需要说明当前发生了什么。结合代码和渲染界面检查相关状态与控件，判断反馈能否引导下一步有效行动。报告定位具体行为，不以无法消除用户疑问的装饰调整代替问题修复。

如何使用 Web Design Guidelines

界面审阅发现应能够从代码位置回到真实页面。提供指定文件和用户流程，按当前规范检查，再核对渲染行为，确认问题成立后才决定实施范围及需要复测的交互。

  1. 指定文件与用户流程

    提供页面或组件路径，并说明要审查的交互。包含会影响该流程的共享组件。

  2. 按当前规范检查

    让 Agent 获取最新 Web Interface Guidelines 并检查指定文件。要求问题附带文件与行号。

  3. 核对并处理问题

    修改前将发现与实际界面对应。改动后验证相关的键盘、焦点和表单行为。

探索更多 Agent Skills

查看其他 Skill 指南，并在使用前核对原始来源。

Web Design Guidelines 常见问题

这个 Skill 内置了全部网页设计规则吗？
没有。SKILL.md 指向另一个网页界面规范来源，并要求每次审查时重新获取。
只给网址就能审查吗？
原始流程针对指定源码文件。要检查视觉或浏览器行为，还需要另做页面渲染审查。
结果是什么形式？
原文要求用简洁的文件与行号定位问题，便于核对和修复。
没有报错就代表无障碍合格吗？
不代表。仍需辅助技术和真实交互测试；文件审查只是其中一层。
哪些检查仍需实际操作？
应亲自验证键盘导航、焦点移动、表单错误和窄屏布局。源码能指出潜在问题，但实际交互才说明用户会遇到什么。
改动通用组件后需要重新检查哪些页面？
检查使用该组件的代表页面。按钮、对话框或导航只改一个文件，也可能影响多条路由，不能只验证最初发现问题的页面。
Agent 无法获取规范时怎么办？
检查需要当前规范作为依据。无法获取时，可以恢复访问或使用注明日期的副本；副本检查结果不能证明符合之后更新的规则。