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 将一个完整的开发周期划分为以下几个强制阶段：

1. ‌头脑风暴 (Brainstorming)‌：当你提出一个功能需求（如“我想做一个用户登录”）时，Superpowers 会自动触发。AI 不会直接写代码，而是像一位经验丰富的架构师一样，通过多轮提问，帮你厘清需求边界、技术选型（JWT 还是 Session？）、非目标和验收标准，并生成一份结构化的设计文档。
2. ‌工作区隔离 (Using Git Worktrees)‌：设计确认后，Superpowers 会自动为你创建一个独立的 Git 分支和工作树（Worktree），确保你的开发环境与主分支完全隔离，避免污染项目主干。
3. ‌编写计划 (Writing Plans)‌：AI 会将设计文档拆解为一系列详细的、原子级的任务清单。每个任务都精确到需要修改的文件路径、预期的代码片段以及如何验证该任务是否完成（例如：“修改 src/utils/validation.js 第 42 行，插入邮箱正则表达式，并运行 npm test -- --testPathPattern=validation.test.js”）。
4. ‌子代理开发 (Subagent-Driven Development)‌：Superpowers 会派遣多个独立的“子代理”来并行执行这些原子任务。每个子代理在完成任务后，会进行‌两阶段审查‌：第一阶段检查是否 100% 符合计划规范，第二阶段评估代码质量（如圈复杂度、无硬编码、覆盖率提升等）。
5. ‌系统化调试与验证 (Systematic Debugging & Verification)‌：在开发过程中，AI 会主动使用系统化的调试方法定位问题。在所有任务完成后，会自动运行所有测试用例进行最终验证，确保功能稳定。
6. ‌代码审查与交付 (Code Review & Ship)‌：最终，Superpowers 会生成一份完整的审查报告，提供“合并”、“创建 Pull Request”、“保留分支”或“丢弃”等选项，完成标准化的交付流程。

4、技能介绍

4.1、核心工作流技能

这些技能构成了 Superpowers 的主干流程，通常按顺序自动触发：

1. ‌头脑风暴 (brainstorming)‌：在编写任何代码之前激活。AI 会通过一系列深入的“苏格拉底式”提问，帮助你澄清需求、探索技术方案、定义目标与非目标，并生成一份结构化的设计文档，确保双方理解一致。‌12
2. ‌编写计划 (writing-plans)‌：在设计方案获得确认后激活。AI 会将整个功能拆解为一系列独立、可执行的小任务（每个任务目标为 2-5 分钟内完成），并为每个任务指定精确的文件路径、代码变更内容和验证步骤。‌12
3. ‌执行计划 (execute-plan / executing-plans)‌：根据“编写计划”生成的任务清单，AI 会启动子代理（subagents）来逐个执行任务。每个任务完成后，系统会自动进行审查，确保符合规格。‌12
4. ‌使用 Git 工作树 (using-git-worktrees)‌：在设计方案通过后激活。AI 会自动创建一个独立的 Git 分支和工作区进行开发，确保主分支的稳定性，开发完成后可选择合并、创建 PR 或丢弃。‌

4.2、质量保证技能

这些技能确保代码的高质量和可靠性，是流程中的关键检查点：

1. ‌测试驱动开发 (test-driven-development, TDD)‌：在实施阶段强制激活。AI 必须遵循“红-绿-重构”循环：先编写一个会失败的测试用例（红），然后编写最少量的代码使测试通过（绿），最后进行重构以优化代码结构，同时确保测试仍能通过。‌12
2. ‌系统化调试 (systematic-debugging)‌：当遇到问题时激活。提供一套四步法（如基于条件的等待、根因追踪、防御性编程）来系统性地定位问题根源，而非依靠猜测。‌16
3. ‌请求代码审查 (requesting-code-review)‌：在任务执行期间或完成后自动触发。AI 会对照计划和最佳实践，从功能、质量、安全、性能等多个维度进行自我审查，关键问题会阻塞流程。‌23
4. ‌完成开发分支 (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. 表单字段（从上到下）：
   - 昵称：输入框，占位符“请输入昵称”，非必填
   - 邮箱：输入框，占位符“your@email.com”，必填，需验证格式
   - 密码：输入框，占位符“至少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) 邮箱为 test@example.com 时模拟失败
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. 邮箱为 test@example.com 时返回 409 冲突
3. 前端处理成功/失败提示
验证：提交 test@example.com 看到错误提示

【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 会：

1. 启动开发服务器

2. 逐项比对设计图描述（你最初输入的5大类需求）

3. 输出符合度清单：

✅ 布局结构: 左右分栏 + 移动端堆叠 ✓
✅ 表单字段: 全部存在，顺序一致 ✓
✅ 视觉规范: 主色 #6366F1，错误红 #EF4444 ✓
✅ 交互状态: 
   - 密码可见切换 ✓
   - 加载按钮 ✓
   - 失焦验证 ✓
✅ 模拟API: 按约定返回成功/失败 ✓
✅ 无障碍: 表单区域均有 aria-label ✓

⚠️ 差异项:
   - 设计图中“已有账号?登录”为右侧对齐，目前是左对齐
     建议修复: 添加 `text-right` 类

是否自动修复？(Y/n)

输入 Y，AI 直接改代码，二次验证通过。

7.4、完整流程复盘

你真正做的：

• 描述了设计图

• 选了3个选项

• 看了几眼任务清单

• 最后点了“自动修复”

AI 全程遵循强制流程，没有一步“偷跑”写代码