18 我用Cursor手搓了一个常用工具合集小程序，从0到1的真实记录_墨刀+cursor

01 前言

#DeepSeek 问世以来，人工智能领域的突破性进展持续登上热搜。从#AIGC、#AGI 到大模型，一堆技术热词再加上\"AI替代人类岗位\"的预言，内心焦虑不断加剧。秉持着没有调查就没有发言权，以及实践是检验真理的唯一标准的初心，花了一天时间整理了AI+全行业的免费AI工具合集，打破AI信息焦虑。又看到#AI编程 工具的各式宣传后，选择“躬身入局，日拱一卒”。

过去4周深度体验#Cursor 开发工具期间，不仅完成了#浏览器插件 开发，更推动两款#小程序开发 落地，其中一款已成功上线运营。本着真诚分享的精神，将这段时间踩过的坑、遇到的问题一一整理出来，分享出去并一起进步。

花时间整理了一番各个领域的AI工具可查看：建议收藏，13个领域的热门【AI免费工具】大合集来啦！（附链接+功能介绍）

关于浏览器插件开发请看AI编程系列的第5篇文章：我赌你不知道：用Cursor开发插件的核心根本不是写代码！15分钟自研插件上架Chrome！

02 首个小程序页面和相关功能展示

🏆 相关小程序的功能合集以及部分请求响应结果 

首页

天气查询

星座运势

周公解梦

03 使用工具汇总

微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

扣子智能体相关插件

https://www.coze.cn/home

AI编程工具Cursor

https://www.cursor.com/cn

产品原型图墨刀 

https://modao.cc/

04 小程序开发背景介绍

这个小程序目的是为了跑通最小MVP(最小可行产品)，再加上之前一直有使用一些工具合集的小程序，于是想着快速使用AI做一版小程序，以最小成本验证零基础是不是真的能做出来一款小程序。基于以上目的，后端选择使用了之前随手搭建的工作流，然后API授权了一下，便开始开发了。

搭建工作流非常简单，首先对搭建工作流祛魅，看着官方教程几分钟就能搭建一个非常简单的工作流，如果不会请看AI编程系列的第3、4篇文章：别再用模板了！扣子高阶玩法：手把手教你打造你的专属AI智能体，以及：代码零基础也能搞定！手把手教你用Coze创建PPT生成智能体(完全免费)，慢慢迭代就可以搭建更复杂的工作流了，为了支持这个小程序合集的功能，搭建的扣子工作流如下：

05 实战说明

开发的流程：

心态转变 ➡️ 需求设计 ➡️ 开发 ➡️ 调试及美化

▷ 心态转变

最重要的还是心态上的转变，消除对未知领域的恐惧。对浏览器插件完全不懂的情况下也能用#Cursor开发 出一款插件，那开发小程序无非就是在原来的基础上多做几步。

▷ 需求设计

核心功能

• 小程序首页功能列表：天气查询、链接读取、新闻热点、加油打气、获取笑话、周公解梦、聆听音乐、星座运势、其他。

• 功能卡片：点击卡片后，跳转页面到第二个页面，根据用户输入的相关信息：比如 北京天气，调用扣子相关的API后输出返回的响应信息

页面设计

• 底部导航：【首页】和【对话】

• 首页：首页功能卡片合集页面，即展示各种功能卡片，点击后跳转到对应的功能对话页面

• 对话页面：顶部功能【标题】、对话区域、用户输入框、用户提交发送按钮、输出响应框

首页

天气查询

星座运势

周公解梦

• 记录workflow_id：在编写需求文档让Cursor执行前，先调研一下扣子工作流的API是如何调用的。创建完工作流发布后，按照如下步骤，可以看到自己之前创建的工作流。下图中的第三步是点击自己创建好的工作流。不会创建的可以参考这篇文章：【代码零基础也能搞定！手把手教你用Coze创建PPT生成智能体(完全免费)】

点击发布，从链接上找到：workflow_id ，进行复制。

• 处理扣子授权：按照如下步骤进行扣子API授权：

点完【确定】之后，弹出一个对话框，点击【令牌】下方编码右侧的【复制】按钮，记录下令牌。

• 关闭对话框，点击【工作流】-【执行工作流】；

• 将复制的令牌粘贴到【token】处；

• 将前面复制的工作流ID 粘贴到【workflow_id】处；

• 在下方【parameters】中输入工作流开始节点定义的变量名称；

• 按照下图复制记录请求格式。

之后将输入具体的参数，比如下图输入了“北京天气”，复制记录响应格式。

以上操作就是为了拿到请求格式和响应格式，以保证Cursor可以一步生成与扣子交互的代码逻辑。准确记录下来后，事半功倍。

▷ 开发

微信开发者工具

新建1个空的文件夹，使用微信开发者工具打开，创建1个新的初始化的小程序，关联上自己的小程序appID后，初始化项目。

初始化完成后，打开可以看到小程序最开始的项目结构如下：

Cursor辅助编程

• 核心步骤1：编写需求文档

• 核心步骤2：并使用Cursor引用需求文档实现文档功能

注：需求文档写的越详细越有条理，使用Cursor生成的代码也就越接近真实诉求。

新创建一个.md文档，在创建的.md文档下写清楚需求。需求文档如下：（注意将上面步骤复制的请求格式和响应格式将其粘贴进去）

需求文档的提示词如下：

开发一个完整功能的微信小程序，要求使用JavaScript语言。1、你是一名经验丰富的前端开发，且是设计科班出身，UI设计能力也很强。2、我需要两个页面。页面1支持的功能类别，每一个功能类别占据一个小卡片，双列排列模式。每一个小卡片是一个功能类别，每一个小卡片中有两行字体，第一行是功能类别，第二行是描述，描述可以按照功能类别进行简单解释，自己自由发挥。第一行功能类别依次写上：天气查询、查找天气、链接读取、新闻热点、加油打气、获取笑话、周公解梦、聆听音乐、星座运势、其他如果一个页面放置不下的话，支持手动下拉。页面2每一个功能类别支持点击，点击后统一进入到页面2；页面2分为三部分：第一部分是输入框，第二部分是提交按钮，第三部分是解答后的回答展示区域，要求布局合理。输入框和提交框在上方显示，提交框做成动态的。3、下面添加一个导航页面，功能列表，点击后可以快速返回到首页4、进入到页面2后，左上角有一个返回页面，可以返回到首页5、页面整体风格样式符合自然、使用的特征。6、用户输入完成 点击提交后使用Coze  API。请求格式：curl -X POST \'https://api.coze.cn/v1/workflow/run\' \\-H \"Authorization: Bearer pat******************eGE\" \\-H \"Content-Type: application/json\" \\-d \'{\"parameters\": {\"query\": \"\"},\"workflow_id\": \"74*************80\"}\'响应格式：{\"code\":0,\"cost\":\"0\",\"data\":\"{\\\"content_type\\\":1,\\\"data\\\":\\\"北京的天气来啦🌤️ 2025年4月27日，天气状况是晴☀，白天最高气温25°C，夜晚最低气温12°C。当天湿度为13%，白天吹东北风1级🍃，夜晚吹西南风1级🍃。这样的天气是不是很惬意呀😃 \\\",\\\"original_result\\\":null,\\\"type_for_model\\\":2}\",\"debug_url\":\"https://www.coze.cn/work_flow?execute_id=749799*****438771&space_id=74475*****17240331&workflow_id=74808*****20980&execute_mode=2\",\"msg\":\"Success\",\"token\":488}7、微信小程序的appID是：   wx978*****6aba8、整体布局采用淡棕色的颜色

Cursor实现需求文档功能

Cursor生成代码后，在微信开发者工具编译后初版效果如下：

首页

对话页

总体来说，初版的UI确实难看，毫无特点，不过初版主要是为了验证功能，走通流程！点击测试功能，基本正常可以与扣子进行交互。

同时也出现了很多问题：点击后会出现白屏、没有导航页、各个功能间交互错乱等情况；这时候如果对cursor用的不熟悉，每次修改可能会导致其他的地方一起修改了，越改越不能用了，最后的结果就是再新创建一个目录，让Cursor重新生成。

初版的修改与对话掌握了很多技巧：

• 如何精准定位修改：Cursor中有一个@功能，可以指定具体的文件和具体的文件夹，刚开始没使用这个功能时，Cursor会全局改代码，现在可以指定改某些代码，减少修改范围，可以更小范围的调试。

• 深入理解代码结构：初版的对话中，因为已明确个人的需求修改，将修改需求的内容发出去后，Cursor会自动修改代码，这时候分析Cursor修改的代码，刚开始可能会看不懂（没有前端开发经验），随着对话次数的提升，就会明白哪一个文件控制页面、哪一个文件控制逻辑、哪一个文件控制样式，这样再配合使用@功能，提效明显。

• 高效解决编译报错：编译过程中会出现各种各样的报错，直接截图提问，Cursor会自己找到解决方案。

▷ 调试及美化

重构产品原型图

初版生成的UI实在太丑了，并且第二页做成对话的形式交互体验可能会更好。使用墨刀AI画产品原型图，输入需求后调整了几次后得到了还算满意的原型图（事实上，开发第2个小程序时，原型图、代码逻辑、动画效果等全部都由Cursor 实现了！）

在原来的需求文档的基础上，上传墨刀AI生成的原型图，让Cursor仿造图片生成UI；创建一个新项目，重新让那个Cursor实现相关功能。

Cursor生成的界面没有相关图标，可以找各种免费的矢量图标库（注意图标商用说明），找到合适的图标下载下来并将其嵌入UI到样式中。

多次对话调试后，最终生成的如下：

功能列表

链接读取

• 在微信开发者工具上点击【代码上传】

• 小程序管理后台可以看到上传的代码，再提交审核

• 注意：提前进行小程序备案，因为小程序功能列表上有热点新闻功能，缺少相应的资质，小程序个人备案没通过，导致开发的第1个小程序未成功上线使用。（提前调研个人开发的功能是否具备相应的资质）

至此，虽然小程序未成功上线，但是基本走了一个整体流程，为第2个小程序的成功上线做好了准备（期间也是遇到了很多问题，比如平台审核相应的隐私文件怎么处理才能通过、）

06 收获与反思

整个过程体验下来，感觉以目前#AI工具 的迭代速度来看，即使是编程小白，也能从零起步，打造出一款完整的小程序。在这个过程中，代码并非最关键的因素，更重要的是个人描述需求的能力以及如何让AI工具精准识别和读懂你的需求。这次“从0到1”的体验，确实带来了很高的正反馈，也为下一个上线的小程序做了铺垫。

在成功验证了MVP后，又开发了一个小程序，这个小程序全程都是Cursor搞定的，从原型图、UI设计、代码逻辑、动画效果都是由Cursor实现的。后期会详细从需求分析、需求文档说明、产品原型图、UI设计、开发、后端验证、小程序调试、真机验证、发布上线等全方位详细输出。