Claude Code Superpowers -“让 AI 像资深工程师一样工作，而不是像只会写代码的实习生。”
1、什么是Superpowers
Superpowers不是独立工具，是Claude Code的插件系统。 装上之后，Claude Code会自动多出一套”技能树”：
brainstorming：帮你理清需求再动手，不是瞎写
test-driven-development：强制TDD流程，先写测试
systematic-debugging：4步调试法，找根因
writing-plans：把需求拆成2-5分钟的小任务
subagent-driven-development：子代理流水线干活
核心就一句话：让AI不要瞎搞，按照专业开发流程来。
2、核心价值
“让 AI 像资深工程师一样工作，而不是像只会写代码的实习生。” 它认为，AI 编程的主要问题不是“不会写”，而是“没有流程”。它通过一套可组合的“技能”（Skills），将传统开发中容易被跳过的关键环节变成不可绕过的自动化节点，从而解决 AI 编程中常见的“方向跑偏”、“忽略测试”、“代码质量不稳定”等问题。
其核心价值体现在：
- 强制测试驱动开发 (TDD)：严格执行“红-绿-重构”循环，先写测试用例，再写实现代码，单元测试覆盖率可稳定维持在 80% 以上。
- 结构化需求澄清：通过“苏格拉底式”多轮提问，将模糊的需求转化为清晰、可验证的设计文档。
- 任务原子化与并行执行：将大型开发任务拆解为多个 2-5 分钟内可完成、可验证的原子任务，并由独立的“子代理”（Sub-agent）并行执行与审查。
- 自动化质量门禁：在关键节点（如代码提交前）自动触发代码审查和测试验证，未通过则阻断流程，确保“验证后再宣布成功”。
3、工作流程
Superpowers 将一个完整的开发周期划分为以下几个强制阶段：
- 头脑风暴 (Brainstorming)：当你提出一个功能需求（如“我想做一个用户登录”）时，Superpowers 会自动触发。AI 不会直接写代码，而是像一位经验丰富的架构师一样，通过多轮提问，帮你厘清需求边界、技术选型（JWT 还是 Session？）、非目标和验收标准，并生成一份结构化的设计文档。
- 工作区隔离 (Using Git Worktrees)：设计确认后，Superpowers 会自动为你创建一个独立的 Git 分支和工作树（Worktree），确保你的开发环境与主分支完全隔离，避免污染项目主干。
- 编写计划 (Writing Plans)：AI 会将设计文档拆解为一系列详细的、原子级的任务清单。每个任务都精确到需要修改的文件路径、预期的代码片段以及如何验证该任务是否完成（例如：“修改
src/utils/validation.js第 42 行，插入邮箱正则表达式，并运行npm test -- --testPathPattern=validation.test.js”）。 - 子代理开发 (Subagent-Driven Development)：Superpowers 会派遣多个独立的“子代理”来并行执行这些原子任务。每个子代理在完成任务后，会进行两阶段审查：第一阶段检查是否 100% 符合计划规范，第二阶段评估代码质量（如圈复杂度、无硬编码、覆盖率提升等）。
- 系统化调试与验证 (Systematic Debugging & Verification)：在开发过程中，AI 会主动使用系统化的调试方法定位问题。在所有任务完成后，会自动运行所有测试用例进行最终验证，确保功能稳定。
- 代码审查与交付 (Code Review & Ship)：最终，Superpowers 会生成一份完整的审查报告，提供“合并”、“创建 Pull Request”、“保留分支”或“丢弃”等选项，完成标准化的交付流程。
4、技能介绍
4.1、核心工作流技能
这些技能构成了 Superpowers 的主干流程，通常按顺序自动触发：
- 头脑风暴 (brainstorming)：在编写任何代码之前激活。AI 会通过一系列深入的“苏格拉底式”提问，帮助你澄清需求、探索技术方案、定义目标与非目标，并生成一份结构化的设计文档，确保双方理解一致。12
- 编写计划 (writing-plans)：在设计方案获得确认后激活。AI 会将整个功能拆解为一系列独立、可执行的小任务（每个任务目标为 2-5 分钟内完成），并为每个任务指定精确的文件路径、代码变更内容和验证步骤。12
- 执行计划 (execute-plan / executing-plans)：根据“编写计划”生成的任务清单，AI 会启动子代理（subagents）来逐个执行任务。每个任务完成后，系统会自动进行审查，确保符合规格。12
- 使用 Git 工作树 (using-git-worktrees)：在设计方案通过后激活。AI 会自动创建一个独立的 Git 分支和工作区进行开发，确保主分支的稳定性，开发完成后可选择合并、创建 PR 或丢弃。
4.2、质量保证技能
这些技能确保代码的高质量和可靠性，是流程中的关键检查点：
- 测试驱动开发 (test-driven-development, TDD)：在实施阶段强制激活。AI 必须遵循“红-绿-重构”循环：先编写一个会失败的测试用例（红），然后编写最少量的代码使测试通过（绿），最后进行重构以优化代码结构，同时确保测试仍能通过。12
- 系统化调试 (systematic-debugging)：当遇到问题时激活。提供一套四步法（如基于条件的等待、根因追踪、防御性编程）来系统性地定位问题根源，而非依靠猜测。16
- 请求代码审查 (requesting-code-review)：在任务执行期间或完成后自动触发。AI 会对照计划和最佳实践，从功能、质量、安全、性能等多个维度进行自我审查，关键问题会阻塞流程。23
- 完成开发分支 (finishing-a-development-branch)：在所有任务完成后激活。AI 会验证所有测试是否通过，提供选项（合并到主分支、创建拉取请求、保留分支或丢弃），并清理工作环境。2
4.3、其他相关技能
- 子代理驱动开发 (subagent-driven-development)：这是“执行计划”技能背后的机制，指为每个小任务分配一个独立的子代理来执行，避免上下文污染，实现并行处理和双重审查。26
- 验证前完成 (verification-before-completion)：这是一个核心理念，强调在宣布任务完成前，必须有明确的验证证据（如测试通过日志），而非仅凭 AI 的口头保证
5、Git地址
- Superpowers GitHub 仓库：https://github.com/obra/superpowers
- 作者博客：https://blog.fsck.com/2025/10/09/superpowers/
- Claude Code 官方文档：https://docs.anthropic.com/en/docs/claude-code
6、安装步骤
第一步安装： /plugin marketplace add obra/superpowers-marketplace /plugin install superpowers@superpowers-marketplace /plugin update superpowers
如果网络原因安装失败：手动下载 ZIP，将skills/目录复制到~/.claude/skills/，技能仍会自动触发
第二步验证：/help
你应该看到这三个命令，这是技能触发的标志/superpowers:brainstorm– 交互式需求精炼/superpowers:write-plan– 生成实施计划/superpowers:execute-plan– 批量执行计划
备注：
brainstorm（头脑风暴）：写代码前，AI会问你一堆问题，把需求搞清楚，避免理解偏差
write-plan（写计划）：把需求拆成具体小任务，每个任务2-5分钟能完成
execute-plan（执行计划）：按照任务清单逐个完成，边做边验证
subagent-driven-development （执行包含独立任务的实施计划）：在当前会话中执行包含独立任务的实施计划时使用
using-superpowers（使用superpowers技能）
7、案例【注册功能】
7.1、执行 Brainstorming 会话（头脑风暴）
/superpowers:brainstorm
然后输入这段提示词：
我要根据这张设计图开发注册功能。
【设计图描述】
1. 布局结构：
- 左右分栏，左侧是品牌展示区（渐变背景+产品名称+欢迎语）
- 右侧是表单区，白色卡片，圆角24px，内边距32px
- 移动端：768px以下堆叠，左侧缩短为顶部横幅
2. 表单字段（从上到下）：
- 昵称：输入框，占位符“请输入昵称”，非必填
- 邮箱：输入框，占位符“[email protected]”，必填，需验证格式
- 密码：输入框，占位符“至少8位”，必填，右侧有眼睛图标切换显示/隐藏
- 确认密码：输入框，占位符“再次输入密码”，必填，需与密码一致
- 注册按钮：宽度100%，高度48px，渐变背景色（#6366F1 → #8B5CF6），悬停加深
- 已有账号？登录（链接跳转）
3. 视觉规范：
- 主色：#6366F1（靛蓝），辅色：#F59E0B（琥珀）
- 字体：标题 Inter Bold 28px，正文 Inter Regular 16px
- 错误提示：红色（#EF4444），12px，显示在输入框下方
- 输入框聚焦：边框变为主色，加外发光
4. 交互状态：
- 注册按钮有点击loading效果（旋转加载图标）
- 密码可见性切换
- 表单提交前实时验证
- 提交失败保留已填信息
5. 技术栈要求：
- Next.js 14 (App Router)
- Tailwind CSS
- React Hook Form + Zod
- 无需对接真实后端，模拟API响应即可
请开始你的 Brainstorming 流程。
你发送后，AI不会直接写代码，而是逐条提问确认
AI：
我已理解注册页面的设计需求。在开始规划前，我想确认几个细节：
问题1：密码复杂度规则
设计图只标注“至少8位”，是否还需要包含字母+数字组合？这是常见的增强安全方案。
A) 仅长度8+，无其他限制
B) 至少1个字母 + 1个数字
C) 大小写字母+数字+特殊字符
问题2：邮箱验证
您希望实时验证（每输入一次字符都校验），还是失焦（blur）时验证？
A) 失焦时验证
B) 实时验证
C) 仅提交时验证
问题3：模拟API
注册成功/失败的模拟逻辑需要：成功：返回 { success: true, message: "注册成功" }失败：假设什么条件？例如“邮箱已被注册”
A) 邮箱为 [email protected] 时模拟失败
B) 密码为 12345678 时模拟失败
C) 随机失败（50%概率）
你只需要回复（选择题式确认，极省时间）：
B, A, A
此时，设计图已完整“翻译”成结构化需求。
AI 会自动生成 docs/plans/YYYY-MM-DD-register-design.md
7.2、生成实施计划
/superpowers:write-plan
AI 会自动输出一份任务清单（这是关键产出，每个任务都可测试、可验证）
📋 注册页面实施计划（共8个任务，总预估45分钟）
【Task 1】项目初始化与依赖安装
文件路径：
- Create: package.json（如不存在）
- Modify: tailwind.config.js
执行步骤：
1. 安装依赖：npm install react-hook-form zod @hookform/resolvers
2. 配置 Tailwind 主题色（添加 design tokens）
验证：npm run dev 正常启动，无报错
【Task 2】注册表单 UI 组件（静态结构）
文件路径：
- Create: src/app/register/page.tsx
- Create: src/components/register/RegisterForm.tsx
执行步骤：
1. 实现左右分栏布局（响应式）
2. 实现所有输入框 + 按钮（无交互）
验证：访问 /register 能看到与设计图一致的结构
【Task 3】表单验证 Schema (Zod)
文件路径：
- Create: src/lib/validations/auth.ts
执行步骤：
1. 定义 RegisterSchema（邮箱格式、密码8位+字母数字、确认密码匹配）
2. 导出 TypeScript 类型
验证：编写临时测试文件验证 schema 行为
【Task 4】集成 React Hook Form + 实时验证
文件路径：
- Modify: src/components/register/RegisterForm.tsx
执行步骤：
1. 引入 useForm + zodResolver
2. 绑定各输入框到 form 状态
3. 实现失焦验证、错误信息展示
验证：输入无效数据，下方显示红色错误文案
【Task 5】密码可见性切换
文件路径：
- Modify: src/components/register/RegisterForm.tsx
执行步骤：
1. 添加 useState 控制 password 和 confirmPassword 的 type
2. 添加眼睛图标（SVG / Heroicons）
验证：点击眼睛图标，密码明文/密文切换
【Task 6】注册按钮 loading 状态
文件路径：
- Modify: src/components/register/RegisterForm.tsx
执行步骤：
1. 添加 isSubmitting 状态
2. 提交时按钮文字变为“注册中...” + 旋转动画
3. 禁用重复提交
验证：点击提交，按钮状态变化
【Task 7】模拟 API 交互
文件路径：
- Create: src/app/api/register/route.ts
- Modify: src/components/register/RegisterForm.tsx
执行步骤：
1. 创建模拟 POST 接口，延迟 1.5s 响应
2. 邮箱为 [email protected] 时返回 409 冲突
3. 前端处理成功/失败提示
验证：提交 [email protected] 看到错误提示
【Task 8】端到端验证
执行步骤：
1. 完整跑通注册流程（成功/失败）
2. 检查无障碍（ARIA labels）
验证：无控制台报错，所有功能符合设计图
你的操作：看一眼，没问题 → 输入 plan confirmed, proceed。
7.3、子代理驱动开发：自动派工+双审查
/superpowers:executing-plans
加载技能成果后，会进行计划审查
执行 docs/plans/2026-02-13-register-form.md 中的实施计划
AI 会为每个任务创建一个全新的子代理，互不干扰，每个任务都遵循 TDD 工作流
7.4、最终验收：设计图 vs 实现
/verify
AI 会：
- 启动开发服务器
- 逐项比对设计图描述（你最初输入的5大类需求）
- 输出符合度清单：
✅ 布局结构: 左右分栏 + 移动端堆叠 ✓
✅ 表单字段: 全部存在，顺序一致 ✓
✅ 视觉规范: 主色 #6366F1，错误红 #EF4444 ✓
✅ 交互状态:
- 密码可见切换 ✓
- 加载按钮 ✓
- 失焦验证 ✓
✅ 模拟API: 按约定返回成功/失败 ✓
✅ 无障碍: 表单区域均有 aria-label ✓
⚠️ 差异项:
- 设计图中“已有账号?登录”为右侧对齐，目前是左对齐
建议修复: 添加 `text-right` 类
是否自动修复？(Y/n)
输入 Y，AI 直接改代码，二次验证通过。
7.4、完整流程复盘
你真正做的：
- 描述了设计图
- 选了3个选项
- 看了几眼任务清单
- 最后点了“自动修复”
AI 全程遵循强制流程，没有一步“偷跑”写代码
