一个想法 → 一个完整产品全程 AI 协作开发实录 今天来分享我如何用 Claude Code 的 Superpowers 技能体系从一句我想做一个儿童拼图游戏出发经过头脑风暴、方案设计、计划制定、代码实现最终部署上线到 Vercel 的完整过程这不是传统的AI帮我写代码而是一套结构化的协作方法论—— AI 不是工具人而是你的架构师、项目经理和代码审查员。开始页游戏页 第一步头脑风暴 —/superpowers:brainstorming我只输入了一句话我想做一个儿童拼图游戏Claude Code 自动调用了superpowers:brainstorming技能进入了结构化的头脑风暴流程。整个过程就像和一位经验丰富的产品经理聊天 流程清单自动生成技能一启动就自动创建了8步任务清单Explore project contextOffer visual companionAsk clarifying questionsPropose 2-3 approachesPresent designWrite design docSpec self-reviewUser 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: 游戏状态管理HookTDD 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-11Hook5个组件→ 合并到一个子代理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 错误未使用变量。我只把错误信息贴给 Claudesrc/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协作开发