Gstack 实战教程：用 AI 虚拟工程团队提升开发效率

Gstack 是什么

Gstackopen in new window 是一个 Claude Code 技能包，它把 Claude 变成一支虚拟工程团队——每个 /skill 对应一个角色：CEO、工程师、设计师、QA、安全审计员、发布工程师。

它的核心理念是：技能之间传递产物。/office-hours 产出设计文档，/autoplan 读取它做规划，/qa 读取规划产出的测试矩阵……每一步都在上一步的基础上叠加，而不是从零开始。

完整开发周期

以下是一个新功能从想法到上线的完整流程。

第 1 步：产品思考 `/office-hours`

在有想法但还没写代码时用。

/office-hours

它会问你 6 个强迫性问题：

谁在为这个问题绞尽脑汁？
他们现在怎么解决的？
你的方案和现有方案的本质区别是什么？
最窄的切入点是什么？

逼你把模糊的想法变成清晰的定义。产出的设计文档会保存到 ~/.gstack/projects/，供后续步骤自动读取。

注意：运行 gstack skills 要在普通模式（默认），不是 Plan 模式。Plan 模式会阻止文件写入。

第 2 步：全套规划 `/autoplan`

/autoplan

自动按顺序跑三个评审：

CEO 视角（/plan-ceo-review）：这功能值得做吗？做多大？
设计视角（/plan-design-review）：空/加载/错误状态，移动端行为
工程视角（/plan-eng-review）：架构图、数据流、失败模式、测试矩阵

最后给你一个审批门，确认后才写入计划文件。

如果想精细控制，也可以分步执行：

/plan-ceo-review
/plan-eng-review
/plan-design-review

第 3 步：写代码

这步 gstack 不干预，用你习惯的方式写。

第 4 步：代码审查 `/review`

/review

扫描当前 branch 的 diff，检查：

N+1 查询
竞态条件
信任边界漏洞（比如未校验的用户输入直接传给 SQL）
不完整的实现

机械性问题自动修复，有争议的问题会列出来问你。

第 5 步：QA 测试 `/qa`

/qa http://localhost:3000

打开真实浏览器，测试所有受影响的路由：发现 bug 直接修，并自动生成回归测试。

页面需要登录？ 先导入 Cookie：

/setup-browser-cookies

它从你本地 Chrome 解密并导入指定域名的 Cookie，之后 /qa 就能访问认证页面。

只想看报告不改代码：

/qa-only http://localhost:3000

第 6 步：发布 `/ship`

/ship

自动执行：同步 main 分支 → 跑测试（没有就创建） → 更新 CHANGELOG → 创建 PR。

第 7 步：部署验证 `/land-and-deploy`

第一次使用前配置一次：

/setup-deploy

它会自动检测你的部署平台（Fly.io、Vercel、Netlify、Render 等），配置写入 CLAUDE.md，之后每次只需要：

/land-and-deploy

自动：合并 PR → 等待 CI → 触发部署 → 验证生产环境健康。

调试场景

遇到原因不明的 bug

/investigate 点击保存后数据没有持久化，刷新页面后消失

铁律：找到根因才能改代码，最多尝试 3 次修复，失败了重新评估架构，绝不乱猜乱改。

安全审计

/cso

跑 OWASP Top 10 + STRIDE 威胁模型，输出带证据的漏洞报告，按严重程度分级。

性能基线

/benchmark           # 建立基线
# 改代码后
/benchmark           # 对比，自动检测回归

测量页面加载时间、Core Web Vitals（LCP、CLS、INP）、资源大小。

部署后监控

/canary

定期用真实浏览器访问关键页面，捕捉 console 错误、性能劣化、视觉异常，每轮生成报告。

安全模式

上生产环境操作前开启：

/careful    # 危险命令（rm -rf、DROP TABLE、force push）执行前弹警告
/freeze src/ # 锁定只能改 src/ 目录，防止误改其他地方
/guard      # 以上两个同时开启
/unfreeze   # 解锁

设计相关技能

技能	用途
`/design-consultation`	创建完整设计系统（色彩、字体、间距），输出 `DESIGN.md`
`/design-shotgun`	生成 3-6 个视觉方案，在浏览器里对比选择
`/design-html`	把批准的设计稿转成生产级 HTML/CSS
`/design-review`	对线上页面做 80 项视觉审查，自动修复，提交原子 commit

入门路径建议

先掌握这 3 个，覆盖最高频场景：

优先级	命令	场景
⭐⭐⭐	`/investigate`	遇到不明 bug
⭐⭐⭐	`/qa http://localhost:xxxx`	功能写完要验收
⭐⭐	`/office-hours`	有新想法要落地

熟悉之后，再把 /ship 和 /review 纳入每次提交的标准流程。

# Gstack 实战教程：用 AI 虚拟工程团队提升开发效率

# Gstack 是什么

# 完整开发周期

# 第 1 步：产品思考 /office-hours

# 第 2 步：全套规划 /autoplan

# 第 3 步：写代码

# 第 4 步：代码审查 /review

# 第 5 步：QA 测试 /qa

# 第 6 步：发布 /ship

# 第 7 步：部署验证 /land-and-deploy

# 调试场景

# 遇到原因不明的 bug

# 安全审计

# 性能基线

# 部署后监控

# 安全模式

# 设计相关技能

# 入门路径建议

# 参考资料