别再让Agent瞎写屎山代码了！带你用Superpowers重塑Vibe Coding体验（附保姆级教程）

目录1、为什么你写的是“屎山”而别人写的是“神作”2、极简部署superpowers3、实战演示4、写在最后思考才是护城河最近一直在跟圈子里的朋友聊Agent聊Vibe Coding。在这个“万物皆可AI生成”的时代大家似乎都有一个错觉只要我把需求扔给AI它就能给我吐出一个完美运行的软件。但现实往往是骨感的。 你甩给Agent一句“给我写个网站。”它二话不说跳过需求调研、跳过架构设计、跳过代码Review吭哧吭哧几分钟直接给你产出一坨完全无法维护、跑起来全是Bug的“屎山代码”。这真的怪大模型不够聪明吗不管是Claude Code还是其他的强力模型它们的逻辑能力早就超越了普通初级程序员。真正卡住你的其实是你没有给AI一套标准化的工作流SOP。今天作为日常被AI“毒打”的过来人我要给你安利一个能让你的Agent体验直接发生质变的插件。 它在GitHub上有着极高的热度也是我最近日常开发中绝对离不开的神器——Superpowers。开源项目地址https://github.com/obra/superpowers1、为什么你写的是“屎山”而别人写的是“神作”坦诚地讲虽然我只是作为一名个人开发者但平时对工程的规范和代码质量还是有严格要求的。在不用Superpowers之前我看着AI写出来的代码经常感觉血压飙升。因为AI的默认行为模式是“填空题”思维——你给多少它写多少遇到没说清楚的边界条件它就开始“自行脑补”。而Superpowers本质上不是一个写代码的工具。它是一套强行插入到Agent执行链路里的“纪律委员会”。它通过内置的十几个Skill强制把“规划 - 拆解 - 执行 - 审查 - 复盘”这套成熟的软件工程方法论塞进AI的大脑里。它最核心的逻辑就是苏格拉底式提问。 在动手写哪怕一行代码之前它会像一个极其负责任甚至有点烦人的产品经理兼架构师一个问题接一个问题地“拷打”你直到把你的模糊需求变成一份毫无歧义的设计文档。2、极简部署superpowers这么牛的东西既然咱们已经配好了 Claude Code那部署起来其实就是敲行代码的事非常优雅。如果没有安装好 Claude Code 可以参考【2026 最新版】别再折腾了2026 最新 Claude Code 在 Windows 11 上的完美部署方案从零到一实现 VSCode 可视化编程你可以直接在 Claude Code 的对话框里通过官方市场一键把它拉下来/plugin install superpowersclaude-plugins-official或者如果你想走它专属的第三方插件市场源也就简单的两步走 先注册一下它的市场源/plugin marketplace add obra/superpowers-marketplace然后直接执行安装/plugin install superpowerssuperpowers-marketplace装完之后记得重启一下你的会话或者在命令行里直接敲个/reload-plugins-to-apply热加载一下让这尊大神彻底接管你的工作流。3、实战演示平时我自己在琢磨一些搞钱副业的时候脑子里经常会冒出各种新点子。以前遇到新需求我的习惯性动作就是打开终端直接让 AI 给我糊代码。比如这次我想做一个面向年轻人的 MBTI 测试网站核心需求就一句话需要有“简单、中等、复杂”三种不同的测试模式。这场“拷打”的导火索其实非常简单。我并没有写什么长达几千字的 Prompt我只是在 Claude Code 终端里轻飘飘地敲下了/plan进入规划模式。然后甩出了这句极其小白的指令“帮我做一个包含简单、中等、复杂三种模式的 MBTI 测试网站。”换做平时AI 可能会直接回复“好的我为你准备了以下代码...”然后产出一堆半成品。但因为有了 Superpowers 的底层逻辑在“蹲守”它并没有急着给我方案而是反手调动了brainstorming技能直接把我拽进了苏格拉底式的灵魂质问中。它没有急着写哪怕一行代码而是像一个极其严谨甚至有点招人烦的资深架构师一次只问一个问题逼着我去思考你看下面这张图就能感受到那种溢出屏幕的“工程素养”。它做的第一件事不是回答而是先去默默扫描了我当前的工程目录。发现这还是个空项目后它直接在终端里给我拉起了一个带有顶部导航栏的可交互“需求调研表”第一问直接拷打项目地基技术栈。它不仅列出了主流选项还像个带你的老法师一样贴心地给“纯 HTML/CSS/JS”打上了(推荐)标签理由一针见血“无需构建工具最简单快捷”。当然如果你想为了后续扩展做准备React、Vue 或者 Next.js 的选项它也给你备得整整齐齐。对于我这种很多脑子里只有点子、但缺乏系统性工程规划的人来说这种“提供优质选项让你做单选而不是让我去茫然填空”的交互简直是救命的。它极大地降低了你的决策成本但又死死守住了开发的底线——技术选型没定绝对不准往下乱写。(因为只是做一个轻量的测试站追求快糙猛我果断选了它推荐的 1 选项。)而且注意到图里顶部那排清晰的步骤条了吗Tech Stack-Mode Design-Language。只有当你老老实实答完这题它才会放你进入下一个最核心的环节模式设计。选完技术栈紧接着导航条切到了Mode Design模式设计。这才是整场“拷打”里最让我大呼过瘾的重头戏。说实话当我一开始随口提出“要分三个难度模式”的时候我脑子里非常粗浅的想法就是简单版搞个10道题复杂版搞个50道题敷衍一下完事儿。如果你任由初级 Agent 自由发挥它大概率也是这么干的最后做出来的就是一个极其无聊的刷题机器。但你看看图中 Superpowers 是怎么追问我的“三种模式的区别主要体现在哪方面”它给出的选项简直是在教我怎么做一个优秀的产品经理选项 1常规思维题目数量不同简单12题 / 中等28题 / 复杂48题。选项 2产品思维升维题型复杂度不同简单模式用非黑即白的“二选一”中等模式上更细腻的“李克特量表”就是那种从‘非常同意’到‘非常不同意’的5档打分复杂模式直接上“情景题和排序题”选项 3终极方案两者结合推荐。既增加题量又丰富题型让三种模式的体验差异最大化。看到这一幕我真的是心服口服。这哪里是一个只会敲代码的机器人这明明是一个拿着大厂高薪的资深产品专家在手把手教我做需求拆解帮我填补思维上的盲区。它不仅懂得怎么写出能跑的代码它更懂怎么做出“好用且专业”的产品。在它的降维打击下我毫不犹豫地按下了3。解决完最核心的业务逻辑导航条终于切到了最后一关Language语言偏好。平时我们自己搓这种小项目肯定看都不看直接上手就把中文硬编码Hardcode写死在 HTML 代码里了。这种做法后患无穷啊朋友们等哪天你这测试网突然火了你想把它做成出海产品搞点美金这时候再去代码的犄角旮旯里扒拉那些写死的中文文本绝对能让你改到吐血。但你看图中 Superpowers 的操作它直接在打地基的阶段就把产品国际化i18n的需求摆在了台面上。它问你是一步到位纯中文/纯英文还是直接上中英双语支持语言切换我毫不犹豫地把光标移到了3. 中英双语上。为什么说这种前置的被动“拷打”极具价值因为我在这里只做了一个简单的选择AI 等会儿在设计架构和写代码的时候就会自动帮我抽离出语言配置文件比如中英文的 JSON 字典并且在顶栏预留好语言切换的组件。这格局瞬间就从一个“街边小玩具”打开成了一个“标准化的商业级产品”。到这里Tech Stack技术栈、Mode Design模式设计、Language语言偏好全部确认完毕。当我选完所有的偏好来到最后的Submit环节时Superpowers 并没有像无头苍蝇一样立刻开干。它做了一个极其标准的工程动作——需求二次确认Review your answers。看看这张截图它把我刚才一路被“拷打”出来的结果清清楚楚地列成了一份清单技术栈纯 HTML/CSS/JS主打一个轻量快糙猛模式区别题目数量不同克制欲望先跑通 MVP 闭环语言偏好中英双语为后续国际化留口子各位这哪里是在写代码啊这分明就是一份由 AI 担任乙方起草交给我这个甲方来签字画押的项目合同在以前“裸奔”用 Agent 的时候为什么总出 Bug就是因为你以为你说明白了AI 以为它听懂了结果双方的理解根本不在一个频道上。跑着跑着代码就偏到了姥姥家。而在这个界面里需求边界被死死锁住。你点头它才敢干活。看着这清清爽爽的三个绿色的-我心里那种对未知代码的恐慌感一扫而空取而代之的是极度的踏实。我毫不犹豫地按下了1. Submit answers。“合同”正式生效。接下来系好安全带。因为我们要进入 Superpowers 真正震撼人心的「架构生成与 Task 任务流拆解」环节了……按下 Submit 之后仅仅过了几秒钟它没有像常规 AI 那样一股脑地把乱七八糟的 HTML 代码糊在屏幕上。你仔细看这张截图的上半部分。它给我甩出了一份极其老道、极其优雅的架构蓝图。看到这份蓝图的时候我真的在屏幕前倒吸了一口凉气。因为我前面为了追求快糙猛选了纯原生HTML/CSS/JS。对于一般的 AI 来说写原生代码就意味着把所有逻辑全塞在一个上千行的index.html屎山里。但它呢它硬生生把原生项目规划出了现代工程的模块化美感极致解耦一个 HTML 入口2 个 CSS 分管样式和动画足足 6 个独立的 JS 文件它把国际化i18n、题库、计分引擎、全局控制器拆得清清楚楚。单页体验SPA原生页面不刷新全靠 CSS 过渡动画做模块显隐。细节拉满把语言设置存进localStorage刷新不丢失、移动端优先适配、原生 CSS 变量控制主题……这根本不是一个练手 Demo 的规划这就是一个随时准备推上线的商业级 MVP 架构。但有意思的小插曲来了。看到截图下半部分那个紫色的Hook issue了吗在真实的本地开发环境里Vibe Coding 往往不是一帆风顺的。因为我本地工程目录的一些拦截配置pre-write hook阻断了它在本地物理生成那份.md计划文档的操作。如果是一般的半吊子 Agent碰到这种系统级拦截大概率直接报错崩溃原地罢工了。但 Superpowers 的流程控制简直稳如老狗。它不仅没有崩溃反而非常冷静地甩给我几个选项是重试写入还是跳过看着上面那份已经无懈可击、完全印在它上下文脑子里的架构蓝图我还写什么物理文档还要什么自行车我果断把光标往下移选中了2. Skip plan, start building跳过生成计划文件直接按原定架构开干。前期的痛苦“拷打”和精密规划终于结束了。按键敲下的那一刻主 Agent 正式退居幕后它即将唤醒底层的子 AgentSubagents大军开启丧心病狂的流水线编码模式。当我敲下回车果断选择“直接开干”后终端里紧接着弹出了这张图里极具仪式感的一幕。它没有一声不吭地开始跑代码而是用蓝色的高亮提示弹出了一个极其严肃的询问Exit plan mode?是否退出计划模式说实话看到这个提示的时候我被这种极其严谨的工程操守秀到了。为什么我觉得这个细节特别牛逼因为它完美诠释了什么是真正高级的“状态隔离”。普通的 AI 写代码是边想边写脚踩西瓜皮滑到哪里算哪里一旦遇到复杂的逻辑冲突上下文立马崩溃代码直接串线。但 Superpowers 的工作流在这里强制画了一条不可逾越的红线规划是规划执行是执行绝不混为一谈。这句Exit plan mode?其实就是 AI 在正式向我请示“老板地基已经打好蓝图已经全部刻在我的脑子里了。现在我要脱掉产品经理和架构师的西装换上底层码农的格子衫正式下车间去给你搬砖写代码了。你批准吗”这不仅是对用户控制权的极大尊重更是为了在底层模型里做一次干净的 Context上下文切换让接下来的执行 Agent 能 100% 专注在“实现逻辑”上而不是再去反复纠结需求。我看着屏幕满意地按下了1. Yes。“咔哒”一声计划模式的闸门正式关闭。执行模式开启。接下来请准备好感受硅基劳动力那种让人头皮发麻的疯狂输出吧当我按下Yes退出计划模式的那一瞬间屏幕上立刻弹出了这行字Let me start building. Ill create tasks and begin implementation.让我开始构建吧。我将创建任务并开始实施。以前用 AI 写代码最怕的就是它一句废话不说直接给你拉几百行代码写到一半突然因为 Token 上下文耗尽而“腰斩”。但你看这张截图Superpowers 调用的底层技能硬生生把这个大工程**“颗粒化”**了。它在终端里给我列出了一个极其清晰的6 步任务清单TasksCreate index.html skeleton搭建 HTML 骨架 -正在进行中Create i18n system创建国际化多语言系统Create question bank创建题库Create CSS styles编写样式库Create test engine result app controller编写测试引擎与核心控制器Create MBTI type definitions构建 MBTI 类型定义数据这不就是一个标准的 Kanban看板吗每完成一个小任务它就会打个勾。这种把大目标拆解成一个个“2-5分钟就能搞定的小模块”的做法就是防止 AI 精神分裂、乱写屎山的最有效手段。紧接着它没有在屏幕上“默写”代码而是直接调用了物理机的 Bash 命令mkdir -p F:/Website_plan/css F:/Website_plan/js F:/Website_plan/assets它开始在我的 F 盘里自动帮我建文件夹、搭工程目录了此时系统弹出了一个安全拦截问我是否允许它执行这个建目录的命令。作为一个已经彻底放权的“包工头”我直接把光标移到了2. Yes, and always allow access...是的并且始终允许访问该目录。我可不想它每建一个文件都来烦我。既然规划已经做得这么完美了剩下的就是放开手脚让这位不知疲倦的“超级赛博员工”自己去疯狂敲键盘吧授权允许它操作本地文件后我原本以为接下来就是看着它一行行往index.html或者questions.js里无脑填代码的过程。毕竟大模型嘛生成代码的速度大家早就见怪不怪了。但是大概过了两分钟屏幕上弹出的这段日志直接让我倒吸了一口凉气。大家仔细看看这张截图里它在干什么它在写完questions.js核心题库文件之后并没有急着去写下一个模块而是反手在我的终端里挂起了一段极其专业的 Node.js 测试脚本你看它自己写的这段测试逻辑 它引入了刚刚写好的题库数据然后用脚本自动去循环遍历挨个统计“总题数”核对三个难度模式Simple/Standard/Complex的题量切分是否正确甚至还在底层统计了 E/I、S/N、T/F、J/P 这四个 MBTI 维度的题目数量是不是绝对均衡各位它在做自动化校验QA啊这才是 Superpowers 最核心的魅力所在。普通的 Agent 为什么总是写“屎山”因为它们是“开环”的写完代码就两手一摊“老板我生成完了你自己去浏览器里跑跑看有没有 Bug 吧。”如果你这题库里少配置了一道 E 属性的题这网站跑起来计分绝对是错的而你肉眼根本查不出来。但注入了 Superpowers 灵魂的 Agent 是“闭环”的。它骨子里带着一种高级工程师才有的防御性编程思维。写完一个核心模块立刻自己写一段测试脚本自己跑单元测试。如果查出来维度数量不对称它会自动把刚才写的代码打回重写整个纠错过程完全不需要人类介入。看着那句冷冰冰但极具安全感的备注Verify question counts by tier and dimension验证各层级和维度的题目数量。我彻底放下了防备。我没有再选单次同意而是直接把光标下移选中了2. Yes, and dont ask again...同意并且以后执行类似测试脚本不要再问我。查吧测吧放手去干吧。你办事我放心。放权让它自己跑测试之后我起身去倒了杯咖啡。等我端着杯子回来的时候电脑的风扇已经安静了下来。终端里停止了疯狂的代码跳动屏幕上安安静静地躺着这份“项目竣工验收单”。你看这张截图什么叫专业这就叫专业。它清清楚楚地给我列出了最终的工程结构整整 10 个文件各司其职。没有一团乱麻的冗余代码UI、动画、国际化、题库、计分引擎、路由被剥离得干干净净。但最让我震惊的是它在Features功能特性里列出的东西。除了我们前期“拷打”定下来的 3 种测试模式和中英双语它居然主动给我加了戏Animated progress bar and question transitions带动画的进度条和题目平滑过渡Visual dimension percentage bars on results结果页的维度百分比可视化进度条Share result to clipboard一键复制分享测试结果Keyboard shortcuts (1/A, 2/B) during test答题时的键盘快捷键支持看到键盘快捷键那个提示的时候我真的有点起鸡皮疙瘩。作为一个小而美团队的开发者我太清楚这意味着什么了。普通的外包如果需求文档里没写快捷键他绝对不可能主动给你加上。而 Superpowers 驱动下的 AI是真正在以“打造极致用户体验”的标准在写代码。而做到这一切花了多久你看看截图左下角那行不起眼的小字* Brewed for 15m 7s耗时 15 分 7 秒这就是被 Superpowers 重塑后的 Vibe Coding 体验。前期它像个大爷一样疯狂拷打你十几分钟逼着你把所有细节想清楚而一旦需求敲定它只用了区区 15 分钟就完成了架构设计、代码编写、多 Agent 相互 Review、自动化单元测试并且顺手附送了极致的细节体验。它甚至贴心地告诉你No server or build step needed.不需要任何服务器或构建步骤。 这也就意味着直接去 F 盘双击那个index.html这个网站就能完美跑起来。当我双击打开 F 盘里的那个index.html时说实话我甚至做好了排查 UI 错位和 Bug 的心理准备。但呈现在我眼前的是一个成熟得让人感到害怕的商业级产品。大家看看这个首页和模式选择页。极其克制的留白高级感拉满的渐变紫主题色右上角甚至还真给我把中英文切换的 Toggle 给做出来了点击秒切丝滑无比。再看模式选择的卡片它不仅配了恰到好处的微质感图标还自动帮我补全了文案甚至根据题量倒推预估了测试时间约2分钟、约5分钟、约10分钟。 这 UI 设计的审美和交互的完整度你敢信这是一个没有任何外部依赖、被 AI 用 15 分钟“顺手”原生手搓出来的进入答题环节体验更是直线拉升。 顶部的进度条随着答题实时平滑推进选项按钮的 Hover 态和选中状态极具呼吸感。它不仅实现了纯前端的 SPA单页应用体验全程零刷新而且真的支持了我前面提到的键盘快捷键按 1 或 2 直接答题。但最让我拍案叫绝的是这个最终的测试结果页也是整场 Vibe Coding 的最高光时刻它不仅准确测出了结果比如图里的 ENFP 竞选者下面那四条可视化维度百分比进度条Dimension percentage bars完全实现了我前期在“拷打”阶段提出的需求E/I、S/N、T/F、J/P 的倾向性比例一目了然配色极其舒适。它甚至连 ENFP 对应的“优势”和“待改善”特征都自动帮我做好了数据提取并排版成了极其工整的双栏卡片。底部还非常贴心地附带了“重新测试”、“换个模式”和“分享结果”的业务闭环按钮。一遍过。没有报错没有样式崩塌逻辑严丝合缝。4、写在最后思考才是护城河看着眼前完美运行的 MBTI 网站我最大的感慨就是在这个时代获取代码的成本已经无限趋近于零。真正的门槛早就不是怎么敲出一手漂亮的代码而是你能不能在动手前抗住极致的“拷打”把脑子里那一团乱麻的需求理成清晰的系统边界。永远不要用让 AI 疯狂试错的勤奋去掩盖你前期拒绝厘清逻辑的懒惰。强烈建议所有还在被 Agent 乱写屎山代码折磨的朋友立刻去装上这个神器去体验一次被逼问到“汗流浃背”的快感。相信我跑通一次这套“规划2小时执行10分钟”的工作流之后你就再也回不去了。以上就是今天的全部分享。既然看到这里了如果觉得不错随手点个赞、在看、转发三连吧想第一时间收到更多硬核实战记得给我个星标⭐我们下次再见。