VibeCoding快速入门

不讲理论，本篇直接动手。用 Cursor 在 30 分钟内做出一个能跑、能用、能部署的产品——一个本地番茄钟应用。

1. 准备工作

需要装的东西：

工具	用途	是否必须
Cursor	主力 AI 编辑器	必须
Node.js 20+	运行 JS 项目	必须
Git	版本管理	必须
Vercel CLI	一键部署	推荐

也可以换成 Claude Code（CLI 版）、Windsurf、VS Code + Copilot。流程类似。

2. 想清楚要做什么

Vibe Coding 的"vibe"，70% 来自需求描述的清晰程度。在打开 Cursor 之前，先在脑子里（或纸上）回答这些问题：

1. 这是什么类型的应用？  → PWA 番茄钟
2. 谁用？                → 自己用，桌面浏览器
3. 核心功能是什么？      → 25 分钟工作 + 5 分钟休息计时
4. 数据存哪？            → 本地，不要后端
5. 视觉感觉是什么？      → 极简，主色调白+黑+橙
6. 有哪些"加分项"？      → 完成时浏览器通知、统计今日完成数

把这些写下来 5 分钟，能省后面 50 分钟。

3. 第一次提示：让 AI 起项目

打开 Cursor，新建一个空文件夹，按 Cmd+L 打开聊天面板，输入：

我要做一个番茄钟 PWA。

【技术栈】
- Vite + React 18 + TypeScript
- Tailwind CSS
- 数据存 localStorage
- 不要后端

【功能】
- 25 分钟工作 + 5 分钟休息循环
- 大圆形进度条 + 倒计时数字
- 三个按钮：开始/暂停/重置
- 完成一轮自动切换工作/休息状态
- 浏览器通知（完成时）
- 显示今日完成的番茄数

【设计】
- 极简，主色调白色，强调用橙色 (#ff6b35)
- 圆角 12px
- 字体大、可读
- 暗色模式跟随系统

请创建完整项目，包括 package.json、vite 配置、所有源文件。

Cursor 会一次性生成多个文件。不要打断它，让它生成完整。

4. 跑起来

npm install
npm run dev

打开 http://localhost:5173。

⚠️ 第一次几乎都跑不起来。常见错误： - 依赖版本冲突 - 路径写错 - TypeScript 类型错

把报错粘回 Cursor：

报错：
{粘贴报错}

请修复。

通常一两轮就能跑通。

5. 第一次看到效果，然后……不满意

页面跑起来了，但和你想象的不一样： - 圆太小 - 按钮不好看 - 倒计时数字字体一般

这就是 Vibe Coding 的核心循环开始了：看效果 → 描述不满 → AI 修 → 看效果。

按钮太普通了，我想要：
- 圆形按钮，直径 64px
- 主按钮（开始/暂停）用橙色背景 + 白色图标
- 次要按钮（重置）用灰色描边 + 黑色图标
- hover 时有 scale(1.05) 动画
- 不要 box-shadow，太老气

刷新浏览器，效果更新。

6. 关键技巧：描述视觉感受，而不是 CSS

❌ 不要这样：

button 的 padding 改成 12px 16px，background 改成 #ff6b35，
border-radius 改成 9999px

你已经在写 CSS 了，那 AI 失去了发挥的空间。

✅ 应该这样：

按钮看起来还是有点呆板。我想要那种"按下去会回弹"的感觉，
像 iOS 的开关按钮，hover 和点击都有微妙的物理反馈

AI 会理解"那种感觉"，给出可能更好的实现。Vibe 的精髓：你提供方向和感觉，AI 提供具体实现。

7. 加功能：浏览器通知

加上浏览器通知功能：
- 番茄完成时弹出
- 标题："番茄完成！"
- 内容："休息一下，5 分钟后再战"
- 第一次启动时主动请求权限
- 如果用户拒绝，UI 上展示一个小提示，但不要 block 主流程

注意结尾那句"不要 block 主流程"——这是经验：预先告诉 AI 你的容错偏好，可以减少返工。

8. 加功能：今日完成统计

在主界面下方加一个小区域：
- 显示"今日已完成 X 个番茄"
- 数据存 localStorage，按日期分 key
- 跨天自动重置（用 toLocaleDateString() 当 key）
- 旁边有一个小图表（最近 7 天的柱状图）
- 用 recharts，柱子用橙色，背景透明

AI 会引入依赖、写组件、整合到主页面。几乎一气呵成。

9. 关键时刻：开始审代码

到这里项目已经能跑、能用了。这是 Vibe Coding 最危险的时刻：你很容易就此停下，把"能用"当作"做完"。

但 AI 写的代码可能： - 有性能问题（每秒重渲染整个组件） - 有内存泄漏（setInterval 没清理） - 有边界 bug（休息状态切换工作时计时器没重置）

让 AI 审自己的代码：

请审查刚才生成的所有 React 代码，重点看：
1. useEffect 的依赖数组
2. setInterval / setTimeout 是否正确清理
3. 状态更新是否会导致无限渲染
4. 不必要的重渲染

只指出问题，不要立即修。给我一个问题列表，我决定哪些要修。

它常常能找出 1-3 个真实问题。

10. 测试边界情况

打开浏览器手动测：

25 分钟倒计时是否准确（不要等 25 分钟，把工作时长改成 5 秒测试）
暂停后再继续，是否从暂停时间开始
切换 tab 后回来，倒计时是否准确
关闭页面再打开，今日统计是否还在
跨天打开，统计是否归零

发现问题，立刻丢给 AI 修。

11. 加 PWA 支持

把它做成可安装的 PWA：
- 加 manifest.json
- 加 service worker（用 vite-plugin-pwa 简化）
- 离线可用（核心功能不依赖网络）
- 加一个 192x192 和 512x512 的 logo
- logo 风格：橙色背景 + 白色番茄图标

logo 可以让 AI 直接生成 SVG，或者去 Iconify 找。

12. 部署到 Vercel

把项目部署到 Vercel。
告诉我每一步要执行的命令，按顺序。

AI 会输出：

npm install -g vercel
vercel login
vercel
# (跟随提示，回车默认即可)

3 分钟后，你的番茄钟在公网可访问了。整个流程到这里大约 30 分钟。

13. 复盘：Vibe Coding 的节奏

回顾一下这次的工作流：

[1] 写需求清单（5 分钟）
[2] 一次性 AI 生成（2 分钟）
[3] 跑通 + 修错（3 分钟）
[4] 视觉调整（5 分钟）
[5] 加功能 ×2（10 分钟）
[6] AI 自审 + 修 bug（3 分钟）
[7] PWA + 部署（5 分钟）

特点：

几乎不写代码：你只在 chat 里输入文字
文字描述风格 > 写 CSS：AI 比你更熟新潮设计
快速迭代：每个改动看得见效果
最后才审代码：不在中途打断 vibe

14. 你可能踩的坑

坑 1：一开始就要"完美"

不要让第一次提示就把所有功能列全。先跑通最简单版本，再加功能。

坑 2：一次改太多

每次提示只改一个维度。"按钮变好看 + 加暗色模式 + 改字体" → 拆成 3 次。

坑 3：不看代码

哪怕是玩具项目，关键模块至少扫一眼：状态管理、定时器、本地存储。AI 容易写出"能跑但有泄漏"的代码。

坑 4：依赖 AI 解决一切

AI 改不动的复杂 bug，自己 debug 比让 AI 试 10 次更快。学会判断"该不该让 AI 接手"。

坑 5：忘记 git commit

跑通一个版本就 git commit。下次 AI 改坏了能回滚。Cursor 自带 git 集成，养成"每个稳定版本就 commit"的习惯。

15. 下一步

完成第一个项目后，再做：

复杂一点的：todo 应用 + 拖拽 + 同步
有外部 API 的：天气 / 翻译 / 图片生成
有后端的：用户系统、Supabase / Convex
复刻一个：用 1 小时复刻 Linear / Notion 的某个页面

每完成一个，沉淀几条心得到自己的"Vibe 笔记"：

哪些提示词模板好用
AI 在什么情况下容易出错
你最常需要补充的约束是什么

总结

Vibe Coding 入门项目：番茄钟 PWA，30 分钟搞定
工作流：写需求 → 一次性生成 → 跑通 → 视觉调整 → 加功能 → 自审 → 部署
关键技巧：描述"视觉感受"而不是 CSS，让 AI 有发挥空间
危险时刻：项目能跑了不等于做完了，要让 AI 审自己的代码
一次只改一个维度，每个稳定版本就 git commit
第一次几乎跑不起来是常态，把报错粘回 AI 通常一两轮就通
复盘 + 沉淀提示词模板，下次效率指数级提升