第一个 Vibe Coding 项目

用一个 Todo App 把 Vibe Coding 的工作节奏跑一遍。不追求代码完美，目标是感受"描述→生成→验证→继续描述"这个循环。

你需要准备什么

不需要提前搭环境，让 AI 帮你决定用什么技术栈。

打开 Cursor，按 Cmd+I（Mac）或 Ctrl+I（Windows）打开 Agent 面板，输入：

帮我创建一个 Todo App。要求：
- 可以添加新任务
- 可以标记任务完成
- 可以删除任务
- 用 React，不需要后端，数据存 localStorage

你不需要告诉它用什么组件库、文件怎么组织、状态怎么管理。这些交给它决定。

等它生成完，你会看到它创建了若干文件，并告诉你怎么运行。按照指示运行项目。

运行起来之后，做三件事：

如果这三件事都正常，基础功能跑通了。不需要去读代码，先确认行为正确。

如果出了错，把错误信息复制到 Cursor 里，描述你看到的现象：

运行 npm start 之后，浏览器控制台报错：
TypeError: Cannot read properties of undefined (reading 'map')

刷新页面时出现。

让它修复，再跑一次。这是正常的迭代，不是说明你做错了什么。

基础功能跑通之后，加一个新需求：

给任务加上优先级，分三级：高、中、低。
添加任务时可以选择优先级，列表里用不同颜色标注。
高优先级排在最前面。

注意这里的描述方式：不是"加一个 priority 字段"，而是直接描述用户看到的行为。AI 会处理实现细节。

生成之后，重复验证步骤：添加不同优先级的任务，看排序和颜色是否符合预期。

你在做三件事：描述需求、验证结果、判断是否继续。

你没有在做的事：决定代码怎么写、选择具体的 API、处理实现细节。

这就是 Vibe Coding 的角色分配。如果你发现自己开始想"它这里用 useState 不对，应该用 useReducer"，那是你在用习惯的方式工作，不是在用这套节奏工作。除非你发现结果不对，否则先不要去改实现细节。

AI 生成的代码跑不起来

先不要自己改，把完整的错误信息给它，描述你做了什么操作，它通常能修复。如果连续修了两三次还是不行，可以让它重新用不同方案实现这个功能。

不知道怎么描述下一步需求

想一下"用户会做什么操作"，从用户行为出发描述，比从技术角度描述更容易得到准确的结果。

生成的代码量很大，不知道该不该读

先不要读，先运行，先验证行为。行为对了，不需要立刻读完每一行。等你需要改这部分代码的时候再读，效率更高。

跑完这个 Todo App，你已经完整体验了 Vibe Coding 的基本循环。下一页是 Cursor 界面与基本操作，了解 Cursor 的三种工作模式以及什么时候用哪种。