检查网页规范
web-design-guidelines · Vercel依据 Vercel 的 Web Interface Guidelines 检查指定 UI 文件,并定位问题。
- 输出
- 问题清单与代码定位
- 需要
- UI 源文件与在线规范访问
ZIP · 5 KB · MIT
用途与边界
- 准备什么
- UI 源文件或文件范围,以及访问最新规范的网络连接。
- 运行条件
- 能读取 UI 源文件、访问在线规范的 AI 工具。
- 使用边界
- 代码检查不能替代真实交互、辅助技术和设备测试。
试一个设计任务
技能加载后,复制任务并替换为你的需求。
使用 web-design-guidelines 检查当前项目的首页和预约表单源文件。先获取最新规范,再按文件和行号列出问题,重点检查键盘操作、表单标签、焦点状态和响应式布局。先给出检查结果,暂不修改。安装说明
适用于 Claude 的 Code/项目入口;聊天和 Cowork 的技能在账户设置中管理。
放入技能目录,或使用安装命令
下载并解压,保留完整的 web-design-guidelines 文件夹,放入项目的 .claude/skills/ 目录。
或在项目终端运行命令,需要 Node.js / npx。命令获取作者最新版本,可能与下载包不同。
查看原作者安装说明npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code确认技能已加载
重新打开工具,在技能列表中确认 web-design-guidelines 可用。若没有出现,请按原作者说明检查安装目录。
检查结果
- 问题定位到你指定的真实文件。
- 关键问题能在浏览器中复现。
- 修复后再次检查页面。
