大家好呀！我是TechInfQ。最近使用AI开发了一款工具类小程序：解忧百宝盒 。目前已经备案上线了，欢迎大家体验使用呀。
一、概述
项目使用的是CloudBase AI ToolKit + CodeBuddy + VScode进行开发的，什么是CloudBase AI ToolKit呢？
CloudBase AI ToolKit是腾讯云开发CloudBase的新能力，它无缝适配主流 AI 编程工具如Cursor、CodeBuddy、Trae、WinSurf等，能自动帮你生成可直接部署的前后端应用+小程序，并一键发布到腾讯云开发。
GitHub地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit
使用CloudBase AI ToolKit需要做如下准备工作：
1、安装CodeBuddy插件:
在VSCode中安装CodeBuddy插件，并登录CodeBuddy。
2、配置MCP
可以在MCP市场中直接搜索安装CloudBase，也可在json文件中配置。
配置好后需要下载AI 规则，只需对AI说："在当前项目中下载云开发 AI 规则"，AI就会自动帮我们下载规则到当前项目下。
下载规则后，可以查看规则的提示词，其实本质就是Agent智能体开发，能够调用各种mcp工具，并遵循相应规则设定和云开发最佳实践。
3、开始开发
只需要对 AI 说：登录云开发，就能使用我们创建好的云开发环境进行开发了。
上述就是使用CloudBase AI ToolKit开发的一些准备工作。最后再来说一下我这个小程序的概况吧，作为一个工具类小程序，很多功能其实都能靠前端+微信本地储存实现，不用怎么依赖后端，所以，基本上没用到云开发相关的功能，如云函数云数据库等，但是整体用下来，使用CloudBase AI ToolKit进行小程序开发比之前没有使用AI ToolKit开发要流畅丝滑得多，大概率可能是因为AI规则设定的原因吧。
二、核心模块
如果自己有idea最好，没有也问题不大，直接问deepseek或CodeBuddy生成开发需求。我就是直接让deepseek帮我生成工具类小程序常见的功能模块，并整理为markdown，如果不满意可以让它继续生成，然后从中选择自己需要的即可。
提醒一点，作为个人开发者，还是有挺多地方是受限制的，要注意一些合规性问题，考虑这个功能容不容易上线过审等。如果想要较快地开发上线，可以先选择一些功能简单的上线1.0版本，后续再考虑追加复杂功能进行版本迭代。
最后，我选择了9个功能模块，分别是：证件照制作、九宫格切图、安全水印、智能清单、离线待办、极简记账、星座每日一句、饮水提醒、习惯追踪。这些相对而言都比较容易实现，符合我这个工具类小程序1.0版本上线的期望。
三、开发历程
1、想要一口吃成一个胖子？
这里说的就是我刚开始的心态：求快，想要一次性让AI把这9个功能全部打包开发完。
刚开始我是直接把这9个功能描述扔给CodeBuddy，让CodeBuddy帮我生成对应的页面和功能实现。后面发现这样直接粗暴的丢给AI，刚开始确实很爽，但越到后面就越痛苦了。这也是我刚开始犯的错误，简单举几个问题如下：
1、需要完成9个功能的开发，每个功能都需要开发独立的页面来实现，需要单独设计布局、样式和逻辑，相对而言是一个较为庞大的工程。对话太长，会超出上下文长度限制，需要重新开一个对话，为了使AI对当前需求的理解更加准确和连续，通常需要把项目整体概况、上一次对话生成的代码文件或当前进度描述等重新扔给AI，比较麻烦。
2、被AI牵着鼻子走：刚开始我对这9个功能最终要达成的效果还没有一个清晰明确的认识，差不多完全是跟着AI开发的一个进度，被AI牵着鼻子走。但是AI它也不是很清楚这个功能到底要开发到什么程度，可能每个功能都只开发了一部分；也可能是这个功能留几个Bug，另一个功能又留几个Bug。可想而知，结果就是最后调试时会很困难。
简单总结了一下原因：首先是自己没有做好项目规划，对每一个功能最终要实现的效果缺乏清晰认识。其次是没有做好进度把控，在进度把控上，人应该是作为主体的，而不是依靠AI。这样当AI开发的功能达到我们的要求时，就能及时切换到下一个功能开发，而不是一直在一个功能上耗时。至于每个功能的精细化，那是后期优化的事情了。
所以，基于上述问题，我决定采用第二种思路，即先开发一个相对完整的UI页面，然后让AI开发每个功能具体实现。
2、任务拆分：先页面，再功能，最后细节优化
这次开启三步走策略。
第1步：先开发出一个较为完整的UI页面，按照功能将其划分为生活、创作和效率三部分。
提示词大概如下，仅供参考。
小程序整体布局实现：
1、小程序的底部导航栏分别是首页、生活、效率、创作、我的。
2、首页包括banner轮播区、公告栏和功能分类区。
3、功能分类区采用网格布局展示所有功能。包括：
创作工具：证件照制作、九宫格切图、安全水印。
效率工具：智能清单、离线待办、极简记账。
生活助手：星座每日一句、饮水提醒、习惯追踪。
4、整体样式设计要美观好看。
分类页的提示词（以生活页为例）：
1、生活包括顶部标题区（大标题和副标题）和功能列表区。
2、大标题"生活助手"使用大号加粗字体，副标题"让日常生活更便捷"使用较小字号，颜色较浅。
3、功能列表区包括垂直排列的3个功能卡片（星座每日一句、饮水提醒、习惯追踪），每个卡片包含功能名称和简短描述，卡片之间留有适当的间距。
4、整体样式设计要美观好看。
刚开始生成的比较简略，经过不断调整优化，最终生成的效果如下：
其中，顶部图片、功能图标和导航图标需要自己添加，我使用的是iconfont图标库。
在整体视觉设计上：因为我个人是偏向于浅色风格的，所以选择了浅蓝色渐变背景。最后，整个页面设计出来无论是图标颜色、还是页面背景，都是浅色系风格，搭配治愈系风格的图片，效果还不错。
第2步：逐个进行功能开发和实现，一次对话只开发好一个功能，然后测试
开发完基础页面的好处就是，可以让AI专注于功能的实现。
在用AI开发时也经常遇到这样的问题：AI在帮你实现或优化功能时，不小心将原有很棒的页面布局样式改得面目全非，虽然可以做版本回退，但还是也可能出现一些问题。
所以我的做法就是，每实现一个功能，就将该功能文件夹备份一份，防止出现AI把代码越改越乱的问题。
这是因为在第一步开发基础UI页面的时候，就生成了不同文件夹来存放对应功能的实现。每个功能模块都是相互独立的，都在对应的文件夹下实现即可。所以，最安全的做法就是开发完一个功能，就备份一个功能文件夹，这样如果出现问题，就能百分百替换回去而不会出错了。
关于功能的实现，这里以证件照制作功能为例：
主要是实现尺寸选择和底色替换，核心是底色替换，需要用到人像分割技术或其他算法。最开始我使用的是微信自带的VKSession，但一直报v1版本问题，网上看了一圈也没找到合适的解决方案，于是最终选择了使用百度的人像分割API，个人可以免费调用一万次，完全够用了。
大致流程是：小程序后端将上传的图片发送至百度人像分割API，接口返回人像分割结果，根据分割结果抠出人像，移除原背景，替换为用户选择的纯色背景。
除了证件照制作，其他比如九宫格切图，用来制作九宫格图片；安全水印就是添加水印的；离线待办包括四象限和番茄钟，也是自律宝宝的必备；还有记账、饮水提醒、习惯追踪这些，就不再过多赘述了，都是比较常见的。
第3步：细节打磨与优化，实现功能的精细化和目标效果
最后就是一些细节的打磨和优化了，如页面要适配移动端、添加渐变背景透明效果、调整列表间距和字体大小、优化页面布局排版等。优化无止境，就请自行发挥了。
最后，再来看一下功能页的实现效果吧，以下是截取的几张功能页面图：
四、总结
在整个小程序开发过程中，我除了花在排错上的一些时间，剩余最多的时间可能就花在优化上了，毕竟优化无止境。
总归一句话，借助AI，借助CodeBuddy，真的即轻松又高效，毕竟大部分设计和编码的工作基本上都是AI帮我完成了。
OK，文章到这里就结束了，主要谈了下自己的一些开发心得和想法。最后，小程序已经备案上线，感兴趣的小伙伴可以前往微信小程序：解忧百宝盒，进行体验哦~
往期精彩文章推荐
往期推荐
清华大学 DeepSeek第5版：DeepSeek与AI幻觉（附下载）
清华大学 DeepSeek第4弹：让科研像聊天一样简单（附下载）
太炸裂！清华大学第三版：普通人如何抓住DeepSeek红利（附PDF下载）
清华大学 DeepSeek：从入门到精通（第二版），免费领取！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
