Vibe Coding实战：从翻车到上线，我开发了一款提前还贷计算器小程序

前言

在上一篇文章中，我建立了 Vibe Coding 信仰，并在开头豪言壮语：

“Vibe Coding 会上瘾，一旦你开始，就很难停下来。”

Vibe Coding 的流程应该是：优雅地输入需求 -> 惬意地喝杯咖啡 -> AI 完美生成应用 -> 上线收获掌声。理想很丰满，现实却翻车了。

今天继续 Vibe Coding 实战，这次要开发的是一个提前还贷计算器小程序，我们从最初的需求，到设计开发，再到调试上线，一步步踩了不少坑，也解锁了不少 AI 组合技，记录如下，供大家参考。

小程序功能：提前还贷计算器

提示词：

在当前目录下创建一个微信小程序项目，小程序名叫提前还贷计算器专业版。
一、使用微信原生技术栈
二、UI风格要现代化，如有必要可选择组件库
三、页面有2个：计算页面和关于页面

计算页面要有以下功能

1. 选择原贷款类型：商业贷款、公积金
2. 选择原贷款方式	：等额本息、等额本金
3. 填写原贷款金额：万元
4. 选择原贷款期限	例如：20年0月 (共240期)
5. 填写商业贷款利率或公积金利率
6. 选择第一次还款时间
7. 选择提前还款时间
8. 选择还款方式：一次提前还款、部分提前还款
部分提前还需要选择提前还款金额以及处理方式：缩短还款期限,月还款额不变、减少月还款额,还款期限不变

9. 点击计算按钮输出计算结果
已还利息额	
已还款总额	
节省利息支出	
该月还款额	
下月起月还款额	
新的最后还款期	

10. 还需要有重置功能

开发完成

效果预览

页面上不需要显示标题了，只在顶部导航显示

效果预览

导航栏和页面背景色不统一，统一使用页面背景颜色

效果预览

页面背景使用纯色，保持和导航栏统一

效果预览

计算按钮背景色和页面背景相似，调整计算按钮背景颜色

效果预览

红色太重了，改为和重置按钮一样的样式

效果预览

关于页面我们直接看下 AI 生成的效果

现在功能已经基本完善了，然而我们看底部图标没有显示，Cursor 无法帮我们直接生成图片，因此只能在 iconfont 上找了，如下图两个页面的 Tab 对应的icon。

到目前为止功能都开发完成了，我准备试试算的是否准确，然而这里就翻车了。我发现计算的时候永远和我在某在线平台计算的不一致，基于某平台已经上线多年，我只能选择相信 Cursor 生成的计算方法是错误的。我反反复复让 Cursor 修改了很多次，始终没办法达到预期的结果。

怎么办，我只能想办法把在线平台的 JS 文件下载下来，然后让 AI 帮我提取出核心算法。****

还原成熟平台的核心算法

我决定 “逆向工程”：从某成熟在线平台中提取其 JavaScript 文件，借助 AI 分析其中混淆过的计算逻辑。

操作流程：

下载 JS 脚本
让 AI 还原代码含义
重构为可读性强的结构化函数
替换原有小程序中由 Cursor 生成的逻辑

最终，计算结果终于达到了预期。Vibe Coding ≠ 一劳永逸，需要多工具组合、交叉验证。

整理完成后还有很多变量由于混淆仍不可读，继续让 AI 整理成可读性更强的代码。

最后再把整理好的算法发给 AI：

经过这一步，计算结果就能达到预期了，因此不要盲目相信 Vibe Coding，同时要善于利用多种 AI 工具组合达到我们的目的。

名称审核被拒

就在我准备发布时，小程序名称“提前还贷计算器专业版”却未能通过审核。

微信提示如下：

“由于你申请的名称涉及通用词命名，审核不通过。你可以提交商标注册证等资质，或更换名称。”

无奈之下，我请 AI 帮我起名，以下是一些备选方案：

省息宝 - 提前还贷助手 ✅（最终采用）
贷划算 - 提前还款攻略
贷款省省看
月供减压神器

上面是 DeepSeek 帮我起的名字，我选了“省息宝”，审核顺利通过，随后将代码中名称相关字段同步修改。

title改成省息宝

最终效果

接下来就可以发布了。

总结

这次实战让我体会到：从需求到基础框架和 UI 原型，Vibe Coding 的速度和便捷性确实令人上瘾，大幅提升了启动效率。但 Vibe Coding 不是魔法棒，它可以节省 70% 的开发体力，但某些情况下仍需人工深度参与。打造一个产品从不是一件容易的事，从功能完成到成功上线，还有运营、合规等细节值得注意。当前阶段 Vibe Coding 不是取代开发者，而是将开发者从大量重复劳动中解放出来，聚焦于更具创造性和挑战性的核心问题。拥抱 AI 的高效，但永远保持专业开发者的严谨思维和责任心。这才是真正的“专业”开发之道。

最后交了30元微信认证费用，成功上线，有兴趣的朋友可以体验。

在这里插入图片描述