用 Vibe Coding 做了一个 Claude Code 用量（实时）监控工具，实时显示在菜单栏

最近一直在用 Claude Code 写代码，但每次想知道"这次对话花了多少钱"都得手动去翻日志文件，很不方便。于是我决定做一个菜单栏工具来解决这个问题。

整个项目从 0 到发布，几乎完全通过 Vibe Coding 完成我只负责提需求和方向，Claude Code 负责写代码、调试、打包、发布 Release ，全程几乎不需要手动写一行代码。

做了什么

ClaudeTokenMonitorBar 一个 macOS 原生菜单栏应用，实时监控 Claude Code 的 Token 用量和费用。

主要功能

• 菜单栏实时显示 仿 iStat Menus 风格，活跃时显示输入/输出速率（），空闲时显示总费用
• 详细统计面板 点开后显示总成本、Token 分项（输入/输出/缓存读取）
• 项目成本排行 TOP 5 项目费用，带进度条可视化
• 最近记录 最新 5 条 API 调用，含模型、Token 数、费用、时间
• 30 天趋势图 柱状图展示近 30 天每日成本
• 设置面板 开机启动、刷新间隔、显示项开关、中英文切换
• 零依赖 纯 Swift + SwiftUI ，直接读取 ~/.claude/projects 的 JSONL 文件，无需后台服务

Vibe Coding 的过程

整个开发过程大概是这样的：

我说：做一个 macOS 菜单栏 app ，实时显示 Claude Code 的 token 用量 Claude Code 做：搭建 Xcode 项目、实现数据读取、设计 UI 、调试布局

我说：菜单栏图标改成仿 iStat Menus 的双行速率显示 Claude Code 做：用 NSImage 手绘图标，实现缓存机制避免重复绘制

我说：加一个设置面板，支持开机启动、刷新间隔、显示项开关 Claude Code 做：新建 AppSettings （@Observable 单例）和 SettingsView ，用 SMAppService 实现开机启动

我说：增加英文支持，在设置里可以切换语言 Claude Code 做：设计 L10n 架构（@Observable 单例 + 字典），替换全部硬编码字符串，语言切换即时生效无需重启

我说：打包成 DMG ，发布 GitHub Release Claude Code 做：xcodebuild 构建、hdiutil 打包、gh CLI 发布，一条命令搞定

从提第一个需求到发布 v1.0.4 ，整个过程我写的代码量约等于零。

技术栈

• 语言：Swift 5.9
• 框架：SwiftUI + Charts + ServiceManagement
• 架构：@Observable （ iOS 17 / macOS 14 新特性）
• 最低系统：macOS 14.0 Sonoma
• 数据源：~/.claude/projects/**/*.jsonl（ Claude Code 本地日志）

下载 & 源码

• 直接下载 DMG：GitHub Releases
• 源码：HAOGRE/ClaudeTokenMonitorBar-macOS

安装方式：下载 DMG → 拖入 Applications → 启动，菜单栏就会出现图标。

对 Vibe Coding 的感受

这次体验下来，Vibe Coding 最大的价值不是"写代码快"，而是把我从大量我不熟悉的领域里解放出来：

• 我不熟悉 Xcode 项目结构 → Claude Code 直接搞定
• 我不了解 macOS 菜单栏 API → Claude Code 知道用 MenuBarExtra
• 我不会用 hdiutil 打 DMG → Claude Code 知道完整流程
• 我不熟悉 gh CLI 发 Release → Claude Code 一步到位

我只需要清楚地描述"我想要什么"，技术细节全部交给 AI 。这对于想快速验证想法的独立开发者来说非常适合。

当然也有局限：复杂的业务逻辑、性能优化、安全审计这些还是需要人来把关。但对于这类工具型小项目，Vibe Coding 的效率真的很高。

如果你也在用 Claude Code ，欢迎试试这个工具，顺手给个 Star

有问题或建议欢迎提 Issue 。