让Claude帮你做UI「体检」：这个设计规范审查Skill太实用了

做过 UI 的一定要看这张清单

你有没有这种感觉——自己写的页面，功能全对，但总感觉哪里不对劲？说不上来，就是看着不舒服。

很多时候不是审美问题，而是踩了 Web 设计的「隐形坑」——无障碍（Accessibility）不达标、响应式布局有盲区、字体层级混乱……这些问题靠人眼扫很难发现。

最近我发现了一个 Claude Skill，叫 web-design-guidelines，专门给 UI 代码做「体检」。

它能干什么？

当你对 Claude 说「帮我 review 一下这个页面」「看看我的 UI 有没有 accessibility 问题」，它就会自动：

• 拉取 Vercel 官方维护的 Web Interface Guidelines 最新规则
• 逐条对照你代码里的文件
• 按规范格式输出问题清单，精确到文件+行号

规则覆盖范围很广：无障碍标签、键盘导航、颜色对比度、触控区域大小、响应式断点、字体层级……全都有。

谁适合用？

前端开发者：写完页面顺手跑一遍，把常见设计坑提前堵了。
设计师：交接给开发后，用它检查实现是否符合你的设计规范。
AI 编程爱好者：让 Claude 生成 UI 后，用它做质量把关，比自己读代码快 10 倍。

怎么用？

在 Claude Code 里输入：

/skills add web-design-guidelines
或

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

然后直接说：「review 我的 UI 代码」，它会提示你输入要检查的文件或路径。

我的感受

最大的惊喜是它每次都会实时拉取最新规则——不用担心用的是过时标准。而且输出格式是「文件:行号」的形式，可以直接定位到问题代码，改起来特别快。

对于我这种「重功能轻设计」的开发者来说，这个 Skill 帮我补了很大一块短板。强烈建议人手一个。

GitHub：https://github.com/vercel-labs/agent-skills

GitHub: https://github.com/vercel-labs/agent-skills