夜雨聆风
上周让 AI 帮我写一个落地页，UI 挺好看的。
但我随手跑了一下无障碍检查——12 个按钮没有 aria-label，3 张图片没有 alt 属性，表单输入框连 label 都没绑。
更离谱的是，这个落地页的表单禁止了粘贴。用户输密码的时候不能粘贴，只能一个字母一个字母敲。
AI 写代码快是真的，但它压根不管你的 UI 符不符合规范。
后来我装了 Vercel 出的一个 Skill，叫 web-design-guidelines。装完之后，AI 写 UI 代码会自动对照 100+ 条规则检查，发现问题直接标出来。
48 万+装机——这不是一个小众工具。
AI 写的 UI 代码有多「糙」？
用 AI 写过前端的人都知道，它生成的 UI 代码有个通病：能跑，但不规范。
我测试了 5 个不同的 AI 工具，让它写同一个登录表单，结果：
5 个工具，没有一个全部及格。
这不是 AI 笨，是它压根没把这个当回事。它的目标是「能跑」，不是「跑得好」。
常见的坑：
1. 无障碍缺失：图标按钮没有 aria-label，图片没有 alt，表单没有 label
2. 性能隐患：大列表没有虚拟化，图片没有指定尺寸导致布局偏移
3. 交互细节缺失：按钮没有 hover/focus 状态，键盘导航不好用
4. 深色模式适配：颜色写死，切换深色模式直接白屏
5. 禁止粘贴：表单禁止用户粘贴，强迫用户手动输入
这些问题不影响功能，但影响用户体验。尤其是无障碍——不是"锦上添花"，是很多国家的法律要求。
web-design-guidelines：100+ 条规则，自动审查
这个 Skill 做的事情很简单：让 AI 写 UI 代码的时候，自动对照 Vercel 的 Web 界面设计规范检查。
安装：
用法：装完之后，让 AI 审查你的 UI 代码就行。
100+ 条规则覆盖 18 个类别，我挑几个重点的说：
每条规则都有错误写法和正确写法的对比，AI 学起来很快。
我的 3 个实际场景
场景 1：审查现有代码
我拿一个写了一半的 React 项目测试，让 AI 审查：
AI 输出了 15 个问题，每个都标注了文件和行号：
src/components/Header.tsx:8 — 导航元素缺少 aria-label src/components/LoginForm.tsx:23 — 输入框缺少 label 关联 src/components/LoginForm.tsx:25 — 表单禁止了用户粘贴 src/components/UserCard.tsx:5 — 图片缺少 alt 属性 src/components/UserCard.tsx:8 — 图片缺少 width/height（CLS 风险） src/components/DataTable.tsx:15 — 大列表未虚拟化（性能风险） ... |
重点来了：没有这个 Skill 的时候，AI 只会说"代码看起来没问题"。
装了之后，它能精准定位到具体文件和行号，告诉你哪里不符合规范。这 15 个问题，我自己排查至少要半小时，AI 10 秒搞定。
场景 2：写代码自动遵循
让 AI 新写一个用户设置表单：
装了 Skill 之后，AI 自动写出了符合规范的代码：
没装 Skill 之前，AI 可能写成：
<form> <input type="text" placeholder="邮箱" /> <input type="text" placeholder="密码" /> <input type="file" /> </form> |
区别：
• ✅ 有 label 绑定，屏幕阅读器能正确朗读
• ✅ 有 autocomplete，浏览器能自动填充
• ✅ 有正确的 input type，手机端弹出正确的键盘
• ✅ 有 aria-describedby，辅助技术能读到提示信息
• ❌ 没装的版本，以上全没有
场景 3：新项目建立规范
新项目开始前，我做了两件事：
第一件：下载 AGENTS.md 到项目根目录
第二件：在项目 README 里加一行说明
本项目使用 Vercel Web Interface Guidelines 作为 UI 代码规范。 AI 生成的 UI 代码必须符合这些规范。 |
效果：AI 在这个项目里写任何 UI 代码，都会自动遵循这套规范。相当于给 AI 装了一个「UI 审查员」，而且这个审查员会每次审查前自动拉取最新规则，不用担心规则过时。
这是其他 Skill 没有的机制——它不是写死在本地的规则，而是从 GitHub 实时获取的。
这个 Skill 为什么管用？
1. 规则实时更新：每次审查前自动从 GitHub 拉取最新规则，不用担心过时
2. 输出格式精准：文件:行号 格式，直接定位问题，不用自己翻代码
3. 有正反例：每条规则都有错误写法和正确写法，AI 学起来很快
4. Vercel 实战经验：不是纸上谈兵，是 Vercel 在 Next.js、Vercel 平台这些大项目中总结的
5. 非 Vercel 项目也能用：大部分规则是 Web 开发通用最佳实践，不绑定特定框架
跟 ESLint a11y 插件的区别：
• ESLint a11y = 语法层面（你有没有写错）
• web-design-guidelines = 设计规范层面（你该不该这么设计）
两者互补，不是替代。
避坑
1. 不是万能的：它能检查规则性的东西，但设计决策还是需要人来判断
2. 规则很多，不必全守：如果是内部工具，某些规则可以适当放宽
3. 定期更新：规则会迭代，建议每月跑一次 curl -fsSL https://vercel.com/design/guidelines/install | bash
4. 非前端代码别用：这是 UI 审查工具，拿去检查后端逻辑是浪费时间
5. 输出可能很多：如果项目代码量大，第一次跑可能会输出几十个问题，别慌，按优先级修就行
还有一点：这套规则是 Vercel 的偏好，不代表所有项目的最佳选择。但作为起点，它已经比大部分人的直觉靠谱多了。
总结
AI 写 UI 代码快，但质量需要工具来保证。web-design-guidelines 正好解决了这个痛点。
100+ 条规则记不住？没关系，装上这个 Skill，AI 帮你审。
与其让 AI 写出能跑但不规范的 UI，不如让它从源头就写对。
💬 你用 AI 写过前端代码吗？遇到过哪些 UI 规范问题？评论区聊聊。
如果觉得这篇文章有用，欢迎关注「AI 阿砚」，一个科研爱好者的 AI 探索笔记。