我如何用 AI Skill 体系让前端团队提效 50%
不是让 AI 写更多代码，而是让 AI 懂你的项目规范、设计规范、编码风格。
目录
- 从「AI 写代码不靠谱」说起
- 我搭了什么：一套四层 AI Skill 体系
- 不只是前端：PM 和设计也有技能包
- 团队怎么用：零成本接入
- 隐藏武器：开发者风格蒸馏
- 效果数据
- 社区生态：30+ 工具的能力矩阵
- Token 管理：省钱也是能力
- 你也可以这样做
从「AI 写代码不靠谱」说起
如果你已经在用 AI 辅助编程，大概率经历过这个阶段：
刚开始——惊艳。"帮我写一个表单组件"，刷刷刷就出来了。
一周后——失望。生成的代码不符合项目规范，样式用了 inline style 而不是 CSS Modules，组件命名不对，接口类型全是 any，提交前得改半天。
最后——放弃。"还不如自己写，改它的代码比自己写还慢。"
问题出在哪？
不是 AI 不够聪明，而是它不了解你的项目。
就像让一个刚入职的高级工程师写代码——技术能力没问题，但他不知道你们团队用 Less 还是 Tailwind，不知道组件放 src/components/ 还是 src/views/，不知道 commit 要用 Conventional Commits 格式。
他缺的不是能力，是上下文。
所以我花了几个月，搭了一套系统，专门解决这个问题。
我搭了什么：一套四层 AI Skill 体系
我把"让 AI 懂项目"这件事，拆成了四层：
┌─────────────────────────────────────────┐
│ 分发层 fe-template-skill │
│ "团队成员 clone 后零成本使用" │
│ │ │
│ ▼ │
│ 编排层 fe-hub │
│ "所有任务的统一入口 + 调度中枢" │
│ │ │
│ ┌───────────┼───────────┐ │
│ ▼ ▼ ▼ │
│ 配置层 规范层 能力层 │
│ fe-agent-init fe-base-skill fe-engineer│
│ "自动扫描项目" "质量检测" "7 大能力" │
└─────────────────────────────────────────┘
每一层解决一个具体问题。
配置层：5 分钟让 AI 了解你的项目
fe-agent-init 会自动扫描你的项目——读 package.json 判断技术栈，读 tsconfig.json 判断 TypeScript 配置，读 .eslintrc 判断代码规范，读 .prettierrc 判断格式化偏好。
然后自动生成两个文件：
- AGENTS.md：告诉 AI "这个项目用 React 19 + TypeScript + Less + antd v6，组件放这里，API 放那里，禁止用 inline style，禁止用 any"
- DESIGN.md：告诉 AI "这个项目的主色是
#1677FF，圆角用8px，间距用 8px 倍数，用 antd 的 Token 系统"
生成一次，整个团队共享。AI 从此不再"裸奔"。
我还做了 7 套设计风格预设模板——暗黑 UI、管理后台、期刊排版、玻璃拟态、极简 SaaS 等等。告诉 AI "用暗黑风格"，它就知道背景用 #0A0A0A，文字用三级灰度，强调色只用一个。
规范层：写完代码自动检测
fe-base-skill 在每次代码变更后自动执行 5 步检测：
Step 1: 语法和类型检测 → 有没有 TypeScript 错误
Step 2: 样式检测 → 有没有用 inline style、硬编码颜色值
Step 3: 性能检测 → 有没有在渲染路径做耗时操作、列表缺少 key
Step 4: 安全检测 → 有没有硬编码密钥、XSS 风险
Step 5: 规范检测 → 命名是否规范、导入是否正确、commit 格式是否对
检测不通过，AI 会自己修复（简单问题）或询问你（复杂问题）。
最重要的是，它还会自动生成符合 Conventional Commits 格式的 commit message。再也不用想 feat 还是 fix，scope 写什么了。
能力层：7 个子 Skill 覆盖前端全流程
fe-engineer-pack 包含 7 个子 Skill，对应前端工程师每天都在做的事：
| 子 Skill | 解决什么问题 | 典型场景 |
|---|---|---|
| S1 技术方案 | PRD → 技术方案文档 | 需求评审后出方案 |
| S2 组件生成 | 一句话 → 完整组件代码 | "帮我写一个可编辑表格" |
| S3 Code Review | 自动审查代码质量 | 提 PR 前自检 |
| S4 接口联调 | Swagger/YAPI → TypeScript 类型 | 前后端对接口 |
| S5 Bug 诊断 | 报错信息 → 定位原因 + 修复方案 | 线上报错排查 |
| S6 性能审计 | 代码 → 性能优化建议 | 页面卡顿排查 |
| S7 文档生成 | 代码 → 技术文档 | 给模块补文档 |
关键是，这 7 个 Skill 不是独立的，它们之间可以链式调用：
用户："帮我做这个需求"
→ S1 出技术方案（等用户确认）
→ S2 生成组件代码
→ fe-base-skill 自动检测
→ S7 生成文档
→ 自动生成 commit message
一条龙。
编排层：统一入口 + 智能调度
fe-hub 是整个体系的大脑。你不需要记住"S1 是技术方案、S5 是 Bug 诊断"——你直接说你要做什么，fe-hub 自动判断应该调用哪个 Skill。
它还负责：
- 会话追踪：记住你这次会话做了什么，下次继续
- Token 管理：四级上下文压缩，自动丢弃不重要的历史信息
- 错误恢复：Skill 执行失败时自动重试或降级
不只是前端：PM 和设计也有技能包
光有前端 Skill 不够。需求从哪来？设计规范谁定？
所以我又做了两个技能包：
pm-engineer-pack：9 个产品经理 Skill
| 子 Skill | 能力 |
|---|---|
| P1 PRD 撰写器 | 模糊想法 → 结构化 PRD |
| P2 竞品分析器 | 竞品 URL → 分析报告 |
| P3 功能优先级 | 功能列表 → RICE 排序 |
| P4 用户故事 | 需求 → 用户故事卡片 |
| P5 上线规划 | 任务 → 上线清单 |
| P6 干系人同步 | 进展 → 汇报文档 |
| P7 数据看板 | 指标 → 看板设计 |
| P8 原型生成器 | 截图/描述 → 可交互原型 |
| P9 需求拆解器 | PRD → 前后端研发任务 |
designer-pack：6 个设计 Skill
覆盖设计规范制定（D1）、组件规格（D2）、设计走查（D3）、无障碍审计（D4）、响应式方案（D5）、设计交付（D6）。
三个技能包的协作链路
PM 写 PRD（P1）
→ PM 拆研发任务（P9）
→ 前端出技术方案（S1）
→ 设计出设计规范（D1）
→ 前端生成组件（S2）
→ 设计走查（D3）
→ Code Review（S3）
→ 上线（P5）
团队怎么用：零成本接入
这是我最满意的部分——fe-template-skill。
管理员执行一行命令：
bash ~/.agents/skills/fe-template-skill/bin/fe-skill-init.sh
它会在项目里生成一个 .agents/manifest.json，记录这个项目需要哪些 Skill、版本号多少。
团队成员 clone 项目后，AI 助手会自动读取 manifest.json，检测本地有没有对应的 Skill，没有的就提示安装。
成员不需要知道 Skill 体系的存在。 AGENTS.md 本身就提供了基础规范——有 Skill 更强，没 Skill 也能用。
隐藏武器：开发者风格蒸馏
fe-developer-distill 可能是整套体系里最有意思的 Skill。
它会分析一个开发者的 Git 提交记录和代码文件，提取出这个人的编码风格——命名习惯、组件结构偏好、注释风格、错误处理方式。
然后生成一份"开发者画像"，AI 之后写代码就会按照这个人的风格来。
这意味着什么？
团队里的 Senior 可以把自己的编码风格"蒸馏"出来，让 AI 帮 Junior 写出 Senior 风格的代码。
还可以把多个人的蒸馏结果取交集，生成"团队编码风格基线"，补充到 AGENTS.md 里。
效果数据
说几个具体的数字（来自我自己的使用体验）：
| 场景 | 之前 | 之后 | 提效 |
|---|---|---|---|
| 新需求出技术方案 | 2-4 小时 | 30 分钟（AI 出初稿 + 人工审核） | ~75% |
| 写一个中等复杂度组件 | 2-3 小时 | 40 分钟（AI 生成 + 人工调整） | ~70% |
| Code Review 一个 PR | 30-60 分钟 | 10 分钟（AI 先筛 + 人工复核） | ~70% |
| 接口联调对齐类型 | 1-2 小时 | 10 分钟（Swagger → TypeScript 自动生成） | ~85% |
| Bug 排查定位 | 30 分钟-2 小时 | 15 分钟（AI 给 Top3 原因 + 验证路径） | ~60% |
| 写 commit message | 每次 2-3 分钟 | 0（自动生成） | 100% |
| 补技术文档 | 不写（因为懒） | 5 分钟（AI 生成初稿） | ∞ |
综合下来，日常开发效率提升大概在 40-60% 之间。取中间值，50%。
但更重要的是质量提升——AI 生成的代码一定符合项目规范（因为 AGENTS.md 约束了），一定有类型定义（因为 fe-base-skill 检测了），一定有规范的 commit message（因为自动生成了）。
提效 50% 不是写更多代码，而是少返工、少纠错、少沟通。
社区生态：30+ 工具的能力矩阵
除了自己做的 Skill，我还整理了一份社区 Skill 能力矩阵，按 10 个分类收录了 30+ 工具：
| 分类 | 示例工具 |
|---|---|
| 🔒 项目边界 | vercel-react-best-practices、typescript-advanced-types |
| 🧩 组件和界面 | nextjs-app-router-patterns、tailwind-design-system |
| 🔍 Review 和测试 | playwright-best-practices、vitest |
| 🎯 体验和交付 | responsive-design、web-accessibility |
| 📦 工具链与规范 | antfu/skills（4.6k⭐）、moderncss/skills |
| 🗺️ 领域专项 | amap-skills（高德地图官方）、threejs-skills |
| 🎨 原型生成 | image2proto、url2proto |
| 🔒 安全测试 | hack-skills |
| 🕷️ 内容抓取 | Jina Reader、Crawl4AI |
| 🤖 浏览器智能体 | agent-browser、PageAgent（阿里开源） |
每个工具都标注了"fe-xxx 体系是否已覆盖"，避免重复安装。
Token 管理：省钱也是能力
AI 跑起来，Token 是钱。所以我在 fe-hub 里做了四级上下文压缩：
| 级别 | 策略 | 节省 |
|---|---|---|
| L1 | 丢弃工具调用细节，保留结论 | ~20-30% |
| L2 | 仅保留 Skill 调度链 + 关键决策 | ~40-50% |
| L3 | 仅保留当前任务上下文 | ~60-70% |
| 智能路由 | 简单任务给小模型，复杂任务给大模型 | ~70% |
搭配社区的 Caveman（输出端压缩，省 ~50-65%），可以实现"双向节省"。
有一篇论文甚至发现：限制大模型输出简短回复，在某些基准测试上反而提升了 26% 准确率。省 token ≠ 牺牲质量。
你也可以这样做
整套体系的核心思路其实很简单：
1. 给 AI 上下文 —— 在项目根目录创建一个 AGENTS.md，把你们团队的规范写进去
2. 给 AI 工作流 —— 不是"帮我写代码"，而是"按这个流程：方案 → 代码 → 检测 → 文档 → commit"
3. 给 AI 护栏 —— 不能改的文件列清楚，不能用的写法列清楚，检测不通过就修复
4. 给团队分发 —— 一次配置，全团队共享，零成本接入
不需要造完整个体系才能开始。先从第 1 步开始——创建一个 AGENTS.md，把你们团队的规范写进去。
就这一步，AI 写的代码质量就会有明显提升。
总结
| 你可能在想 | 我的回答 |
|---|---|
| "AI 写代码不靠谱" | 不是它不靠谱，是你没给它规范 |
| "这套东西搭起来很麻烦吧" | 先从 AGENTS.md 开始，5 分钟就行 |
| "团队不愿意用怎么办" | 不需要团队改习惯——成员 clone 后自动生效 |
| "效果真的有 50%？" | 单点任务提效 60-85%，综合日常 40-60%，保守说 50% |
与其等 AI 变得更聪明，不如先让它变得更了解你。
如果你也在用 AI 辅助前端开发，欢迎在评论区交流你的实践经验。觉得有用的话，点个赞 👍 收藏一下，后面我会继续分享 Skill 体系的实战细节。
