AI 编码助手默认通过文本对话交互，能执行命令、读写文件，但有两个明显的盲区：浏览器交互（JS 渲染页面、登录态操作、截图）和终端协作（需要用户输入密码的场景）。
本文记录如何通过 playwright-cli 和 tmux 为本地 AI 助手补齐这两块能力，实现从”问与答”到”看与做”的跃迁。
浏览器自动化：从 webfetch 到 playwright-cli
为什么需要
内置的 webfetch 工具能获取静态页面内容，但遇到需要 JS 渲染、表单提交、登录态操作的场景就无能为力。playwright-cli 是专为编码代理设计的浏览器自动化 CLI，每次命令后返回页面快照（含元素引用），token 开销远小于完整截图。
安装
npm install -g @playwright/cli@latest
playwright-cli install --skills核心工作流
playwright-cli open <url> # 打开浏览器
playwright-cli snapshot # 获取页面快照（含 ref）
playwright-cli click e15 # 用 ref 点击
playwright-cli type "text" # 输入文字
playwright-cli press Enter # 提交
playwright-cli screenshot # 截图
playwright-cli close # 关闭playwright-cli 每次操作后自动返回页面 URL、标题和元素树快照，不需要每次都截图。snapshot 中的 ref 编号（如 e1、e15）可作为后续操作的定位依据。
两种运行模式
模式一：headless 自启动——简单快速，适合无状态的自动化场景：
playwright-cli open https://example.com
playwright-cli screenshot --filename=screenshot.png模式二：连接本地桌面浏览器——有 Cookie、登录态，用户能实时看到操作：
# 启动 Chrome 时开启远程调试端口
google-chrome --remote-debugging-port=9222 --user-data-dir=~/.config/chrome-debug
# 连接
playwright-cli attach --cdp=http://localhost:9222连接后可以操作用户已登录的网站、看到实时的浏览器画面，适合需要人工监督的场景。
技巧：Basic Auth 的 SPA 兼容
Traefik 仪表盘等 SPA 页面使用 Basic Auth 时，在 URL 中嵌入密码会导致 JavaScript 的 fetch() 调用因安全策略报错。正确的做法是用路由拦截统一添加认证头：
AUTH=$(echo -n 'admin:password' | base64)
playwright-cli route "https://dashboard.localhost/**" --header="Authorization: Basic $AUTH"
playwright-cli goto https://dashboard.localhost/这样 manifest.json、API 请求和 Web Worker 都能正确携带认证信息。
整合为 Skill
playwright-cli 的官方 skill 已包含详细的命令参考和 9 份专题文档。在此基础上，根据实际使用场景整理了本地 Chrome 连接、标签管理优先级、交互注意事项等经验，封装为可复用的 Skill：
- 自动检测 Chrome 运行状态，未启动则自动拉起
- 优先复用
about:blank标签，避免新建多余标签 - Chrome 内部页（
chrome://*）无法通过goto导航，改用tab-new
共享终端：通过 tmux 实现 AI-用户协作
场景
AI 可以执行命令，但遇到需要输入密码（SSH、数据库）的环节就卡住了。同时用户也希望看到 AI 在远程服务器上执行了哪些操作。
实现方案
使用 tmux 终端复用器，让 AI 和用户共享同一个终端会话：
# AI 创建会话
tmux new-session -d -s shared
# 用户 attach（终端窗口自动打开）
deepin-terminal -e "tmux attach -t shared"
# AI 发送命令
tmux send-keys -t shared "ssh user@remote-server" Enter
# 用户在终端中输入密码，AI 不可见
# AI 可以继续发送只读命令，输出双方都能看到
# AI 查看输出
tmux capture-pane -t shared -p -S -20协作角色分工
- AI：发送命令、捕获输出、创建会话。无法看到用户的键盘输入（密码安全）
- 用户：实时看到所有输出、输入敏感信息、随时接管操作
整合为 Skill
检测逻辑封装为 Skill：如果已有终端 attach 到 session，直接发命令；如果无人连接，自动打开终端窗口。用户通过”终端”、“共享终端”、“合作”等关键词触发。
工具链总览
AI 编码助手（核心）
├── webfetch → 静态页面读取（轻量）
├── playwright-cli → 浏览器自动化（JS 渲染、交互、截图）
│ ├── headless 模式 → 快速自动化
│ └── local Chrome → 有登录态、用户可见
└── tmux → 共享终端协作（密码安全、远程操作）
└── SSH → 远程服务器巡检（只读）经验总结
- 工具链分层：webfetch（轻量读取）→ playwright-cli（浏览器操作）→ tmux（终端协作），各司其职，复杂度递增
- 本地优先：所有能力在本地运行，数据不出机器；Chrome 和终端都在用户桌面，操作全程可见
- 安全协作：密码等敏感信息由用户在终端直接输入，AI 不接触；生产服务器限定只读命令
- 模块化封装：每个能力封装为独立 Skill，按需加载，互不干扰
最终效果：一句话让 AI 助手打开浏览器截图、连接远程服务器巡检、或者一起排查线上问题——全程在本地桌面上可见可控。