编者荐语：大家好，我是布衣。

一切过往，皆为序章；所有未来，皆是可期。专注于自媒体爆款拆解+AI复刻+智能体，分享和学习前沿AI技术的落地应用。

不炫技，只做小白看得懂的教程。点击左上蓝字，关注我，不迷路。能及时看到我的推文。

家人们，谁懂啊！以前我们个人记账全靠Excel或者用个APP\小程序（广告或者付费），现在AI就能帮我们做了个神器，直接原地封神！不会写代码？没关系！我用5步教会你用AI开发一个个人记账工具，全程不用碰代码，只要会说人话！

想象一下：你每天花5分钟记账，月底自动生成收支图表，一眼看出钱花在哪了。更神奇的是，这个工具是你自己"开发"的，却不用写一行代码！

真实案例：我的朋友小王，一个完全不懂编程的会计，用这个方法做了个记账工具，分享给他们公司同事，直接被封神！技术不是门槛，会表达才是王道！

一、核心逻辑先理清（别怕，超简单！）

开发【个人收支记账小助手】这个工具的核心是： 用户输入收支信息（类型 / 金额 / 日期 / 备注）→ 数据保存到扣子内置存储（长期不丢）→ 随时查看收支列表→ 一键生成可视化图表（比如月度收支柱状图、收支占比饼图）

就像"电子记账本"，既能记、又能存、还能直观看花钱的规律，扣子编程能一站式搞定这些功能，不用自己搭数据库、不用学复杂图表语法。

古人云："工欲善其事，必先利其器"。今天这个AI工具，就是你的"神器"！

二、开发前准备（3步搞定，超简单！）

1. 登录扣子编程

这个步骤简单到不行： 登陆扣子官网：https://code.coze.cn/home，进入新版界面→ 选「网页应用」→「输入框」准备输入第一条指令

2. 明确核心字段（记清楚账的关键）

这些字段一定要记清楚： - 必选：收支类型（收入 / 支出）、金额、日期（默认当天，可修改）； - 可选：备注（比如"吃饭 / 工资 / 房租"）、分类（餐饮 / 交通 / 工资 / 理财等，让图表更细）；

3. 准备测试数据

测试数据随便想几个就行： - "支出 - 餐饮 - 50元 - 2025-12-01 - 中午吃面条"； - "收入 - 工资 - 8000元 - 2025-12-15 - 12月工资"。

三、分步开发（全程自然语言指令，AI帮写代码）

思路解析

家人们，通常我们做程序开发经常要采用MVP来进行开发，所以我准备了几段分步骤的提示词（重点是让大家了解思路）：

1：生成基础框架（一条指令搞定！）

请帮我生成一个长期可用的个人收支记账小工具网页代码，要求：1. 核心功能：添加收支记录、查看所有记录、数据长期保存（用扣子内置的本地存储/云存储）、生成可视化图表；2. 界面布局：   - 顶部：工具标题"个人收支记账工具"；   - 中部：记账表单（收支类型下拉选择：收入/支出；金额输入框；日期选择框（默认当天）；分类下拉选择：餐饮/交通/工资/房租/其他；备注输入框；"保存记录"按钮）；   - 下部：左侧"收支记录列表"（显示所有记录，可删除单条），右侧"数据可视化区"（默认隐藏，点击"生成图表"后显示）；3. 数据持久化：用扣子支持的存储方式，确保关闭网页后数据不丢失；4. 代码注释清晰，不用复杂样式，优先保证功能可用，适配电脑/手机。

2：完善"数据保存 + 记录查看"

请修改代码，完善以下功能：1. 数据存储：使用扣子的localStorage（本地存储）保存收支记录，关闭网页/刷新后数据不丢失；2. 保存记录：点击"保存记录"按钮时，验证金额是数字（非空、非负数），验证通过后保存，提示"保存成功"；验证失败提示"金额请输入有效数字"；3. 记录列表：保存后自动刷新列表，每条记录显示"日期-类型-分类-金额-备注"，右侧加"删除"按钮，点击可删除单条记录（删除前提示"确认删除？"）；4. 清空功能：在记录列表上方加"清空所有记录"按钮，点击提示"清空后数据不可恢复，确认？"，确认后清空所有记录。

3：添加数据可视化图表

请修改代码，添加数据可视化功能：1. 在记录列表右侧加"生成收支图表"按钮；2. 点击按钮后，基于保存的收支数据生成2个图表，显示在"数据可视化区"：   - 图表1：月度收支对比柱状图（X轴：月份，Y轴：金额，分收入/支出两条柱）；   - 图表2：支出分类占比饼图（只统计支出，显示餐饮/交通/房租等分类的占比）；3. 若没有数据，点击按钮后提示"暂无收支数据，无法生成图表"；4. 图表用扣子内置的ECharts实现，自适应宽度，样式简洁清晰。

4：优化细节

请优化代码，提升使用体验：1. 记录列表按日期倒序排列（最新的记录在最上面）；2. 金额显示保留2位小数（比如50→50.00元），收支类型用颜色区分（收入绿色，支出红色）；3. 图表生成后，若新增/删除记录，点击"生成图表"会重新计算并刷新图表；4. 页面加载时，自动读取存储的记录并显示在列表里。

四、真实实操（惊喜到我不敢相信！）

但是，但是，但是.....真实的实操是： 在扣子编程的实操过程中，让我感觉意外惊喜，我的第一条指令，尽然让他理解那么多，直接预判了我的预判，几乎一次就达到我后续指令的要求。让我后续指令都没有用上。

步骤1：输入第一条指令

请帮我生成一个长期可用的个人收支记账小工具网页代码，要求： 

1. 核心功能：添加收支记录、查看所有记录、数据长期保存（用扣子内置的本地存储/云存储）、生成可视化图表； 

2. 界面布局：    

- 顶部：工具标题"个人收支记账工具"；    

- 中部：记账表单（收支类型下拉选择：收入/支出；金额输入框；日期选择框（默认当天）；分类下拉选择：餐饮/交通/工资/房租/其他；备注输入框；"保存记录"按钮）；    

- 下部：左侧"收支记录列表"（显示所有记录，可删除单条），右侧"数据可视化区"（默认隐藏，点击"生成图表"后显示）； 

3. 数据持久化：用扣子支持的存储方式，确保关闭网页后数据不丢失；

4. 代码注释清晰，不用复杂样式，优先保证功能可用，适配电脑/手机。

第一条指令生成的版本结果

绝了！就这一条指令，AI直接给我生成了完整的功能！

步骤2：测试AI的编程能力

为了能体现我还是在认真开发的，我还是挑了一些问题和新增需求，来测试一下他的编程能力。 - 修正，支出分类分布中百分比计算都是0%，不要修改。在数据可视化加入月、周、年的筛选。默认显示为周。如下图所示：

步骤3：调试

1. 输入一些测试数据，检查每个字段是否正确保存
2. 数据可视化图表功能是否显示正常，统计是否准确。
3. 若有细节问题可持续用自然语音让AI去修改代码。

最终效果

家人们，看看这个最终效果，是不是绝绝子！

步骤4：部署（3步搞定，超简单！）

1. 左上角点击"部署"按钮。
2. 在跳转的页面点击"开始部署"
3. 等待部署完毕，最终会得到一个网址，将网址进行分享，就能给所有的人用了。

五、小白避坑 & 核心技巧（不踩坑才是真大神！）

1. 避坑点（新手最容易踩的）

• 需求说太笼统：比如只说"做个数据报告工具"，AI会生成模糊代码→一定要说清"上传什么文件、分析什么指标、显示什么图表"；
• 测试数据太乱：比如Excel里没有"日期""地区"字段，AI分析不了→测试数据至少包含3个以上维度（日期、商品、销量/销售额、地区）；
• 怕改代码：扣子编程的核心是"用自然语言让AI改代码"，哪怕代码报错，直接把报错提示复制给AI，它会自动修复。

2. 核心技巧（小白也能提升体验）

• 指令"拆细不拆粗"：不要一次性让AI做所有事，拆成"上传→分析→展示"三步，每步指令越具体，AI生成的代码越能用，虽然我这次的测试，感觉稍微简单，AI理解到位，但是不排除运气成分，AI幻觉还是有的，所以指令还是尽量详细。
• 利用"示例数据"：告诉AI"用这份示例数据测试：日期（2025-01-01/01-02）、商品（卫衣/牛仔裤）、销量（50/30）、销售额（5000/4500）、地区（华北/华东）"，AI会按这个格式适配；
• 简化样式需求：先让功能跑通，再告诉AI"把上传按钮改成橙色，报告区字体调大一点"，不用一开始追求美观。

六、通用方法论总结（适用于任何扣子编程网页应用）

小白用扣子编程做网页应用，本质是"把需求翻译成AI能懂的自然语言→拆成小功能逐个实现→让AI调试→发布"，核心公式：

好的需求描述 = 场景（谁用）+ 动作（做什么）+ 输出（要什么结果）+ 约束（比如文件格式、图表类型）

比如做"学生成绩查询工具"，需求描述就是："家长或老师上传学生成绩Excel（含姓名、科目、分数），网页能按姓名查询成绩，调用大模型分析薄弱科目并给出学习建议，结果显示在网页上，只允许上传xlsx文件"。

不管是数据报告、查询工具、小表单，都能套这个逻辑——不用懂代码，只要能把"想做什么"说清楚，扣子编程的AI就能帮你把想法变成可访问的网页应用。

结语：从"码盲"到"码王"，只差一个行动！

别再等了！现在就打开扣子编程，复制上面的指令，5分钟后你就能拥有自己的记账工具！更进一步：学会了这个方法，你还可以做学生成绩查询工具、个人任务管理系统、团队协作看板、任何你能想到的工具！

最后分享：我用这个方法已经做了8个工具，现在朋友都以为我是编程大神，其实我只是会"说人话"给AI听！

技术不是门槛，会表达才是王道！

最好的代码，是用自然语言写出来的！

点赞收藏：觉得有用就点个赞，关注我，下次分享更多AI神技能！家人们，这个方法真的绝绝子，我用了之后直接原地封神！赶紧收藏起来，免得以后找不到！

评论区互动：你最想用AI做什么工具？评论区告诉我，说不定下期就出教程！关注我，一起见证成长的力量！

行动是最好的学习，实践是最快的成长！

Coze智能体搭建教程目录：（干货满满）