Claude Code 工作流里的三个开源工具：终端整合、状态栏和浏览器控制

Claude Code 是一个运行在终端里的 AI（人工智能）编程助手。它很适合处理代码生成、项目改造、文件阅读和多步骤任务，但实际用起来会遇到三个很具体的问题：

1. 终端、文件预览、浏览器文档分散在多个窗口里，切来切去很打断思路。
2. Claude Code 执行任务时，用户不容易判断它正在读文件、改文件，还是上下文快满了。
3. 很多开发任务离不开浏览器，比如查文档、操作网页、验证页面效果，但默认情况下 Claude Code 不能直接操作正在使用的 Chrome。

这三个问题可以分别用 WaveTerm、Claude HUD 和 chrome-cdp-skill 解决。

整体关系可以理解成这样：

flowchart LR
    U[开发者] --> W[WaveTerm 工作区]

    subgraph W[WaveTerm]
        T[终端中运行 Claude Code]
        F[Markdown / 文件预览]
        B[内置浏览器文档页]
    end

    T --> H[Claude HUD 状态栏]
    T --> S[chrome-cdp-skill]
    S --> C[正在使用的 Chrome]
    C --> S
    H --> U

WaveTerm 负责把工作环境收拢到一个窗口里；Claude HUD 负责让 Claude Code 的运行状态可见；chrome-cdp-skill 负责把浏览器变成 Claude Code 可以调用的工具。

WaveTerm：把终端、文件和浏览器放进同一个窗口

使用 Claude Code 做稍复杂的任务时，经常会让它先生成一个 Markdown 计划文件，比如：

plan.md
implementation-notes.md
todo.md
api-design.md

问题在于，Claude Code 跑在终端里，Markdown 文件通常要用编辑器打开，查资料又要切到浏览器。任务越长，窗口越多，注意力越容易被切换动作消耗掉。

WaveTerm 的定位是一个多合一终端工作区。它不是只提供一个命令行窗口，而是把不同类型的工作块放在同一个界面里：

• 终端块：运行 Claude Code、Git、构建命令、测试命令。
• 文件预览块：直接查看 Markdown、图片、PDF（可移植文档格式）、CSV（逗号分隔值）等文件。
• 网页块：打开 API 文档、Issue、搜索结果或本地服务页面。
• 编辑或聊天块：配合项目文件和 AI 工具使用。

WaveTerm 的界面采用分块布局，同一个工作区里可以同时放终端、文件预览和网页。

这类布局对 Claude Code 很实用。左侧可以运行 Claude Code，让它分析项目并修改文件；右侧打开它生成的 Markdown 计划；底部再开一个网页块查看文档或本地调试页面。所有信息都在同一个窗口里，不需要在终端、编辑器和浏览器之间频繁切换。

一个典型布局可以这样安排：

flowchart TB
    subgraph WaveTerm[WaveTerm 单窗口工作区]
        A[左侧：Claude Code 终端]
        B[右侧：Markdown 计划预览]
        C[底部：项目文档 / API 页面]
        D[另一个终端：测试和构建命令]
    end

    A --> B
    A --> D
    C --> A

macOS 可以用 Homebrew 安装：

brew install --cask waveterm

安装后，可以按这样的方式组织 Claude Code 工作流：

# 在 WaveTerm 的一个终端块里进入项目
cd ~/projects/example-app

# 启动 Claude Code
claude

让 Claude Code 先生成计划文件：

请先阅读项目结构，写一个 implementation-plan.md，
说明需要修改哪些文件、修改顺序和验证方式。
不要直接改代码。

生成之后，在 WaveTerm 旁边的文件预览块中打开 implementation-plan.md，再让 Claude Code 按计划逐步执行。这样做的好处不是“界面更好看”，而是任务状态、计划文件、执行命令和参考资料都能同时看到，适合长时间的编码会话。

WaveTerm 开源地址：

https://github.com/wavetermdev/waveterm

Claude HUD：让 Claude Code 的运行状态可见

Claude Code 在执行任务时会调用工具，比如读取文件、编辑文件、搜索内容、启动后台 Agent。默认界面里，这些动作不一定足够直观，尤其是任务变复杂之后，很难快速判断它现在卡在什么阶段。

Claude HUD 的做法是在 Claude Code 输入区域附近增加一行实时状态栏，把关键运行信息直接显示出来。

这个状态栏主要有四类信息。

上下文窗口尤其值得关注。大语言模型的上下文容量是有限的，长时间对话会把越来越多的历史消息、文件片段和工具结果塞进去。当上下文接近上限时，模型可能开始压缩早期信息，甚至遗漏某些约束。看到进度条变黄或变红，就可以及时做几件事：

• 让 Claude Code 总结当前任务状态。
• 把关键约束写入项目内的 Markdown 文件。
• 开一个新会话继续做剩余任务。
• 减少一次性塞入的文件数量。

状态栏的价值在于，它把“Claude Code 现在大概在做什么”变成可观察信息。复杂任务中，用户不再只能等结果，而是能看到它读了几个文件、改了几个文件、是否启动了后台 Agent、当前步骤走到哪里。

在 Claude Code 中可以按插件方式安装。命令形式会随 Claude Code 插件系统版本变化，常见流程是先添加插件市场，再安装 Claude HUD：

/plugin marketplace add jarrodwatts/claude-hud
/plugin install claude-hud/claude-hud
/setup

如果当前 Claude Code 版本的插件命令有差异，以项目仓库里的安装说明为准。

Claude HUD 更适合这些场景：

Claude HUD 开源地址：

https://github.com/jarrodwatts/claude-hud

chrome-cdp-skill：让 Claude Code 操作正在使用的 Chrome

很多开发任务其实不只发生在代码仓库里。比如：

• 打开文档页面，查某个 API 参数。
• 访问本地前端页面，验证按钮是否可点击。
• 在管理后台里填表单。
• 截取当前网页状态给 Claude Code 分析。
• 对页面结构做简单检查。

如果 Claude Code 只能读写本地文件，它就无法直接完成这些浏览器相关动作。chrome-cdp-skill 的作用是让 Claude Code 通过 Chrome DevTools Protocol（Chrome 开发者工具协议，简称 CDP）连接到正在使用的 Chrome，并对当前标签页执行操作。

CDP 是 Chrome 暴露给开发者工具、自动化测试框架和调试工具的一套协议。通过 CDP，外部程序可以获取页面结构、执行点击、输入文本、导航页面、截图等动作。

chrome-cdp-skill 的调用链大致是这样：

sequenceDiagram
    participant User as 开发者
    participant Claude as Claude Code
    participant Skill as chrome-cdp-skill
    participant CDP as Chrome DevTools Protocol
    participant Chrome as Chrome 标签页

    User->>Claude: 要求检查当前页面或执行浏览器操作
    Claude->>Skill: 调用浏览器控制能力
    Skill->>CDP: 连接 Chrome 调试接口
    CDP->>Chrome: 读取页面结构 / 点击 / 输入 / 截图
    Chrome-->>CDP: 返回页面状态
    CDP-->>Skill: 返回执行结果
    Skill-->>Claude: 提供页面信息或操作结果
    Claude-->>User: 给出分析和下一步建议

它的设计重点有几个：

使用前需要让 Chrome 开启远程调试能力。常见做法是在启动 Chrome 时指定调试端口：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222

也可以打开 Chrome 的调试目标页面确认远程调试状态：

chrome://inspect/#remote-debugging

然后把 skill 放到 Claude Code 的 skills 目录。常见用户级目录可以这样组织：

mkdir -p ~/.claude/skills

git clone https://github.com/pasky/chrome-cdp-skill \
  ~/.claude/skills/chrome-cdp-skill

如果项目希望把 skill 固定在仓库内，也可以放到项目级的 Claude 配置目录中，具体路径以当前 Claude Code 版本支持的 skills 搜索路径为准。

配置完成后，可以直接让 Claude Code 使用浏览器能力。例如：

请检查我当前 Chrome 打开的本地页面。
确认登录按钮是否存在，读取页面里的错误提示，
如果有明显的前端报错，请说明可能对应哪个组件。

或者：

请在当前标签页中打开文档页面，
找到 authentication 相关配置，
总结 access token 的刷新规则。

这类工具最需要注意安全边界。远程调试接口一旦暴露，就具备控制浏览器的能力，而浏览器里通常有登录态、Cookie、后台系统和个人数据。使用时建议遵守几条规则：

• 调试端口只绑定本机，不要暴露到公网或局域网。
• 不要在不可信项目里随意启用浏览器控制 skill。
• 涉及生产后台、支付、账号设置等页面时，先确认要执行的动作。
• 用完后关闭带远程调试端口的 Chrome 进程。

chrome-cdp-skill 开源地址：

https://github.com/pasky/chrome-cdp-skill

三个工具怎么组合使用

如果只偶尔让 Claude Code 回答代码问题，这三个工具不一定都需要。但一旦把 Claude Code 当成日常开发环境的一部分，它们解决的是三个连续环节：

flowchart LR
    A[组织工作区] --> B[观察运行状态]
    B --> C[扩展到浏览器操作]

    A1[WaveTerm] --> A
    B1[Claude HUD] --> B
    C1[chrome-cdp-skill] --> C

更具体的选择方式可以按任务类型判断：

一个比较顺手的 Claude Code 工作流可以这样设计：

1. 在 WaveTerm 中打开项目目录。
2. 左侧终端启动 Claude Code。
3. 让 Claude Code 生成任务计划文件。
4. 在 WaveTerm 的文件预览块中查看计划。
5. 用 Claude HUD 观察上下文用量和工具调用。
6. 如果任务涉及网页，就启用 chrome-cdp-skill 操作当前 Chrome。
7. 每完成一个阶段，让 Claude Code 写入进度记录，避免长会话丢失上下文。

这三个工具不改变 Claude Code 的核心能力，但能把它从一个“终端里的 AI 助手”扩展成更完整的开发工作台：WaveTerm 负责工作区，Claude HUD 负责可观察性，chrome-cdp-skill 负责浏览器交互。对于长时间、多文件、跨浏览器的开发任务，这种组合能减少窗口切换，也能降低 Claude Code 执行过程中的黑盒感。