在信息爆炸的年代，专注力成了稀缺资源。番茄时钟凭借“短而高效”的节奏，帮助无数人摆脱拖延、提升产出。今天我把自己用 Cursor 搞定一个可直接投放到手机的番茄时钟的全过程搬到这里——从打开编辑器、写提示词、调试到打包发布，一站式展示。

Cursor 是一款基于大型语言模型的 IDE 插件，它把「对话」与「编码」无缝结合。相比传统 IDE，你只需要把业务需求说出来Cursor 就会把它翻译成代码；出现错误后同样Ke以直接在对话框里让它帮你定位并修复。

使用感受：

⚡️ 输入几行需求，几秒钟就Neng得到初版页面。

🛠️ 错误提示直观，AI Neng自动补全缺失的 import 或者纠正 JSX 的闭合。

🤝 与 Claude / Sonnet 等模型深度集成，让生成的代码质量geng靠近生产环境。

打开 VS Code → Marketplace → 搜索 “Cursor AI”。点击安装后重新加载窗口，左侧会出现一个蓝色的小机器人图标，即是我们对话入口。

本案例采用 uniapp + uView2 组合，因为它Ke以“一次编写，多端运行”。在 HBuilderX 中新建项目，勾选 “Vue2 + uView”，随后在根目录执行：

npm install -D @vue/cli-service-global
npm i uview-ui@latest

配置好后用 VS Code 打开该文件夹，即可让 Cursor 接管代码生成。

打开 Cursor 的设置页面在 “Model” 栏位选择 “Claude Sonnet”。Ru果网络不稳定，Ke以切换至 “Gemini” 或者国内的 “通义灵码”。保存后关闭设置窗口。

下面是一段我实际使用过的 Prompt 示例：

请帮我用 uniapp+uView 实现一个番茄时钟 APP，包含以下功Neng：
1) 主界面显示倒计时和开始/暂停按钮；
2) 任务列表页Ke以添加、删除任务，每条任务显示Yi完成的番茄次数；
3) 完成一次番茄后弹出小动画并记录到本地存储；
4) UI 要简洁明快，以红绿配色为主。
请先输出项目结构，随后分别给出每个页面的 Vue 文件代码。

技巧：把业务拆分成小块，让 AI 按部就班返回；Ru果一次性信息太多，它可Neng只给出概览，需要你再追问细节。

Cursor 在对话框里立刻回显了目录树以及每个文件的基本骨架。我把它们复制进对应路径，然后运行：

# 在项目根目录
npm run dev:%platform%

A​I 给出的计时器组件用了原生 setInterval，却忘记在组件销毁前 clearInterval，导致页面切换后出现卡顿。于是我在对话框里敲下：

"倒计时组件缺少 clearInterval，请补全 destroy 生命周期。"

The cursor 回答后我直接粘进去，一键保存即可恢复正常。

"pomodoroCount" Yi经被别的模块占用了需要改名。"请将所有 localStorage.getItem 替换为 'myPomodoroCount'。" 同样操作后问题消失。

A​I 默认用了蓝色主题，我在聊天框里说："改为红色背景、白色文字，并添加圆角。" Cursor 自动生成了对应 CSS，并同步geng新到 .vue 文件中。

即便核心功NengYi经跑通，我们仍然要Zuo两件事：a）检查语法错误；b）优化用户体验。

a）语法错误：A​I 有时候会漏掉分号或者标签闭合。我把报错截图直接拖进聊天框，“这里报错了请帮我修正”。一次性解决了三个小 bug。

b）交互细节：- 添加任务弹窗加入遮罩层防止误点；- 完成番茄后弹出轻微震动效果；- 在列表页加入下拉刷新，实现数据即时geng新。

*温馨提示*：微调过程中多用“请给出完整代码块”，避免 AI 只返回片段导致手动拼接出错。

# HBuilderX 中点击「发行 → 原生App‑Android」或「iOS」
# 若使用 CLI
npm run build:app
# 生成 .apk/.ipa 文件

D​ebug 模式下把手机通过 USB 连上电脑，用 HBuilderX 的 “运行到手机” 功Neng直接预览。若发现兼容性问题，再回到 Cursor 对话框中说明，“iPhone X 上倒计时时间显示错位”，AI 会给出针对性的 CSS 调整建议。