明日小炒· 原创|  让你下班就关电脑

大家好，我是小炒

昨天教大家装了Claude Code，今天直接上硬菜——用AI 从零做一个自动化记账工具。

全程你不用写一行代码，只需要复制粘贴我说的几句话，剩下全部交给AI。

做出来的东西长这样：

��在浏览器里运行的记账网页，手机电脑都能用

��自动计算月支出、分类统计，还能导出Excel

��数据保存在浏览器本地，不联网，绝对隐私

先看效果：点两下就能记一笔账，自动算出你这个月在吃饭、交通、购物上各花了多少钱，月底一键导出报表。

话不多说，开始。

一、你只需要准备一样东西

上篇文章装好的Claude Code。如果还没装，花5 分钟看昨天的教程装好再回来。

有Claude Code 就行，不需要装任何额外的东西。

二、打开Claude Code，说这句话

终端输入claude回车，进入AI 对话界面。然后把下面这段话，整段复制粘贴进去：

帮我用HTML+CSS+JavaScript 做一个完整的记账工具，要求如下：1. 一个漂亮的网页界面，适配手机和电脑2. 可以添加支出记录：金额、分类（餐饮/交通/购物/娱乐/住房/其他）、日期、备注3. 显示当月总支出4. 用饼图展示各分类占比5. 可以按月份筛选查看历史记录6. 支持删除某条记录7. 所有数据保存在浏览器 localStorage 里，不要用数据库8. 支持导出为 CSV 文件（可用 Excel 打开）全部写在一个index.html 文件里，界面要简洁好看，类似 iOS 风格。 

粘贴完按回车，Claude Code 大概 30-60 秒就会开始写代码。

三、AI 干活，你看着就行

Claude Code 会自动创建一个 index.html 文件，然后开始写代码。你会看到屏幕上刷刷地出现代码，不用管，等它写完。

写完它会告诉你：

已创建index.html，需要打开预览吗？

你回复「打开」或者「好」，它自动用浏览器打开这个页面。然后你就会看到一个完整的记账工具，直接可以用。

四、实际用起来是什么感觉？

1. 记一笔账

比如中午吃了碗面12 块，就在页面里：

·金额：12

·分类：餐饮

·日期：2026-06-07

·备注：午餐

点「添加」，搞定。不到3 秒。

2. 看月度统计

页面顶部会自动显示本月总支出。下面有个饼图，一眼就能看出你钱都花哪了——餐饮占多少、交通占多少、购物占多少，清清楚楚。

3. 查看历史记录

页面里有个月份选择器，翻到上个月，所有记录都在，不会丢。

4. 导出 Excel

点「导出CSV」按钮，下载一个文件，用 Excel 打开就能做进一步分析。月底拉一张表出来，发给会计、报税、或者给老婆看（如果你敢的话��）。

五、如果你想让AI 改点东西

用着用着觉得哪里不满意，直接跟Claude Code 说就行，比如：

帮我在页面上加一个月度预算设置功能，超预算了用红色提醒我。添加收入记录功能，能算出每月结余。界面换成深色模式，我喜欢暗的。

AI 会直接帮你改好，你只要刷新浏览器就能看到效果。

这就是AI 编程最爽的地方——你不用懂代码，只需要把需求说清楚。AI 就是你的私人程序员，还不要工资。

六、这个记账工具有哪些亮点？

·��隐私安全：数据全在你电脑浏览器里，不上传任何服务器。比那些要你手机号、银行密码的记账App 安全 100 倍。

·��手机也能用：因为是网页，发到手机上用浏览器打开也能记账。

·��完全免费：不用订阅，不用买会员，一辈子免费。

·��随时定制：想要什么功能，跟AI 说一声就加上，不需要等 App 更新。

七、举一反三：同样的方法还能做什么？

今天这个方法，本质上是——用自然语言让AI 帮你写网页应用。学会这个思路，你能做的事太多了：

·��待办清单工具：把记账的prompt 改成待办事项的需求就行

·��日记本/笔记工具：加上富文本编辑功能

·��贷款计算器：输入金额、利率、年限，自动算月供

·��个人数据看板：把体重、运动、阅读数据可视化

·��习惯打卡工具：每天打卡，生成连续天数统计

所有这些，都用今天这篇文章的方法，换个prompt（需求描述）就行。一次学会，终身受用。

八、常见问题

Q：AI 写出来的代码有 bug 怎么办？

A：直接把报错信息或者问题描述粘贴给 Claude Code，说「这里有问题，帮我修一下」。它会自己读代码、自己改，你等着就行。大部分情况下一次就能修好。

Q：为什么数据保存在浏览器里？会不会被清掉？

A：localStorage 是浏览器的本地存储，除非你手动清除浏览器数据，否则一直在。比 App 还稳——App 你删了就没了，网页你不用删除就一直在。担心丢的话，定期导出 CSV 备份就行。

Q：能不能做成一个真正的 App？

A：能。把 HTML 文件稍微包装一下就可以变成 PWA（渐进式 Web 应用），能添加到手机桌面，像原生 App 一样用。这个我后面专门写一篇教程。

Q：每天记这么多笔账，太麻烦了吧？

A：确实。下一期我教你升级版——加上语音输入功能，对着手机说「午饭 12 块」，自动记录。比手打快 10 倍。记得关注别错过。

————————————————————

今日总结

花2 分钟说完需求 → AI 花 30 秒生成代码 → 你得到一个私人订制的记账工具。

这就是2026 年的搞钱方式——不是学编程，而是学会让AI 替你编程。

别人花199 买记账 App 会员，你花 2 分钟自己做一个。

别人等产品经理排需求，你自己动手就把工具造出来了。

这个差距，就是你和别人的差距。

————————————————————

明天预告

给记账工具加上「语音输入」功能——对手机说话就能记账。不用打字，3 秒一笔。而且语音识别也是免费的，不用花钱买 API。

————————————————————

明日小炒· 专注 AI 搞钱实操

关注我，用AI 武装自己 ��

上一篇：Claude Code 安装教程|  下一篇：语音记账升级版

————————————————————