Claude HUD 界面定制与交互设计指南：4 步把状态栏调成你的样子

Claude HUD 界面定制与交互设计指南：4 步把状态栏调成你的样子

【免费下载链接】claude-hudA Claude Code plugin that shows what's happening - context usage, active tools, running agents, and todo progress项目地址: https://gitcode.com/GitHub_Trending/cl/claude-hud

Claude HUD 是一款装进 Claude Code 的插件，实时把上下文用量、活动工具、运行中的代理和任务进度挂在输入框下方。默认两行够用，可当你并行跑多个代理、或屏幕竖屏偏高时，几处定制就能让它贴住你的工作节奏。

布局速览

别急着逐块看，先把下面这张宽屏图当整体扫一遍。

HUD 贴着输入框正下方生长：最上是身份行，模型徽章、项目路径、git 分支一字排开；中间是上下文进度条加用量配额，红黄绿一眼读出还剩多少余量；往下才是工具、代理、任务这些按需展开的行。它不是死板的面板，宽度跟着终端走——屏幕够宽就横向铺开，各行各占一行，互不打架。

显示比例怎么选

仓库放了 16:9 和 5:2 两张参考截图，对应两种屏幕习惯。16:9 横向铺得开，外接大屏、并行盯多个工具和代理时信息不用折行；5:2 更贴合笔记本的可视高度，纵向少占地方，适合只聚焦当前任务。真正决定排版的是终端宽度和lineLayout：窄屏下把它设成compact，各段压进一行，最省高度。

把 C 位交给状态栏

高频信息就该放最显眼的位置。展开布局里，elementOrder决定各段顺序，把todos提到前面，进度行就排在工具行之上；想让某段始终钉在右侧，用display.rightAlign锚住context，间隙自动用空格补齐。第一行内部顺序另由projectLineOrder管，比如["project","model"]会把项目/git 块挪到模型徽章前面。改完保存，下一条消息就能看到新排位。

环境信息做减法

环境行（见 src/render/lines/environment.ts）默认堆了 CLAUDE.md、rules、MCPs、hooks 的计数，多数时候是噪音。关掉你不看的：display.showConfigCounts置false直接隐藏计数；想"够多才显示"，把display.environmentThreshold调高。做 React 项目的，保留 rules 和 MCP 计数最有用；跑带自定义规则的类型工程，就留着 rules。MCP 挂了会以红色 ⚠ 冒出来，这一条建议默认保留。

提速清单

1. 要调显示项：跑/claude-hud:configure，走引导流程，改动先预览再落盘，保存即生效。
2. 长任务想盯倒计时：在settings.json的statusLine里加refreshInterval（单位秒），HUD 就按秒自刷，不用再等下一条消息。
3. 演示或录屏时不想露 HUD：用CLAUDE_HUD_DISABLE=1启动会话，状态栏直接留空，不用动配置。
4. 工具状态一眼分辨：运行中的是黄色 ◐，完成的打绿色 ✓，MCP 出错才变红 ⚠，扫一眼就知道卡在哪。

调完这几处，HUD 就不再是"它觉得该显示什么"，而是你说了算。打开/claude-hud:configure，先把你最在意的那一行挪到 C 位。

【免费下载链接】claude-hudA Claude Code plugin that shows what's happening - context usage, active tools, running agents, and todo progress项目地址: https://gitcode.com/GitHub_Trending/cl/claude-hud