一、AI 辅助开发小程序全流程

按照标准开发流程，通常需经历原型设计、功能开发双阶段，但是本次小程序，用户明确指定了对标小程序，所以，直接参考程序核心功能界面截图，借助 Cursor 的图片识别与代码生成能力，逐步复现目标功能体系，省去传统原型设计环节。

一）小程序整体设计

前期跟用户沟通的结论是不需要保存任何数据，只需根据固定的算法，计算出对应的分数即可，这种情况下，纯前端就可以完成。

开发完成之后，让用户体验，用户希望能统计到小程序访问者的手机号，增加了云服务，后面会介绍。

整个架构是前端页面处理用户的交互，数据存储使用小程序官方的云服务，这些都是 Cursor 的强项，零基础也能轻松上手。

开发过程是分功能开发，测试没问题之后，再开发下一个功能。

平常工作加班比较多，拆分成独立的小模块，很适合自己的现状：每天下班，花费 2 个小时，完成 1 个小功能，不影响主业。

二）小程序开发

1、首页

先开发没有任何交互效果的静态页面。

Cursor 支持解析图片，可以上传一张需要参考的交互效果图，让它基于这种风格去开发新页面。

看一下 Cursor 生成的效果怎么样。

Cursor 生成的文案并不太满意，使用 DeepSeek 来修改润色文案。

你的性格是红色，蓝色，黄色还是绿色?通过12张卡牌正反面的选择与排列组合，便可快速测出你的性格!
还可以转发给朋友一起来测哦!
上面这段话换一种说法，要求表达的意思一样。

细节优化，对于这种纯色背景的页面，一般来说，背景色延伸到手机顶部的状态栏，全屏会有一种沉浸式体验，会比较好看一些。

我看到有些小程序的背景色可以通到手机顶部，这是怎么实现的，你来帮我实现一下这个功能

至此，首页静态功能完成了。

分享小程序，要用到封面图，不用担心如何生成图片。可以让 Cursor 写了一个 HTML 页面，并且提供保存图片功能，可以自动将页面内容保存为一张图片。

我想基于这个小程序的首页，生成一张分享封面图，写一个 HTML 页面，要求封面图的尺寸是500 * 400，包含首页里面的文字和12张卡牌占位符，页面中提供一个保存图片的功能。

2、选择卡牌页面

完成首页功能之后，就来到了核心功能页面，需要让用户自由选择卡牌。

性格测试页面除了首页之外，还有选牌页面，选牌是要分 2 步：
第1步：在24张卡牌里面选12张，这一步希望占据整个屏幕。
第2步：分别把12张卡牌，拖放到不同的等级中，先不考虑细节，你帮我新建页面，要求步骤2可以返回步骤1页面。

这个时候就完成了基本的页面跳转，但是样式不好看。让 Cursor 参考首页的主题风格，来设计新页面的主题风格，前后保持一致。

首页是这种星空效果，有星星闪烁，步骤1和步骤 2也要有（记得上传首页效果图，让 Cursor 有针对性参考其他页面风格）

整体布局虽然有点乱，至少框架是有了，接下来要优化功能了。

小程序里面会有 24 张卡牌来供用户选择，参考已有的小程序，让 Cursor 识别出每张卡牌的颜色以及文字内容，方便后续在页面中填充真实的数据。

为了提升准确度，我选择了每次识别一部分图片中的内容，分批识别。

总共有24张卡牌，我会分批发给你，先发给你10张。你先识别图中卡牌的背景色、中文、以及右下角的数字，让我确认一下。

Cursor 识别的非常准确，这些识别内容会作为后续的展示数据。重复这个提示词，让 Cursor 先识别完 24 张卡牌内容，确保 Cursor 识别准确之后，再进行后续的开发。

我将要在选择卡牌这个页面，展示这24 张卡牌，跟你识别到的内容一致, 卡牌布局与我发给你识别的图中卡牌布局一样。

要求:
1、每行展示 2 张卡牌，这 2 张卡牌是互斥的，用户只能选择一张，总共12行，用户选够12张才能进行下一步。
2、右下角的数字是当前卡牌对应的分数，你也需要记录好，后面会用到。
3、你需要记录用户选中卡牌的所有详细信息，包括背景色、分数，背景色和分数后面会作为评分依据。

卡牌评分页面，参考我发你的图片，上方有3行，每行有4个空白区域，底部是刚才选择的12张所有卡牌，先完成这个布局

当前页面底部的12张卡牌，我希望卡牌可以拖动到上方的空白位置，底部卡牌拖动到上方空白区域之后，对应的空白区域展示对应的卡牌

期望的是底部的卡牌可以正常拖动到顶部的空白卡槽位置。

在这里，遇到了一个 Cursor 乱改代码的问题，反复修改了几次，也没有完成我想要的功能，只能自己去调试，我发现可能是定位层级的问题，导致 Cursor 以为自己修改成功了，但是我测试拖拽功能总是失效。

让它按照我的思路去尝试修复问题，最终解决了遇到的问题，底部的卡牌可以正常拖动到顶部空白位置。

3、测试结果页面

点击下一步会进入测试结果页面，参考我给你的这张图风格。

1、先展示出当前页面用户拖拽之后，高、中、低各自位置所对应的卡牌。

2、四色分数。你先写假数据，稍后我告诉你计算分数的算法。

3、四色分数的左边是一个扇形图，展示每种颜色分数所占的比例，右边展示每个颜色的分数以及所占百分比。

生成的页面跟预期还有细节差异，告诉 Cursor，让它一步一步微调即可。

测试结果页面，上方展示的卡牌样式调整一下，希望一行可以展示4个。

牌面描述跟四色分数里面分数最高的颜色有关。

微调之后，页面样式看起来比较舒服了。

测试过程中，发现有一个体验问题，环形图不应该出现在蒙层中的，让 Cursor 调整了几版，并没有解决问题。

借助搜索引擎，通过关键词，主动去寻找解决方案。原来是组件层级问题，是一个很常见的问题。

基于搜索得到的解决方案，总结核心思路，告诉 Cursor 应该怎么做，Cursor 按照提示的方案，重新修改了代码，经过测试，符合预期。

我发现 canvas 层级比较高，有可能会展示在弹窗蒙层上，在环形图渲染完成之后，转成图片，展示图片。

至此，小程序页面的核心功能就完成了。

4、云服务

本次需求，是希望用户可以使用手机号登录，所以希望增加一个手机号授权功能。

给我当前页面增加一个获取手机号授权的功能

1）云函数

Cursor 会自动检查是否配置了云函数，如果没有配置云函数，会自动创建目录和云函数代码。

如果是第一次接触云函数，可以让 Cursor 详细解释一下这个功能，Cursor 会详细说明每一步应该如何操作。

我第一次接触云函数，你详细说一下具体的操作步骤以及如何申请注册

在小程序开发工具中开通【云开发】功能入口在这里，按照提示操作即可。

开通云开发之后，在开发工具中上传云函数代码到云端，就可以使用云服务的功能了。

在云服务中控制台可以看到，云函数部署成功了，除了云函数，还有数据库等功能，根据自己的需要去配置即可。

用户在小程序页面授权之后，就可以通过云函数来解析出手机号。

2）数据库

初次接触数据库，可能不太熟悉相关的概念和功能，没关系，我来给大家分享如何一步步让 Cursor 教我们搭建数据库。

先设计数据库的内容。

我现在的云函数可以正确解析手机号了，我想把手机号保存到数据库，并且记录用户授权成功的时间，你详细设计一下。

Cursor 设计完数据库结构之后，会建议你创建一个 users 集合。看完 Cursor 的回答之后，如果不会操作，可以继续问 Cursor。

我怎么创建users 的集合呢

按照 Cursor 的提示，我们打开微信小程序开发者工具中的云服务面板，就能看到数据库功能。按照图中的标识，来创建一个新的数据集合。

创建数据库需要设置权限，可以让 Cursor 基于当前的应用场景，推荐合适的权限。

我创建 users 的时候，提示我要设置权限，我要怎么选择呢？

为了保证数据安全，存储到数据库中的手机号并不是真实的手机号，可以让 Cursor 设计加密方式。

大家应该能感觉到，整个开发过程中，都是使用自然语言在跟 Cursor 沟通，准确清晰表达清楚自己的需求，是 AI 编程中非常重要的能力。

三）上线

正式上线之前，需要先将本地调试通过的代码包直接提交至微信公众平台后台，方便后续提交官方审核。

审核内容包括代码规范性、安全合规性等，确保小程序符合平台标准后才能正式发布。

上传时需填写版本号和备注信息，便于后续版本追踪，遇到问题，可以快速回退到特定的版本。

登录小程序后台，在【版本管理】中，可以看到上传的代码，可以在这里提交审核，建议在正式提交审核之前，先发布一个体验版本，让一部分用户先体验，发现问题可以及时修复。

注意：体验版是有权限要求的，只有拥有体验权限的用户，才能访问体验版中的功能。

开通体验权限方法：点击菜单中的【版本管理】→ 在【体验成员】模块中，添加用户的微信号

用户在体验版中验收通过之后，就可以提交审核，提交审核的时候，会提示要备案以及微信认证，按照提示提交材料即可。

备案流程包括信息填写、初审、短信核验、管局审核等环节，按照提示要求，提交完之后，静待备案通过。没有备案的小程序虽然可以上线，但是功能会有限制，比如：无法被搜索到。

建议：小程序注册成功之后，就可以开始备案以及微信认证，不需要等上线之前再操作。

二、踩坑心得总结

在开发中，遇到报错是很正常的现象。如何快速看到有哪些报错呢？

一）如何调试小程序

小程序开发工具中，可以看到如下的操作面板，如果程序有报错，在这里是可以看到的。将报错信息复制给 Cursor，可以自动解决报错中的问题。

二）云服务怎么收费

官方有文档说明：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/billing/price.html

初次使用云服务，会有 1 个月的免费体验，具体活动以官方最新通知为准。

三）版权问题

既然是商单，就要考虑到版权问题，这个是最初没意识到的问题。

参考的那个小程序中的卡牌是漫画加特殊字体的形式，自己有尝试过用可灵、即梦等工具临摹，效果不太理想，找了一个绘画专业的朋友帮忙临摹绘图，做了一些微调。

无意间有一个想法，想了解一下这种临摹是否侵权，于是咨询了腾讯元宝，结论是当前这种设计模式可能存在侵权风险，果断放弃了，跟客户沟通之后，采用了纯文字。

四）做的不好的地方

用户思维有待提升。

这次开发中最大的问题是让用户自己去注册小程序以及备案。最初是考虑到注册以及备案都需要企业资料，让用户自己提交资料会比较方便。

没有考虑到用户对操作不熟悉以及什么时间有空去注册小程序，导致注册小程序以及给添加开发权限这件事情，拖了比较长的时间。

比较好的方案应该是自己去注册小程序，需要提交资料的时候，找用户配合一下，整体过程是自己可以把控的，上线时间应该会更快一些。

五） AI 编程要注意什么

刚开始接触编程，不要有畏难情绪，掌握最少的必要知识后立即开始行动，专注于改进实际存在的问题，而不是总想着等自己多学一些知识后再行动。

就像学习开车一样，不需要知道车的细节原理，会使用即可。

1、先熟悉工具

现在有很多编程工具，比如： Cursor、Windsurf、Trae 等，不需要了解太多细节，选择一款工具，能用自然语言让 Cursor 做出一个很小的功能，就是一个比较大的正反馈。

试着用 AI 工具（比如 Cursor）做这些：

打开软件，用大白话告诉它你想做什么。比如：帮我写个计算器程序，能算加减乘除就行
点击生成后，直接点击运行按钮看看效果
修改中文描述让它调整功能（如："把按钮颜色改成橙色"）

2、快速了解基础概念

对于编程基础概念完全不了解，也不太好，有个印象即可，前期不要深究。可以花半天时间，快速浏览一遍 w3school

3、学会查看报错，解决问题

找到报错信息。
把整个报错信息复制给 AI。
按 AI 建议的步骤尝试修复。

4、不要完全相信 AI

当你尝试了几次之后，AI 还是没有解决问题，新建聊天重新描述问题，还是不符合预期，要学会用报错关键词借助搜索引擎寻找解决方案。

三、对 AI 编程的思考以及未来预判

AI 编程工具的快速发展，正在为普通人打开前所未有的机会窗口。

一）现状思考

1、自然语言编程

只需用中文描述需求，即可生成完整程序。编程不再是计算机专业的专利，任何有创意的人，都能快速实现自己的想法。

2、效率成倍提升

对于程序员群体，只需要把精力放在全局设计上，具体的细节逻辑，可以由 AI 工具来完成。

对于非程序员，不需要深究编程原理，工作中的重复性内容（比如数据清晰），借助 AI 编程工具，效率也是成倍提升。

3、降低开发成本

小众应用开发成本大幅降低，如《小猫补光灯》APP 开发者花生，零代码基础，登顶应用商店付费榜。AI 编程让解决个性化需求变得可行。

对于创业者，可以用 AI 工具开发产品，快速验证市场，降低试错

虽然 AI 编程技术技术门槛越来越低，有一些软实力将成为未来竞争的关键。

精准表达自己的需求。
拆解思维。能够将复杂问题分解为 AI 可处理的小功能。
专业知识深度。AI 能写代码，但不懂具体行业的业务规则，懂业务的人，才能让技术真正落地。
流量与运营思路。AI 能力越来越强之后，也许可以快速复刻一些很火的应用，但是很难复刻其他应用的流量和运营思路。

二）未来预判

在未来，会产生更多优秀的类 Manus 工具，只需要一句话，就能自动完成一个企业级的编程项目，对于开发者来说，不需要专注代码本身，只关注最终结果即可。

国产编程工具正在加速缩小与头部编程工具的差距，在不远的将来，就会有更多体验更好的国产编程工具，也许可以实现从代码生成，延伸到需求分析、自动化部署的全生命周期管理，编程会变得更简单。

AI 编程的技术门槛越来越低了，现在就来试试吧！

打开 AI 编程工具，可以从这句话开始：“帮我写一个能在屏幕上显示 'Hello，我的第一个程序！' 的代码”。