AI编程实战:使用Cursor,65分钟轻松打造番茄时钟应用
作者：微信文章前言
信息时代，专注力变得越来越珍贵。番茄时钟作为一种简单高效的时间管理工具，被越来越多的人所熟知。
今天，就带大家借助 AI 工具 Cursor，快速实现一个独属于你的番茄时钟应用。
项目介绍
使用 uniapp + uview2.0 实现一个番茄时钟移动应用的开发，包括以下功能：
工作倒计时，默认 25 分钟休息倒计时，默认 5 分钟支持多个番茄钟，一个番茄钟指 25 分钟工作 + 5 分钟休息支持开始、暂停、重置控制完成后有提醒消息
准备工作
安装开发工具
主要包括：
开发软件：Cursor + HBuilderX + 微信开发者工具开发环境：NodeJS
配置开发环境
通过 HBuilderX 建立新项目，并引入 uView2。
具体步骤可以参考以前分享的内容，这里不再重复。
《AI编程实战：Cursor+Claude4，一口气生成uniapp小程序》
应用生成
确认以上内容都已经准备好后，我们直接进入核心环节：应用生成。
生成环境依然采用的：Cursor + Claude-4-Sonnet，Agent 模式。
使用 Cursor 打开新建的项目，在 AI 对话框中输入提示词，开始生成。
提示词
请帮我实现一个基于uniapp+uview2.0的番茄时钟小程序应用。
## 业务
主要维护自己每天的任务，包括工作、学习、生活方面的，支持设置番茄时钟倒计时效果，方便我专注当前任务。
打开应用后的主界面是番茄时钟倒计时，倒计时的时间样式需要专门美化，科技感强，包括以下功能：
- 25分钟工作倒计时
- 5分钟短休息倒计时
- 循环计时功能
- 开始/暂停/重置控制
- 完成提醒功能
主界面右上角有个列表图标，点击后打开任务管理界面，列表主要展示任务标题、优先级、类型，点击任一任务打开任务详情页面。
任务详情页面从上往下分别是任务标题、任务描述、优先级、任务分类、番茄数量。
应用不需要底部tab栏和导航栏，直接全屏展示。
## 界面
极简主义美学与功能的完美平衡；
清新柔和的渐变配色与主色系浑然一体，主色系番茄红色；
恰到好处的留白设计；
轻盈通透的沉浸式体验；
结构化布局清晰呈现信息层级；
用户视线能自然聚焦核心功能；
精心打磨的圆角；
细腻的微交互；
舒适的视觉比例；
## 技术
- 暂时采用小程序本地存储数据的方式，不采用网络接口。
- 所有图标采用uView内置图标，请仔细核对，不要使用不存在的图标。
- 图片使用upsplash api获取合适图片。
- 整个项目采用vue2，禁止使用vue3的特性。
虽然全部提示词看起来比较多，但分析一下就会发现也没有太过高深。
目标
最开头通过简洁的文字，点名使用的技术栈（uniapp+uview2.0）、要达成的目标（番茄时钟应用）。
没有太复杂的技巧，只要讲清楚我们要做什么即可。
并且，根据个人经验，这部分不建议太过冗余，容易增加 AI 识别核心目标的难度。
业务
由于业务部分内容会比较多，建议采用结构化的方式进行说明。
先总的介绍下要完成什么功能，然后分别描述主界面、主界面明细功能、任务列表、任务详情等业务需求，并带有各功能之间的关系说明。
界面
可以将自己的界面设计要求简单描述后发给 AI，由 AI 给出参考的提示词后，再人工进行调整。
也可以直接以文中提示词为基础进行个性化修改。
技术
这块就是对技术方面的要求，如果个人技术栈比较固定，完全可以直接在多个项目中复制即可。
结果
1、Cursor 会对提示词进行分析，并整理成条理性的要求。
2、分析整个项目结构，尽量贴合工程需要。
3、按照第一步的分析生成代码。
生成整体的样式生成主界面、任务界面等实现相关功能把功能对接到之前生成的界面代码中
4、生成总结。
整个过程思路很清晰，包括最终的文档，质量还是可以的。
生成后，有一个小的语法错误，为了文章整体性，放到“微调”章节说明。
调试安装
为了更好的查看应用效果，这里直接通过 USB 将应用安装到手机进行调试。
USB 连接电脑和手机打开手机的 USB 调试，需要提前打开“开发人员选项”HBuilderX 中“运行”-“运行到手机或模拟器”-“运行到 Android App 基座”。
效果展示
主界面
任务列表
任务详情
主界面出现了 bug，倒计时效果没有出来，我们接下来微调一下。
微调
针对不满意的地方，我们进行逐个修复，依然是基于 Cursor 进行。
Vue语法错误
这类比较明确的语法错误，截图交给 Cursor 就行，一般一次就能修复。
并且，Cursor 修复当前页面错误后，会自动帮你检查其他页面是否存在相似问题，并自动修复。
倒计时未正常显示
这个就比较严重了，最核心的功能没有实现。
依然是截图发给 Cursor。
AI 分析发现，应用生成时，确实已经生成了相关代码，但是组件的渲染有问题，AI 给换了种方式进行渲染，搞定。
优化效果
主界面（未启动）
主界面（启动）
任务列表
任务详情
注意事项
css预处理器
uniapp 环境配置时，css 预处理器容易碰到问题，大家如果碰到可以参考下。
从 HBuilderX 4.56 开始，vue2 项目将默认使用 dart-sass 预编译器。
本次分享依然采用了 vue2 + node-sass，可以在 manifest.json 根节点配置: "sassImplementationName": "node-sass"。
时间分析
对今天的实战案例花费的时间进行一个简单的总结。
需求分析：10 分钟，主要回忆了下之前使用的番茄时钟，然后让 DeepSeek 总结了下基本功能。提示词编写：10 分钟，业务部分上一步已经完成，这部分的时间主要花费在界面风格上。整个时间和下一步的生成工作是交叉的，每次生成后不满意，再调整优化，合计 10 分钟左右。应用生成：30 分钟，共计生成 3 遍，每遍大约在 10 分钟左右，主要是挑一个自己喜欢的风格。微调：5 分钟，发现了 2 个问题，都是截图 AI 修复，一遍解决。调试安装：10 分钟，安装到安卓手机。不知道为什么第一根 USB 不行，换了根线才识别了手机，要不然估计还能省点时间。
以上各部分时间，供大家参考比对。
结语
今天，给大家分享了如何利用 Cursor 快速完成一个番茄时钟应用的开发全流程。这是 uniapp 应用开发的第二个实例，希望能给大家的AI辅助编程工作带来更多的启发和灵感。
如果有任何想法或问题，欢迎留言交流！
页:
[1]