目录

1、为什么你写的是“屎山”，而别人写的是“神作”？

2、极简部署superpowers

3、实战演示

4、写在最后：思考才是护城河

---

最近一直在跟圈子里的朋友聊Agent，聊Vibe Coding。

在这个“万物皆可AI生成”的时代，大家似乎都有一个错觉：只要我把需求扔给AI，它就能给我吐出一个完美运行的软件。

但现实往往是骨感的。 你甩给Agent一句：“给我写个网站。”

它二话不说，跳过需求调研、跳过架构设计、跳过代码Review，吭哧吭哧几分钟，直接给你产出一坨完全无法维护、跑起来全是Bug的“屎山代码”。

这真的怪大模型不够聪明吗？不管是Claude Code还是其他的强力模型，它们的逻辑能力早就超越了普通初级程序员。

真正卡住你的，其实是你没有给AI一套标准化的工作流（SOP）。

今天，作为日常被AI“毒打”的过来人，我要给你安利一个能让你的Agent体验直接发生质变的插件。 它在GitHub上有着极高的热度，也是我最近日常开发中绝对离不开的神器——Superpowers。

开源项目地址：https://github.com/obra/superpowers

1、为什么你写的是“屎山”，而别人写的是“神作”？

坦诚地讲，虽然我只是作为一名个人开发者，但平时对工程的规范和代码质量还是有严格要求的。

在不用Superpowers之前，我看着AI写出来的代码，经常感觉血压飙升。因为AI的默认行为模式是“填空题”思维——你给多少，它写多少，遇到没说清楚的边界条件，它就开始“自行脑补”。

而Superpowers，本质上不是一个写代码的工具。它是一套强行插入到Agent执行链路里的“纪律委员会”。它通过内置的十几个Skill，强制把“规划 - 拆解 - 执行 - 审查 - 复盘”这套成熟的软件工程方法论，塞进AI的大脑里。

它最核心的逻辑，就是苏格拉底式提问。 在动手写哪怕一行代码之前，它会像一个极其负责任（甚至有点烦人）的产品经理兼架构师，一个问题接一个问题地“拷打”你，直到把你的模糊需求，变成一份毫无歧义的设计文档。

2、极简部署superpowers

这么牛的东西，既然咱们已经配好了 Claude Code，那部署起来其实就是敲行代码的事，非常优雅。

如果没有安装好 Claude Code 可以参考👉：【2026 最新版】别再折腾了！2026 最新 Claude Code 在 Windows 11 上的完美部署方案：从零到一实现 VSCode 可视化编程

你可以直接在 Claude Code 的对话框里，通过官方市场一键把它拉下来：

/plugin install superpowers@claude-plugins-official

或者，如果你想走它专属的第三方插件市场源，也就简单的两步走： 先注册一下它的市场源：

/plugin marketplace add obra/superpowers-marketplace

然后直接执行安装：

/plugin install superpowers@superpowers-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 正式退居幕后，它即将唤醒底层的子 Agent（Subagents）大军，开启丧心病狂的流水线编码模式。

当我敲下回车，果断选择“直接开干”后，终端里紧接着弹出了这张图里极具仪式感的一幕。

它没有一声不吭地开始跑代码，而是用蓝色的高亮提示弹出了一个极其严肃的询问： Exit plan mode?（是否退出计划模式？）

说实话，看到这个提示的时候，我被这种极其严谨的工程操守秀到了。

为什么我觉得这个细节特别牛逼？因为它完美诠释了什么是真正高级的“状态隔离”。

普通的 AI 写代码，是边想边写，脚踩西瓜皮，滑到哪里算哪里，一旦遇到复杂的逻辑冲突，上下文立马崩溃，代码直接串线。

但 Superpowers 的工作流在这里强制画了一条不可逾越的红线：规划是规划，执行是执行，绝不混为一谈。

这句 Exit plan mode?，其实就是 AI 在正式向我请示： “老板，地基已经打好，蓝图已经全部刻在我的脑子里了。现在，我要脱掉产品经理和架构师的西装，换上底层码农的格子衫，正式下车间去给你搬砖写代码了。你批准吗？”

这不仅是对用户控制权的极大尊重，更是为了在底层模型里做一次干净的 Context（上下文）切换，让接下来的执行 Agent 能 100% 专注在“实现逻辑”上，而不是再去反复纠结需求。

我看着屏幕，满意地按下了 1. Yes。

“咔哒”一声，计划模式的闸门正式关闭。

执行模式开启。接下来，请准备好感受硅基劳动力那种让人头皮发麻的疯狂输出吧！

当我按下 Yes 退出计划模式的那一瞬间，屏幕上立刻弹出了这行字：

Let me start building. I'll create tasks and begin implementation. （让我开始构建吧。我将创建任务并开始实施。）

以前用 AI 写代码，最怕的就是它一句废话不说，直接给你拉几百行代码，写到一半突然因为 Token 上下文耗尽而“腰斩”。

但你看这张截图，Superpowers 调用的底层技能，硬生生把这个大工程**“颗粒化”**了。

它在终端里给我列出了一个极其清晰的 6 步任务清单（Tasks）：

Create 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 don't 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分钟”的工作流之后，你就再也回不去了。

以上就是今天的全部分享。既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧！想第一时间收到更多硬核实战，记得给我个星标⭐～我们，下次再见。