web-design-guidelines

Claude Code web-design-guidelines 安装：输出带行号的界面检查

Claude Code 安装步骤

打开文末 GitHub 固定版本，从同一提交下载仓库快照。将 skills/web-design-guidelines/ 整目录复制到目标项目的 .claude/skills/web-design-guidelines/，保留 SKILL.md 和同目录参考文件。
从项目目录启动 Claude Code，在 / 菜单查找 /web-design-guidelines，然后用下方样例确认技能可调用。

Vercel Web Design Guidelines 技能读取指定界面文件，使用上游当前规则检查可访问性和交互，并定位到文件与行号。

新建练习文件 index.html，放一个只有购物车 SVG 的按钮，不提供可访问名称。请用 web-design-guidelines 只检查 index.html。

报告应定位没有名称的按钮。修订后可在浏览器无障碍树核对按钮名称，最终效果还需人工键盘走查。

GitHub 原文 · 更新日期 2026-11-11

Claude Code 需要读取 UI 文件并能访问上游公开规则。技能会在审查时获取现行规则。

固定提交锁定技能文档，执行时技能仍会读取上游最新界面规则。复查时可记录规则读取时间和版本。