狙击手挑战
105.14M · 2026-03-12
作为一个连HTML/CSS都写不明白的纯小白，既没前端基础，也没写过小程序代码，本来想找模板做一款极简语音记账小程序，结果都没有合适的模板。索性试了试AI编程，靠着Cursor这款AI编辑器，从零开始，3天纯靠自然语言对话，搞定了一款可上线、能变现的微信小程序。
全程没有手写一行复杂代码，不用啃官方文档，不用懂云开发逻辑，这篇文章把我的踩坑、实操、上线全流程复盘一遍，零基础前端小白照着做也能复刻。
核心需求很明确，拒绝花里胡哨，只保留3个核心页面，主打语音录入+极简记账：
成品完全符合微信审核规范，已上线开通流量主，接下来聊聊我是怎么用Cursor搞定的。
开发前不用搭建复杂环境，只需要3个工具，全程点鼠标操作：
关键提示：个人主体只能做工具类，禁止虚拟支付，后期靠流量主广告变现，刚好适配记账小程序的定位。
第一天不用写代码，核心是把需求说清楚
@docs/prd.md 请你根据该文档，帮我在 @prototype/index.html 中实现该小程序的原型图。
样式：
使用 HTML + Tailwind CSS（或 Bootstrap）开发所有原型界面。并且使用 TDesgin 的设计风格
代码结构：
每个界面以独立 HTML 文件形式存储，例如 home.html、profile.html、settings.html 等。
index.html 作为主入口，不直接包含所有界面的完整代码，而是通过 <iframe> 嵌入各界面文件，并在 index 页面中平铺展示所有页面，避免使用链接跳转。
真实感增强：
界面尺寸需模拟 iPhone 15 Pro 的屏幕规格，并应用圆角设计，以贴近真实移动设备的外观。
4. 完成小程序的前端部分
1. 请你参考@prototype 下的所有页面，包括@prototype/home.html @prototype/profile.html @prototype/stats.html 完成小程序的前端页面
2. 文档参考 @docs/prd.md
3. 全部使用TDeisgn的组件库
第二天是核心攻坚，重点搞定语音识别记账和数据存储，全程靠对话改代码。
语音识别是小程序亮点，不用自己训练模型，直接让Cursor想方案：
输入指令： “给记账面板添加语音录入功能”
Cursor会自动完成，它选择了使用微信同声传译接口，调试的时候才发现个人开发者用不了，就让Cursor切换方案，最终我定了使用科大讯飞，将科大讯飞的接口文档复制到md文档里，让Cursor阅读文档来开发语音识别功能。
为了运维方便，使用了云开发的方式。有了前端页面想接入真实操作可以这样说：
完成真实的用户登录、注册功能，并将登录用户的昵称和头像显示到我的页面的左上角的头像，昵称那里去
要基于云开发的方式，云开发的envId：xxxxxx
此时Cursor会生成云函数，只需要在微信开发者工具中部署并上传即可。
剩余页面也只需要告诉Cursor用云开发的方式实现即可。
最后一天专注打磨体验、bug修改。
指令参考： “主色调改为浅绿色，按钮深绿色，字体清晰，按钮尺寸≥44px，去除所有多余边框和阴影，保持极简风格；明细页空状态显示引导文案”
让Cursor扫描代码里是否泄露了账号、密码等信息，并删除无用文件，精简代码
不要说“做个记账小程序”，要细化到页面、按钮、功能、样式，比如“明细页右下角绿色悬浮按钮，直径80rpx，点击弹出半屏记账面板，背景白色，圆角12rpx”，指令越具体，返工越少。
无论是语法错误、接口调用失败，还是样式错乱，把报错截图+代码粘贴给Cursor，AI会逐行排查并修改，比自己查文档快10倍。当然完全外行人，可能有时可能会被一个报错或BUG逼疯，几十次修改AI可能都给你改不对
小白开发切忌贪多，先做核心功能上线，后续再迭代。我的小程序只保留3个页面，既降低开发难度，又提升用户体验，审核也更容易通过。
以前总觉得开发小程序是程序员的专利，现在靠着Cursor这类AI工具，几乎零基础也能快速落地想法。我的这款语音记账小程序，上线后积累500UV即可开通流量主，靠激励视频广告就能实现被动收益。
如果你也有小程序想法，别被“不会代码”劝退，找对工具、清晰拆解需求，3天做出一款属于自己的小程序，真的没那么难。
附上我的小程序码，可以点击体验：
同款语音记账小程序，支持语音录入、极简3页面、合规可上线，想要完整提示词和开发指令的朋友，可以留言交流～
AI 驱动的 Vue3 应用开发平台 深入探究（三）：核心概念之引擎架构与生命周期
AI 驱动的 Vue3 应用开发平台 深入探究（二）：核心概念之DSL模式与数据模型
