GStack 超能力开发指南：从零构建 NodeFlow — GStack 超能力指南：用 AI 极速构建 NodeFlow 应用

这篇教程讲什么

这篇教程教你用两套 Claude Code 技能包——gstack 和 superpowers——从零开始开发一个完整的在线记事本应用（NoteFlow）。

你不需要手动写每一行代码。整个过程像流水线一样：前期用 gstack 做需求碰撞和视觉设计，后期用 superpowers 自动编码、测试、审查。

适合谁看

用过 Claude Code 但只停留在"问一答一"阶段
想了解 gstack 和 superpowers 各自能干什么
想体验 AI 驱动的完整开发流程：从需求到上线

前置条件

已安装 Claude Code CLI
有基本的终端操作经验
了解 React 基础概念（不需要精通）

技术栈

前端框架： React 18 + Vite
数据存储： localStorage（无后端）
AI 工具： gstack（设计）+ superpowers（开发）

两套工具怎么分工

flowchart LR
    A[需求输入] --> B[gstack
需求碰撞+视觉设计]
    B --> C[superpowers
计划+编码+测试+发布]
    C --> D[上线应用]

    style B fill:#4f46e5,color:#fff
    style C fill:#059669,color:#fff

阶段	谁负责	做什么
需求审查	gstack	三角色（CEO/设计/工程）碰撞
视觉设计	gstack	设计系统、UI 方案对比
实施计划	superpowers	拆解任务、写代码计划
编码实现	superpowers	subagent 自动编码+测试
代码审查	两者配合	代码质量+视觉一致性
发布上线	两者配合	合并分支+发布文档

教程目录

第一部分：准备与需求（第 1-2 章）

第 1 章：环境搭建与 CLAUDE.md 配置 — 让 Claude 理解你的项目
第 2 章：需求碰撞 — 三角色审查 — 不急着写代码，先让三个角色质疑你的想法

第二部分：设计与规划（第 3-4 章）

第 3 章：视觉设计 — 从概念到界面 — 把需求变成看得见的 UI
第 4 章：实施计划 — 任务拆解 — 把设计稿拆成可执行的编码任务

第三部分：编码与测试（第 5-7 章）

第 5 章：自动编码 — subagent 流水线 — 让 AI 自动写代码、写测试、自检
第 6 章：测试驱动开发 — 红灯绿灯重构，补充边界用例
第 7 章：功能迭代 — 搜索与分类 — 在已有基础上迭代新功能

第四部分：审查与调试（第 8-9 章）

第 8 章：双重代码审查 — gstack + superpowers 两条审查线
第 9 章：调试与排错 — 遇到 bug 的系统化解决方法

第五部分：编排与发布（第 10-12 章）

第 10 章：自动编排 — CLAUDE.md 驱动工作流 — 把手动命令变成自动流程
第 11 章：发布上线 — 从开发分支到生产环境
第 12 章：回顾与反思 — 项目复盘与经验总结

附录

Q&A 专题

命令覆盖

教程覆盖 25+ 个命令：

来源	覆盖命令
gstack	`/plan-ceo-review`, `/plan-design-review`, `/plan-eng-review`, `/design-consultation`, `/design-shotgun`, `/design-html`, `/design-review`, `/review`, `/qa`, `/investigate`, `/ship`, `/document-release`, `/freeze`, `/unfreeze`, `/retro`
superpowers	`/writing-plans`, `/subagent-driven-development`, `/executing-plans`, `/test-driven-development`, `/requesting-code-review`, `/receiving-code-review`, `/systematic-debugging`, `/finishing-a-development-branch`, `/writing-skills`

如何使用本教程

建议按顺序阅读。每章都有"动手做"环节，跟着操作一遍理解更深。跟完所有章节后，你将：

掌握 gstack 和 superpowers 的核心命令
拥有一个功能完整的 NoteFlow 记事本应用
理解 AI 辅助开发的完整工作流
能够在自己的项目中复用这套流程