ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

深度拆解 gstack:用 Claude Code + Playwright + Bun 配 TaoToken,一个人搭出数字工程团队

深度拆解 gstack:用 Claude Code + Playwright + Bun 配 TaoToken,一个人搭出数字工程团队 1. 一个人写代码为什么还是像在打杂你可能已经用 Claude Code 写过不少函数了补全、解释、重构都挺顺手。但真到了要交付一个完整功能的时候问题就来了需求边界谁来卡架构方案谁来审前端页面谁来点测试用例谁来跑发布流程谁来盯这些事单靠一个“帮我写个函数”的对话窗口根本兜不住。gstack 想解决的正是这个断层。它不是又一个提示词合集而是把 21 个角色化 Skill 塞进 Claude Code让 AI 按 CEO、工程经理、QA、发布工程师的身份分阶段干活。再配合 Playwright 驱动的无头浏览器和 Bun 编译的常驻守护进程AI 能真的去点页面、读无障碍树、截图比对、提交修复。对独立开发者来说这套东西的价值在于你不需要真的招人但可以按“满编团队”的流程来约束自己。我试过把这套工作流接到 TaoToken 的统一通道上用一份 Key 跑通 Claude Code 的模型调用和后续的 Agent 编排。下面把 config.toml、settings.json 骨架、CC Switch 切换步骤以及 Playwright 自动化验证的具体动作拆开讲。你照着配半小时内能跑起来第一个闭环。2. 前置TaoToken 统一 Key 与通道准备gstack 本身不绑定模型供应商它通过 Claude Code 的配置读取 API 通道。你要做的第一件事是拿到一个能同时服务对话、代码补全和 Agent 调用的 Key避免在多个平台之间来回切。TaoToken 在这里的角色是统一入口一个 Key 对应一个 API 地址Claude Code、Codex 风格调用、以及后续的 Playwright 验证脚本都走同一条通道。这样你调试 gstack 的时候不用因为换模型而改三处配置。先去控制台创建 API Key建议按项目分 Key方便后面做用量隔离。创建路径在 console 里选好额度上限和过期时间。拿到sk-开头的字符串后不要直接写进代码仓库放到环境变量或本地配置文件里。模型对话入口可以用来快速验证 Key 是否可用不用装任何东西浏览器里发一条消息就能看到返回。如果你打算长期跑 gstack 的编码和 Agent 流程Coding Plan 更适合按周期使用避免按次计费在密集调用时成本失控。接入文档里有各语言的最小调用示例配 config.toml 之前扫一眼确认 base_url 和鉴权头的写法。这一步别跳过后面报 401 基本都是这里没对齐。3. 可复制配置config.toml 与 settings.json 骨架Claude Code 的配置分两层全局的~/.claude/settings.json管模型通道和权限项目级的config.toml管 gstack 的技能加载和浏览器守护进程参数。先给骨架再逐项解释。3.1 全局 settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-6 }, permissions: { allow: [ Bash(bun:*), Bash(git:*), Bash(npx playwright:*), Read, Write, Edit ], deny: [ Bash(rm -rf:*), Bash(DROP TABLE:*) ] }, skills: { directory: ~/.claude/skills/gstack } }ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址不要带 UTM 参数保持干净。ANTHROPIC_MODEL按你实际可用的模型名填gstack 的 Skill 对模型能力有要求太小的模型跑/plan-eng-review会漏掉复杂度拦截。permissions.deny里那两条是给/careful技能兜底的即使 Skill 的钩子没触发全局权限也会拦一道。3.2 项目级 config.toml[gstack] version 1.0 host claude [browser] daemon true port_range [10000, 60000] idle_timeout_minutes 30 headless true binary_path ~/.claude/skills/gstack/browse/dist/browse [browser.logging] console_buffer 50000 network_buffer 50000 dialog_buffer 50000 flush_interval_seconds 1 [skills] enabled [ office-hours, plan-ceo-review, plan-eng-review, review, qa, ship, browse, careful, freeze ] [security] bind_localhost_only true session_token auto cookie_keychain_auth trueport_range给的是动态端口分配区间同一台机器跑多个 workspace 不会撞端口。idle_timeout_minutes默认 30 分钟你如果只是偶尔跑 QA可以调到 10 分钟省内存。binary_path指向 Bun 编译出来的单文件二进制约 58MB不依赖 node_modules。第一次跑之前需要先构建后面会讲。security段里bind_localhost_only必须为 true这是 gstack 的默认安全边界别改。session_token auto表示每次会话生成随机 UUID防止跨进程未授权调用。3.3 CC Switch 切换步骤如果你本地同时有多个 Claude Code 配置比如公司通道和个人通道用 CC Switch 做切换比手动改 settings.json 安全。第一步确认 CC Switch 已安装并能读取~/.claude/settings.json。第二步在 CC Switch 里新建一个 profile命名为taotoken-gstack把上面那份 settings.json 的内容粘进去。第三步执行切换cc-switch use taotoken-gstack第四步验证当前生效的配置cc-switch current输出里应该能看到ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址。如果还是旧的地址检查 CC Switch 的 profile 是否保存成功或者手动cat ~/.claude/settings.json确认。切换完成后Claude Code 的所有模型调用都会走 TaoToken 通道gstack 的 Skill 加载不受影响因为技能目录是独立配置的。4. 跑通 Playwright 自动化验证配置就绪后先别急着跑完整的/qa用最小步骤验证浏览器守护进程能不能起来、无障碍树能不能读到、点击能不能生效。4.1 构建 gstack 二进制cd ~/gstack bun install npx playwright install chromium bun run buildbun run build会做三件事重新生成 SKILL.md 文档、把browse/src/cli.ts编译成单文件二进制、写入.version文件供版本校验。构建完成后确认二进制存在ls -lh ~/.claude/skills/gstack/browse/dist/browse4.2 启动守护进程并验证$B goto https://example.com $B snapshot第一条命令会触发冷启动约 2 到 3 秒。第二条命令返回无障碍树快照你会看到类似e1、e2的元素引用。后续所有交互都基于这些引用不再依赖 CSS 选择器。验证点击$B click e1 $B screenshot /tmp/after-click.png如果e1是一个链接点击后页面会导航此时所有 Ref 会被自动清理。这是防御性设计导航后必须重新snapshot获取新引用。踩过的坑就在这里不重新 snapshot 直接点旧引用会报元素过期。4.3 用 /qa 跑端到端闭环确保工作区干净git status --porcelain如果有未提交改动先 commit 或 stash。/qa要求干净工作区因为每个 Bug 修复会生成独立的原子提交。然后调用/qa http://localhost:3000它会自动读取~/.gstack/projects/下的测试计划如果没有降级用git diff启发式分析。执行流程是打开页面、按无障碍树点击、发现异常、生成修复、重新验证、提交。你可以在终端看到每一步的 HTTP 状态码和操作结果。4.4 验证结果对照检查项预期结果异常处理守护进程启动2-3 秒内返回页面标题检查端口是否被占用无障碍树快照返回e1等引用列表确认页面已完全加载点击操作100-200ms 内返回状态码引用过期则重新 snapshot截图比对生成 before/after 文件检查 /tmp 写入权限原子提交每个修复独立 commit工作区不干净会阻断5. 本篇常见错排查401 鉴权失败先确认ANTHROPIC_API_KEY没有多余空格再检查ANTHROPIC_BASE_URL是否误加了 UTM 参数。TaoToken 的 API 地址是https://taotoken.net/api不要带查询字符串。守护进程起不来检查browse/dist/browse是否存在且可执行。如果构建时报 Bun 版本不兼容升级到 v1.0。Windows 环境下如果 Chromium 启动失败setup 脚本会自动降级用 Node.js 拉起确认 Node.js 已安装。元素引用过期页面导航后所有e*引用失效必须重新$B snapshot。这是设计行为不是 Bug。如果你在脚本里连续操作每次导航后加一行 snapshot。/qa 被阻断git status --porcelain输出非空时会触发 AskUserQuestion。要么 commit要么 stash不要强行跳过否则原子提交会污染历史。技能加载不到确认~/.claude/skills/gstack是软链接还是实体目录。如果是软链接检查目标路径是否存在。cc-switch current确认当前 profile 的 skills 目录配置正确。模型返回质量差gstack 的/plan-eng-review对模型推理能力有要求。如果频繁漏掉复杂度拦截换一个更强的模型名或者检查 Coding Plan 的额度是否耗尽导致降级。6. 把通道固定下来再谈一人军队gstack 的 21 个 Skill 本质上是把工程流程拆成可调度的角色但所有角色最终都要落到模型调用上。通道不稳定再好的 Prompt 也会在关键时刻掉链子。TaoToken 在这里的作用是让你用一份 Key 覆盖对话、编码和 Agent 编排不用在多个平台之间同步额度。如果你还在调试接入阶段先把 API Keys 和接入文档过一遍确认 base_url 和鉴权头对齐。模型对话入口适合快速验证 Key 是否可用不用装环境。长期跑编码和 Agent 流程的话Coding Plan 比按次计费更可控尤其是/qa这种会密集调用浏览器的场景。配置固定下来之后你再去调 gstack 的 Skill 组合才有意义。否则每次报错你都要先怀疑是通道问题还是技能问题排查成本翻倍。
返回列表