AI 工具箱 · Vercel Web 设计规范

Vercel Web 设计规范:53 万装机的官方审计器,管的是页面对不对

🏛️ Vercel 官方出品:装机 53.2 万次,设计类安装量第二,仅次于 Anthropic 那条。Next.js 就是这家公司做的。

一、它跟「让页面好看」的 skill 不一样

大部分设计 skill 管的是好不好看——配色、留白、层次。这条管的是另一件事:对不对、能不能用

按钮点击区域够不够大、色彩对比度过不过关、键盘能不能操作、加载时会不会跳来跳去、表单报错说没说人话——这些不影响第一眼观感,但直接决定用户能不能把事办完。

所以它和 Anthropic 那条是互补的,不是二选一:一个管审美,一个管可用性,两条一起装才是完整的两条腿。

二、管哪些事

无障碍:对比度、焦点顺序、键盘操作、屏幕阅读器能不能读
性能:首屏快不快、加载时版面跳不跳、图片有没有压
交互体验:状态反馈、错误提示、空状态、加载态、移动端手势

共 100 多条,出问题的地方按 「文件:行号」列出来,点开就能改,不用自己找。

三、规则会自己更新

它不把规则写死在本地,而是每次审计前从 Vercel 官方仓库拉一次最新版。好处很实在:Web 标准每年都在变,你装一次,标准跟着官方走,不用自己惦记升级。

四、适合谁

页面做出来了,但不确定有没有低级毛病的人
要交付给客户、怕被挑出无障碍问题的一人公司
做小程序、App 界面的人——这些原则跟渲染引擎无关,换平台照样成立
⚠️ 一句实话:规则自动更新的另一面,是它运行时要联网,从 GitHub 拉规则文件——不是那种下载完就能断网用的纯文本 skill,内网或离线环境会失效。另外封装仓 vercel-labs/agent-skills 没放开源协议(规则仓是 MIT),自己装了用没问题,但要打包分发给别人之前得先问清授权。
AI 助手