1. Demo 简介
是什么： Token 账本是一个 AI 用量可视化工具，由 Chrome 浏览器扩展 + Web 仪表盘 两部分组成。浏览器扩展在后台自动追踪你在 ChatGPT、Claude、Gemini、Trae 等 AI 平台的每一次对话 Token 消耗，仪表盘用可视化图表展示你的用量分布、费用趋势、平台对比，还能给你成本优化建议和预算提醒。
面向谁： 每天用 2 个以上 AI 工具的开发者、内容创作者、研究者，以及需要管理团队 AI 支出的中小企业主。
主要功能：
-
自动追踪多平台 Token 用量（ChatGPT/Claude/Gemini/Trae）
-
日/周/月/全部 时间维度切换，趋势面积图一目了然
-
环形饼图 + 渐变条形图对比各平台用量占比与费用
-
智能洞察：自动告诉你最常用平台、性价比最高平台
-
月度预算进度条，超支预警
-
最近使用记录列表，关联具体任务名称
-
Chrome 扩展支持离线缓存，断网不丢数据
产品截图：
2. Demo 创作思路
灵感来源： 说起来挺有意思的，上个月我同时开了 ChatGPT Plus、Claude Pro 两个订阅，月底查信用卡账单的时候懵了——光 AI 订阅就花了 40 多美刀，但我完全答不上来：这钱到底花在哪了？是 ChatGPT 用得多还是 Claude 用得多？哪个任务消耗最多 Token？这周用量是不是比上周涨了？
想解决的问题： 我翻遍了各个 AI 平台，发现没有一个给你看"跨平台总账单"的地方。ChatGPT 只告诉你 ChatGPT 的用量，Claude 只告诉你 Claude 的，你得自己去各个后台扒数据，用 Excel 拼。这就好比你有四张信用卡，但没有一个记账 App，每笔消费你得自己拿本子记。
现金有随手记，运动有 Keep，睡眠有 AutoSleep，但每天花掉成千上万个 Token 的 AI 消费，居然是一笔糊涂账。Token 账本就是来解决这个问题的——AI 时代的消费，也该有自己的账单管家。
为什么做这个方向： 我觉得 AI 工具正在从"偶尔尝鲜"变成"日常水电煤"，就像当年移动支付普及后记账 App 火了一样，AI 用量管理这个需求会越来越强烈。Token 账本先从个人用户切入，解决用量透明化的问题，未来可以延伸到团队成本分摊、模型选择建议、自动预算控制等方向。
产品形态： Chrome 浏览器扩展（自动采集）+ Web 仪表盘（可视化展示），全栈实现。
3. Demo 体验地址
交互式体验方式： 请下载本帖附件 Token账本_Demo.zip，解压后用浏览器（Chrome/Edge/Safari）直接双击打开 index.html 即可完整体验仪表盘！
Demo 内置了 30 天的模拟使用数据，你可以：
-
点击顶部的「今日/本周/本月/全部」切换时间维度
-
鼠标悬停在图表上查看详细数据
-
滚动查看最近 20 条使用记录
-
看到智能洞察卡片根据数据自动变化
无需安装 Node.js、无需 npm install、无需启动服务器，打开即用，零门槛体验！
4. TRAE 实践过程
说实话，这个项目从创意到跑起来，全是在 TRAE Work 里跟 AI 对话完成的，我基本没怎么手动写代码。下面是我的开发过程：
第一步：把想法说清楚，让 TRAE 帮我梳理创意（约 10 分钟） 一开始我只跟 TRAE 说了一句"我想做个 Token 记账的东西"，TRAE 帮我把这个模糊的想法整理成了完整的创意方案：痛点分析、目标用户、功能列表、技术选型，甚至直接帮我生成了一份创意展示 HTML 页，让我先想清楚"做什么"再动手。
（这里请插入你和 TRAE 讨论创意时的截图）
第二步：选技术栈，TRAE 规划全栈架构（约 5 分钟） 我告诉 TRAE 我想做全栈完整版（不只是静态页面），技术栈用 React + Node.js。TRAE 立刻给出了三部分架构：
-
后端：Node.js + Express + JSON 文件存储（TRAE 一开始建议 SQLite，但因为我的项目路径有空格导致原生模块编译失败，TRAE 立刻改成了零依赖的 JSON 文件方案，非常灵活）
-
前端：React 18 + Vite + Recharts 图表库
-
扩展：Chrome Extension Manifest V3
（这里请插入 TRAE 帮你规划架构时的对话截图）
第三步：后端开发——TRAE 一口气写完整套 API（约 15 分钟） 我让 TRAE 开始写后端，TRAE 直接输出了完整的 server.js，包含：
-
用量记录/查询/删除的 RESTful API
-
按时间段（日/周/月/全部）统计汇总
-
平台定价配置与成本自动计算
-
批量记录接口（供扩展批量上报）
-
一键生成示例数据接口（方便演示）
-
跨域 CORS 配置
写完后 TRAE 自动帮我装依赖、启动服务，还贴心地用 curl 验证了 API 能正常返回数据。
第四步：Chrome 扩展开发——四个平台的内容脚本（约 20 分钟） 这部分我原本以为会很麻烦，因为要监听四个不同网站的 DOM 变化。但 TRAE 分别写了 ChatGPT、Claude、Gemini、Trae 四个平台的内容脚本，通过 MutationObserver 监听对话完成事件，用中英文混合优化的 Token 估算算法（中文1.5字符/token，英文4字符/token）计算消耗，通过后台 Service Worker 上报，还做了离线队列缓存——断网时数据存在本地，联网后自动重试上报。
Popup 弹窗页也帮我做了，点击扩展图标就能看到实时统计和快捷入口。
第五步：React 前端仪表盘——最让我惊喜的部分（约 20 分钟） TRAE 用 React + Recharts 写了完整的仪表盘界面，包括：
-
4 个渐变色统计卡片，带悬停上浮动画
-
面积趋势图、环形饼图、渐变条形图
-
平台用量对比条带 shimmer 光泽动画
-
最近使用记录表格
-
时间切换器
后来我又让 TRAE 优化视觉效果，TRAE 加了：
-
欢迎回来横幅 + 月度预算进度条
-
智能洞察卡片（自动分析最常用平台、性价比最高平台、预算预警）
-
背景光晕效果、入场动画、Inter字体
-
模型标签样式、hover 效果
最后为了不用搭环境就能体验，TRAE 把整个 React 应用打包成了单文件 HTML，React、Babel、Recharts 都从 CDN 加载，内置模拟数据，打开就能用。
开发心得： 整个过程最深的感受是——有 TRAE 在，我从"想做一个东西"到"东西真的跑起来了"只用了一个多小时。以前做这种全栈项目，光搭环境、查文档、调样式就要大半天，现在我只需要专注于"我想要什么"，TRAE 负责"怎么实现"。遇到路径有空格导致 npm 原生模块编译失败这种坑，TRAE 也能立刻给出替代方案，不用我自己去搜解决方案。
**我的 TRAE Session ID（关键对话）：**1669523879507434:38401ec5c36826f16962e5bc0e6ae07b_6a39093c50e8e1168e7474d3.6a486e761f44c7cff354ac45.6a486e221f44c7cff354ac43:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 10:22:46)
报名帖链接： 【学习工作赛道】做一个 token 账本应用
Token账本_Demo.zip (8.1 KB)