趁着国庆假期想动手做个小工具练练手，可以从一个单页版的“旅行预算小工具”起步：输入交通、酒店、餐饮明细，自动核算支出和剩余预算，还能把账目导出成 CSV。
这类工具特别适合拿来做 AI 编程练习：逻辑清晰、闭环快、改完在浏览器里双击就能用，完全不需要去折腾域名、租云服务器或接复杂的支付接口。
很多同学会问：专门为了这个假期开一个月 Plus 到底够不够用？其实从 2026 年 9 月 22 日起，官方桌面客户端已经向免费用户逐步开放了 GPT-6 Luna；如果只是做简单修改，免费版其实就能起步。只有在需要更聪明的 GPT-6 Sol、或者要在 VS Code / 终端里深度联动时，才需要考虑订阅 Plus。官方开放范围
下面提供一套完整的提示词、模拟验收数据与实操避坑指南，帮你把这笔订阅用到刀刃上。
准备好项目，想用 Sol 开始做？查看当前 Plus 方案与双节活动。先确认账号办理条件，价格和优惠以购买页面为准。
第一版的核心功能清单
做个人小工具，第一原则是先把最小可用版本跑通，所有东西收敛在一个本地单页文件里。
| 功能模块 | 验收标准 |
|---|
| 费用录入 | 包含日期、分类、备注、金额四项 |
| 增删改查 | 支持原地修改条目和随时删除错误账目 |
| 预算核算 | 实时展示总预算、已花费总额、剩余预算 |
| 分类小计 | 自动汇总交通、住宿、餐饮等各项开销 |
| 本地留存与导出 | 刷新浏览器不丢数据（LocalStorage），支持导出标准 CSV |
| 移动端适配 | 手机屏幕下表单不遮挡、不横向溢出 |
第一版尽量别碰用户注册、跨端同步、高德地图 API 这类重型依赖，先把本地核心算账体验做扎实。
提示一点：浏览器本地存储（LocalStorage）是绑定当前浏览器环境的。如果清理缓存或更换设备，数据不会自动同步，做完账记得点一下“导出 CSV”存一份备份。
第一段：初始化项目提示词
在本地新建一个专门的项目目录，在 Codex 任务中发给它以下要求（如果没配置过环境，可以先看Codex 使用指南）：
请在当前项目文件夹里做一个个人旅行预算工具。
用 HTML、CSS、JavaScript，尽量做成一个 index.html 文件。
不调用外部 API，不加载外部字体或组件库，不需要登录和服务器。
页面里的金额统一用人民币显示。
第一版要求：
1. 设置总预算。
2. 新增、修改、删除费用条目，每条包含日期、分类、说明、金额。
3. 统计费用合计、剩余预算、各分类小计。
4. 用浏览器本地存储保存数据，并提供清空入口；清空前要求确认。
5. 导出 CSV，正确处理中文、逗号、引号和换行。
6. 手机宽度下输入框、按钮可操作，不出现整页横向溢出。
金额不允许负数、空值或非数字；按分计算后再格式化显示。
用户输入的说明按文本显示，不作为 HTML 执行。
先列出实现范围和验收项，再写文件并检查。
完成后告诉我如何打开、数据存在哪里，以及有哪些限制。
不能实际执行的检查请明确说明，不要写成已通过。
这段提示词把数据存储边界、格式校验和防注入都交代清楚了，AI 写出的第一版通常骨架很正，省去很多来回扯皮的时间。
模型怎么选：别上来就开最贵挡位
如果你账号里已经有免费的 GPT-6 Luna，不妨先用它跑跑需求拆解或文案微调。按官方定位，Luna 对规则清晰的事务性任务效率很高。
如果需要 AI 完整生成全套 JS 逻辑、排查复杂的样式冲突，直接选用 GPT-6 Sol。Plus 用户目前均在 Sol 的支持名单内。两者的分工与定位可参考官方说明。
调试时有个常见误区：页面某个样式一变形，就急着换模型、开 Fast、甚至把所有提示词从头重发一遍。这不仅浪费额度，还容易改乱代码。正确的做法是哪里报错就精准提哪里的要求。
比如在小屏下按钮被挤飞了，直接发局部调优指令：
当前页面在约 390px 宽的窗口里，“新增”按钮被挤到屏幕外。
请检查表单布局并修复，保留已有字段和计算逻辑。
修改后检查 390px 和 1440px 两种宽度。
告诉我具体改了哪里，不要重新设计整个页面。
用这五条数据做验收，别只凭眼看
设置总预算为 3,000 元，录入下面这组测试账单：
| 日期 | 费用分类 | 支出明细 | 金额 |
|---|
| 10 月 1 日 | 交通 | 高铁车票 | 428.50 元 |
| 10 月 1 日 | 住宿 | 酒店预付 | 899.00 元 |
| 10 月 2 日 | 餐饮 | 餐饮预算 | 360.00 元 |
| 10 月 2 日 | 门票 | 景区门票 | 180.00 元 |
| 10 月 3 日 | 交通 | 市区打车 | 132.50 元 |
正确计算基准：
- 总花费：正好 2,000 元，剩余预算：1,000 元。
- 交通分类小计：561 元。
- 数据修改测试：将住宿费从 899 改为 799 元，总花费应变动为 1,900 元，剩余 1,100 元。
- 条目删除测试：把 180 元门票删掉，总花费变为 1,720 元，剩余 1,280 元。
有了这组确切的数字，直接把这段验收需求甩给 Codex 进行自动化自检，或者你自己按这个步骤点一遍：
请检查这个预算工具，不新增功能。
1. 空列表时，合计为0，剩余等于总预算。
2. 按我给的5条模拟数据，验证合计2000元、剩余1000元、交通小计561元。
3. 住宿改成799元后，验证合计1900元；再删除180元门票，验证合计1720元。
4. 金额分别输入空值、负数、文字，检查是否阻止保存并给出清楚提示。
5. 说明中包含英文逗号、双引号和换行时，CSV导出后仍能正确分列。
6. 刷新页面后检查数据能否恢复；若本地文件方式下受浏览器限制，说明实际情况和替代打开方式。
7. 清空时取消确认，数据应保留；确认后才清空。
8. 检查手机布局和浏览器报错。
分别列出通过、失败、未执行的项目。发现问题就修复并复查。
买一个月 Plus 做这个项目够不够？
Plus 官方售价为 20 美元/月。只要你不开着 Fast 疯狂重试、不无脑把成百上千行的依赖包一股脑拖进上下文，做这种体量的前端单页小项目，Plus 的额度通常是绰绰有余的。
你可以顺手在本地备忘录里留一个简单的日志：
| 阶段 | 选用模型与模式 | 用量面板大概扣减 | 遇到限额时段 | 任务是否交付 |
|---|
| 初始搭建 | Sol (Standard) | 填记录 | 是 / 否 | 产出初版 |
| 逻辑修补 | Sol (Standard) | 填记录 | 是 / 否 | 跑通测试 |
| 样式调优 | Luna / Sol | 填记录 | 是 / 否 | 移动端正常 |
注：ChatGPT Work 和 Codex 共享用量，如果你白天在 Work 里做过批量数据处理，额度消耗也要综合考虑进去。详细机制可看官方用量说明。
国庆双节活动与开通贴士
正值中秋国庆双节，PayForChat 平台推出了限时优惠活动：10 月 7 日前可领取专属优惠券，领券后在 10 月 24 日前下单均可享受抵扣。
如果你手头的订阅刚好在假期后到期，可以先把券领了放着，等快到期时再用，不用急着在假期扎堆开。领券与详情可查看双节活动入口。
PayForChat 支持微信、支付宝及国内银联卡充值，直接充入你的官方账号，不需要提供账号密码，只需提交邮箱即可办理。如遇充值失败享受全额退款保障。开通指引见Plus 开通指南。
常见问题
Q: 完全不懂写前端代码，能照着这个做出来吗？
A: 可以。提示词已经针对单文件封装好了，你只需要按步骤粘贴给 Codex。重点是在浏览器里打开后，拿那 5 组数据一项一项核对。遇到页面显示不对，直接把截图或现象复制给 AI 让它修。
Q: 做这个小工具必须开通 Plus 吗？
A: 不一定。如果桌面端已经有了免费版 Luna，完全可以先用它试试。只有当你觉得 Luna 理解较慢、或者需要 Sol 和 VS Code 插件支持时，才考虑买 Plus。
Q: 页面能打开，是不是就代表项目做好了？
A: 建议跑完上面的 5 组验收数据：特别是数据删除后统计是否准确、金额填负数时有没有拦截、刷新页面数据还在不在、导出的 CSV 里的中文乱不乱码。
Q: 买了 Plus 会连带送网站域名和云服务器吗？
A: 不包含。这个教程做的是本地单页工具，运行在你的电脑浏览器里，不需要服务器和域名。
Q: 领了双节优惠券，可以直接给当前没到期的 Plus 提前充值吗？
A: 没到期的 Plus 无法提前叠加续期。建议等当前订阅自然结束后，在 10 月 24 日券码过期前再下单抵扣。
参考来源
2026-09-24：整理国庆项目教程与模拟验收数据，核对当天双节活动规则。文中金额与验收用例为实操推演示例。