用cursor,半天开发了一个AI小程序

209 阅读7分钟

创意出发点

其实这个小程序的出发点挺有意思的,因为我平常都会登录交友app去认识人

而这个app有个板块是随机发现好友的功能,每人每天有所谓的“燃料”,随机到处去飞行

最终飞行到另一个城市,如果匹配到了,就可以和对方进行线上聊天

而在等待的过程中,它怕你无聊,所以就会随机给你显示几个科普小知识,顺便让你学习点东西

456.jpg

后来我发现这个很好玩,我本身对这些小知识点挺感兴趣的。

索性就自己去开发这个小程序,这样没事可以打开看看,去学习一下

用到的工具

工具我用的是微信开发者工具和cursor,在开发前,我会先去问豆包,我想要实现什么功能

Snipaste_2025-10-13_14-36-26.png

为了能快速上线,所以我会告诉他,我要实现MVP(Minimum Viable Product)版本,也就是最小可行产品

AI的确很厉害,他会变成一个很专业的产品经理,给你写一个很完美的方案。

对于我这个老程序员,经常和产品经理打交道的人来说,看到文档后,不禁要鄙视之前合作的产品了,哈哈哈

专业的就是专业的,如果你想得到更专业的回答,prompt是至关重要的

这是它给我生成的需求文档的一部分

# AI 小知识生成小程序 MVP 版本需求文档

## 一、项目概述

### 1.1 产品定位

一款以**AI 实时生成碎片化知识**为核心的轻量级工具,无需人工筛选内容,
用户可通过 “选择分类 + 重新生成” 快速获取感兴趣的小知识,
满足碎片化学习、日常猎奇的需求,验证 “用户对 AI 生成知识内容接受度” 的核心假设。

### 1.2 目标用户

*   核心用户:18-35 岁有碎片化学习需求的群体(学生、职场人),
*   日常喜欢刷短视频、读短文,追求高效获取轻量信息。

*   潜在用户:对生活技巧、科普知识感兴趣的泛人群,
*   无明确学习目标但愿意 “随手学” 的用户。

### 1.3 核心目标

1.  快速上线验证:实现 “分类选择 + AI 生成 + 重新生成” 核心功能。
2.  用户行为验证:通过数据判断用户对 AI 生成内容的接受度
(如 “重新生成” 点击频率、单页停留时间)。
3.  基础体验保障:确保界面简洁、操作流畅,无明显功能故障。

需求好了,接下来开始写代码

这就不得不承认AI这个伟大发明了

我只需要把需求扔给AI,告诉它,请根据这个需求文档,帮我做个静态页面

前期我是建议不要上来就让AI去直接开发页面,一个是token消耗的多,而且时间也浪费

因为你无法保证AI会直接生成就是你想要的UI和功能点,所以我会选择先生成静态页面

也就是html文件,这个是最能直接看到效果的,如果不满意了,还可以随便改

当你对配色,功能都满意后,就可以让AI开始开发了,接下来,你要告诉AI规则

什么是规则?

就是告诉他,你能做什么,不能做什么,越细致越好,你就把他当做来公司实习的学生

他第一次来实习,对公司的一切都一无所知,你得带着他去饭堂吃饭,告诉他几点前到公司

几点后才能下班,等等

所以你要制定好规则:

# 技术方案
前端采用微信小程序提供的写法来实现
后端采用微信小程序提供的云开发来实现

## ​​代码风格统一​
- 缩进:2 空格
- 引号:单引号
- 分号:必须添加
- 文件命名:小驼峰(如 userInfo.js)
- 不需要加ESLint校验
- 禁止使用typescript
- 禁止使用第三方UI库,就用官方提供的组件样式

## 云开发规范
- 每次表的结构有变化时,都要输出到/database.md里,同时标注文档的修改时间,改了哪些内容等
- 表的字段要有注释说明:比如含义,关联说明等
- 云函数要注释其作用

## 组织原则
- 保持项目结构清晰,遵循模块化原则,页面、组件、工具函数等分别放置在不同目录。
- 相关功能的文件应放在同一目录下,便于维护和管理。
- 使用有意义的目录和文件名,反映其包含内容。

## 代码质量原则
- 遵循微信小程序的官方开发规范和最佳实践。
- 避免代码重复,提取公共的函数和组件。
- 保持代码简洁、清晰,添加必要的注释,提高代码可读性。

## API调用规范
- 对网络请求进行统一管理,可封装成工具函数,便于错误处理和复用。
- 处理好请求的加载状态、成功和失败回调,给用户友好的提示。
- 调用其他 API(如获取用户信息、地理位置等)时,需遵循微信小程序的权限管理规定,提前向用户申请权限。

## 样式设计规范
- 样式选择器应简洁明了,避免使用过于复杂的选择器。
- 使用rpx作为单位进行尺寸适配,确保在不同屏幕尺寸下显示效果一致。
- 考虑不同设备的屏幕特性,进行合理的布局和样式调整。
- 采用wxss编写样式,遵循 CSS 的基本规范。

## 性能优化规范
- 减少不必要的视图渲染,合理使用wx:if和hidden。
- 避免在页面加载时执行过多复杂的操作,可将部分操作延迟到页面显示后执行。
- 对图片等资源进行压缩处理,减少文件大小。
- 合理使用缓存,避免重复请求相同的数据。
- 列表渲染必须使用 wx:key
- 禁止在循环内使用复杂计算
- 图片懒加载高度必须预设

## 注释规范
- 在代码中添加必要的注释,解释关键功能、复杂逻辑和重要变量等。
- 注释应使用中文,遵循统一的格式,如单行注释使用//,多行注释使用/* */

开始干活

有了规则,AI就会好好给你干活儿了

AI模型我用的claude4,因为写代码它是公认最强的嘛

我做了几个分类,有自然探秘,历史,科学,心理学等等

这样不会觉得无聊

那么知识是怎么来的呢

自然也是调用AI的,我用的是豆包的模型

它有免费的额度,足够我挥霍了,而且他们家的模型太多了,每个模型我都可以白嫖点

没了,再换个账号就好啦

更何况基本都是我自己用来学习的,所以就没有太消耗token了

生成的知识,开始有文本,且能复制,但我觉得太无聊了,就又调用AI去生成图片的大模型

但生成的效果有点搞笑,就又去掉了

截止到现在,小程序基本算完成了

接下来可以利用开发者工具,做上传,然后发体验版,就可以尝试了,还是有点小开心的

如果要上线的话,小程序是需要备案的,选好你的工具分类,然后人脸识别确认等信息

交了30块钱认证费,第二天会有工作人员给你打电话,跟你核对信息,之前我做了一个关于社交的小程序

结果说只能企业资质的才可以做,还得注册公司啥的,我也不懂,就放弃了,我才换了这个赛道

备案好了,就可以上线了,别人就可以搜到你的小程序了,名字叫 知趣小抄 ,已经上线了,欢迎体验~

体验

gh_87607af659af_258.jpg

PS: 如果有对AI感兴趣的,可以一起交流,现在正开发下一个AI项目,敬请期待~

123.png