Superpowers 插件调研

CharAznable
0 阅读6分钟

Superpowers 插件调研

GitHub 仓库：https://github.com/obra/superpowers

本文回答几个问题：

  • Superpowers 是什么？
  • 它解决了什么问题，有什么用？
  • 在当前项目落地的难度和成本？
  • 实际使用时的典型流程是什么？

一、Superpowers 是什么？

  • Superpowers 是一套围绕 AI 编程助手（例如 Cursor 中的 Agent）之上的 “工作流/流程插件”。
  • 它通过一系列 技能（skills）和命令（commands），强制/引导 AI 在开发时遵循更专业的流程，而不是“想到什么就直接改代码”。
  • 典型的工作流由三步组成：
    • /brainstorm：先搞清楚问题和需求，给出多种设计方案；
    • /write-plan：基于确定的方案写出细化的实现计划（拆分 task）；
    • /execute-plan：再按计划一步步执行和验证。

这套机制本质上是 “给 AI 加一层工程师习惯和纪律”，避免临时起意式的改代码。

image.png

二、它解决了什么问题？有什么用？

1. 典型痛点

  • AI 经常 直接开始写代码，缺少：
    • 对业务/项目上下文的理解；
    • 多方案对比与取舍；
    • 清晰的任务拆分与计划；
    • 系统化的验证步骤（测试 / 校验命令）。
  • 结果是：
    • 容易“瞎改一通”，最后你还要自己收拾；
    • 多步任务（重构、脚本编写、迁移等）很难控制整体节奏；
    • 不同会话/不同人使用 AI 的方式非常不一致。

2. Superpowers 提供的价值

  • 强流程：把开发过程拆成「想清楚 → 写计划 → 执行 & 验证」三段，减少无计划瞎改。
  • 可追踪：每个阶段的输出都可以保存为文档（设计、实现计划等），方便回顾和复盘。
  • 更安全：在 /execute-plan 阶段可以内置验证步骤（跑 lint、test、build 等），降低线上风险。
  • 更易协作：别人接手你的分支/任务，只要看 plan 和执行记录，就能快速理解做了什么、为什么这样做。

三、安装与启用

1. 在 Cursor 中安装 Superpowers 插件

  1. 打开 Cursor 设置页面。

  2. 点击 Plugins，再点击 Browse marketplace。

    image.png

  3. 在搜索框中输入 “Superpowers”，找到插件并安装。

    image.png

插件安装成功后，就可以在对话框中直接输入 /brainstorm、/write-plan、/execute-plan 来驱动对应流程。

四、典型工作流程（核心三个命令）

简单来说，Superpowers 的核心流程就是：

  • /brainstorm：提出需求，并给出多种设计方案；
  • /write-plan：根据确定的方案，生成详细的实现计划（拆分为多个 task）；
  • /execute-plan：按照计划逐步执行、修改代码，并在最后做验证。

中途你可以随时插入问题、修正决策，AI 会在 Superpowers 的框架下调整后续计划。

这套流程的目标是：
先想清楚 → 再规划 → 再实现 & 验证，避免“一上来就乱改代码”。

五、实际使用示例：Vue SCSS 移除错误 scope 属性

1. 问题背景

  • 问题：项目中大量 Vue 文件的 <style lang="scss"> 被误写成带 scope 属性（正确应为 scoped）。
    • 由于 scope 并不是合法属性，实际上样式一直是全局生效，没有真正的 scoped 隔离。
  • 决策：当前业务已经默认按全局 CSS 行为写代码，如果现在统一改成 scoped 风险较大。
    因此选择：不改为 scoped，而是批量移除所有 lang="scss" 的 <style> 标签上的 scope 属性，使代码语义和实际行为一致。

2. /brainstorm：梳理需求与设计方案

  1. 输入 /brainstorm，然后描述你的需求（例如上面的 SCSS 问题）。

  2. Superpowers 会：

    • 先查看项目上下文；
    • 提出澄清问题（如：修改范围是否为全项目？是否跳过某些目录？）；
    • 给出 多种方案（如正则脚本、AST 解析、ESLint 规则等）和推荐选项。

    image.png

  3. 过程中会不断记录 TODO / 任务列表，并在对话中更新状态。

    image.png

  4. 你可以直接用自然语言选择方案，比如输入“选择方案 1”，AI 会基于该方案给出最终设计说明。

    image.png

3. /write-plan：生成可执行的实现计划

  1. 设计方案确定后，输入 /write-plan。

  2. Superpowers 会把整个需求拆成多条 Task，每条 Task 再拆成多个小步骤（2–5 分钟一个），例如：

    • 创建脚本文件；
    • 在 package.json 里挂 npm script；
    • 编写正则处理逻辑；
    • 运行 dry-run 命令，确认会修改哪些文件；
    • 实际执行脚本并查看 diff 等。

    image.png

计划写好后，你对计划整体确认无误，再进入下一步执行。

4. /execute-plan：按计划真正修改代码

  1. 输入 /execute-plan，Superpowers 会根据前面生成的计划，依次执行每个步骤：

    • 使用脚本遍历 .vue 文件；
    • dry-run 显示将要修改的文件和数量；
    • 真正写入文件、删除错误的 scope 属性；
    • 提醒你查看 git diff 等。

    image.png

  2. 全部步骤执行成功后，会有类似“执行成功”的总结，并给出下一步建议（如 commit、创建 PR 等）。

    image.png

5. 验证与复盘

  1. 在执行结束后，你可以补一句：“最后帮我把验证步骤也跑一遍”。

  2. Superpowers 会自动：

    • 运行预先约定好的验证命令（例如 npm run precheck / npm run lint 等）；
    • 解释这些命令的结果，区分是历史问题还是本次改动引入的。

  3. 最后你再手动复盘一下改动结果（例如打开页面看样式、查看 diff），完成闭环。

    image.png

六、在本项目中的落地难度评估

  • 安装成本：已在当前项目中完成安装，成本接近 0。
  • 使用门槛：只需要记住三条核心命令：
    • /brainstorm：开始前先一起想清楚；
    • /write-plan：决定怎么做；
    • /execute-plan：按计划执行。
  • 对现有流程的影响：
    • 不改变现有构建/部署流程，只是在和 AI 协作时多了“设计 + 计划”两个显式阶段；
    • 对个人开发几乎没有阻碍，反而可以减少来回返工。
  • 总体结论：
    • 落地难度：低；
    • 收益：在中大型改动、跨多文件/多步骤任务上收益明显（比如脚本批量修改、重构、复杂新功能）。

七、总结

  • Superpowers = 给 AI 装上“资深工程师的工作习惯”：
    强制走「brainstorm → write-plan → execute-plan → 验证」流程。
  • 在本项目中已经有成功示例（批量移除 Vue SCSS 中错误的 scope 属性），实践证明：
    • 需求更清晰；
    • 方案更可比较；
    • 实现过程有计划可循；
    • 最后有验证和复盘，不容易“改着改着就忘了初衷”。

后续遇到类似 “需要多步操作、跨多文件的改动”，推荐都通过这一套 Superpowers 流程来驱动 AI 协作。

avatar
文章
阅读
粉丝