夜雨聆风
这是我的第432篇Ai笔记，本篇2374、累计笔记789701
今天我们纯靠动嘴皮子，让AI帮你做一款专属app。
不夸张地说，只要字认得全，哪怕你是小学生，也能无痛手搓专属App！
中间你只需要做三件事：
1.坐在那，用大白话把需求跟AI说清楚；
2.复制我给你准备好的提示词；
3.盯着屏幕，跟着AI的反馈一步步微调。
今天手把手带大家“野生通关”一个：“AI智能记账App”。这个小App功能非常实用，能记录你每天花了多少钱、自动帮你做好分类，月底还能给你生成一份简简单单的消费小总结。
咱们现在就一起来尝试一下，感受一下当“产品经理”的快乐！
今天我们做什么？
敲黑板，先来看定义。
我们要做的是一个“网页 App”——它最适合拿来当第一个 AI 项目练手。
它大概长这样： 打开后有一个干净的页面，你可以输入：今天花了多少钱，花在什么地方（比如吃饭、交通、购物、娱乐）。
点击“保存”按钮，它会把记录存在网页里。 页面上还能看到：
今天总共花了多少钱？本月大概花了多少钱？哪些地方花得最多？
最后，我们再加一个AI 分析区，让它帮你生成一句消费建议。比如：
“你本周餐饮支出偏高，可以尝试减少外卖频率。” “娱乐消费占比不高，目前财政状况比较健康。”
这个东西不复杂，但很实用。因为它有输入、有按钮、有数据、有总结，做完以后你会明显感觉到：原来我真的可以用 AI 做出一个小工具！
准备工具：只需 2 个东西
你不用装一堆复杂的编程软件，最简单的做法只需要：
一个 AI 工具： ChatGPT、Claude、通义、Kimi、豆包、DeepSeek 都可以。
一个文本编辑器： 电脑自带的“记事本”就行。
💡进阶提示：如果你想体验更顺滑、更专业的全自动开发，也可以用 Cursor、Trae、Bolt、Lovable 这类 AI 编程工具。
但今天这篇，我们按最小白、门槛最低的方式来：让 AI 生成一个 HTML 文件，你保存下来，双击就能打开。
整个过程，你只需要会：复制、粘贴、保存文件。
第一步：写清楚需求
很多小白一上来就会这样问 AI：“帮我做一个记账 App。”
这个问法太粗了。AI 不是不能做，而是它不知道你到底想要什么样的界面和功能，最后给你的东西往往货不对板。
所以第一步，我们先让 AI 帮我们整理需求。你可以直接复制下面这段提示词发给它：
Plaintext
我想做一个适合小白使用的 AI 记账 App。
它主要给不爱记账的上班族使用。
核心功能包括：
1. 记录每日收入和支出
2. 选择消费分类，比如餐饮、交通、购物、娱乐、学习、其他
3. 显示今日总支出
4. 显示所有记账记录
5. 根据记录生成一段简单的消费分析建议
界面风格希望简洁、清爽，适合手机端浏览。
请你先帮我整理成一份产品需求文档，先不要写代码。
为什么第一步不让它直接写代码？因为小白做 App 最容易失败的地方，不是代码，而是“需求太乱”。先让 AI 帮你整理需求，它会把你的想法变成更清楚的结构（比如有哪些页面、按钮做什么）。这相当于先给 App 画一张精确的地图。
第二步：让 AI 生成 App
当 AI 帮你整理完产品需求、你觉得没问题之后，你就可以继续发第二段提示词，向它要代码了：
Plaintext
请根据上面的产品需求，帮我生成一个可以直接运行的网页 App。
要求：
1. 使用 HTML、CSS、JavaScript 写在一个文件里
2. 不要依赖外部数据库，数据可以暂时保存在浏览器本地（localStorage）
3. 页面适配手机端浏览
4. 界面要简洁、现代、好看
5. 每个按钮都要能正常点击并触发相应功能
6. 请直接给我完整代码，不要省略
这时候，AI 会生成一大段密密麻麻的代码。你不用看懂它！你只需要做下面 5 步：
点击代码框右上角的 “Copy（复制）”。在电脑桌面上，新建一个文本文档（txt）。把代码粘贴进去。保存文件，并把文件名连同后缀改成：my-money-app.html（注意：后缀一定要是 .html，不能是 .txt）。双击打开这个文件。
如果一切顺利，你的浏览器会弹出一个精美的网页——恭喜你，这就是你手搓出来的第一个 App！
第三步：“搭积木”让 AI 修改
第一版 App 通常不会百分百完美。可能页面有点素，可能按钮不够大，可能你想加个新功能。
这时候千万不要自己硬改代码，继续调教 AI。
如果你觉得页面太普通，你可以说：
如果你想加一个“本月预算”功能，你可以说：“请增加一个本月预算功能。用户可以设置预算，页面显示已花金额和剩余预算，如果超支就用红色提醒。请给我修改后的完整代码。”
小白必须记住的黄金原则：一次只让 AI 改 1 到 2 个地方。千万不要一次性说：“我要加登录、加图表、加会员、加分期付款、加微信分享……” 这样极容易把 AI 的逻辑搞砸，也会把你整崩溃。像装修房子一样，一次改一个区域。
第四步：小白救命指南
小白做 App，最怕的就是报错：页面白屏、按钮点了没反应、数据保存不上。 这时候不要慌，你不需要去排查代码，把问题直接丢回给 AI。
情况 1：页面打不开了 / 变白屏了
💡 对 AI 说： “我把代码保存成 HTML 文件后，页面显示空白/打不开。请你帮我检查代码可能哪里有问题，并重新给我一份完整可运行的代码。确保双击就能在浏览器打开。”
情况 2：按钮点了没反应
💡 对 AI 说： “这个 App 里的‘保存’按钮点击后没有反应，数据没有增加。请你检查 JavaScript 交互逻辑并修复。请给我一份完整代码，不要只给修改片段。”
情况 3：我看不懂代码，想学习一下
💡 对 AI 说： “请用小白能听懂的话，大白话解释这份代码每一部分是做什么的。不要讲太多专业术语，按模块（页面结构、样式、功能）来解释。”
你会发现，AI 不只是帮你写代码的苦力，它还是一个 24 小时情绪稳定的随身家教。哪里报错贴哪里，它会自己跟自己道歉并帮你改好。
做 App，真正要学的不是代码
很多人一听“做 App”，第一反应就是：我不会编程、我英语不好、我逻辑差，我肯定做不了。
但在 AI 时代，开发软件的底层能力变了。 以前最重要的是写代码的能力；现在最重要的是“把需求讲清楚”的能力。
你要学会清晰地告诉 AI：
我要做什么？这个东西给谁用？要解决什么核心问题？哪里不满意？需要怎么调整？
把想法表达清楚，然后让 AI 帮你变成作品。这就是普通人在 AI 时代最核心的竞争力。
彩蛋.
最后，帮你又准备了一个更加智能的自动搓app的skill
扫描下方二维码，回复【手搓】即可领取本期彩蛋！
