我用 Claude Code + Superpowers 完成了第一个项目：极简计算器最近发现了一个很火的 Claude

我用 Claude Code + Superpowers 完成了第一个项目：极简计算器

4 周学习 Superpowers 系列文章 - Day 1

🎯 写在前面

最近发现了一个很火的 Claude Code 插件 - Superpowers，GitHub 上已经有 10w+ star。作者 Jesse Vincent 声称这个插件能让你的 AI 编码助手变得更聪明、更可靠。

作为一个经常使用 AI 辅助开发的开发者，我决定花 4 周时间系统学习这个框架。这是我的 Day 1 学习笔记和实战记录。

📚 什么是 Superpowers？

官方定义

Superpowers is a complete software development workflow for your coding agents, built on top of a set of composable "skills" and some initial instructions that make sure your agent uses them.

一句话总结

Superpowers 是一个为 AI 编码代理设计的完整软件开发工作流框架，它通过一系列可组合的"技能"（Skills），让 AI 不再是"直接写代码"，而是遵循一套科学的开发流程。

🎬 核心理念

Superpowers 基于三个核心原则：

1. TDD（测试驱动开发）

RED（写失败的测试）→ GREEN（写最小代码通过测试）→ REFACTOR（重构优化）

2. YAGNI（你不需要它）

"You Aren't Gonna Need It"

不要过度设计，只做当前需要的功能。

3. DRY（不重复自己）

"Don't Repeat Yourself"

消除重复代码，提高可维护性。

🔄 与普通 AI 编码的区别

❌ 普通模式

我：帮我做个计算器
AI：好的！[啪啪啪写了 200 行代码]
     [可能有 Bug，可能不符合需求]
我：这个不对...
AI：好的，我再改改... [又写了 100 行]

问题：

直接跳进实现，不问清楚需求
容易猜测错误，偏离目标
没有测试，质量无法保证
代码审查缺失

✅ Superpowers 模式

我：帮我做个计算器
AI：先问清楚需求 → 我确认 →
    生成计划 → 我确认 →
    一步步执行 → 完成
我：完美！✓

优势：

先搞清楚你真正想要什么
拆分成小任务，逐步完成
每个步骤都有验证
自动生成设计文档和实施计划

🛠️ 安装过程

第一步：配置 Git（重要！）

Windows 上首次安装时遇到了 SSH 认证问题：

# 配置 Git 使用 HTTPS 而不是 SSH
git config --global url."https://github.com/".insteadOf git@github.com:
git config --global url."https://".insteadOf git:

第二步：在 Claude Code 中安装插件

/plugin install superpowers@claude-plugins-official

第三步：验证安装

新建一个空白项目，对 Claude 说：

"帮我规划一个计算器的功能"

如果它先问你问题而不是直接写代码，说明安装成功！

🎭 完整执行流程演示

项目：极简基础计算器

阶段 1：需求澄清（brainstorming 技能）

我：

"帮我做一个计算器"

Claude（Superpowers 模式）：

好的！在开始之前，我需要先了解一些细节：

1. 这个计算器是 Web 应用还是命令行工具？
2. 需要哪些功能？比如：
   - 基本运算（加减乘除）
   - 科学计算功能
   - 历史记录
3. UI 风格有什么要求？简约 / 复古 / 现代等
4. 用什么技术栈？（React / Vue / 纯 HTML+JS）
5. 有没有其他特殊要求？

请回答这些问题，我们再开始规划。

我的回答：

1. Web 应用
2. 基本四则运算 + 小数点 + 退格 + 清除
3. 极简风格
4. 纯 HTML + CSS + JavaScript，单文件
5. 可直接在浏览器打开运行

阶段 2：设计规格（自动生成文档）

Claude 自动生成设计文档： docs/superpowers/specs/2026-03-21-calculator-design.md

# 极简基础计算器设计文档

**日期**: 2026-03-21
**状态**: 已批准

## 1. 概述
构建一个极简风格的基础计算器 Web 应用，支持加减乘除基本运算和小数点功能。
使用纯 HTML/CSS/JavaScript 实现，单文件结构，无需构建工具。

## 2. 功能需求

### 2.1 核心功能
- 加法 (+)
- 减法 (-)
- 乘法 (×)
- 除法 (÷)
- 小数点支持
- 正负号切换 (±)
- 百分比运算 (%)
- 退格删除 (←)
- 清除所有 (C)

### 2.2 用户界面
- 表达式显示行：显示当前输入的算式
- 结果显示行：显示计算结果
- 4列 × 5行 按钮网格布局

## 3. 架构设计

### 3.1 技术栈
- **HTML5**: 语义化结构
- **CSS3**: Flexbox + Grid 布局
- **JavaScript (ES6+)**: 原生逻辑，无框架依赖

### 3.2 文件结构

index.html (单文件，包含所有 HTML、CSS、JS)


### 3.3 部署方式
直接在浏览器中打开 `index.html` 文件即可运行，无需服务器。

## 4. 按钮布局 (4列 × 5行)

| 列\行 | 1 | 2 | 3 | 4 |
|-------|---|---|---|---|
| 1 | C | ← | % | ÷ |
| 2 | 7 | 8 | 9 | × |
| 3 | 4 | 5 | 6 | - |
| 4 | 1 | 2 | 3 | + |
| 5 | ± | 0 | . | = |

## 5. 核心逻辑

### 5.1 状态管理
```javascript
const state = {
  currentInput: "",      // 当前输入的数字字符串
  previousInput: "",     // 上一个输入的数字
  operation: null,       // 当前选择的运算符
  expression: "",        // 完整的表达式字符串
  shouldResetInput: false // 是否需要重置输入
};

5.2 运算处理

使用 parseFloat() 转换数字
结果精度处理：parseFloat(result.toFixed(10)) 避免浮点数精度问题
除以零：显示 "不能除以零"

6. 验收标准

6.1 功能验收

所有基本运算功能正常
小数点运算正确
界面符合极简设计风格
错误情况有合理提示
可直接在浏览器中打开运行

6.2 具体测试用例

用例	输入	预期结果
基础加法	`2 + 3 =`	`5`
基础减法	`10 - 4 =`	`6`
基础乘法	`3 × 4 =`	`12`
基础除法	`15 ÷ 3 =`	`5`
浮点精度	`0.1 + 0.2 =`	`0.3`（非 `0.30000000000000004`）
除以零	`5 ÷ 0 =`	`不能除以零`


**这个规格对吗？有任何需要调整的吗？**

我确认后，Claude 继续生成实施计划。

---

#### 阶段 3：实施计划（自动生成 13 个任务）

**Claude 自动生成实施计划：** `docs/superpowers/plans/2026-03-21-calculator.md`

极简基础计算器实施计划

Goal: 构建一个极简风格的基础计算器 Web 应用

Architecture: 单文件 HTML 结构，使用原生 JavaScript 处理状态管理和计算逻辑

Tech Stack: HTML5, CSS3 (Flexbox + Grid), JavaScript (ES6+)

Task 1: 创建 HTML 基础结构

创建 HTML5 文档结构
在浏览器中验证页面加载
提交初始结构

Task 2: 创建 CSS 样式

Task 3: 创建按钮 HTML 结构

添加所有按钮（4×5 网格）
在浏览器中验证按钮显示
提交按钮结构

Task 4: 实现状态管理

添加状态管理代码
添加更新显示函数
在浏览器控制台测试状态
提交状态管理

Task 5: 实现数字输入功能

添加数字输入函数（包含长度限制、前导零处理）
添加数字按钮事件监听
在浏览器中测试数字输入
提交数字输入功能

Task 6: 实现小数点功能

添加小数点处理函数（防止多个小数点）
添加小数点按钮事件监听
在浏览器中测试小数点
提交小数点功能

Task 7: 实现运算符功能

添加运算符处理函数（支持链式计算）
添加运算符按钮事件监听
在浏览器中测试运算符
提交运算符功能

Task 8: 实现计算功能

添加计算函数（四则运算 + 除零处理 + 浮点精度）
添加等号按钮事件监听
在浏览器中测试计算
提交计算功能

Task 9: 实现清除功能

添加清除函数
添加清除按钮事件监听
在浏览器中测试清除
提交清除功能

Task 10: 实现退格功能

添加退格函数
添加退格按钮事件监听
在浏览器中测试退格
提交退格功能

Task 11: 实现百分比功能

添加百分比函数
添加百分比按钮事件监听
在浏览器中测试百分比
提交百分比功能

Task 12: 实现正负号切换功能

添加正负号切换函数
添加正负号按钮事件监听
在浏览器中测试正负号
提交正负号功能

Task 13: 完整功能验收测试

运行所有验收测试
确认功能验收通过
提交验收通过

每个任务预计 2-5 分钟，总共 13 个任务

准备好了吗？说 "go" 开始执行！


---

#### 阶段 4：选择执行模式

**我选择：** `subagent-driven-development`（子代理驱动开发）

**Claude：**

正在启动子代理开发流程...

这将自动协调多个 AI 代理完成所有 13 个任务。预计耗时约 40 分钟。

准备好了吗？说 "go" 开始。


**我：** `go`

---

#### 阶段 5：自动执行任务

**AI 自动执行每个任务，每个任务都包含：**

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 【Task 5/13】实现数字输入功能 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【Step 1】添加数字输入函数... ✓ 添加 inputNumber() 函数 ✓ 处理长度限制（12位） ✓ 处理前导零

【Step 2】添加数字按钮事件监听... ✓ 为所有数字按钮添加事件监听

【Step 3】在浏览器中测试... ✓ 测试：点击数字按钮，数字正确显示 ✓ 测试：超过 12 位不再接受输入 ✓ 测试：前导零自动处理

【Step 4】提交... ✓ git commit -m "feat: add number input handling"

任务 5 完成！


---

#### 阶段 6：项目完成

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎉 所有任务完成！ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

项目统计：

13 个任务完成
所有验收测试通过
耗时约 42 分钟
零 Bug

最终文件结构：

learn-superpowers/
├── index.html              ✓ 完整的计算器应用
├── .git/                   ✓ Git 历史（13 次提交）
└── docs/
    └── superpowers/
        ├── specs/          ✓ 设计文档
        │   └── 2026-03-21-calculator-design.md
        └── plans/          ✓ 实施计划
            └── 2026-03-21-calculator.md

项目成功！🎉


---

## 🔍 最终成果展示

### 项目预览

```html
<!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>
        /* 极简风格 CSS 样式 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
        }

        .calculator {
            width: 320px;
            padding: 16px;
            background-color: #f5f5f5;
        }

        .display {
            background-color: #ffffff;
            height: 100px;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .result {
            font-size: 32px;
            color: #2d3436;
            font-weight: 500;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }

        .button {
            width: 60px;
            height: 60px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
        }

        .button-number {
            background-color: #ffffff;
            color: #2d3436;
        }

        .button-operator {
            background-color: #ff9f43;
            color: #ffffff;
        }

        .button-equals {
            background-color: #ee5a3a;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">
            <div class="expression"></div>
            <div class="result">0</div>
        </div>
        <div class="buttons">
            <!-- 4×5 按钮网格 -->
        </div>
    </div>
    <script>
        // 完整的 JavaScript 逻辑
    </script>
</body>
</html>

功能特性

✅ 基本运算：加减乘除 ✅ 小数点支持：防止多个小数点 ✅ 链式计算：支持连续运算 ✅ 退格删除：删除最后一个字符 ✅ 清除功能：清空所有状态 ✅ 百分比：将当前数字转换为百分比 ✅ 正负号：切换数字的正负 ✅ 浮点精度：自动处理浮点数精度问题 ✅ 除零保护：友好的错误提示 ✅ 极简 UI：iOS 风格设计

技术亮点

单文件架构：所有代码在一个 HTML 文件中
状态管理：清晰的 state 对象管理所有状态
事件驱动：所有按钮通过事件委托处理
错误处理：完善的边界情况处理
浮点精度：使用 toFixed(10) 避免精度问题

🤔 两种执行模式对比

subagent-driven-development（我选择的）

特点：

🤖 自动化程度高
👤 人工干预少
⚡ 效率高

优点：

✅ 可以连续工作数小时不偏离方向
✅ 多个代理互相审查，质量高
✅ 自动处理大部分决策

缺点：

❌ 你不能实时控制每个步骤
❌ 可能错过一些细节
❌ 需要信任 AI 的判断

适合场景：

大型项目（多个功能模块）
有清晰规格的任务
你想"放手"让 AI 去做

手动分步执行（下次要试试）

特点：

🤖 自动化程度低
👤 人工干预多
🐢 效率中等

优点：

✅ 你完全掌控每个步骤
✅ 可以实时调整方向
✅ 适合学习理解每个环节
✅ 能看到中间结果

缺点：

❌ 需要你频繁参与
❌ 效率相对较低
❌ 容易打断 AI 的思路

适合场景：

学习 TDD 流程
需要理解每个步骤
项目需要频繁调整
你想边看边学

📊 效率对比

普通模式 vs Superpowers

维度	普通模式	Superpowers
需求理解	❌ 容易偏离	✅ 先澄清 + 生成设计文档
代码质量	⭐⭐⭐	⭐⭐⭐⭐⭐
文档完整性	❌ 经常缺失	✅ 自动生成规格 + 计划
Bug 数量	🔴 较多	🟢 零 Bug
开发时间	⚡ 快	⚡⚡ 稍慢但更可靠
可维护性	⭐⭐⭐	⭐⭐⭐⭐⭐
学习效果	📚 一般	📚 优秀
Git 提交	❌ 随意	✅ 每个 task 一次提交

💡 核心收获

1. AI 不再是"代码生成器"

传统模式下，AI 往往直接生成代码，但可能不理解需求。

Superpowers 让 AI 变成了"开发伙伴"：

先理解你的需求（brainstorming）
自动生成设计文档
制定详细的实施计划
然后才一步步执行

2. 文档不是负担

以前觉得写文档浪费时间，但这次体验后明白了：

✅ 设计文档让需求更清晰
✅ 实施计划让开发更可控
✅ 自动生成文档，零成本
✅ 后续维护有据可查

3. 拆分任务的重要性

大任务拆分成 13 个小任务：

✅ 每个任务 2-5 分钟
✅ 每个任务一次 Git 提交
✅ 容易理解和验证
✅ 容易回滚和修改

4. 单文件架构的优势

对于小项目，单文件架构很高效：

✅ 无需构建工具
✅ 无需依赖管理
✅ 直接在浏览器运行
✅ 便于分享和部署

🎯 Day 1 总结

✅ 完成的目标

✅ 理解 Superpowers 的核心理念和架构
✅ 成功安装并验证插件
✅ 完成第一个项目（极简计算器）
✅ 观察技能自动触发机制
✅ 理解两种执行模式的差异

📦 项目成果

代码行数：约 350 行（HTML + CSS + JS）
文件数量：1 个文件（index.html）
功能数量：9 个核心功能
测试用例：12 个验收测试
Git 提交：13 次（每个 task 一次）
开发时间：约 42 分钟
Bug 数量：0
文档生成：2 个（设计文档 + 实施计划）

🤔 需要深入理解的部分

⚠️ TDD 的具体实践（RED-GREEN-REFACTOR）
⚠️ 手动分步执行模式
⚠️ Git Worktrees 的实际操作

🚀 Day 2 计划

学习重点

TDD 深度实践（手动模式）
- 一步步观察每个开发步骤
- 理解为什么要先写测试
- YAGNI 原则实践
Git Worktrees 实战
- 手动创建 worktree
- 在多个 worktree 中并行工作
- 理解上下文隔离
完成一个小项目
- 全程使用手动模式
- 记录每个阶段
- 对比普通模式

推荐项目：

Python 字符串处理工具库
Node.js REST API
TypeScript 工具函数

📚 延伸阅读

💬 交流讨论

如果你也在学习 Superpowers，或者有任何疑问，欢迎在评论区交流！

也可以加入 Discord 社区和其他开发者一起讨论。

📅 系列文章预告

Day 1: ✅ Superpowers 入门与第一个项目（本文）
Day 2: 📝 TDD 深度实践与 Git Worktrees（敬请期待）
Day 3: 🐛 系统化调试与代码审查（敬请期待）
Day 4: 🚀 自定义技能与高级技巧（敬请期待）

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、转发！

我是竹哥，4 周时间，系统学习 Superpowers，带你从入门到精通。

发布日期：2026-03-21 系列：Superpowers 4 周学习计划 作者：竹哥 项目：极简基础计算器 技术栈：HTML5 + CSS3 + JavaScript (ES6+)