🐟
🐟
🐟
🐟

5个让室友主动分摊电费的「共享生活账本」AI模板(扫码即用,无需注册)

站长
2026年4月7日 · 阅读 1744 · 点赞 133 · 预计 3 分钟
分享:

5个让室友主动分摊电费的「共享生活账本」AI模板

上个月,我和3个室友因为“谁该多付12块电费”在群里冷战48小时。直到我把一个二维码甩进群:「扫码记,自动算,今晚就清」。

3分钟后,A扫了码记下「7月电费328元」,B记「美团外卖89元」,C记「保洁阿姨200元」……

当晚21:07,系统自动推送PDF账单到所有人微信——每人应付205.67元,附明细+支付码。没人问“怎么算的”,因为页面右上角写着:「算法开源,点击查看」

这不是SaaS,是5个纯静态H5页面,全由AI生成,部署在免费Vercel上,扫码即用,无账号体系。

下面5个模板,你挑一个,10分钟落地:

🧾 模板1:极简扫码记账(最适合第一次试水)


  • AI生成:单页HTML,大按钮「记一笔」→ 弹窗:类型(水电/外卖/其他)、金额、备注

  • 数据存在localStorage,刷新不丢

  • 自动计算人均,显示「当前待付:¥XX」

  • Prompt示例:用HTML+CSS+JS写一个单页记账工具,仅用原生JS,不依赖库,视觉清爽(浅灰底+青色按钮),金额输入框带¥符号,提交后本地存储并实时更新人均数
  • 📊 模板2:带图表的周账单(适合爱复盘的室友)


  • AI生成:用Chart.js画环形图(水电45% / 外卖32% / 其他23%)

  • 每日自动归类(识别“美团”“饿了么”自动标外卖)

  • Prompt加一句:用script标签引入cdn.chartjs.org,画响应式环形图,颜色用#4CAF50/#2196F3/#FF9800
  • 📲 模板3:微信扫码直接记(破除“懒得打开浏览器”)


  • AI生成:带微信JSSDK配置的H5,调起扫一扫

  • 扫码后自动填充“7月电费”或“张三垫付”,减少输入

  • 关键Prompt:生成微信JS-SDK扫码页面:初始化config后调用wx.scanQRCode,扫码结果弹窗确认,确认后存入localStorage并刷新页面
  • 📄 模板4:PDF账单生成器(解决“不认账”)


  • AI生成:用jsPDF + html2canvas,点击「生成PDF」一键导出带Logo的正式账单

  • Prompt:用jsPDF和html2canvas生成PDF:包含标题「XX公寓7月生活账单」、明细表格、人均金额大字、生成时间、二维码(链接到本页)
  • 🤖 模板5:AI自动分类版(懒人终极方案)


  • 输入“交了燃气费156.5”,AI自动识别类型+金额+日期

  • Prompt核心:用正则提取中文字符串中的数字金额和关键词(电费/燃气/宽带/外卖),返回{type, amount, date}对象
  • 🚀 部署:3步上线


  • 在Cursor中生成任一模板HTML(约200行)

  • Vercel注册 → vercel命令部署 → 获得域名如 shared-ledger.vercel.app

  • 用草料二维码生成该链接二维码,打印贴在冰箱上
  • > ✅ 实测效果:我们群从“电费争议”变成“谁先扫?”——因为扫码比打字快,记账成了条件反射。
    >
    > 所有5个模板源码+Prompt已整理:[woshird.com/hack/shared-ledger](https://woshird.com/hack/shared-ledger)

    标签:ai编程, html, javascript, 效率

    站长
    人人都是程序员,站长
    分享: