我是怎么用 Claude Code + Superpowers + GLM 5.1 从0到1做出一个儿童拼图游戏的！
一个想法 → 一个完整产品，全程 AI 协作开发实录 🔥
今天来分享我如何用 Claude Code 的 Superpowers 技能体系，从一句"我想做一个儿童拼图游戏"出发，经过头脑风暴、方案设计、计划制定、代码实现，最终部署上线到 Vercel 的完整过程！
这不是传统的"AI帮我写代码"，而是一套结构化的协作方法论—— AI 不是工具人，而是你的架构师、项目经理和代码审查员。
| 开始页 | 游戏页 |
|---|---|
💡 第一步：头脑风暴 —/superpowers:brainstorming
我只输入了一句话：
我想做一个儿童拼图游戏
Claude Code 自动调用了superpowers:brainstorming技能，进入了结构化的头脑风暴流程。整个过程就像和一位经验丰富的产品经理聊天：
📋 流程清单自动生成
技能一启动，就自动创建了8步任务清单：
- Explore project context
- Offer visual companion
- Ask clarifying questions
- Propose 2-3 approaches
- Present design
- Write design doc
- Spec self-review
- User reviews written spec
🎨 视觉伴侣（Visual Companion）
因为拼图游戏涉及大量视觉问题（界面布局、拼图样式等），技能自动问我：
“有些内容可能更适合在浏览器中展示给你看。我可以在讨论过程中生成原型图、布局对比和视觉设计。这个功能还比较新，可能会消耗较多 token。你想试试吗？”
我同意后，Claude 启动了本地 HTTP 服务器，把 HTML 原型推送到浏览器，我可以直接在浏览器里看到方案对比图，点击选择我喜欢的方案！
❓ 逐个提问，帮我理清需求
不是一口气问一堆问题，而是一个问题一个消息，每个都有多个选项：
第1问：目标年龄段？
→ 我选了 3-5岁（幼儿），技能解释了这个年龄段需要极简界面、大拼图块
第2问：拼图类型？
→ 经典拼图（推荐），技能说明了各类型的区别
第3问：运行平台？
→ Web网页（推荐），理由是开发最简单、任何设备都能玩
第4问：图片素材来源？
→ 两者都支持（预设+上传），功能最全
第5问：难度设置？
→ 多难度等级（2×2/3×3/4×4），渐进式体验
第6问：技术栈？
→ React，我选了自己熟悉的框架
🏗️ 方案对比 — 在浏览器中展示
技能在浏览器中同时展示了3种实现方案的对比图：
| 方案 | 特点 |
|---|---|
| A: Canvas渲染 | 拼图形状自由，但实现复杂 |
| B: DOM组件 ✅推荐 | 纯React，触屏友好，最适合幼儿 |
| C: Phaser游戏引擎 | 功能强大但过重 |
每个方案都有架构示意图、优缺点对比。我点了方案B，技能记录了我的选择。
📐 设计分段展示 — 逐段确认
确认方案后，技能一段一段展示设计，每段都问我"这个看起来合理吗？"
- 整体架构— 配置层/游戏层/反馈层，数据流清晰
- 核心组件结构— App→StartScreen/GameScreen/CompleteScreen的树状图
- 数据模型— PuzzlePiece和GameState的TypeScript类型定义
- 界面设计— 在浏览器中展示了开始页、游戏页、完成页的完整原型！
- 反馈机制— 放对了/放错了/完成的音效和视觉反馈
- 交互逻辑— 拖拽、拼合检测、打乱算法
- 错误处理— 图片加载失败、上传过大、浏览器兼容降级
每一段我只需回复"合理"或"合适"，就能推进到下一段。
📄 设计文档自动生成
所有设计确认后，技能自动把完整设计写入：
docs/superpowers/specs/2026-05-02-children-puzzle-design.md然后做了自查（Spec Self-Review）：
- 占位符扫描：无TBD/TODO
- 内部一致性：架构与组件匹配
- 范围检查：聚焦单一拼图游戏
- 歧义检查：需求明确无歧义
最后让我审核文档，我确认后技能转入下一阶段。
📝 第二步：写实施计划 —/superpowers:writing-plans
设计文档确认后，Claude 自动调用了superpowers:writing-plans技能，把设计转化为可执行的任务级计划。
15个 bite-sized 任务
每个任务都是 2-5 分钟的小步骤，遵循 TDD（先写测试→跑看失败→实现→跑看通过→提交）：
Task 1: 项目初始化（Vite + React + Vitest） Task 2: 类型定义和常量 Task 3: Shuffle打乱算法（TDD） Task 4: 拼图块裁切区域计算（TDD） Task 5: 上传图片压缩（TDD） Task 6: 音效生成（Web Audio API） Task 7: 游戏状态管理Hook（TDD） Task 8: PuzzlePiece组件（TDD） Task 9: StartScreen组件（TDD） Task 10: GameScreen组件（TDD） Task 11: CompleteScreen组件（TDD） Task 12: App组件整合 Task 13: 预设图片素材（8个SVG） Task 14: PuzzlePiece背景尺寸修正 Task 15: 运行和手动验证每个任务都包含：完整的测试代码、完整的实现代码、运行命令、预期输出、commit 消息。没有placeholder，没有TBD，全部是可直接执行的代码。
🤖 第三步：执行计划 —/superpowers:subagent-driven-development
我选择了Subagent-Driven方式执行计划。这是最有趣的部分！
什么是 Subagent-Driven？
每个任务派一个独立的 AI 子代理（subagent）来执行，它不会继承我的对话历史，而是收到精确的任务描述和上下文。完成后还有两阶段审查：
- Spec合规审查— 另一个子代理检查代码是否完全匹配规格要求
- 代码质量审查— 检查代码是否整洁、可维护
主代理（我） → 派遣实现子代理 → 实现+测试+提交 ↓ 派遣spec审查子代理 → 合规✅？ ↓ 派遣质量审查子代理 → 代码质量✅？ ↓ 标记任务完成 → 下一个任务实际执行过程
合并执行提效：因为一些任务比较机械（项目初始化、类型定义、工具类），我把多个独立任务合并到一个子代理里批量执行，大幅节省时间：
- Tasks 1（项目初始化）→ 单独执行，快速通过
- Tasks 2-6（类型+5个工具类）→ 合并到一个子代理，TDD逐个验证
- Tasks 7-11（Hook+5个组件）→ 合并到一个子代理，TDD逐个验证
- Tasks 12-14（整合+图片+修正）→ 合并到一个子代理
每个子代理完成后，我在主对话中验证测试结果和commit记录，确认一切正常后标记完成。
🎯 子代理的执行报告
每个子代理会返回一个详细报告：
- 实现了什么
- 测试结果（多少个pass）
- 修改了哪些文件
- 自查发现
- 任何concerns
我只需要看报告确认，不用自己去检查每个文件。
🐛 第四步：手动测试与踩坑修复
子代理完成所有15个任务后，我启动开发服务器在浏览器中验证。
Playwright 自动化验证
用 Claude Code 内置的 Playwright MCP 工具，直接在浏览器中操作：
- 打开页面 → 看到开始页 ✅
- 点击小猫图片 → 选中 ✅
- 点击开始拼图 → 进入游戏页 ✅
- 用 evaluate 执行点击交换 → 拼图块交换成功 ✅
- 完成拼图 → 自动跳转庆祝页 ✅
6个踩坑，每次只需一句话
| 我的输入 | Claude 的修复 |
|---|---|
| “从相册选择图片后没看到预览” | 添加上传图片预览卡片 |
| “上下滚动功能没用” | 移除overflow: hidden |
| “手机端适配不太好” | 全面改CSS：竖排布局、自适应网格、百分比背景 |
| “点击开始拼图后四宫格图片不显示” | 添加width/height: 100% |
| “手机端拖拽功能不行” | 手动绑定{passive: false}touch 事件 |
| “passive event listener报错” | 移除 JS 的 preventDefault，靠 CSS touch-action |
每次我都只描述了问题，Claude 自动定位原因、修复代码、运行测试验证、提交 commit。我全程没有手动写一行代码。
🚀 第五步：部署到 Vercel
首次部署遇到构建错误
推送到 GitHub 后，Vercel 自动部署，但报了 TS6133 错误（未使用变量）。
我只把错误信息贴给 Claude：
src/App.tsx(1,1): error TS6133: ‘React’ is declared but its value is never read…
Claude 立刻定位了5处未使用变量，逐个移除，npm run build通过，重新推送后 Vercel 秒级重新部署成功！
后续迭代也一句话搞定
| 我的输入 | Claude 的动作 |
|---|---|
| “将页面标题改成小天儿童拼图” | 改了 index.html 和 StartScreen |
| “还是改成儿童拼图吧” | 又改回儿童拼图 |
| “展示的图片只有4张，弄到12张，主页还是显示4个但可以左右滑动” | 创建8个新SVG + 改常量 + 添加横向滑动轮播CSS |
| “拖拽功能又失效了” | 简化交互为点击交换 |
| “手机端不能支持拖拽吗” | 用非passive touch事件实现真正的拖拽 |
🧠 Superpowers 技能体系总结
整个项目用了这些 Superpowers 技能：
| 技能 | 作用 | 什么时候用 |
|---|---|---|
brainstorming | 结构化头脑风暴，逐个提问，方案对比 | 有想法但没设计方案时 |
visual companion | 浏览器中展示原型和方案对比 | 涉及视觉/布局问题时 |
writing-plans | 把设计转化为TDD任务级计划 | 设计确认后，准备实现前 |
subagent-driven-development | 派子代理逐任务执行+两阶段审查 | 有计划后，选择执行方式 |
executing-plans | 在当前会话中批量执行 | 不想派子代理时 |
核心方法论
- 想法 → 设计：brainstorming 技能把模糊想法变成清晰设计
- 设计 → 计划：writing-plans 技能把设计变成可执行的TDD任务
- 计划 → 代码：subagent-driven 技能把计划变成实际代码+测试
- 问题 → 修复：直接描述问题，Claude 自动定位修复
AI 不只是写代码的工具，而是从产品构思到代码审查的全流程协作伙伴。
📊 最终成果
- 22+ 个 git commit，每个都有清晰的 feat/fix 标签
- 36 个单元测试，覆盖算法、状态、组件
- 3 种交互方式：桌面拖拽、手机拖拽、点击交换
- 12 张手绘 SVG预设图片 + 用户上传支持
- 从一句话到上线产品，全程没有手动写代码
- 源码已经上传到 Github 上面，https://github.com/kensonhe/kids-puzzle
- 也直接访问：https://puzzle.aigame.art/
💬 体验感受
用 Superpowers 技能体系开发，最大的不同是：
- ❌ 传统方式：自己想需求 → 自己写设计 → 自己写代码 → 自己debug
- ✅ Superpowers方式：描述想法 → AI引导你做决策 → AI写计划 → AI子代理执行 → AI审查质量
我不是在"让AI帮我写代码"，而是在和AI做结对开发—— 我负责方向决策（选什么方案、改什么需求），AI负责执行落地（写代码、写测试、跑验证、做审查）。
这种方式下，我的角色更像产品经理和技术负责人，而不是码农。而Claude Code就是我的全栈工程团队 💪
有任何问题欢迎留言～也想试试用Claude Code做项目的姐妹们冲！💕
#ClaudeCode #Superpowers #AI编程 #前端开发 #React #Vercel部署 #儿童游戏 #从0到1 #AI协作开发