文章目录
概要
本文旨在通过纯前端技术栈使用cursor开发一款基础点单小程序，覆盖从需求分析到UI设计、技术选型及开发的完整流程。
项目开发过程
一、需求描述和生成原型
- 收集一些点单小程序交互截图，作为参考
- 和现有一些智能体对话，了解到点单小程序除了客户端小程序（前端），还需要商家管理系统，后端服务和数据库，让其给出一些实现方案，这里我们使用：微信小程序 + 云开发（Serverless），商家管理系统设成店主小程序。
- 自定义一个命令专门用于ui生成，并设置通用规则约束原型实现和展示方式 。（官方rules使用教程，Cursor Rules 规则汇总）
- 创建项目级别的.cursor目录，将命令文件和规则文件分别放到
./cursor/commands和./cursor/rules
bash
.cursor/commands/
dev.md # 简单的 Markdown 规则
ui.md
.cursor/rules/
check.md
code-standards.md
ui-generation.md二、对话方式和模型选择
当前使用agent+auto经济实用选择，但是原型生成较弱
- 生成 HTML 静态原型 时，可使用项目中的 /ui 指令（如下），并在 Agent 中执行，便于按指令内的结构输出多页 index.html 等文件。
/ui 我需要一个点单小程序，参考 @cut 下的图片的功能，设计一款面向用户和店主两种场景的小程序原型图，主题风格是复古浆果红和米白色为主色调
更具体命令
/ui 该小程序是一款蛋糕店的点单小程序，名字叫xxxxx，业务包含纸杯蛋糕，生日蛋糕，下午茶团购套餐，diy手绘蛋糕。小程序主要包含首页，点单，订单，我的四个模块，首页包含品牌概述，派送方式，日常活动，会员充值，参考 @cut/首页.png 和 @cut/首页2.png ，点单参考 @cut/点单.jpg 包含商家推荐和商品描述，每个商品和点击跳转到商品详情页，订单模块参考 @cut/订单.png ，我的模块参考 @cut/我的.png
下面是命令生成的部分原型图都是html，浏览器中直接查看效果
- 原型通过确认后，再使用 /dev（见 .cursor/commands/dev.md）按 code-standards.md 落地为可运行工程。
调试终端npm run dev:mp-weixin 生成dist，在微信开发者工具直接导入项目打开dist下打包的文件即可。
需要手动创建的部分主要是涉及到云服务：
（1）在微信公众平台，给小程序开通云服务获取环境key
（2）由cursor梳理数据表单，然后在微信开发者工具的云数据库创建对应表单
（3）由cursor创建cloudfunctions云函数示例，注意该文件默认不会被打包在dist，你可以让cursor用vite的插件将cloudfunctions文件每次打包的时候复制到dist指定路径下，然后微信开发者工具中右键cloudfunctions上传发布部署
（4）由cursor完善云函数使用将后端服务打通
日常开发用 Auto 模式或 Composer，复杂推理切给 Claude Opus 4 / GPT-5，大规模上下文分析交给 Gemini，想省钱则用通义千问或 DeepSeek 这类第三方模型。
用 Ask 模式迭代修改，不要用 Auto 模式反复重来。一次精准的修改指令，胜过三次模糊的重新生成。
| 面向 | 建议做法 | 说明 |
|---|---|---|
| 模型（原型 / UI） | 优先选用 Claude Sonnet 系 （如 Claude 3.7 Sonnet） | 在信息架构、多页面结构、组件层级与一次性多文件输出上表现较稳。若 Cursor 内模型名称有更新，请选择当前订阅下 能力最接近 Sonnet 档位 的模型。 |
| 对话组织 | 目标 + 约束 + 参考 一次说清 | 说明平台（如小程序 / H5）、技术栈、主色、页面清单、是否需要 Tab、交互深度；有参考图或链接一并提供。 |
| 迭代节奏 | 先整体后局部 | 先对齐导航与主流程，再改单页细节与样式，避免反复推翻结构。 |
| 交付物 | 明确写出期望形态 | 例如：多页 HTML 原型目录、或后续要落地的 uni-app 页面列表，减少歧义。 |
| 执行方式 | 使用 Agent （或 Auto）跑命令与改仓库 | 需要创建/修改多个文件、执行 npm install、按仓库规范落地时，用 Agent 让工具直接写入项目；仅咨询不写代码可用普通对话。 |
| Auto | 适合「端到端交给 Cursor 选步骤」 | 由系统自动组合搜索、终端等能力；涉及大范围删除或敏感操作时，可拆成小步并人工确认。 |
Cursor Pro 的 $20 月费包含了一定量的快速请求。如果用量大（比如每天超过 200-300 次智能请求），有几点经验供参考：
别总用 Opus：复杂任务再用 Opus，日常用 Sonnet 或 Auto，能多出 2-3 倍的请求量。
善用 Auto：其实 80% 的场景下 Auto 模式选得比人准。
第三方更便宜：通义千问、DeepSeek 等第三方模型输入价格低至 $0.5/M token（约是 Claude 的 1/10），非核心任务接入阿里云百炼等平台能显著降低成本。
坑1：在 Auto 模式下反复修改坑2：上传大图片参考
一张 2MB 的图片可能消耗 5000+ Token。
解决：用文字描述替代图片或压缩到 200KB 以内或只截取关键部分
坑3：每次都重新描述完整需求
三、基础需求提示词
目标+约束+参考
目标说明（干什么？修正还是创建还是优化）
上下文（语言，框架，代码文件）
具体要求（风格，功能点）
指定编程语言框架功能，使用标记符号
基于代码，新增。。。保持原有风格基于图片风格，实现。。。
报错信息，尝试，找到问题和修复
参考什么，重点改进
git审查以下代码变更 [commitId],请提供1.潜在问题或bug
2.代码优化意见
3.安全性考虑
4.测试意见
总结
Cursor 是你的超级副驾驶，但方向盘和刹车还需要你自己掌控。代码生成速度快，上下文理解能力强，解读代码方便，Bug 定位辅助好。但小程序调试能力无法替代 Cursor 只能根据错误信息推测原因 需要会看微信开发者工具的报错、云函数日志、Network 面板。
扩展 ：可以使用mcp直接访问figma工具上的项目数据
mcp网站、pulsemcp、cursor官方提供mcp、giteemcp