跳到正文

检查网页规范

web-design-guidelines · Vercel

依据 Vercel 的 Web Interface Guidelines 检查指定 UI 文件,并定位问题。

输出
问题清单与代码定位
需要
UI 源文件与在线规范访问
下载 Skill

ZIP · 5 KB · MIT

安装目录:.claude/skills/web-design-guidelines/

安装与示例
用途示意,非实测产出。

用途与边界

准备什么
UI 源文件或文件范围,以及访问最新规范的网络连接。
运行条件
能读取 UI 源文件、访问在线规范的 AI 工具。
使用边界
代码检查不能替代真实交互、辅助技术和设备测试。

试一个设计任务

技能加载后,复制任务并替换为你的需求。

使用 web-design-guidelines 检查当前项目的首页和预约表单源文件。先获取最新规范,再按文件和行号列出问题,重点检查键盘操作、表单标签、焦点状态和响应式布局。先给出检查结果,暂不修改。
安装说明

适用于 Claude 的 Code/项目入口;聊天和 Cowork 的技能在账户设置中管理。

  1. 放入技能目录,或使用安装命令

    下载并解压,保留完整的 web-design-guidelines 文件夹,放入项目的 .claude/skills/ 目录。

    或在项目终端运行命令,需要 Node.js / npx。命令获取作者最新版本,可能与下载包不同。

    npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code
    查看原作者安装说明
  2. 确认技能已加载

    重新打开工具,在技能列表中确认 web-design-guidelines 可用。若没有出现,请按原作者说明检查安装目录。

检查结果

  • 问题定位到你指定的真实文件。
  • 关键问题能在浏览器中复现。
  • 修复后再次检查页面。

用过后,任务完成了吗?

web-design-guidelines — Apiara