gstack 实战：从安装到跑通完整工作流

引言

在概念篇中，我们了解了 gstack 的核心定位——一个将 Claude Code 转变为虚拟工程团队的角色化技能集，以及它在 AI 编程工具生态中与 GSD、Superpowers、Ralph 等方案的差异化定位。

这篇实战篇聚焦怎么用：从安装配置到跑通完整工作流，帮你在 30 分钟内上手 gstack。

安装与配置

前置条件

Claude Code 已安装并可用
Git 已安装
Bun v1.0+ 已安装（gstack 基于 Bun 构建）
Windows 用户还需要 Node.js

全局安装（推荐，30 秒完成）

git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack && ./setup

安装脚本会做三件事：

将 gstack 的 skill 信息添加到你的 CLAUDE.md 文件
将所有 skill 文件放入 skills 目录
安装 Playwright 和对应的 Chromium 浏览器（用于 /browse 和 /qa）

项目级安装（团队共享）

如果希望团队成员克隆仓库后自动获得 gstack：

cp -Rf ~/.claude/skills/gstack .claude/skills/gstack
rm -rf .claude/skills/gstack/.git
cd .claude/skills/gstack && ./setup

多 Agent 支持

gstack 不限于 Claude Code，还支持其他 AI 编程工具：

./setup --host codex      # OpenAI Codex CLI
./setup --host factory    # Factory Droid
./setup --host auto       # 自动检测

更新

cd ~/.claude/skills/gstack && git pull && ./setup

或者在 Claude Code 中直接使用 /gstack-upgrade。

完整命令参考

Sprint 流程

命令	角色	说明
`/office-hours`	YC 合伙人	6 个逼迫性问题重构产品方向，生成设计文档
`/plan-ceo-review`	CEO / 创始人	寻找 10 星级产品，四种范围模式可选
`/plan-eng-review`	工程经理	锁定架构、数据流、边界情况、测试矩阵
`/plan-design-review`	资深设计师	设计维度 0-10 评分，说明如何做到 10 分
`/autoplan`	审查流水线	自动依次运行 CEO → 设计 → 工程审查

设计

命令	说明
`/design-consultation`	从头构建完整设计系统，生成 DESIGN.md
`/design-shotgun`	生成多个 AI 设计变体，在浏览器中对比选择
`/design-html`	生成生产级 HTML/CSS，支持 React/Svelte/Vue 框架检测

审查与安全

命令	角色	说明
`/review`	Staff 工程师	7 个并行子代理审查（测试、安全、性能、API 合约等）
`/investigate`	调试专家	系统化根因调试，铁律：不找到根因不修 bug
`/design-review`	设计师 QA	视觉审计 + 自动修复，原子提交，前后对比截图
`/cso`	安全官	OWASP Top 10 + STRIDE 威胁建模，8/10 置信度门槛

测试与 QA

命令	说明
`/qa`	打开真实浏览器测试，发现 bug → 修复 → 生成回归测试 → 重新验证
`/qa-only`	同上但仅报告，不修改代码
`/benchmark`	基线性能测试：页面加载、Core Web Vitals、资源大小，支持前后对比
`/browse`	200ms 级别的浏览器交互，支持截图、表单填写、元素点击

发布与运维

命令	说明
`/ship`	同步主分支 → 运行测试 → 审查 diff → 更新版本 → 提交推送 → 创建 PR
`/land-and-deploy`	合并 PR → 等待 CI → 部署 → 验证生产环境健康
`/canary`	部署后金丝雀监控：控制台错误、性能回归、页面故障

回顾与学习

命令	说明
`/retro`	周报：提交分析、测试比例、代码质量趋势，支持多人团队
`/document-release`	自动更新项目文档匹配已发布的代码
`/learn`	管理跨会话学习记忆：查看、搜索、修剪、导出

安全防护

命令	说明
`/careful`	危险操作警告：rm -rf、DROP TABLE、force-push 等
`/freeze` / `/unfreeze`	锁定/解锁编辑范围到特定目录
`/guard`	`/careful` + `/freeze` 组合，最高安全模式
`/checkpoint`	保存/恢复工作状态快照

工具集成

命令	说明
`/codex`	OpenAI Codex CLI 集成：独立代码审查、对抗模式、咨询模式
`/connect-chrome`	启动可见 Chrome + Side Panel 扩展，实时观察 AI 操作
`/setup-browser-cookies`	从真实浏览器导入 cookies 到 headless 会话
`/health`	代码质量仪表盘：tsc + biome + knip + shellcheck + tests → 0-10 综合评分

配置详解

CLAUDE.md 添加内容

安装后，gstack 会在你的 CLAUDE.md 中添加所有可用 skill 的列表和简短描述。这让 Claude Code 知道可以使用哪些命令。

Skill 目录结构

每个 skill 是一个独立目录，核心是 SKILL.md 文件：

~/.claude/skills/gstack/
├── gstack/           # 主入口 skill
├── browse/           # 浏览器 daemon
├── qa/               # QA 测试
├── review/           # 代码审查
├── ship/             # 发布流程
├── plan-ceo-review/  # CEO 审查
├── office-hours/     # 产品门诊
└── ...               # 其他 23+ skills

你可以自由修改任何 SKILL.md 来定制行为——这就是"fork 和定制"的优势。

Browse Daemon

Browse Daemon 是长驻 Chromium 实例，关键配置：

端口：随机选择 10000-60000，支持 10+ 个并行工作区
安全：仅绑定 localhost，每次会话使用 bearer token 认证
Cookie：使用 /setup-browser-cookies 可从 Chrome/Arc/Brave/Edge 导入

实战工作流演示

以下演示一个典型的 gstack 工作流。命令和输出基于文档和视频中的真实案例整理。

💡 注意：以下输出为基于研究整理的通用示例。后续会根据真实实操补充具体项目截图。

Step 1: 产品门诊

> /office-hours

[YC Office Hours] 6 forcing questions:
1. Who specifically needs this?
2. What do they do today without it?
3. Why is this urgent right now?
4. How will you know it works?
5. What happens if you do nothing?
6. What is the smallest version you can ship?

→ Design doc generated

不急着写代码，先让 AI 以 YC 合伙人的视角拷问你的想法。

Step 2: 多角色审查计划

> /autoplan

[CEO Review] Finding the 10-star product...
[Design Review] Rating dimensions 0-10...
[Eng Review] Locking architecture + edge cases...

→ Fully reviewed plan ready

/autoplan 自动运行 CEO → 设计 → 工程三轮审查，产出完整的审查后计划。

Step 3: 编码实现

按审查通过的计划正常编码。可以用标准 Claude Code 对话方式。

Step 4: 多专家代码审查

> /review

Dispatching 7 specialist reviewers...
- Testing coverage ✓
- Maintainability ✓
- Security: Found 1 issue (auto-fixing)
- Performance ✓
- Data migration ✓
- API contract ✓
- Red team: No vulnerabilities found

→ Review complete, 1 auto-fix applied

Step 5: 浏览器 QA

> /qa

Opening headless browser...
Testing user flows:
- Login flow ✓
- Dashboard load ✓
- Form submission: Bug found → fixing → re-testing ✓
- Image upload ✓

→ 4 flows tested, 1 bug fixed, regression test generated

Step 6: 发布

> /ship

Syncing with main...
Running tests: 42 passed, 0 failed
Reviewing diff: 3 files changed
Updating VERSION: 1.2.0 → 1.3.0
Creating PR: "Add screenshot feature"

→ PR #47 created, ready for merge

实用技巧与社区经验

Garry Tan 的建议

来自 gstack 的 ETHOS.md，三个核心原则：

Boil the Lake：AI 让完整性几乎免费——永远做完整的事，不走捷径
Search Before Building：先搜索、先理解，三层知识验证后再动手
User Sovereignty：AI 推荐，你决定。即使两个 AI 模型都同意，你的判断依然优先

AI 编码工具不应该卡在一个模糊的模式里。规划不等于审查，审查不等于发布。创始人品味和工程严谨是根本不同的东西。你真正需要的是明确的'档位'切换。

Garry Tangstack README

前往

社区正面经验

/office-hours 用于 YC 申请：Reddit r/ycombinator 上多位 S26 申请者反馈，用 gstack 的 office hours 来压力测试自己的申请材料效果极佳
安全审计发现真实漏洞：有 CTO 反馈 /review 发现了团队不知道的 XSS 漏洞
/browse 真实浏览器测试：被社区（包括批评者）认可为"真正有技术含量的贡献"