写代码时 AI 总给你”能用但丑”的页面？Vercel 开源了一套 Skills 帮你兜底

你有没有过这种经历——

让 Claude Code / Cursor 写个登录页，代码能跑，样式也能看，但仔细一看：没有 focus 状态、按钮热区太小、iOS Safari 点了输入框直接放大、暗黑模式下颜色全崩。

这些问题单个都不致命，但堆在一起就是”一看就不是产品级”。

Vercel 把团队 10 年的前端经验打包成了一个开源 Skills 包，装上之后 AI 写代码时会自动对照规则检查——相当于给 AI 配了一个懂最佳实践的资深前端合伙人。

包里都有什么

这个仓库（29K+ Stars）是一套 Skills 合集，最有价值的几个：

• vercel-react-best-practices（562K 安装量）：40+ 条 React/Next.js 性能规则，覆盖消除请求瀑布流、包体积优化、重渲染问题，每条标了优先级（Critical / High / Medium）。
• web-design-guidelines（473K 安装量）：100+ 条 UI/可访问性规则，从键盘可达性、焦点环、表单处理、动画、国际化，到暗黑模式全包。
• deploy-to-vercel（94K 安装量）：写完直接部署，支持 40+ 框架，聊天窗口里就能发到 Vercel 拿预览地址。

怎么用

一条命令装完，不需要额外配置：

npx skills add vercel-labs/agent-skills

装完后，写 React 组件时 AI 会自动检查性能问题；提到部署时自动调用 Vercel 部署流程；做 UI 时会对照 Web Interface Guidelines 逐条过一遍。

你不需要记这些规则，AI 会替你做 Code Review。

为什么值得装

很多 Skills 是”帮你做某件事”，这个 Skills 包是”让 AI 做某件事时更靠谱”——是一种元能力提升。Vercel 的团队在 React 生态深耕这么多年，把隐性知识结构化输出，对个人开发者来说是性价比最高的学习捷径。

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

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