用 Vibe Coding 做了一个 Claude Code 用量(实时)监控工具,实时显示在菜单栏

4 月 21 日
 haogre

用 Vibe Coding 做了一个 Claude Code 用量(实时)监控工具,实时显示在菜单栏

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

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


做了什么

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

主要功能


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 ,整个过程我写的代码量约等于零


技术栈


下载 & 源码

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


对 Vibe Coding 的感受

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

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

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


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

有问题或建议欢迎提 Issue 。

709 次点击
所在节点    Claude
3 条回复
hsiehsadfrog982
4 月 22 日
看到你的 ClaudeTokenMonitorBar ,Vibe Coding 从 0 到发布这个过程很有意思。我们做智能投屏产品,正在找能用 AI 独立做产品的人合作,想聊聊你是否有兴趣?可以加个微信
teaguexiao
4 月 26 日
好东西!我也一直想知道自己的 token 到底消耗在哪里,用 Vibe Coding 搞这种工具类项目真的很适合。已经加到备用列表了,感谢开源!
haogre
4 月 28 日
@teaguexiao 遇到问题可以反馈哦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/1207530

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX