Superpowers 工作流入门：让 AI 编码先澄清需求、再计划、再实现

https://github.com/obra/superpowers

设计驱动 → 计划驱动 → 测试驱动 → 质量驱动

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

/help

/superpowers:brainstorm
/superpowers:write-plan
/superpowers:execute-plan

当我要求使用 Superpowers 工作流时，请按以下方式协作：

1. 先进行 brainstorm：
   - 澄清需求目标
   - 询问必要问题
   - 识别限制条件
   - 给出 2 到 3 个可选方案

2. 再进行 write-plan：
   - 写出分步骤实施计划
   - 标明每一步要修改或新增的文件
   - 每一步都要包含验证方式
   - 单步改动保持足够小，方便检查

3. 最后进行 execute-plan：
   - 按计划逐步实现
   - 每完成一步，说明改动内容
   - 提醒需要运行的测试或验证命令
   - 不要跳过验证后直接宣称完成

brainstorm → write-plan → execute-plan

/superpowers:brainstorm

我想给项目增加一个搜索功能，但细节还没想清楚。
请用 Superpowers 的 brainstorm 阶段先帮我澄清需求，不要直接写代码。

/superpowers:write-plan

根据刚才确认的需求，写一个 Superpowers 风格的实施计划。
每一步都要很小，说明要改哪些文件、做什么改动、如何验证。

## 实施计划：增加暗色模式切换

### Step 1：确认现有主题结构
- 查看 `src/App.tsx`
- 查看 `src/styles.css`
- 不修改代码
- 验证：说明当前样式是全局 CSS、CSS Modules 还是组件内样式

### Step 2：增加主题状态
- 修改 `src/App.tsx`
- 增加 `theme` 状态，取值为 `light` 或 `dark`
- 验证：运行类型检查，确保没有 TypeScript 报错

### Step 3：增加切换按钮
- 修改 `src/App.tsx`
- 增加“切换主题”按钮
- 点击后在 `light` 和 `dark` 之间切换
- 验证：本地启动页面，点击按钮后状态发生变化

### Step 4：增加样式变量
- 修改 `src/styles.css`
- 使用 CSS 变量定义亮色和暗色主题
- 验证：切换主题后背景色和文字颜色变化

### Step 5：持久化主题选择
- 修改 `src/App.tsx`
- 使用 `localStorage` 保存主题
- 页面加载时读取上次选择
- 验证：刷新页面后主题保持不变

/superpowers:execute-plan

按刚才的计划执行。
每次只做一个 Step。
完成后停下来，说明：
1. 修改了哪些文件；
2. 为什么这样改；
3. 我需要运行什么命令验证；
4. 验证通过后再继续下一步。

我有一个网站，想增加暗色模式切换功能：

1. 默认亮色主题；
2. 点击按钮可以切换亮色和暗色；
3. 刷新页面后记住上次选择。

请使用 Superpowers 工作流处理：
先 brainstorm 澄清需求，再 write-plan 写实施计划，最后 execute-plan 分步实现。
在计划确认前不要修改代码。

1. 项目使用什么框架？React、Vue、纯 HTML，还是其他？
2. 当前样式是 CSS 文件、Tailwind CSS，还是组件库主题？
3. 暗色模式需要覆盖整个页面，还是只覆盖当前组件？
4. 是否需要跟随系统主题 prefers-color-scheme？
5. 是否已有测试框架？

import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";

test("can switch theme and persist selection", () => {
  render(<App />);

  const button = screen.getByRole("button", { name: /切换主题/i });

  expect(document.documentElement.dataset.theme).toBe("light");

  fireEvent.click(button);
  expect(document.documentElement.dataset.theme).toBe("dark");
  expect(localStorage.getItem("theme")).toBe("dark");
});

import { useEffect, useState } from "react";
import "./styles.css";

type Theme = "light" | "dark";

export default function App() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem("theme") as Theme) || "light";
  });

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem("theme", theme);
  }, [theme]);

  function toggleTheme() {
    setTheme((current) => (current === "light" ? "dark" : "light"));
  }

  return (
    <main className="page">
      <button onClick={toggleTheme}>切换主题</button>
      <h1>示例页面</h1>
      <p>当前主题：{theme}</p>
    </main>
  );
}

:root {
  --bg-color: #ffffff;
  --text-color: #111827;
}

:root[data-theme="dark"] {
  --bg-color: #111827;
  --text-color: #f9fafb;
}

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
}

.page {
  min-height: 100vh;
  padding: 24px;
}

npm test
npm run lint
npm run dev

接下来这个任务请使用 Superpowers 工作流。

要求：
1. 先进入 brainstorm 阶段，澄清目标、边界、限制条件和成功标准；
2. 未经确认，不要修改代码；
3. 需求确认后，进入 write-plan 阶段，写出分步骤计划；
4. 每一步都要说明要修改的文件、操作内容和验证方式；
5. 我确认计划后，再进入 execute-plan 阶段；
6. 执行时每次只做一个小步骤，完成后停下来说明改动和验证命令。

这个任务比较小，请用简化版 Superpowers 流程：
先用 brainstorm 问清楚必要问题，然后给一个简短计划。
计划确认后再改代码。

请完整使用 brainstorm 和 write-plan。
计划里要包含：
- 涉及文件；
- 每一步改动；
- 测试或验证命令；
- 可能风险。

计划确认后，我再决定是否让你 execute-plan。

请严格使用完整 Superpowers 流程。

限制：
- 不要一次性实现全部功能；
- 每一步只做一个可验证的小改动；
- 优先补测试或说明现有测试覆盖情况；
- 每一步完成后等待确认；
- 完成前必须提供验证结果，不能只说已经完成。

先想清楚，再写代码。

请用 Superpowers 的方式帮我做这个功能。
你自己选择合适步骤，但必须先澄清需求，再写计划，最后分步实现。

我想做一个待办事项应用，但还没想清楚功能边界。
请只做 brainstorm，帮我整理 MVP 版本应该包含哪些功能。
暂时不要写计划，也不要写代码。

请在宣布完成前提供：
1. 修改了哪些文件；
2. 每个文件的核心改动；
3. 运行了哪些验证命令；
4. 验证结果是什么；
5. 还有哪些未覆盖风险。

这个计划的步骤太大。
请重新拆分，每一步控制在 2 到 5 分钟内可以完成，并且每一步都有独立验证方式。

停止修改代码。
现在仍然处于 brainstorm 阶段，请只澄清需求和方案，不要实现。

1. 增加按钮
2. 增加样式
3. 保存主题

1. 增加按钮
   - 修改 src/App.tsx
   - 验证：页面出现“切换主题”按钮

2. 增加样式
   - 修改 src/styles.css
   - 验证：切换 data-theme 后背景和文字颜色变化

3. 保存主题
   - 修改 src/App.tsx
   - 验证：刷新页面后保持上次主题

只执行 Step 1。
完成后停止，等待我确认后再继续。

在写计划前，请先检查项目结构、命名风格、状态管理方式和测试框架。
不要引入与现有项目不一致的新方案，除非先说明理由。

请使用 Superpowers 工作流处理这个开发任务。

任务描述：
【在这里写你的需求】

工作方式：
1. 先 brainstorm：
   - 问清楚需求目标、边界、限制条件和成功标准；
   - 如果有多种方案，请给出 2 到 3 个选择，并说明适用场景；
   - 在我确认前不要修改代码。

2. 再 write-plan：
   - 把任务拆成小步骤；
   - 每一步说明要修改或新增的文件；
   - 每一步说明具体操作；
   - 每一步说明验证方式；
   - 控制单步改动范围，方便我审查。

3. 最后 execute-plan：
   - 我确认计划后再开始执行；
   - 每次只执行一个步骤；
   - 每步完成后说明改了什么、为什么这么改、如何验证；
   - 如果验证失败，先修复当前步骤，不要继续后续步骤；
   - 完成前提供验证结果，不要只口头声明完成。