第10章给 AI 装上「技能包」

开场：AI 像新员工

想象你招了一个超级聪明的新员工。

他什么都能学会，学习能力超强。但每次都要你从头教：

"这个文件放这里" "那个函数这样写" "测试要先写再实现" "我们的颜色规范是 #3B82F6"

一遍又一遍，很累对吧？

如果有一个"入职手册"呢？

新员工来了，给他手册。他照着做，不用你每一步都教。

"技能包"就是这个"入职手册"——给 AI 的。

有了技能包，AI 不只是"聪明的助手"，而是"懂你团队规范的资深员工"。

你会学到什么

什么是 Superpowers
技能包的结构和工作原理
Superpowers 的 7 步开发流程
如何写你自己的技能包
常用技能包示例

第一节：什么是 Superpowers？

Superpowers 是 Claude Code 最流行的技能框架。

简单来说，它是一套"方法论编码系统"——把资深工程师的工作方法，写成 AI 能理解和遵循的规则文件。

一个类比

没有 Superpowers	有 Superpowers
AI 像聪明的实习生	AI 像有经验的老员工
每次都要详细解释	它懂"套路"
结果不稳定	结果可预期
你说要优化，它全改了	它知道什么是真正的优化
你说要测试，它随便写写	它知道 TDD 的红-绿-重构

[图 10-1] Superpowers 的作用示意

图表说明：对比图。左侧是一个人拿着放大镜仔细看代码，旁边写着"没有技能包：每次都要解释"。右侧是一个机器人自动工作，旁边写着"有技能包：按规范自动执行"。

SVG 生成提示词： "A side-by-side comparison. Left: A person with magnifying glass examining code, label '没有技能包 - 每次都要解释'. Right: A robot working autonomously on code, label '有技能包 - 按规范自动执行'."

Superpowers 的本质

Superpowers 的本质是：把"怎么做"编码成规则。

传统方式：

你：帮我优化这个函数
AI：[把函数重写一遍]
你：不是这样，我是想让你提取重复代码
AI：[又重写一遍]
你：还是不对，应该是...

用 Superpowers：

你：帮我优化这个函数（按照代码审查技能包）
AI：[按照技能包里的优化规则执行]
AI：我发现这段代码有重复，可以提取一个 helper 函数。
AI：这个函数太长了，建议拆成两个小函数。
AI：命名不够语义化，建议改成 calculateTotalPrice。

第二节：Superpowers 的 7 步开发流程

Superpowers 定义了一套完整的开发流程。请见表 10-1。

表 10-1 Superpowers 7 步开发流程

步骤	英文名	做什么	为什么
1	Brainstorming	头脑风暴，澄清需求	避免做错方向
2	Git Worktree	创建隔离分支	不影响主代码
3	Plan Writing	把工作拆成小任务	快速反馈
4	TDD Execution	测试先行开发	质量保证
5	Code Review	代码审查	及时发现问题
6	Verification	验证功能	确保做对了
7	Completion	合并、清理、归档	完美收官

让我们详细看看每一步。

步骤 1：Brainstorming（头脑风暴）

做什么：用苏格拉底式对话澄清需求。

AI 不是直接开始写代码，而是先问问题：

"这个功能的用户是谁？"
"核心需求是什么？"
"有没有边界情况要考虑？"
"这个和现有的功能冲突吗？"

为什么：避免做错方向。

返工是最浪费时间的事情。花 5 分钟澄清需求，比花 2 小时返工划算。

步骤 2：Git Worktree（隔离环境）

做什么：创建一个独立的 Git 分支。

git worktree create ../my-feature-branch

在这个独立分支里工作，不影响主代码。

为什么：敢于尝试。

在新分支里，不用担心弄坏主代码。可以大胆尝试，出了问题直接删掉分支。

步骤 3：Plan Writing（写计划）

做什么：把工作拆成 2-5 分钟的小任务。

- [ ] 创建数据库表
- [ ] 写 API 端点
- [ ] 写前端组件
- [ ] 连接前后端
- [ ] 测试

为什么：快速反馈。

每个小任务完成后，你都能看到进展。而不是写了一大堆代码，最后发现跑不通。

步骤 4：TDD Execution（测试先行开发）

做什么：先写测试，再写实现。

1. 写一个失败的测试
2. 写刚好能让测试通过的代码
3. 重构代码
4. 重复

为什么：质量保证。

先写测试，你知道"完成"的标准是什么。代码写完，测试通过，功能就对了。

步骤 5：Code Review（代码审查）

做什么：每个任务完成后，让 AI 审查代码。

AI 会检查：

代码风格是否符合规范
有没有安全隐患
有没有更简单的实现方式
有没有遗漏的边界情况

为什么：及时发现问题。

别等问题累积。每一步都做好，最后就是好的。

步骤 6：Verification（验证）

做什么：确保功能真的工作了。

不只是"代码能跑"，而是：

功能符合需求吗？
用户能正常使用吗？
有没有明显的 bug？

为什么：确保做对了。

代码能跑不代表做对了。验证是确认"做对"的步骤。

步骤 7：Completion（完成）

做什么：合并分支、清理临时文件、归档记录。

git merge my-feature-branch
git worktree remove ../my-feature-branch

为什么：保持工作区整洁。

每次完成都清理好，下次开始时就是一个干净的环境。

[图 10-2] Superpowers 7 步流程

图表说明：一个圆形或循环流程图，显示 7 个步骤：Brainstorming → Git Worktree → Plan Writing → TDD Execution → Code Review → Verification → Completion。每一步有对应的图标。

SVG 生成提示词： "A circular flow diagram with 7 steps: 1.Brainstorming(对话图标) → 2.Git Worktree(分支图标) → 3.Plan Writing(清单图标) → 4.TDD Execution(测试图标) → 5.Code Review(审查图标) → 6.Verification(勾选图标) → 7.Completion(完成图标). Arrows connect each step in a circle."

第三节：技能包的结构

一个技能包是一个 Markdown 文件，有固定的结构。

---
name: your-skill-name
description: 一句话描述这个技能做什么
version: 1.0.0
author: Your Name
---

## 技能什么时候用

**场景**：[什么情况下用这个技能]

**触发条件**：用户说什么话时会触发

---

## 技能做什么

[详细的工作步骤]

---

## 约束和规则

**必须遵守**：
- [规则1]
- [规则2]

**绝对不要**：
- [禁止1]
- [禁止2]

各部分说明

头部元数据：

name：技能的名称，用小写和连字符
description：一句话说明这个技能做什么
version：版本号
author：作者

什么时候用：

说明这个技能的使用场景和触发条件。

AI 会根据这些信息判断什么时候调用这个技能。

做什么：

详细的工作步骤。这是技能的核心内容。

要写得足够具体，让 AI 能照着做。

约束和规则：

必须遵守什么，绝对不要做什么。

这些约束确保 AI 按你想要的方式工作。

第四节：一个完整的技能包示例

让我们看一个实际的技能包：测试先行开发（TDD）。

---
name: test-driven-development
description: 测试先行开发的技能包
version: 1.0.0
author: Superpowers Team
---

## 技能什么时候用

**场景**：用户要实现新功能或修复 bug 时

**触发条件**：用户说"添加一个功能"或"修复这个 bug"

---

## 技能做什么

遵循 TDD 的红-绿-重构循环：

### 第一步：写失败的测试

先写一个测试，验证我们要实现的功能。

测试应该：
- 清晰描述期望行为
- 目前会失败（因为功能还没实现）

示例：
```javascript
test('计算折扣价格', () => {
  expect(calculateDiscount(100, 0.1)).toBe(90)
})

第二步：写最简单的实现

写刚好能让测试通过的代码。

不要过度优化，先让它跑起来。

示例：

function calculateDiscount(price, discount) {
  return price * (1 - discount)
}

第三步：重构

测试通过了，检查代码：

有重复吗？
可以更清晰吗？
需要提取函数吗？

重构后确保测试仍然通过。

第四步：重复

继续下一个小的功能点。

约束和规则

必须遵守：

每个功能先写测试
测试失败时不要写新功能
重构时保持测试通过
测试要简单易懂

绝对不要：

一次写太多代码
跳过测试直接实现
在测试失败时继续
写太复杂的测试


### 这个技能包的使用效果

**没有技能包时**：

你：添加一个计算折扣的功能

AI：[直接写实现代码，没有测试]

你：这有问题，没有边界情况处理...

AI：[又改了一版，还是没测试]

你：能不能先写测试？

AI：[随便写了个测试，覆盖率很低]


**有技能包时**：

你：添加一个计算折扣的功能

AI（使用 TDD 技能）：好的，让我遵循 TDD 流程。

第一步：写测试

describe('calculateDiscount', () => {
  test('正常折扣', () => {
    expect(calculateDiscount(100, 0.1)).toBe(90)
  })

  test('折扣不能超过100%', () => {
    expect(calculateDiscount(100, 1.5)).toBe(0)
  })

  test('价格不能为负', () => {
    expect(calculateDiscount(-100, 0.1)).toBe(0)
  })
})

运行测试... 失败了，因为函数还不存在。

第二步：写实现

function calculateDiscount(price, discount) {
  if (price < 0) return 0
  if (discount > 1) discount = 1
  if (discount < 0) discount = 0
  return price * (1 - discount)
}

运行测试... 通过了！

第三步：重构

代码已经很简洁了，不需要重构。

功能完成！


---

## 第五节：Superpowers 自带的核心技能

Superpowers 自带了很多常用技能。请见表 10-2。

**表 10-2 Superpowers 核心技能**

| 技能 | 用途 | 什么时候用 |
|------|------|-----------|
| **brainstorming** | 头脑风暴，澄清需求 | 开始新功能前 |
| **plan** | 把需求拆成任务 | 需求明确后 |
| **tdd** | 测试先行开发 | 实现功能时 |
| **code-review** | 代码审查 | 完成任务后 |
| **verify** | 验证功能正确性 | 完成功能后 |
| **git-worktree** | 创建隔离分支 | 开始新任务前 |
| **completion** | 完成后的清理 | 完成所有工作后 |

### 如何使用

在 Claude Code 中，用 `/` 命令调用技能：

```bash
# 启动 brainstorming 技能
/brainstorming 我要做一个用户登录功能

# 启动 plan 技能
/plan 把登录功能拆成任务

# 启动 tdd 技能
/tdd 实现登录表单

第六节：写你自己的技能包

最有价值的是，你可以写自己的技能包！

场景 1：你是设计师

你想让 AI 总是按照你的设计规范来写代码。

写一个技能包 design-rules.md：

---
name: design-rules
description: 按照我们的设计规范写代码
version: 1.0.0
---

## 设计规范

**颜色**：
- 主色：#3B82F6（蓝色）
- 成功：#10B981（绿色）
- 错误：#EF4444（红色）
- 背景：#F9FAFB（浅灰）

**字体**：
- 标题：Poppins Bold，24px
- 正文：Inter Regular，16px
- 小字：Inter Regular，14px

**间距**：
- 组件间距：16px
- 页面边距：24px
- 卡片内边距：16px

**组件**：
- 按钮圆角：8px
- 卡片阴影：sm
- 输入框边框：1px solid #E5E7EB

## 约束

写任何 UI 代码时，必须：
1. 使用 Tailwind CSS
2. 颜色从规范里选，别自己定
3. 间距用 4 的倍数（8px、12px、16px...）
4. 按钮必须有 hover 和 active 状态

现在，每次 AI 写 UI 代码，都会遵循你的规范。

场景 2：你是创业者

你有一个固定的技术栈和业务逻辑。

写一个技能包 company-standards.md：

---
name: company-standards
description: 公司技术标准和业务规则
version: 1.0.0
---

## 技术栈

我们只用：
- Next.js 14+（App Router）
- TypeScript（严格模式）
- Supabase（数据库 + 认证）
- Tailwind CSS（样式）
- shadcn/ui（组件库）

## 代码规范

**函数命名**：
- 组件用 PascalCase：UserProfile
- 工具函数用 camelCase：formatDate
- 常量用 UPPER_SNAKE_CASE：API_BASE_URL

**文件组织**：
- 组件放在 components/
- 工具函数放在 lib/
- 类型定义放在 types/
- API 路由放在 app/api/

## 业务规则

**定价**：
- 所有价格以分为单位存储
- 显示时转换成元
- 折扣计算要精确到分

**用户数据**：
- 敏感数据必须加密
- 不能记录密码明文
- 邮箱需要验证

**API 设计**：
- 所有 API 要有错误处理
- 返回格式统一：{ data, error }
- 需要认证的 API 要检查用户身份

场景 3：你关注性能

你想让 AI 写的代码总是高性能的。

写一个技能包 performance-rules.md：

---
name: performance-rules
description: 性能优化规则
version: 1.0.0
---

## 性能规则

**React 组件**：
- 使用 useMemo 缓存计算结果
- 使用 useCallback 缓存回调函数
- 大列表使用虚拟化（react-window）
- 避免不必要的重渲染

**数据获取**：
- 使用 React Query 或 SWR
- 实现缓存和去重
- 避免重复请求
- 实现乐观更新

**图片优化**：
- 使用 Next.js Image 组件
- 提供多种尺寸
- 使用 WebP 格式
- 实现懒加载

**代码分割**：
- 大组件使用动态导入
- 路由级别的代码分割
- 按需加载第三方库

## 约束

写代码时必须：
1. 检查有没有不必要的重渲染
2. 检查有没有重复请求
3. 检查有没有大文件需要分割
4. 使用浏览器 DevTools 检查性能

第七节：技能包的威力

技能包不只是"规则"，它是可复用的方法论。

价值 1：把经验固化

你是资深工程师？

把你的经验写成技能包。团队新来的 AI 员工，马上有老员工的水平。

价值 2：一致性

团队里每个人写的代码风格不一样？

用统一的技能包，风格自动一致。

价值 3：持续改进

发现问题？更新技能包。

所有未来的 AI 交互都会受益。

价值 4：知识传承

资深工程师离职了？

他的技能包留下了。

新来的工程师，用 AI + 技能包，马上能写出符合团队规范的代码。

动手实验室

技能包模板和示例：labs/chapter10-superpowers/

在这个目录里，我为你准备了：

技能包模板
常用技能包示例
如何写自己的技能包的教程

你可以：

直接使用这些技能包
作为起点修改
学习如何写技能包

本章小结

这一章，我们学习了"技能包"——把方法论编码成 AI 能遵循的规则。

核心观点：技能包是"可复用的经验"。写一次，长期受益。

我们介绍了：

什么是 Superpowers：Claude Code 的技能框架
Superpowers 的 7 步开发流程
技能包的结构和写法
如何写自己的技能包

要点回顾请见表 10-3。

表 10-3 技能包要点回顾

概念	要点
Superpowers	Claude Code 的技能框架
技能包	方法论的编码，让 AI 懂"套路"
7 步流程	头脑风暴→隔离→计划→TDD→审查→验证→完成
自定义技能	把你的经验写成技能包

记住：

技能包是"可复用的经验"。

写一次，长期受益。

你写的技能包越多，AI 就越像"你"。

在下一章，我们会学习"让多个 AI 协同工作"——用 Roo Code 的角色分工系统。

本章字数：约 12,000 字

AI编程书

第10章 给 AI 装上「技能包」

第10章 给 AI 装上「技能包」

开场：AI 像新员工

你会学到什么

第一节：什么是 Superpowers？

一个类比

Superpowers 的本质

第二节：Superpowers 的 7 步开发流程

步骤 1：Brainstorming（头脑风暴）

步骤 2：Git Worktree（隔离环境）

步骤 3：Plan Writing（写计划）

步骤 4：TDD Execution（测试先行开发）

步骤 5：Code Review（代码审查）

步骤 6：Verification（验证）

步骤 7：Completion（完成）

第三节：技能包的结构

各部分说明

第四节：一个完整的技能包示例

第二步：写最简单的实现

第三步：重构

第四步：重复

约束和规则

第六节：写你自己的技能包

场景 1：你是设计师

场景 2：你是创业者

场景 3：你关注性能

第七节：技能包的威力

价值 1：把经验固化

价值 2：一致性

价值 3：持续改进

价值 4：知识传承

动手实验室

本章小结

目录

第10章给 AI 装上「技能包」

第10章给 AI 装上「技能包」