一个人就是一支队伍：Web 开发者的单兵作战装备清单

作者：姚杨 ｜ 专栏：阿杰的技术成长

周一早上，阿杰 打开电脑，登录自己的 git 仓库，把最近一个项目的提交记录翻了一遍——八十三次 commit，全部由 Claude Code 自动完成，他只在最后 review 了一下。

这套装备他已经用了大半年：浏览器插件、Docker 容器、框架、模型切换，散落在他工作流里的各个角落。他早就习惯了一个人干一个团队的活，只是从来没有把它们当成一个整体来看。

老陈 端着咖啡路过，瞥了一眼他的屏幕：「你这不叫工具，叫装备。用了大半年，你根本不知道自己手里握着一整条链。」

「链？」

「单兵作战，拼的就是装备链。」老陈 在白板上画了一张图，「你天天在用的东西，其实是一条完整的链。我把它画出来，你看看是不是你。」

一、第一层：操作系统——Windows 还是 Mac？随便

「先定操作系统？」阿杰 说，「我 Windows、Mac 都在用，没觉得有什么区别。」

「因为区别根本不在这层。」老陈 说，「真正的战场不在操作系统里，在容器里。」

单兵作战的第一个认知：开发环境必须跟操作系统解耦。

Windows 也好、macOS 也好，只需要装一个 Docker Desktop——它把整个开发环境（nginx、PHP、MySQL、Redis、甚至 AI 工具）装进镜像里，与宿主系统完全隔离。代码在宿主机，环境在容器，换电脑 = 拉镜像 + 挂代码目录，十分钟恢复战斗力。

「环境跟系统解耦，你就再也不用为『我这台电脑能不能跑这个项目』发愁了。」老陈 说，「这是整条链的地基，也是你已经用了半年的东西。」

二、第二层：Chrome——不是浏览器，是「手」和「眼」

「Chrome 我天天开着，不就是个浏览器吗？」

「普通的 Chrome 是浏览器。装了这两个插件之后，它就是你的『手』和『眼』——而且是 AI 的手和眼。」

老陈 点了点白板上的两个插件：

第一个：chrome_do_action（cda）——让 AI 自己操作浏览器

一个「命令行远程操控真实 Chrome」的工具。AI 助手（比如 Claude Code）通过一条命令，就能让浏览器打开页面、点击按钮、填写表单、上传图片、截图回传、抓取数据，甚至监听页面上的 JS 报错：

cda send kiki open https://example.com        # 打开页面
cda send kiki type current '{"selector":"#username","text":"admin"}'
cda send kiki click current '{"text":"登录"}'  # 点登录，自动等跳转
cda send kiki screenshot current '{"path":"/tmp/shot.png"}'

链路是：CLI → 服务端（12345 端口）→ Chrome 扩展 → 页面内执行 → 结构化结果返回。

「AI 写完代码，能自己打开浏览器去测？」阿杰 问。

「你不就是这么干的吗？上周那个登录 bug，AI 自己开的浏览器、自己截的图、自己修的。」老陈 说，「这是给 AI 装手和眼：它不再是你说什么它写什么，而是写完自己验证、自己修。」

第二个：chrome_call_your_claude_code——让浏览器反过来叫 AI

有了「AI → 浏览器」的出向操作，还得有「浏览器 → AI」的入向通道：

在任意网页上选中一段内容，右键选择「Call Your Claude」，弹出面板描述问题，回车——页面链接、选中内容、你的问题，通过 WebSocket 送到服务端（12346 端口），服务端用 tmux 把 prompt 直接贴进 Claude Code 的终端并自动回车：

浏览器划词/选元素 → 面板填写描述 → Enter
    ↓
WebSocket ──→ 服务端拼装 prompt ──→ tmux paste → Claude Code 终端

「你在浏览器里看到一个问题，顺手就甩给正在写代码的 AI，不切窗口、不复制粘贴、不手拼 prompt。」老陈 说，「一个出向，一个入向，双向闭环。」

三、第三层：git——两个入口，同一份历史

「AI 改代码，最怕它乱改。」阿杰 说，「所以我天天盯 git。」

「那你盯对了。而且你注意到没有——你其实有两套 git 在操作同一个项目文件夹。」

阿杰 愣了一下。

「宿主机一套，容器里一套。」老陈 指着图说：

• 宿主机上的 git 是你的：看历史、切分支、review 代码、push 到远程仓库；
• 容器里的 git 是 Claude Code 的：它每完成一轮修改，自动 git add --all 并提交，commit message 按「新增、修改、删除、修复」四段结构写清楚；
• 两边操作的是同一个项目文件夹：容器启动时把项目目录挂载进去，宿主机的 .git 就是容器里的 .git，你 push 的和它 commit 的是同一份历史。

「AI 把代码改坏了？你在宿主机 git log 翻历史、git checkout 回退，随时回到上一个版本。」老陈 说，「你敢让 AI 放手干活的前提，是有一个随时能撤回的后悔药。这份后悔药，你手里一份，AI 手里一份，共用同一本账本。」

四、第四层：cc-switch——Claude Code 的「换弹夹」

「那模型呢？Claude Code 想切模型，每次都要改配置文件，烦死了。」

「所以你有 cc-switch。」老陈 说，「你以为那只是个小工具？那是你的换弹夹。」

cc-switch 是一个跨平台的桌面小工具，专门解决 Claude Code 的模型切换问题。Claude Code 的后端配置（Base URL、API Key、模型名）存在 ~/.claude/settings.json 里，手动改 JSON 容易改错。cc-switch 把这些配置集中到一个可视化面板：

• 内置 50+ 供应商预设：Claude 官方、DeepSeek、智谱 GLM、Kimi、通义千问、OpenRouter……填个 API Key 就能用；
• 系统托盘一键切换，点一下立刻生效，不用改 JSON、不用重启终端；
• 自动备份配置，改崩了一键还原。

「同一个 Claude Code，今天用官方模型写复杂架构，明天切国产模型跑批处理——像换弹夹一样。」老陈 说，「模型是消耗品，切换必须是零成本的。」

五、第五层：harness_engineering_php_env——AI 的「镜像空间」

「前面都是单件装备，现在它们是怎么装进一个箱子的。」老陈 在白板上圈出容器那一块。

「harness_engineering_php_env 是一个跑在 Docker 里的完整 PHP 开发环境镜像：」

• 里面预装了 nginx、MariaDB、Redis、Beanstalkd、PHP 8.4-FPM、phpunit、supervisor、git、composer、tmux……一套完整的 Web 开发运行环境；
• 还预装了 Claude Code，以及两个服务端：chrome_do_action（12345）和 chrome_call_your_claude_code（12346）——端口映射到宿主机，Chrome 上的两个插件直接连进来；
• 启动后自动进入 tmux 开发会话，所有服务已就绪。

「还记得那篇容器哲学吗？把 AI 关进镜像空间，随便它折腾——反正启动带 --rm，环境搞烂了删掉重来。」老陈 说，「这就是 AI 时代的开发环境：代码留在宿主机由 git 保护，环境在容器里随时可弃。」

阿杰 看着端口映射，明白了：「12345 和 12346 一映射，容器里的 AI 就能操作宿主机的 Chrome，宿主机的 Chrome 也能把问题甩给容器里的 AI——双向通道就这么打通了？」

「没错。这就是整条链的核心：两个端口，把『浏览器里的世界』和『容器里的开发环境』连成了一体。」

六、最后一层：容器里的 Claude Code——有手、有眼、有说明书的 AI

「工具都齐了，最后还得看 AI 会不会用。」老陈 说，「这个容器里的 Claude Code，不是裸奔的——它带着一份说明书。」

这份说明书写在容器的系统提示里，把这个环境里有什么、日志在哪、该怎么干活交代得明明白白：

• 组件与日志位置：nginx 请求日志、PHP-FPM 日志、MySQL 错误日志、Redis 日志……每个组件在哪个文件，写得清清楚楚；
• 测试方式：页面访问和测试必须优先用 cda 操作浏览器（自己打开页面、自己看结果），只有接口 API 才用 curl——AI 被要求自己动手验证，而不是猜；
• 故障排查路径：报错了先看项目异常日志，不足以定位再看其他错误日志，然后自己修；
• 权限充分：容器里是 root，改配置、重启服务一条命令搞定（service php8.4-fpm restart）；
• 自动提交：改完代码自己 git add --all，按四段结构写 commit message 提交——这就是容器里那套 git 的用途。

「你想想这意味着什么。」老陈 说，「传统 AI 编程是『你描述需求，AI 写代码，你测、你修、你提交』。现在这套是——AI 写代码、AI 开浏览器测试、AI 查日志修 bug、AI 自动提交。你只负责验收。」

阿杰 笑了：「你说的这些，我已经这么干了大半年了。八十三次自动 commit，就是证据。」

七、装备链全景图

老陈 指着白板上画完的图：

操作系统（Windows / macOS）
  └─ Docker Desktop ────────────── 环境与系统解耦
      └─ harness_engineering_php_env（容器）
          ├─ nginx / PHP 8.4 / MySQL / Redis / Beanstalkd
          ├─ git（Claude Code 的提交入口）
          ├─ chrome_do_action 服务端 ──:12345──┐
          ├─ call_your_claude 服务端 ──:12346──┤
          └─ Claude Code（带说明书：日志/测试/git）
Chrome（浏览器）
  ├─ chrome_do_action 插件 ─────── 出向：AI → 浏览器
  └─ call_your_claude 插件 ─────── 入向：浏览器 → AI
git（宿主机）──────────────────── 你的入口：review / 回退 / push
cc-switch ──────────────────────── 模型切换，零成本换弹夹

「这条链上每一环都解决一个具体问题：」老陈 指着图说，

• Docker Desktop 解决「环境与系统解耦」，换电脑不换环境；
• 两个 Chrome 插件 解决「AI 的手和眼」，出向操作、入向反馈，双向闭环；
• git 双入口 解决「AI 的后悔药」，你一份、AI 一份，共用同一份历史；
• cc-switch 解决「模型切换成本」，换弹夹不换枪；
• harness 容器 解决「环境可弃」，折腾的代价是一次 --rm；
• 容器里的 Claude Code 解决「AI 会不会干活」，有手、有眼、有说明书。

「你用了大半年，但从来没把它当成一条链。现在看清楚了：你一个人，就是一支队伍。」

尾声：从零开始，怎么落地

「那要是有人想照着你这套来一遍呢？从哪开始？」阿杰 问。

「不是从 harness_engineering_php_env 开始——那是镜像的构建源，用的人不需要碰它，拉镜像就行。从 php-vibe-coding-frame 开始。」

git clone https://github.com/smarty-kiki/php-vibe-coding-frame
cd php-vibe-coding-frame
./project/tool/naming_project.sh my-app   # 一键改成你自己的项目名
./project/tool/start_development_server.sh  # 启动开发环境

关键在最后这条命令：拉镜像、执行镜像，都在 start_development_server.sh 里完成了——脚本把整个项目目录挂载进容器（同一份文件夹，宿主机 git 和容器内 git 共用），映射 80/3306/12345/12346 四个端口，然后启动容器。容器起来之后，你看到的就是里面那个带说明书、有手有眼的 Claude Code。

从那一刻起，你的旅程就开始了：AI 写代码、AI 开浏览器测试、AI 查日志修 bug、AI 自动提交，你只负责验收。

一个人，一套装备链，一个完整系统上线。

这就是单兵作战：不是一个人扛所有事，是一个人把所有工具串成一条链，让每个环节都替你干活。

一条命令，打开你的镜像空间。