直接使用claude，我们可以让claude变成我们的代码工具，使用plan mode我们可以让AI给我们整理计划行动项，那有没有办法让claude给我思考呢？有，就是brainstorming，有了这个，我们很多问题可以直接抛给Claude，让他自己闭环整个事情

思考：AI---Brainstorming
规划：AI---Plan mode
行动：AI---Skills

本文介绍superpowers的 brainstorming skill

什么是 brainstorming

顾名思义，brainstorming 也就是头脑风暴，这个skill会通过问题来引导思考，这样我们如果没有一个很好的思考的前提上，可以循序渐进的补全整个技术方案。其工作流程如下

提出需求-->启动brainstorming Skill-->苏格拉底式提问-->将需求拆解-->规划并生成设计文档-->用户确认计划书-->开始实现

首先，我们查看 brainstorming 的SKILL.md的描述


Explore project context — check files, docs, recent commits
Offer visual companion (if topic will involve visual questions) — this is its own message, not combined with a clarifying question. See the Visual Companion section below.
Ask clarifying questions — one at a time, understand purpose/constraints/success criteria
Propose 2-3 approaches — with trade-offs and your recommendation
Present design — in sections scaled to their complexity, get user approval after each section
Write design doc — save to docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md and commit
Spec self-review — quick inline check for placeholders, contradictions, ambiguity, scope (see below)
User reviews written spec — ask user to review the spec file before proceeding
Transition to implementation — invoke writing-plans skill to create implementation plan

中文翻译如下

探索项目上下文
提供视觉辅助
一次问一个澄清性的问题
提出2-3种方法
开始设计
写设计文档
规格自审
用户审核
实施方案

安装


npx skills add https://github.com/obra/superpowers --skill brainstorming

使用

在使用之前，我们有一个心理准备，brainstorming 会让我们做如下事情

反复提问回答
提供设计文档
为我验证实现

现在以一个实战的例子来演示这个功能，在这个实战的例子中，我故意不去拆解问题(问一个很大范围的问题)，我们最终看一下 brainstorming 会给我们什么样的交付物

演示


❯ 帮我实现一个网页，实现网页根据时间作为随机数种子自动双色球选号
● Skill(superpowers:brainstorming)
  ⎿  Successfully loaded skill

我描述了问题，但未主动思考和拆解问题，这个描述触发了 brainstorming 的skill


✻ Cogitated for 43s

  8 tasks (1 done, 7 open)     
  ✔ Explore project context
  ◻ Ask clarifying questions              
  ◻ Propose 2-3 approaches with trade-offs
  ◻ Spec review loop         
  ◻ Present design and get user approval 
  ◻ User reviews written spec
  ◻ Write design doc
  ◻ Transition to implementation

这个skill触发了 8个tasks的流程


● 好的，继续进行文字问答。先问第一个关键问题：
  号码的刷新方式是什么？              
  - A. 实时刷新 — 每秒根据当前时间戳重新生成号码，页面上号码会不停变化
  - B. 定时刷新 — 每隔固定时间（如每分钟）刷新一次
  - C. 手动触发 — 页面加载时根据时间生成一次，用户点击按钮可以用当前时间重新生成
  - D. 仅加载时生成 — 只在页面加载时用时间戳生成一次，不再变化

brainstorming 正在反复的理解我的需求，所以会反复的提问回答


● 第二个问题：
页面视觉风格偏好？                                                                               
- A. 彩票风 — 红蓝配色球形号码，接近真实双色球彩票的样式                                           
- B. 简约现代 — 干净的卡片式布局，数字清晰大方
- C. 暗黑主题 — 深色背景，号码发光高亮效果

● 第三个问题：
  是否显示"时间种子"信息？
  - A. 显示 — 在页面上展示当前使用的时间戳（让用户看到种子来源）
  - B. 不显示 — 只展示生成的号码，保持界面简洁

该有的问题问完了，claude开始提供方案


● 好的，信息已经足够了。以下是三种实现方案：
                                                                                                                          ---
  方案 A：纯 HTML + 原生 JS（推荐）
  单个 .html 文件，无依赖，直接浏览器打开即用。用 Date.now()
  时间戳作种子，实现线性同余伪随机数生成器（LCG），保证同一时间戳必然产生同一组号码。样式内联在 <style>
  标签中模拟真实彩票球效果。
                                                                                                                          优点：零依赖、即开即用、代码可读性高；缺点：所有代码在一个文件中。
                                                                                                                          ---
  方案 B：带动画效果的单文件（CSS 动画 + JS）
  在方案 A 基础上，点击按钮时球逐个"滚入"并停下，模拟摇号动画效果。种子信息以倒计时动画展示。

  优点：体验更有趣；缺点：代码更复杂，动画过长会影响实用性。

  ---
  方案 C：Vue/React 前端框架

  用组件化框架构建，状态管理更清晰，便于后续扩展（如历史记录、多注选号）。

  优点：可扩展性强；缺点：需要构建工具或 CDN，对于此场景明显过度设计。

  ---
  推荐方案 A，理由：需求明确、范围单纯，零依赖单文件最简洁实用，完全满足需求。

  你认可这个方向吗？

到这里，相当于 brainstorming 为我们完成了思考的前半部分事情，接下来是思考的后半部分事情，也就是问题拆解


● 好的，下面逐节呈现设计，请确认每节。

  ---
  第一节：整体架构

  单个 index.html 文件，包含三个部分：
  - <style>：所有样式，包含球的渐变、阴影、滚入动画关键帧
  - <body>：页面结构（标题、种子信息区、号码球区、按钮）
  - <script>：LCG 伪随机算法 + 号码生成逻辑 + 动画控制
  数据流：                                                                                                                点击"开始摇号" → 记录 Date.now() → LCG 生成序列
  → 抽取6个红球(1-33不重复) + 1个蓝球(1-16)                                                                               → 逐个延迟显示球（每球间隔约200ms，带滚入动画）
  → 显示时间种子信息

  这节设计是否 OK？
  
● 第二节：视觉设计

  号码球样式：
  - 红球：6个，圆形，红色径向渐变（模拟3D光泽感），白色数字，带内阴影
  - 蓝球：1个，同形状，蓝色径向渐变，与红球之间有视觉分隔线
  - 球径约 60px，数字字体加粗居中

  动画效果：
  - 点击按钮后，球依次从上方"落入"并弹跳停稳（@keyframes drop-in，每球延迟 200ms）                                        - 按钮点击期间变灰禁用，动画播完后恢复
  - 旧号码淡出后新号码滚入，避免视觉跳变
  种子信息区：                                                                                                            - 显示格式：时间种子：1711700000000（2026-03-29 14:23:45.123）
  - 位于号码球下方，灰色小字，生成时淡入显示

  整体布局：
  - 白色/浅灰背景，居中卡片式容器
  - 顶部标题"双色球智能选号"，副标题"以时间为种子"
  - 底部一个大红色"开始摇号"按钮

  这节设计是否 OK？
  
● 第三节：随机算法与号码生成

  LCG（线性同余伪随机数生成器）：
  seed = Date.now()
  next() → seed = (seed * 1664525 + 1013904223) & 0xFFFFFFFF
  返回 seed / 0xFFFFFFFF 得到 [0,1) 区间浮点数
  同一时间戳 → 同一组号码，具备可复现性。

  号码抽取流程：                                                                                                          1. 生成候选池 [1..33]，用 Fisher-Yates 洗牌（每步调用 next()）
  2. 取前 6 个作为红球，升序排列后显示                                                                                    3. 继续调用 next()，取 (next() * 16 | 0) + 1 得蓝球（1-16）
                                                                                                                          边界保证：
  - 红球严格不重复（洗牌法天然保证）
  - 蓝球范围 1-16，红球范围 1-33，均符合双色球规则

  这节设计是否 OK？

到这里之后，claude给你开了一个task来审查这个方案是否合理


● 修复完成，再次发起审查：
● 计划审查通过。实现计划已保存至 docs/superpowers/plans/2026-03-29-shuangseqiu-lottery.md。

然后就是最后一步，执行


● 现在创建实现任务并开始执行。

● Agent(Implement Task 1: HTML骨架) Claude-Opus-4.5
  ⎿  Write(index.html)
     Bash(ls -la /c/Users/Administrator/Desktop/temp/study/index.html && wc -l
         /c/Users/Administrator/Desktop/temp/study/index.html)
     Running…
     Read(index.html)
     +1 more tool use (ctrl+o to expand)
     ctrl+b to run in background
* 实现 Task 1… (1m 10s · ↓ 1.6k tokens · thought for 7s)
  ⎿  ◼ Task 1: 页面骨架与静态样式
     ◻ Task 2: 样式系统（球、动画、布局）
     ◻ Task 3: 随机算法与号码生成
     ◻ Task 4: 动画渲染与交互逻辑  
     ◻ Task 5: 最终检查与收尾

到这里,brainstorming 会给我们如下交付件

计划书
设计文档
代码实现

我们检查一下这三个交付件


docs/
docs/superpowers
docs/superpowers/specs
docs/superpowers/specs/2026-03-29-shuangseqiu-lottery-design.md
docs/superpowers/plans
docs/superpowers/plans/2026-03-29-shuangseqiu-lottery.md

效果

可以看到，我只是简单的提了个问题，claude完美的将我的需求实现了，后面买双色球就依赖它来给我中500万吧~

总结

本文介绍了一个比较有用的skill，当我们完成一个事情的时候，借助它能够让我们减少部分思考的实现。通过这个工具，可以让我们在未知的领域中能够更敢于学习，快速迭代，解决问题。

附录

源码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双色球智能选号</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f2f5;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    .card {
      background: #fff;
      border-radius: 16px;
      padding: 40px 48px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      text-align: center;
      min-width: 480px;
    }

    h1 {
      font-size: 28px;
      color: #c0392b;
      letter-spacing: 2px;
      margin-bottom: 4px;
    }

    .subtitle {
      font-size: 13px;
      color: #999;
      margin-bottom: 32px;
    }

    /* 球行布局 */
    .balls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 24px;
      min-height: 72px;
    }

    .red-zone {
      display: flex;
      gap: 10px;
    }

    .blue-zone {
      display: flex;
    }

    .divider {
      width: 2px;
      height: 60px;
      background: #e0e0e0;
      margin: 0 16px;
      border-radius: 1px;
    }

    /* 球基础样式 */
    .ball {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow:
        inset -4px -4px 8px rgba(0,0,0,0.25),
        inset 4px 4px 8px rgba(255,255,255,0.35),
        0 4px 12px rgba(0,0,0,0.20);
      opacity: 0;
    }

    .ball.red {
      background: radial-gradient(circle at 35% 35%, #ff6b6b, #c0392b 60%, #922b21);
    }

    .ball.blue {
      background: radial-gradient(circle at 35% 35%, #74b9ff, #2980b9 60%, #1a5276);
    }

    /* 落球动画 */
    @keyframes drop-in {
      0%   { opacity: 0; transform: translateY(-80px) scale(0.6); }
      60%  { opacity: 1; transform: translateY(10px) scale(1.05); }
      80%  { transform: translateY(-6px) scale(0.97); }
      95%  { transform: translateY(3px) scale(1.01); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .ball.animate {
      animation: drop-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* 种子信息 */
    .seed-info {
      font-size: 13px;
      color: #aaa;
      margin-bottom: 28px;
      min-height: 36px;
      line-height: 1.6;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .seed-info.visible {
      opacity: 1;
    }

    /* 按钮 */
    #btn {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 14px 48px;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 2px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(192,57,43,0.4);
      transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
    }

    #btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(192,57,43,0.5);
    }

    #btn:active:not(:disabled) {
      transform: translateY(0);
    }

    #btn:disabled {
      background: linear-gradient(135deg, #bbb, #999);
      box-shadow: none;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>双色球智能选号</h1>
    <p class="subtitle">以时间为种子</p>

    <div class="balls-row">
      <!-- 红球区 -->
      <div class="red-zone" id="redZone">
        <!-- 由 JS 动态插入 -->
      </div>
      <!-- 分隔线 -->
      <div class="divider"></div>
      <!-- 蓝球区 -->
      <div class="blue-zone" id="blueZone">
        <!-- 由 JS 动态插入 -->
      </div>
    </div>

    <div class="seed-info" id="seedInfo">
      <!-- 由 JS 填充 -->
    </div>

    <button id="btn" onclick="generate()">开始摇号</button>
  </div>

  <script>
    let clickCount = 0;

    // 初始化种子：Date.now() + 加法 nonce，防止快速点击种子重复
    function initSeed() {
      const ts = Date.now();
      const nonce = clickCount++;
      return { seed: ts + nonce, ts };
    }

    // LCG 伪随机数生成器：返回 [新seed, 浮点数∈[0,1)]
    function next(seed) {
      seed = ((seed * 1664525 + 1013904223) & 0xFFFFFFFF) >>> 0;
      return [seed, seed / 0x100000000];
    }

    // 生成双色球号码：6个红球(1-33不重复升序) + 1个蓝球(1-16)
    function generateNumbers(seed) {
      // 红球：Fisher-Yates 洗牌 [1..33]，取前6个
      const arr = Array.from({ length: 33 }, (_, i) => i + 1);
      let r;
      for (let i = 32; i >= 1; i--) {
        [seed, r] = next(seed);
        const j = Math.floor(r * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      const red = arr.slice(0, 6).sort((a, b) => a - b);

      // 蓝球：1-16
      [seed, r] = next(seed);
      const blue = Math.floor(r * 16) + 1;

      return { red, blue };
    }

    // 格式化时间戳为可读字符串
    function formatTime(ts) {
      const d = new Date(ts);
      const pad = n => String(n).padStart(2, '0');
      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ` +
             `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.` +
             String(d.getMilliseconds()).padStart(3, '0');
    }

    function generate() {
      const btn = document.getElementById('btn');
      const redZone = document.getElementById('redZone');
      const blueZone = document.getElementById('blueZone');
      const seedInfo = document.getElementById('seedInfo');

      // 1. 记录种子（同一变量用于显示和生成）
      const { seed, ts } = initSeed();

      // 2. 立即显示种子信息
      seedInfo.innerHTML =
        `时间种子：${seed}<br>（${formatTime(ts)}）`;
      seedInfo.classList.add('visible');

      // 3. 禁用按钮
      btn.disabled = true;

      // 4. 生成号码
      const { red, blue } = generateNumbers(seed);

      // 5. 清空旧球
      redZone.innerHTML = '';
      blueZone.innerHTML = '';

      // 6. 创建红球（6个），每球设置 animationDelay
      const allBalls = [];
      red.forEach((num, i) => {
        const ball = document.createElement('div');
        ball.className = 'ball red';
        ball.textContent = String(num).padStart(2, '0');
        ball.style.animationDelay = `${i * 200}ms`;
        redZone.appendChild(ball);
        allBalls.push(ball);
      });

      // 7. 创建蓝球（1个），延迟在红球之后
      const blueBall = document.createElement('div');
      blueBall.className = 'ball blue';
      blueBall.textContent = String(blue).padStart(2, '0');
      blueBall.style.animationDelay = `${6 * 200}ms`;
      blueZone.appendChild(blueBall);
      allBalls.push(blueBall);

      // 8. 触发动画（双 rAF 确保样式刷新后再添加 animate 类）
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          allBalls.forEach(ball => ball.classList.add('animate'));
        });
      });

      // 9. 第7球动画结束后恢复按钮（{ once: true } 防止重复触发）
      // fallback：若动画未触发（如 prefers-reduced-motion），1900ms 后强制恢复
      const fallbackTimer = setTimeout(() => { btn.disabled = false; }, 1900);
      blueBall.addEventListener('animationend', () => {
        clearTimeout(fallbackTimer);
        btn.disabled = false;
      }, { once: true });
    }

    // 页面加载时自动生成一次
    generate();
  </script>
</body>
</html>

目录

什么是 brainstorming

安装

使用

演示

效果

总结

附录