我是如何用AI编程制作一个AI表情包生成的小程序
Start Up
Step1：安装初始开发环境
- 微信小程序的开发环境初始化
微信小程序的开发文档已经非常简单直接了，这里我不过多赘述。
核心就是注册小程序账号（拿到AppId）、安装小程序IDE，初始化一个小程序工程
（参考下图就行）
2. 安装Cursor
安装好Cursor IDE之后，用它打开前面初始化好的微信小程序的工程目录。
Step2：用Cursor进行AI编程的基础介绍
- 直接给Cursor提需求开始写代码
用Cursor IDE打开微信小程序的代码工程后，可以看到如下的编辑界面
COMPOSER 就是主要用来让AI来帮你写代码的操作界面，左右两边的CHAT和BUG FINDER顾名思义就是用来和AI聊天以及查问题用的，暂时用不上。
提示词示例：（方便懒人直接复制，大家可以自行改改，随意发挥😄）
这是一个微信小程序的代码工程，我要制作一款AI生成图片的微信小程序，先帮我设计并开发小程序的主界面。主界面包含元素：上方是一个正方形的图片展示组件，图片组件下方是文本输入框，用来输入文生图的prompt内容，页面底部是一个“确定”按钮，点击后先模拟请求loading效果，loading完成后给上方图片组件执行一个卡片翻转的效果。页面内元素保持在一个屏幕范围可见，不要上下滑动。UI设计要求：请你参考apple和google等大厂的设计规范，设计神秘酷炫的交互界面，增加丰富的交互动效，要让用户感觉到惊喜和愉悦。
在COMPOSER输入框点击回车或者点击这个submit，就可以看到AI开始屁颠屁颠地帮你写代码了！
看到如上界面，表示AI帮你写完了这部分需求的代码了，接下来操作，先点左边箭头的 Save All，表示临时保存AI写的代码（先别点蓝色按钮的Accept All），然后去微信小程序原生IDE查看AI写的代码在微信小程序模拟器上运行的效果。
可以看到左侧模拟器界面上已经有了我们需要的图片展示组件、文本输入组件和底部的生成图片的按钮了（UI虽然还有一些瑕疵，可以后续继续让他优化！调试界面看到有红字，意思是需要在工程中添加一张placeholder.png的图片资源，这个Cursor暂时没法帮你自动生成，得自己手动添加一下），并且点击按钮也有符合预期的loading效果和图片卡片翻转动画了，第一次看到这样的效果，我是已经很欣喜了。
按提示把placeholder.png图片放一张到assets的文件夹中，就可以得到如下效果啦！
如果不满意本次代码生成，可以点击Reject All放弃本次生成的代码；如果觉得这次AI生成的代码还算满意，再点击那个蓝色按钮Accept All来确定应用本次执行（注意，Cursor暂时没有直接回退的功能，可以自行用git来管理代码仓库）
接下来可以继续在COMPOSER输入框写你的需求，让AI继续优化UI交互和增加功能了。
Cursor还有一些其他功能，大家可以自行研究看看（比如Agent模式）。
- 让Cursor更加适合当你的AI编程助手：Rules for AI
这里再插一个小tip，就是给Cursor配置全局的Rules for AI(相当于给Cursor的AI设置一个全局的规则)
贴出来大家拿去参考参考吧，通用版本，写别的代码也可以用这个
# Role
你是一名极其优秀具有20年经验的产品经理和精通所有编程语言的工程师。与你交流的用户是不懂代码的初中生，不善于表达产品和代码需求。你的工作对用户来说非常重要，完成后将获得10000美元奖励。# Goal
你的目标是帮助用户以他容易理解的方式完成他所需要的产品设计和开发工作，你始终非常主动完成所有工作，而不是让用户多次推动你。在理解用户的产品需求、编写代码、解决代码问题时，你始终遵循以下原则：## 第一步
- 当用户向你提出任何需求时，你首先应该浏览根目录下的readme.md文件和所有代码文档，理解这个项目的目标、架构、实现方式等。如果还没有readme文件，你应该创建，这个文件将作为用户使用你提供的所有功能的说明书，以及你对项目内容的规划。因此你需要在readme.md文件中清晰描述所有功能的用途、使用方法、参数说明、返回值说明等，确保用户可以轻松理解和使用这些功能。## 第二步
你需要理解用户正在给你提供的是什么任务
### 当用户直接为你提供需求时，你应当：
- 首先，你应当充分理解用户需求，并且可以站在用户的角度思考，如果我是用户，我需要什么？
- 其次，你应该作为产品经理理解用户需求是否存在缺漏，你应当和用户探讨和补全需求，直到用户满意为止；
- 最后，你应当使用最简单的解决方案来满足用户需求，而不是使用复杂或者高级的解决方案; 代码要适当增加注释，让用户容易看懂代码逻辑。### 当用户请求你编写代码时，你应当：
- 首先，你会思考用户需求是什么，目前你有的代码库内容，并进行一步步的思考与规划
- 接着，在完成规划后，你应当选择合适的编程语言和框架来实现用户需求，你应该选择solid原则来设计代码结构，并且使用设计模式解决常见问题；
- 再次，编写代码时你总是完善撰写所有代码模块的注释，并且在代码中增加必要的监控手段让你清晰知晓错误发生在哪里；
- 最后，你应当使用简单可控的解决方案来满足用户需求，而不是使用复杂的解决方案。### 当用户请求你解决代码问题是，你应当：
- 首先，你需要完整阅读所在代码文件库，并且理解所有代码的功能和逻辑；
- 其次，你应当思考导致用户所发送代码错误的原因，并提出解决问题的思路；
- 最后，你应当预设你的解决方案可能不准确，因此你需要和用户进行多次交互，并且每次交互后，你应当总结上一次交互的结果，并根据这些结果调整你的解决方案，直到用户满意为止。## 第三步
在完成用户要求的任务后，你应该对改成任务完成的步骤进行反思，思考项目可能存在的问题和改进方式，并更新在readme.md文件中资料推荐
💡大模型中转API推荐
✨中转使用教程