今天跟大家分享一下我用 AI 编程助手 Cursor 从零到一开发的微信小程序正式上线啦。
聊一聊我背后的开发思路以及整个开发的过程。
首先，我为什么想开发这么一款微信小程序呢？因为我发现，我最近发的微博内容，突然在 X（推特）上被人抄袭了，X 上经常有人复制粘贴我微博上的内容。我想着如何避免抄袭呢？就必须白白白白白白白白白白白白白白白白将文字内容生成一张图片，然后给图片全局加水印可能效果会好点。
你看现在平台上发布图片都是只加一个水印，要么居中，要么在角落上，好容易被 PS 给 P 掉，全局给图片加水印就不好 P 了。
基于这个想法，我开发了这么一个微信小程序，目前小程序只有两个功能，一个是将文字生成图片，一个是给图片加水印。
这么我开发这款小程序的背景。
接下来，聊一聊我的开发过程。
第一步：使用 DeepSeek 的编程可视化能力，绘制原型图。
我们都知道，现在的大模型都支持网页的可视化能力，就是通过 html 代码生成可视化网页，这个能力带来的一个好处就是，我们只需要描述需求，它就能帮我们生成一个可以交互的原型图。
所以，我用 DeepSeek 先给我画原型。
DeepSeek 给我画的原型效果图如下：
我就是简单把我的需求描述给了 DeepSeek 。
DeepSeek 的输出过程：
看到了吗？我们只需要下载 html 代码，然后在浏览器中查看就行，或者直接点击「运行」按钮，预览效果，都可以。
第二步，原型我们有了，整个 UI 界面还挺好看的。
接下来，我们打开 Cursor AI 编程助手，然后将这两张截图扔给 Cursor ，让 Cursor 根据截图开发就行了。
当然了，在这一步之前，我们得先创建微信小程序的项目目录。
等这个项目基础文件都创建完成，用 Cursor 打开这个项目就行了。
Cursor 这里使用 Agent 模式，大家可以选择 AI 模型，我使用的是 Claude ，然后发送需求提示词，同时把原型图的两个界面扔给 Cursor ，它就会根据要求，开始自动写代码了。
其实，一开始 Cursor 确实是按照整个界面要求画的，实现的效果差不多，整个 UI 布局，也是上边有两个功能菜单，来切换「文案海报」和「图片水印」。但是，实现的点击效果不是那么完美，后来呢？我一想还得开发长文案切割多个海报功能，以及封面图功能，后续可能会增加很多功能，就把顶部切换 tab 菜单取代了。
让 Cursor 给我调整成两个首页的功能了。
第三步：就是结合微信小程序开发工具，进行调试和修改。
当然了，整个过程并不是一步到位的，Cursor 确实严格按照 UI 原型开发了，但是，在实际调试过程中，肯定会有一些不满意的地方和 bug ，我们遇到什么问题，就直接用自然语言描述出来，告诉 Cursor 就行，它就会根据你的要求进行修改，最终经过不断的提示和修改，效果如下：
第四步：效果演示
给大家看看它文字海报的生成功能，下图就是：
再看看它的全局水印功能：
挺好，满足了我的基本需求。
然后，我就将代码上传到了微信小程序账号上，然后，提交审核，进行了备案和认证。
我感觉认证还行，挺快的，就是备案的过程太慢了，大概需要两周时间，先是要经过微信官方的备案审核，官方通过之后，提交给管局（国家知识产权局）审核，这个过程很慢，需要两周。
当备案和认证都通过，代码发布，大家就可以使用了。
微信小程序如下：
大家可以去体验啦。
我接下来还会继续完善，开发两个功能：
1、长文案切割功能，可以将长文案切割生成多个海报，方便发小红书使用；
2、封面图海报功能，上传背景图和标题，生成漂亮的封面图。
这篇文章讲的就是一个大概的流程，如果大家想要看具体详细的操作步骤，保姆级的教程的话，欢迎大家加入我的知识星球「AIGC・掘金成长研习社」，里面的教程和操作步骤写的非常详细，而且目前里面已经更新了 18 篇关于 AI 编程的教程了。
我在星球更新的帖子数已经超过 1000 个了，加入星球的球友也达到了 570+ ，感谢大家的陪伴，我也很欣慰能够陪伴大家。
我会再接再厉，持续在星球内分享 AI 、副业赚钱和个人成长类的干货文章，陪伴大家一起成长，一起抓住时代的红利。
最后，送没加入的朋友一张 50 元的优惠券。
本篇文章来源于微信公众号: 非著名程序员
关注微信公众号
