夜雨聆风场景痛点
小林用 Claude Code 写前端快两个月了。一开始确实爽，改个小需求、修个 Bug，描述两句就能出代码。但写了两周就发现不对劲——
同样的 Tailwind 颜色规范，AI 每次生成的颜色都不太一样。路由文件命名，一会儿 kebab-case 一会儿 camelCase。最离谱的是有一次，它直接把 API 调用写成了 fetch('http://localhost:3000')，而这项目测试环境端口是 8080。
"改一次没问题，每次都改就太累了。"小林翻了翻 Git 记录，上个月一共提了 47 个 PR，有 19 个 AI Review 都因为规范问题被打回来。算算时间，平均每个 PR 多花 15 分钟修这种低级问题。
一个月下来，光是给 AI 擦屁股就浪费了将近 5 个小时。小林心想：花 20 美金月费请个"帮手"，结果还得自己盯着改规范，还不如不用。
这不是小林一个人的问题。Vercel 的工程博客里，他们的前端负责人提到过一个数据：团队里用 AI 编程工具的开发者，平均每 3 个 PR 就有 1 个因为代码规范问题被打回。换算是——如果一个开发者每周提 10 个 PR，每个月就有超过 10 个小时花在"教 AI 守规矩"上。
问题根源很清楚：AI 编程助手每次对话都是"失忆"状态，它不知道你项目的 ESLint 规则是什么，不知道你团队约定用 kebab-case 还是 snake_case，更不知道你项目的 API 基础地址是啥。
解决方案
其实问题不在 AI 本身，而在于它根本不了解你的项目。
2026 年 5 月，AI Skill 包这个概念彻底火了。说白了就是给 AI 编程助手写一份"工作说明书"——告诉它你的项目规范、代码风格、常用命令、目录结构。相当于招聘一个新同事，不是让他裸着上手，而是先给他看新人手册。
GitHub 上目前最热的几个项目，数据相当能说明问题：
mattpocock/skills 这个项目尤其夸张，3 个月从 0 涨到 11 万 Star——比其他方向的项目涨得都快。Bolt 创始人也在播客里说过一句话："没装 Skill 包的 AI 编程工具，就像让一个没看过代码库的实习生直接上手干活。"
核心逻辑就两条：
用 .claude/skills/或.cursor/skills/目录，把项目规则写成 MarkdownAI 在回复前自动读取这些规则，生成代码时自动遵循
不用改工作流，不用装插件，写几个 Markdown 文件就行。
更有意思的是，Reddit 上 r/cursor 板块有个热帖，一个独立开发者说自己给 Claude Code 写了 6 个 Skill 文件之后，AI 生成的代码首次通过 Code Review 的比例从 32% 提升到了 78%。这相当于每写 5 次代码，能少改 2 次。
实操步骤
下面以 Claude Code 为例，从零搭一套 Skill 包。用了两周的小林实测，不规范 PR 从 19 个降到了 3 个。
第一步：创建 Skills 目录
在项目根目录创建文件夹：
mkdir -p .claude/skills
每个 Skill 就是一个 Markdown 文件，AI 会在对应场景自动加载。Claude Code 会在每次对话开始前读取这个目录下的所有 .md 文件，相当于每次都先"预习"一遍你的项目规范。
第二步：编写三个核心 Skill（按优先级排列）
Skill 1 — 项目规范 (project-conventions.md)
这是最基础的一个，告诉 AI 你的项目怎么组织、用什么规范：
Skill 2 — API 调用规范 (api-rules.md)
这是小林的"血泪教训"——之前 AI 总是写错接口地址和错误处理：
Skill 3 — 组件开发模板 (component-template.md)
告诉 AI 你的组件长什么样，它会自动套用模板：
# 组件开发模板
## 必须包含
- TypeScript 接口定义（export）
- JSDoc 注释说明用途
- loading/error/empty 三种状态处理
## Tailwind 配色规范
- 主色: blue-600 / blue-700
- 背景: gray-50 (浅) / gray-900 (深色模式)
- 文字: gray-900 (标题) / gray-600 (正文)
- 边框: gray-200
- 圆角统一 rounded-lg (8px)
- 间距使用 Tailwind 默认间距 (4px 递增)
## 组件导出规范
- 默认导出组件本身
- 导出 Props 接口供外部引用
- 文件末尾加 export default 声明
第三步：场景化 Skill（按需添加）
除了这三个基础 Skill，还可以按场景分类创建更多。比如小林的团队还加了：
每个 Skill 文件控制在 50 行以内，太多 AI 反而吃不下。Claude Code 的上下文窗口虽然大，但 Skill 内容是要占 token 的，太长的 Skill 会挤压真正写代码可用的 token 空间。
第四步：验证效果
写完后可以直接测试——在终端里输入：
claude "按照项目规范帮我新建一个用户列表页面"
AI 会先读取 Skills 目录下的文件，然后按规则生成代码。小林试了一下，生成的代码文件命名正确、API 调用用了 apiClient、颜色自动匹配 Tailwind 规范——一次过。
如果想更精细地控制，可以在具体对话里引用某个 Skill，比如：
claude "参考 Skills 里的 api-rules.md，帮我重构 src/lib/fetch.ts"
Claude Code 会优先加载你指定的 Skill 文件。
更多技巧
.claude/skills/，团队 Skill 放共享仓库 | ||
react-component.md） | ||
donts.md 列禁止做法 |
效果总结
小林团队用 Skill 包两周后的数据：
- 不规范 PR 数量
：从 19 个/月 → 3 个/月（下降 84%） - Code Review 耗时
：平均每个 PR 从 15 分钟降到 4 分钟 - 新人上手时间
：新同事配好 Skill 后，第一天就能提交合规范代码 - AI 生成代码首次通过率
：从 32% 提升到 78%
社区数据更直观。mattpocock/skills 项目下的 Issue 里，有个 12 人前端组分享：全面接入 Skill 包后，ESLint 报错从每周 340 条降到 28 条。另一个独立开发者说："以前每次开新项目都要手动写一遍规范说明，现在直接复用 Skill 模板，5 分钟搞定。"
ByteDance 的 UI-TARS-desktop 项目（3.6 万 Star）也在官方文档里加了 Skills 目录，贡献者提交 PR 前 AI 会自动按他们的规范检查代码格式。
说到底，Skill 包解决的问题其实很朴素——**不是 AI 不够聪明，是你没告诉它你想怎么做事。**花 20 分钟写好 Skill，每天能省下至少半小时的"改规范"时间。一个月就是 10 个小时，够刷完一整季《三体》了。
