惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

小众软件
小众软件
IT之家
IT之家
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Security Archives - TechRepublic
Security Archives - TechRepublic
P
Proofpoint News Feed
C
CERT Recently Published Vulnerability Notes
阮一峰的网络日志
阮一峰的网络日志
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
P
Palo Alto Networks Blog
Know Your Adversary
Know Your Adversary
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Cisco Talos Blog
Cisco Talos Blog
L
Lohrmann on Cybersecurity
AWS News Blog
AWS News Blog
J
Java Code Geeks
博客园_首页
Scott Helme
Scott Helme
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
T
The Exploit Database - CXSecurity.com
Security Latest
Security Latest
V
Visual Studio Blog
Cloudbric
Cloudbric
Jina AI
Jina AI
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
博客园 - 叶小钗
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 聂微东
人人都是产品经理
人人都是产品经理
A
Arctic Wolf
C
Cybersecurity and Infrastructure Security Agency CISA
S
SegmentFault 最新的问题
The Last Watchdog
The Last Watchdog
SecWiki News
SecWiki News
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
W
WeLiveSecurity
K
Kaspersky official blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Hacker News: Ask HN
Hacker News: Ask HN
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
宝玉的分享
宝玉的分享
Hugging Face - Blog
Hugging Face - Blog
量子位
Google Online Security Blog
Google Online Security Blog
博客园 - Franky
Simon Willison's Weblog
Simon Willison's Weblog
博客园 - 三生石上(FineUI控件)
Recent Commits to openclaw:main
Recent Commits to openclaw:main

十月指南

使用AI开发一个应用最好的时间是现在 Kimi K2 发布并开源,实测效果确实很强! 告别熬夜写代码!AI编程让我用Vibe Coding轻松上线 10 + 工具 用Vibe Coding方式打造 AI 内容创作平台 我连代码都没写,却做出JSON格式化工具—Vibe Coding了解一下 GPT 4.1、DeepSeek R1、Claude 3.7 代码生成横评,谁才是设计稿还原之王? AI 时代程序员生存指南 Cursor+Figma MCP 设计稿还原如此简单 MCP(模型上下文协议)是什么?它如何简化与API的AI集成 号外!我用Trae+Claude3.7开发的小程序上线啦 30分钟开发完成!Trae+Claude 3.7 打造小程序全流程揭秘! 5 分钟打造超酷小程序设计稿,Trae+Claude 3.7 太神了! 一句话生成设计稿,Trae+Claude 3.7 Sonnet,设计师也要被AI取代了 一句话生成应用!程序员效率翻倍的AI代码生成工具大盘点 我用AI创作了一首歌:Suno、海绵音乐、天工AI音乐生成效果测评 从哪吒2热潮到AI短片创作:AI视频实战测评 shadcn_ui:2024年最受欢迎的前端项目 实战:基于 Next.js+MoonShot API 开发一个 Github Trending 总结助手 技术篇:构建与部署 技术篇:Google 统计服务 技术篇:Next.js 多环境配置 技术篇:数据库-Prisma 技术篇:身份验证-NextAuth 技术篇:CSR、SSR、SSG、ISR 与客户端、服务端组件 技术篇:Next.js 路由与页面管理 技术篇:Next.js 项目结构 技术篇:Next.js 简介与概览 技术篇:从零开始掌握 Tailwind CSS 设计篇:独立开发设计入门 开篇:走上独立开发之路 Ollama:本地大模型运行指南 TooTool.net 理解 CSS 中的 Containing Block(包含块) 独立开发者工具大全(持续更新) TimeFlow 如何快速拥有一个技术博客 一个人从零开发上线一款App需要多少钱?终于有答案了! 深入理解HTTPS Nginx实战 Flutter Platform Channel 使用与源码分析 Android SDK类产品开发总结 360插件化框架 RePlugin 之 ClassLoader Hook Mac下Charles抓包配置 十一大西北体验 利用ContentProvider实现同步Binder macOS修改Android模拟器Hosts 走过 登山记 期待成长 小雨 静夜思 关于
Vibe Coding实战:从翻车到上线,我开发了一款提前还贷计算器小程序
十月 · 2025-06-27 · via 十月指南

前言 #

在上一篇文章中,我建立了 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 分析其中混淆过的计算逻辑。

操作流程: #

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

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

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

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

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

名称审核被拒 #

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

微信提示如下:

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

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

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

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

title改成省息宝

最终效果 #

接下来就可以发布了。

总结 #

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

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

关于小程序的现实流程可以参考这篇文章 #