【标签】 生活娱乐
0. 先和大家打个招呼吧 
-
你是谁： 我是一名做新能源行业开发的项目经理；
-
你是怎么用 TRAE 把 Demo 做出来的：
-
一、从一句话开始
我对 TRAE 说的第一句话是：“我想做一个语音记账工具，说’中午吃饭花了35’就能自动识别金额和类目。”
没有原型图，没有需求文档。它问了几个问题就开始写代码。那一刻的感觉：原来我不需要先学会怎么描述需求，像跟朋友聊天一样说出来就行。
二、调布局像指挥助理
单页应用拆成多标签页后，进入了密集的微调阶段。我在手机上截图，然后直接说：
我：“快速统计在手机上变成长条了，太占空间。”
TRAE：“改成横排细长条，标签左数字右。”
我：“筛选框每项占两行，想并列在一起。”
TRAE：“已改三列紧凑布局。”
我根本不知道 CSS Grid 是什么，只需要描述"我看到的"和"我想要的"。感觉像个产品经理站在程序员旁边指屏幕，而 TRAE 是那个手速极快的程序员。
三、那个怎么修都修不好的日期框
日期输入框在手机端一直超出容器。TRAE 先试了减小 padding、加 max-width，都没用。第三轮我急了：“这个问题就这么难吗？”
然后它查了浏览器开发者工具，发现 CSS 根本没生效——Service Worker 缓存了旧样式。把缓存版本从 v1 升级到 v2，问题立刻解决。
如果是我一个人，可能永远都在 CSS 层面兜圈子。TRAE 像一个经验丰富的老程序员，遇到怪 bug 时会跳出当前层面，从系统角度去想"还有什么可能"。
四、最安心的时刻：它帮我查了一遍代码
TRAE 主动提出做一次全面核查，结果找出 20 多个问题：XSS 漏洞、搜索防抖、localStorage 异常、CSV 公式注入防护……很多概念我听都没听过。它分成高、中、低优先级，一批批处理，还自动备份版本。
被专业工程师兜底的感觉，特别安心。
五、TRAE 帮我跨过了什么坎
这个 Demo 如果让我从零手写，我做不出来。因为不会写 HTML，因为不知道：
-
怎么把"三十五元"解析成数字 35
-
怎么让网页离线也能用
-
怎么防止 CSV 被 Excel 当成公式执行
-
怎么修改数据模型时不破坏用户已有账单
TRAE 帮我跨过的不是"写代码"，而是工程化思维：从 0 到 1 搭架构、预见兼容性风险、排查深层次的系统问题、把用户体验细节打磨到位。
做一个能用的产品，不一定需要先成为程序员。你只需要有一个清晰的想法，然后找到一个好搭档，一句一句把它讲出来。
-
1. Demo 简介
-
是什么：随手语音记账助手是一款基于 Web 的智能语音记账 PWA 应用，用户只需说出或输入一句自然语言，系统即可自动识别金额、消费/收入类目、日期，一键完成记账。所有数据保存在本地浏览器，无需注册账号，离线也能正常使用；
-
面向谁：核心用户是**注重效率、希望快速记录日常收支的人群，**上班族、学生、自由职业者、家庭主妇/主夫等。他们不想要复杂的财务软件，也不想为简单的记账功能付费订阅。他们需要的是一个打开就能用、说完就记完的轻量工具；
-
主要功能：
-
1、**一句话记账：**支持语音或文字输入自然语言，自动识别阿拉伯数字和中文数字，支持"一句话多笔"批量识别。
-
2、**智能分类：**内置 8 大支出类目的语义映射库，自动推断类目并给出置信度和判断依据。
3、**收支全景：**支持支出和收入两种记录类型，仪表盘实时展示收支对比、本月结余，洞察页提供类目占比和 7 天趋势。
-
4、**分类学习：**用户修正类目后自动提取关键词记忆，下次遇到同类描述自动归到正确类目，越用越准。
-
5、**预算管理：**总预算 + 类目预算双轨管理，固定支出一键生成本月账单，超预算自动提醒。
-
应用采用底部标签导航，包含说明、记一笔、账单、洞察、预算、设置六个标签页。手机端自动适配底部标签栏，桌面端采用顶部导航
2. Demo 创作思路
-
**灵感来源：**这个项目的灵感来自我自己的真实困扰：每次消费后想记账，打开记账 App 却要经历"选择类目—输入金额—选择日期—填写备注"四步操作，繁琐到让人放弃。尤其是路边买杯咖啡、便利店买瓶水这种小额消费，根本不值得花 30 秒去记录。
我观察到身边的同事和朋友也有同样的问题——大家都知道记账有好处，但坚持不下来。根本原因不是缺乏意志力，而是现有工具的交互成本太高了。一个念头闪过"刚才花了多少钱"，等打开 App 已经忘了。
与此同时，手机端的语音输入已经非常成熟（iOS 和 Android 都内置了高质量的语音识别），但市面上很少有记账 App 真正利用好这个能力。于是我想：能不能做一个"说完就记完"的记账工具。
-
**想解决的问题：**用户的核心痛点可以归纳为三点：
-
记账太慢：传统记账 App 需要手动选择类目、输入金额，平均耗时 20-30 秒/笔，高频小额消费根本来不及记。
-
分类太烦：用户经常不确定一笔消费该归到哪个类目，纠结半天反而降低了记账意愿。
-
数据不放心：很多记账 App 要求注册账号、同步云端，用户担心隐私泄露，也不敢放真实的财务数据。
-
-
**为什么做这个方向：**选择语音记账这个方向，基于以下判断：
**第一，语音是最自然的输入方式。**人在消费场景中说"中午吃饭花了35"比打字快 3-5 倍，而且不需要看屏幕。这直接解决了"记账太慢"的问题。
第二，中文 NLP 在金额和日期识别上已经相当成熟。“三十五元”、“叁拾伍元”、“昨天”、"上周三"这些表达都有明确的解析规则，不需要调用外部 API，纯前端即可实现。这让"纯前端、零后端"的技术路线成为可能。
-
**第三，本地存储解决隐私顾虑。**所有数据存在浏览器 localStorage 中，不上传任何服务器。用户可以完全掌控自己的财务数据，这种"零信任云端"的设计反而成为产品的信任基石。
3. Demo 体验地址
- 见附件的压缩包
4. TRAE 实践过程
-
清晰展示用 TRAE 完成 Demo 开发的完整流程；
-
附开发关键步骤截图（不少于 3 张）；
-
附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。
-
4052126258180787:53939653a3d8460d7598504c936b090a_6a32a7b72eab6d1d5ce5f9cb.6a395fc70d27f25e792d1191.6a395fc70d27f25e792d118f:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/23 00:16:07)
-
4052126258180787:fb28041aaa1c9c4c4b66c0574af983f3_6a32a7b72eab6d1d5ce5f9cb.6a3945900d27f25e792d0e41.6a3945900d27f25e792d0e3f:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/22 22:24:16)
-
4052126258180787:a6955adb6709f69f9d886c5a8a975f37_6a32a7b72eab6d1d5ce5f9cb.6a354ce498c3e7a97ffc0e65.6a354ce498c3e7a97ffc0e63:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/19 22:06:28)
5. 对应的报名审核通过的帖子链接
【生活娱乐赛道】做一个语音记账助手应用 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
随手语音记账助手.zip (55.1 KB)