WEB-DESIGN-GUIDELINES · VERCEL LABS
AI 页面不高级？先给它做一次审查
CHECK-UP REPORT2026.10.03
受检对象web-design-guidelines出具方Vercel Labs检查项17 章节 · 100+ 条 · 14 条异常工具推荐Agent SkillVercel Labs约 2591 字阅读约 7 分钟静态代码审查
一样是 AI 写的页面，为什么有的看着高级、有的看着就是模板？差的不是审美，是一份能被逐条执行的检查表。这份 Skill 把 Vercel 的 100+ 条界面规范变成 AI 的体检项目，每次运行现拉最新版，然后用 file:line 把问题直接标出来。
AI 写的页面，现在一眼就能认出来。
但是你又无法描述它丑在哪里，这个skill可以像审查一样，把问题直接描述出来，再让Ai改。
这样你就不用讲怎么改了，用这个skill审查一遍，把问题全部标出来，接进工作流中；
AI做完页面，直接调用这个skill进行审查，给你提交审查结果，再让AI修改；
这个 skill 就是
web-design-guidelines
检查项 01
它是 Vercel 官方出的一张「体检表」
先说清楚它是什么。
web-design-guidelines 是 Vercel Labs 出的一个 Agent Skill，放在 vercel-labs/agent-skills 这个仓库里。
那个仓库现在的数据是 31.9k Star、2.8k Fork、275 次提交，MIT 协议，里面一共 8 个 Skill，它是其中一个。
vercel-labs/agent-skills 仓库首页：Star 31.9k、Fork 2.8k、275 commits（来源：GitHub 仓库页实拍）
它干的事，官方一句话就说完了——
Review UI code for Web Interface Guidelines compliance.
翻过来就是：对照 Vercel 的 Web Interface Guidelines，审查你的 UI 代码。
注意「审查」这两个字。这是理解它的关键。
它不生成页面。它读你的文件，然后告诉你哪一行有问题。
它背后的那套规范，是 Vercel 一直在维护的一份公开文档，官网在 vercel.com/design/guidelines，对应的仓库有 922 Star。
Vercel 官方规范页：Interactions / Clear focus / :focus-visible 等条目（来源：vercel.com/design/guidelines 官网截图）
那份文档开头有句话我挺喜欢——
Interfaces succeed because of hundreds of choices.
界面能做成功，靠的是几百个选择。
配色、间距、字体、焦点、动画、错误提示、空状态、长文本怎么截断……每一个都是选择。
这份规范，就是把这几百个选择一条条写下来。
而这个 Skill 做的事，是把这几百条规范变成 AI 能逐条执行的检查表。
检查项 02
它最聪明的地方，是规则不写死
如果它只是把规范抄进 Skill 里，那我不会专门写一篇。
网上抄规范的地方多了去了。抄完就过期。
它真正有点意思的设计是这个——
每次运行之前，它先去网上把最新规则拉一遍。
官方原文第一步写得明明白白：
Fetch the latest guidelines from the source URL
拉的是 GitHub 上 web-interface-guidelines 仓库的 command.md。
规则源文件 command.md：Accessibility / Focus States 等分区（来源：GitHub 源文件页实拍）
为什么这个设计重要？
因为设计规范是会变的。
今天流行的间距是 8 的倍数，明年可能就不是了。今天大家用 :focus，明天发现该换成 :focus-visible，不然鼠标用户点一下也冒个焦点圈，很烦。
规范一变，写死在 Skill 里的那套东西立刻就成了过期教材。
还是照本宣科的那种，最坑人。
而它每次现拉，等于你手里的永远是今天这一版。
我看到这个设计的时候停了一下。
因为它其实承认了一件事：没有一劳永逸的规范。
能一劳永逸的，只有「每次都去拿最新版」这个动作本身。
规则不写死：每次运行都去拉最新一版，旧版直接进「过期」筐
这套规则拆开看是 17 个章节，一百多条，从无障碍、焦点状态、表单、动画，一直管到排版、性能、深色模式、多语言格式。
它甚至还有一份 anti-patterns 黑名单，14 条，直接把坏味道点名。
异常项 / ANTI-PATTERNS共 14 条
transition: all动画全部属性
outline: none无替代方案
user-scalable=no禁掉缩放划重点
这份黑名单你单独抄出来当自查表都值
而且我还发现一个挺巧的事。
同一份规范，Vercel 让它同时服务四种用法。
网页上，它是一份给人读的文档。装成命令，它是一个斜杠指令。当 Skill 用，它是一次代码审查。扔进 AGENTS.md，它是常驻在项目里的规范。
四种形态，一个源头。
这个做法我挺佩服的。因为大部分团队写规范，写完就躺在那儿没人看。而它把同一份东西，铺到了人读的地方、人敲的地方、模型生成的地方、模型审查的地方。
规范不是写出来就有用的，得出现在你干活的那个位置上。
检查项 03
跑出来的结果长什么样
它输出的格式，我觉得比规则本身还值得说。
它最核心的产出，就是把问题直接标在出问题的那一行——不是给你一段评价，是给你一个能点的位置。
把问题直接标出来：像插旗一样标在出问题的那一行
跑一遍，你会看到这种东西：
text
src/Button.tsx
src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all → list properties
src/Card.tsx
✓ pass
没有前言，没有总结，没有「总的来说你的代码写得不错，但是……」。
就是文件、行号、问题。
file:line 这个格式意味着，大部分编辑器里点一下就能跳过去，改完拉倒。
官方在规则文件里对输出有硬要求，原话是：
State issue + location. Skip explanation unless fix non-obvious. No preamble.
说问题、给位置。除非修法不明显，否则别解释。别写开场白。
我看到 「No preamble」 这几个字的时候有点想笑。
因为这就是我们平时最想跟 AI 说的那句话。
它自己在规范里先把这事办了。
顺带说一句，它标出来的问题其实分两层。
一层是语法级的：缺 aria-label、图片没写宽高、表单没有 label。
另一层是设计层面的。
字体层级不够清楚、间距没有呼吸感、按钮的主次关系混乱。
前面那类是「错了」，后面那类是「能更好」。
一个 Skill 两件事都管，这是我一开始没想到的。
对我们这种非设计出身的人来说，后面那类更值钱。因为「错了」你能查出来，「能更好」你通常查不出来。
检查项 04
怎么装：一行命令
装法有三种，按你顺手的来。
第一种，npx，跨 Agent 最通用：
bash
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
想连整个集合一起装，就把后面的 --skill 去掉：
bash
npx skills add vercel-labs/agent-skills
第二种，Vercel 官方脚本，把它装成一个斜杠命令：
bash
curl -fsSL https://vercel.com/design/guidelines/install | bash
装完在 Claude Code 里直接敲 /web-interface-guidelines。官方说这个脚本支持 Claude Code、Cursor、OpenCode、Windsurf 和 Gemini CLI。
第三种，干脆别装。
把规则原文当提示词，直接喂给你在用的模型：
text
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
或者把那个 AGENTS.md 下到项目根目录，让规范在你生成代码的时候就生效。
官方对 AGENTS.md 的说法是：
Add AGENTS.md to your project so agents apply these guidelines during generation.
我挺推荐第三种里走 AGENTS.md 这条路的。
因为审查是事后，规范是事前。
让 AI 一开始就别写错，比写完再回来改一遍省事得多。
检查项 05
说点真的，它有三个边界
有一说一，这东西不是万能的。有三个地方你得先知道。
边界 01它只审不改
它给你一张问题清单，不会替你动手。
你看到 src/Button.tsx:42 - icon button missing aria-label，得自己回去加那一行。
想让它顺手改掉也行，追问一句「按这份清单改」，但那是你另外发起的动作，不是它的默认行为。
只审不改：报告给你，扳手推回你手里，「自动修复」那扇门锁着
边界 02它得联网
规则是每次现拉的，断网了它就退回模型自己的记忆。
那时候规则版本就说不准了，可能是三个月前的。
所以别在没网的环境里指望它给你「最新规范」。
边界 03它是静态审查，替代不了真人验收
它靠读代码判断，看不到真实渲染出来的样子。
键盘 Tab 一遍到底顺不顺、屏幕阅读器实际念出来是什么、手机上的按钮拇指够不够得着——这些它判断不了。
社区里就有开发者吐槽过，模型在页面布局上还是会出现元素重叠、定位难看、标题起始位置不齐这类问题。
这恰好说明规范清单和实际渲染是两件事。
清单能让它少犯低级错误，但页面最后长什么样，还得你自己打开看。
还有一个要特别提醒的：它里面有一部分不是通用规范。
规则正文后半段标了 「Vercel-specific」，官方自己写着：
These preferences reflect Vercel's brand & product choices. They aren't universal guidelines.
这些是 Vercel 的品牌偏好，不是通用规范。
比如标题和按钮用 Title Case、用 & 代替 and、数字和单位之间要加不换行空格——这些是 Vercel 自己的文案习惯，跟你的产品没关系。
你要是给自家产品定标准，这部分得自己筛一遍，别一股脑全用上。
说白了，它给你的是 Vercel 的答案。你自己那道题，还得自己判。
检查项 06
我为什么觉得它值得装
数据上它确实火。
第三方统计它的安装量大概 28.5 万次，在设计类 Skill 里算头部了。
中文社区里它也基本是常客——「让 AI 页面变高级」这类清单，它经常在里面。
但我觉得值得装的理由，跟这些数字没什么关系。
是它把一件很虚的事，变实了。
「设计感」「高级感」「AI 味」，这些词你没法执行。
而「第 42 行缺个 aria-label」「间距的对比不够」「hover 状态和静止状态一模一样」——这些能执行。
一份能被执行的规范，才叫规范。不能被执行的，那叫形容词。
规范是有保质期的。
今天正确的做法，明天可能就是坏味道。transition: all 现在就在它的黑名单里，因为它会把布局属性也一起动画了，卡顿就是这么来的。
所以那个「每次现拉」的设计，才不是炫技。
它是唯一诚实的做法。
社区里也有另一种声音，我觉得挺真实。
有人说这类审查型 Skill 解决不了根本问题——你想要的是「AI 直接做出好看的页面」，它给你的是「AI 告诉你哪儿不好看」。
这个吐槽我认。
它确实不是整容医生。它是一份体检报告。
体检报告不会替你健身。但它会告诉你哪儿该改。
而大部分人跟 AI 之间真正的问题，恰恰不是「它做得不够好」。
是它不知道自己哪里不好，你也不知道该怎么说。
这份报告解决的，是后者。
回到开头那句话——AI 写的页面，为什么一眼就能认出来？
因为它没有清单。你有。
— REPORT END —
结论：这份体检单，大部分人都缺
