多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Superpowers 框架学习指南:从技能驱动到子代理驱动的 AI 编码代理实践

Superpowers 框架学习指南:从技能驱动到子代理驱动的 AI 编码代理实践 1. 为什么你的 AI 编码代理总是“跳步写代码”很多人第一次用 Claude Code 或 Cursor 写功能时都会遇到同一个尴尬你说“帮我加个登录”它三秒钟甩给你 200 行代码跑起来报错再问它它又改一版来回几轮之后你自己都不知道代码里到底有什么。问题不在模型能力而在于缺少一套把“需求澄清 → 测试 → 实现 → 审查”串起来的工作流。Superpowers 框架要解决的正是这件事它把 AI 编码代理从“随机补全器”变成“按流程干活的工程助手”。Superpowers 是一个面向 AI 编码代理的软件开发工作流框架由 Jesse Vincent 创建核心是给 Claude、Cursor、Codex 这类编程助手注入一套可组合的“技能”Skills和初始指令。它不替代你的编辑器也不替代模型而是像给代理装了一本“操作手册”什么时候该先问问题、什么时候该先写测试、什么时候该把任务丢给子代理。对前端、后端、全栈开发者都适用尤其适合那些已经用上 AI 编程工具、但觉得输出质量忽高忽低的同学。它主要有两条主线。第一条是技能驱动开发Skills-Driven Development把开发过程拆成可复用的技能模块比如test-driven-development负责红绿重构循环systematic-debugging负责四阶段根因分析brainstorming负责苏格拉底式提问澄清需求。第二条是子代理驱动开发Subagent-Driven Development把复杂任务分派给专门的子代理采用两阶段审查机制主代理负责编排和验收子代理负责执行。这两条线合起来就是“先想清楚、再分下去、最后验回来”的闭环。我试过在本地把一个“给 React 组件加表单校验”的任务交给带 Superpowers 的代理它没有直接写代码而是先问了我三个问题校验规则是同步还是异步、错误提示要不要国际化、是否复用现有表单库。这三个问题问完后面生成的代码基本一次就跑通了。这就是技能驱动开发的价值——把“跳步”变成“按步骤”。下面我会从环境准备、技能定义模板、子代理调度配置、验证请求、常见报错排查五个部分把 Superpowers 框架的落地路径讲清楚。你可以跟着一步步操作也可以只挑自己需要的部分。2. TaoToken 前置准备给代理一个稳定的模型入口Superpowers 本身是工作流框架它需要调用大模型来完成推理和代码生成。如果你直接用官方 API可能会遇到网络波动、额度限制、多模型切换麻烦等问题。我自己的做法是先把模型入口统一到一个兼容 OpenAI 协议的服务上这样 Claude Code、Cursor、Codex 都能用同一套 Base URL 和 Key切换模型只改一个 Model ID。TaoToken 就是这样一个入口官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。它兼容 OpenAI 的/v1/chat/completions协议所以任何支持自定义 Base URL 的 AI 编码工具都能接。你不需要改 Superpowers 的源码只需要在工具侧配置好 Base URL、API Key 和 Model ID 三件套。具体操作分三步。第一步打开 https://taotoken.net/api-keys 创建一个 API Key复制出来保存好后面配置要用。第二步确认你要用的模型 ID比如claude-sonnet-4-20250514或者gpt-4o这个 ID 会填到工具的 Model 字段里。第三步根据你用的工具把 Base URL 填成https://taotoken.net/api注意不要带末尾的/v1因为不同工具对路径的处理不一样TaoToken 的文档里写得很清楚。如果你用的是 Claude Code它的配置方式比较特殊需要设置环境变量。你可以在终端里执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEY你的_TaoToken_Key export ANTHROPIC_MODELclaude-sonnet-4-20250514然后运行claude命令它就会走 TaoToken 的入口。如果你用的是 Cursor在设置里找到 Models把 OpenAI API Key 填成 TaoToken 的 KeyBase URL 填https://taotoken.net/api然后选一个模型 ID。Codex 的话配置在~/.codex/auth.json里后面我会给完整的 JSON 片段。这里有个坑要注意有些工具会在 Base URL 后面自动拼/v1有些不会。TaoToken 的 API 地址是https://taotoken.net/api如果你的工具拼了/v1最终请求路径就是https://taotoken.net/api/v1/chat/completions这是对的如果没拼就是https://taotoken.net/api/chat/completions可能会 404。所以配置完先发一个测试请求验证一下别等到写代码时才报错。另外Superpowers 的子代理驱动开发会同时发起多个请求对并发和稳定性有要求。TaoToken 这边我实测下来并发几个子代理请求是没问题的但建议你在配置里把超时设长一点比如 120 秒因为子代理做代码审查时推理链比较长。如果你还没决定用哪个模型可以先到 https://taotoken.net/models 看看支持的列表或者直接到 https://taotoken.net/chat 里试一下对话确认模型能正常响应再配到工具里。这一步花五分钟能省掉后面半小时的排错。3. 可复制配置技能定义模板与子代理调度这一节是全文的核心我会给你两份可以直接复制的配置一份是 Superpowers 的技能定义模板一份是子代理调度的 settings 片段。你不需要从零写改改就能用。先说技能定义。Superpowers 的技能本质上是一个 Markdown 文件放在项目的.superpowers/skills/目录下文件名就是技能名。每个技能包含触发条件、步骤、检查清单。下面是一个 React 组件开发技能的完整模板你可以直接复制到.superpowers/skills/react-component.md# React Component Development Skill ## 触发条件 当用户要求创建或修改 React 组件时激活。 ## 步骤 1. **需求分析** - 明确组件的 Props 接口列出每个 Prop 的类型和是否必填 - 确定组件的职责边界避免一个组件做多件事 - 如果需求模糊先向用户提问澄清不要直接写代码 2. **测试先行** - 编写 Props 类型定义TypeScript interface - 编写渲染测试覆盖默认状态和边界状态 - 编写交互测试覆盖点击、输入、提交等行为 3. **实现组件** - 使用函数式组件和 Hooks - 遵循 React 最佳实践避免不必要的 re-render - 添加必要的注释解释复杂逻辑 4. **Storybook 文档** - 创建展示不同状态的 stories - 添加使用说明和 Props 表格 5. **代码审查清单** - [ ] 性能优化memo/useMemo/useCallback - [ ] 可访问性支持aria 属性、键盘导航 - [ ] 响应式设计 - [ ] 错误边界处理这个模板的关键在于“测试先行”和“审查清单”。Superpowers 的test-driven-development技能会强制代理先写测试再写实现如果你不写测试它会拒绝进入实现步骤。我一开始觉得这很烦后来发现正是这个约束让代码质量稳定了很多。再说子代理调度配置。Superpowers 的子代理驱动开发需要你在项目根目录创建一个superpowers.config.json定义主代理和子代理的分工。下面是一个可复制的配置{ version: 1.0, mainAgent: { model: claude-sonnet-4-20250514, role: orchestrator, maxSubagents: 3 }, subagents: [ { name: test-writer, model: claude-sonnet-4-20250514, skill: test-driven-development, triggers: [new-feature, bug-fix] }, { name: code-reviewer, model: gpt-4o, skill: requesting-code-review, triggers: [implementation-complete] }, { name: debugger, model: claude-sonnet-4-20250514, skill: systematic-debugging, triggers: [test-failure, runtime-error] } ], reviewPolicy: { twoStage: true, stageOne: subagent-self-check, stageTwo: main-agent-verification } }这个配置的意思是主代理负责编排最多同时跑 3 个子代理test-writer在新增功能或修 bug 时触发负责写测试code-reviewer在实现完成后触发负责审查debugger在测试失败或运行时报错时触发负责根因分析。两阶段审查的意思是子代理先自己检查一遍主代理再验收一遍避免子代理“自说自话”。如果你用的是 Codex配置要写到~/.codex/auth.json里格式如下{ openai: { baseURL: https://taotoken.net/api, apiKey: 你的_TaoToken_Key, model: claude-sonnet-4-20250514 }, superpowers: { configPath: ./superpowers.config.json, enableSubagents: true } }注意baseURL填的是https://taotoken.net/api不要加/v1Codex 会自己拼。apiKey就是你在 TaoToken 创建的 Key。model填你要用的模型 ID。superpowers.configPath指向你刚才创建的配置文件。如果你用的是 Cline 或者带 MCP 的工具配置方式类似核心就是三件套Base URL 填https://taotoken.net/apiAPI Key 填 TaoToken 的 KeyModel ID 填模型名。Cline 的 MCP 配置里你可以在mcpServers下面加一个superpowers条目指向本地的 Superpowers 插件目录。配置完之后你可以在项目里跑一个测试任务比如“给 Button 组件加 loading 状态”看看代理是不是先问问题、再写测试、再实现、最后审查。如果它直接写代码说明技能没触发检查一下.superpowers/skills/目录路径对不对。4. 验证请求确认代理协作流程跑通配置写完不代表能用必须发一个真实请求验证。这一节我给你一个完整的验证流程从发请求到看结果每一步都有预期输出。第一步确认模型入口通。在终端里执行curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer 你的_TaoToken_Key \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [{role: user, content: 回复 OK}], max_tokens: 10 }如果返回的 JSON 里有choices[0].message.content且内容是OK说明模型入口是通的。如果返回 401说明 Key 不对如果返回 404说明 Base URL 路径不对检查是不是多拼或少拼了/v1。第二步确认 Superpowers 技能加载。在项目根目录执行ls -la .superpowers/skills/你应该能看到react-component.md等技能文件。然后启动你的 AI 编码工具输入请用 react-component 技能帮我创建一个 UserCard 组件预期行为是代理不会直接写代码而是先问你 Props 有哪些、要不要头像、点击行为是什么。如果你看到它直接输出代码说明技能没被识别检查文件名和触发条件是否匹配。第三步确认子代理调度。输入一个稍微复杂的任务请用子代理驱动开发模式帮我给 UserCard 组件加一个 loading 状态并写测试预期行为是主代理先拆任务然后test-writer子代理先写测试code-reviewer子代理在实现后审查。你可以在终端里看到多个请求日志每个子代理的请求都走https://taotoken.net/api。如果只看到一个请求说明子代理没启用检查superpowers.config.json里的enableSubagents是不是true。第四步看两阶段审查结果。任务完成后主代理应该给你一份审查报告包含子代理的自检结果和主代理的验收结论。比如[test-writer] 已生成 3 个测试用例覆盖默认、loading、错误状态 [code-reviewer] 发现 1 个问题loading 状态下未禁用点击 [main-agent] 验收通过问题已修复如果你看到类似输出说明整个协作流程跑通了。这时候你可以把任务换成你自己的真实需求比如“给表单加异步校验”观察代理是不是按同样的流程走。这里有个细节要注意子代理的请求是并发的如果你的 TaoToken 额度或并发限制比较紧可能会看到 429 错误。解决办法是在superpowers.config.json里把maxSubagents降到 1 或 2或者到 https://taotoken.net/console 看一下当前的并发配额。验证通过之后你就可以把 Superpowers 集成到日常开发里了。我的习惯是每个新功能都先让代理走一遍技能流程确认测试和审查都过了再合并代码。这样虽然前期多花几分钟但后期返工少很多。5. 常见报错排查401、local proxy failed 与 OAuth 问题这一节我整理了几个真实踩过的坑都是配置 Superpowers TaoToken 时容易遇到的报错。你可以对照着排查。报错一401 Unauthorized这是最常见的通常有三个原因。第一API Key 复制错了比如多复制了空格或者少复制了字符。解决办法是到 https://taotoken.net/api-keys 重新复制一次注意不要带前后空格。第二Key 被删了或者过期了重新创建一个。第三请求头格式不对TaoToken 要求Authorization: Bearer 你的Key注意Bearer后面有一个空格。如果你用的是 Claude Code检查ANTHROPIC_API_KEY环境变量是不是设置正确可以用echo $ANTHROPIC_API_KEY看一下。报错二local proxy failed这个报错通常出现在你用了本地代理工具的情况下。Superpowers 的子代理会发起多个并发请求如果本地代理配置了转发规则可能会拦截或超时。解决办法是检查你的工具配置里 Base URL 是不是直接填了https://taotoken.net/api不要经过额外的本地转发。如果你用的是 Cline 或 MCP检查mcpServers配置里有没有多余的proxy字段。另外把超时时间设长一点比如 120 秒因为子代理的推理链比较长。报错三reading choices 时出错这个报错说明请求发出去了但返回的 JSON 结构不对。常见原因是 Model ID 填错了比如填了一个 TaoToken 不支持的模型名。解决办法是到 https://taotoken.net/models 确认模型 ID 的准确拼写然后更新配置里的model字段。另一个原因是 Base URL 路径不对比如填了https://taotoken.net/api/v1但工具又自动拼了一次/v1变成/api/v1/v1/chat/completions就会返回非标准结构。记住 TaoToken 的 Base URL 是https://taotoken.net/api不要带/v1。报错四OAuth 相关错误如果你用的是 Claude Code它默认走 OAuth 登录但配置 TaoToken 后应该走 API Key。如果看到 OAuth 报错说明环境变量没生效。检查ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY是不是都设置了并且ANTHROPIC_API_KEY的值是 TaoToken 的 Key不是 Claude 官方的。你可以在终端里执行env | grep ANTHROPIC看一下。如果还是不行试试在~/.claude/settings.json里显式配置{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的_TaoToken_Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }报错五子代理不触发如果你配置了superpowers.config.json但子代理没反应先检查enableSubagents是不是true再检查triggers里的关键词是不是和你的任务描述匹配。比如test-writer的触发词是new-feature和bug-fix如果你说“帮我改一下这个组件”可能不会触发。解决办法是在任务描述里显式提到触发词比如“这是一个 new-feature请用子代理模式”。另外检查.superpowers/skills/目录下的技能文件是不是有语法错误Markdown 格式不对也会导致加载失败。报错六请求超时子代理并发请求时如果某个请求超过默认超时时间会报 timeout。解决办法是在工具配置里把超时设成 120 秒或更长。如果你用的是 Codex在auth.json里加timeout: 120000。如果你用的是 Cursor在设置里找 Timeout 选项。另外减少maxSubagents的数量也能降低超时概率。排查完这些基本就能稳定跑起来了。如果还遇到其他报错可以到 https://taotoken.net/doc 看接入文档里面有更详细的错误码说明。6. 把 Superpowers 变成你的日常开发习惯配置跑通只是第一步真正有价值的是把它变成习惯。我的做法是每个新功能都先让代理走一遍brainstorming技能澄清需求然后走writing-plans拆任务再走subagent-driven-development执行最后走requesting-code-review审查。这套流程走下来代码质量比我自己随手写还稳定。如果你想让代理长期跑编码任务可以考虑用 Coding Plan它适合那种需要连续多个任务、子代理频繁调度的场景。入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。如果你只是想先试试模型对话可以到 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 里发几个请求感受一下。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite API Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。最后分享一个实用技巧Superpowers 的技能文件是可以版本控制的你可以把.superpowers/skills/目录提交到 Git团队里每个人用同一套技能定义这样 AI 代理的输出风格和质量就能保持一致。我试过在团队里推广这套流程新人的代码审查通过率明显提高了。你可以先从一两个技能开始比如test-driven-development和systematic-debugging用顺了再扩展到子代理调度。
返回列表