「最好的学习方式，不是看别人做，而是自己做一遍。」
开场：今天你要亲手完成它
前五讲，我们一直在讲概念和框架。
从这一讲开始，我们要动手了。
今天的任务是：用 Cursor 完成你的第一个 Vibe Coding 项目——一个可以在浏览器里运行的待办事项 App（Todo App）。
不需要什么编程基础，跟着步骤走就行。
整个过程大约 45 分钟。完成之后，你会对 Vibe Coding 有一个完全不同于"听说"的理解。
环境准备
第一步：安装 Cursor
- 打开 cursor.com
- 点击 Download，选择你的操作系统（Windows/Mac/Linux）
- 安装完成后打开 Cursor
第一次打开 Cursor，它会询问你是否要从 VSCode 导入配置。如果你原来用 VSCode，可以选择导入；如果不是，跳过即可。
第二步：注册并登录
Cursor 有免费版，每月有一定数量的 AI 请求限制。注册账号后即可开始使用。
对于今天的任务，免费版完全够用。
第三步：创建项目目录
在你的电脑上创建一个新目录，命名为 todo-vibe，然后用 Cursor 打开这个目录：
# 或者直接用 Cursor 菜单：File → Open Folder
mkdir todo-vibe
cd todo-vibe
全局视角：今天要做什么
graph LR
A["1. 安装配置 Cursor\n(10分钟)"] --> B["2. 描述项目需求\n(5分钟)"]
B --> C["3. AI 生成项目结构\n(10分钟)"]
C --> D["4. 运行和验证\n(10分钟)"]
D --> E["5. 迭代改进\n(10分钟)"]
style A fill:#f6ffed,stroke:#52c41a
style B fill:#e8f4e8,stroke:#52c41a
style C fill:#fff7e6,stroke:#fa8c16
style D fill:#f0f7ff,stroke:#4a9eff
style E fill:#f9f0ff,stroke:#722ed1
核心操作：Cursor 的三种主要交互方式
在开始之前，先了解 Cursor 的三种主要交互方式，这是你今天会用到的核心功能：
方式一：Tab 补全（最常用）
就像 GitHub Copilot 一样，Cursor 会预测你下一步想写什么，显示灰色的建议文字。
操作：直接按 Tab 键接受建议，按 Esc 拒绝。
特点：Cursor 的 Tab 补全特别聪明——它不只补全当前行，而是能预测接下来几行，甚至整个函数。
方式二：Ctrl+K（行内生成/修改）
在光标位置按 Ctrl+K，弹出一个小输入框，你可以在这里输入指令，AI 在当前光标位置生成或修改代码。
典型用法：
- 生成一个函数：
写一个验证邮箱格式的函数 - 修改已有代码：选中代码后按 Ctrl+K，输入修改要求
方式三：Ctrl+L（侧边对话框）
按 Ctrl+L 打开右侧的对话框，可以和 AI 进行多轮对话。
典型用法：
- 解释代码：
解释这段代码在做什么 - 解决 Bug：
这段代码运行时报错 XXX，帮我修复 - 多文件修改：描述一个跨文件的功能需求
更强大的：Composer 模式
按 Ctrl+Shift+I，打开 Composer，这是 Cursor 最强大的功能——它可以同时修改多个文件，完成整个功能的开发。
实战开始：第一步——让 AI 帮你规划
打开 Cursor，按 Ctrl+L 打开对话框，输入以下内容：
我想做一个简单的 Todo List Web App，功能如下：
1. 添加新任务（输入框 + 回车/按钮）
2. 标记任务为完成（点击勾选框）
3. 删除任务
4. 显示"已完成"和"未完成"的任务数量
5. 数据存在 localStorage，刷新页面不丢失
技术要求：
- 纯 HTML/CSS/JavaScript，不用任何框架
- 一个 index.html 文件搞定，不需要 npm
- 界面要好看，使用现代化的 UI 设计
请先告诉我你的实现计划，然后等我确认后再开始写代码。
AI 会给你一个实现计划，大约包含：
- 文件结构说明
- HTML 布局方案
- CSS 样式思路
- JavaScript 逻辑设计
实战：第二步——让 AI 生成代码
确认计划之后，输入：
计划看起来不错，开始实现吧。
Cursor 会开始生成 index.html 文件。
等待过程中，注意观察 AI 是如何一步步生成代码的——它不是一次性输出，而是有结构地生成：先 HTML 结构，再 CSS 样式，再 JavaScript 逻辑。
生成完成后，在文件浏览器里找到 index.html，右键 → 用浏览器打开（或者 Live Server 插件），查看效果。
实战：第三步——验证和迭代
打开浏览器后，测试以下功能：
功能检查清单：
- 能添加新任务吗？
- 能通过回车键添加吗？
- 点击勾选框能标记完成吗？
- 能删除任务吗？
- 刷新页面后数据还在吗？
- 显示任务统计数量了吗？
如果某个功能有问题，回到 Cursor，在对话框里描述问题：
添加任务后，任务列表能显示，但删除按钮点击没有反应。帮我修复这个 Bug。
实战：第四步——添加一个新功能（体验迭代开发）
现在我们来体验 Vibe Coding 最爽的地方——快速迭代。
在对话框里输入：
现在帮我添加一个新功能：
- 在顶部添加一个"全部/未完成/已完成"的筛选器
- 点击"未完成"只显示未完成的任务
- 点击"已完成"只显示已完成的任务
- 点击"全部"显示所有任务
- 当前选中的筛选器用高亮样式显示
观察 AI 如何在已有代码基础上添加新功能——它会分析现有代码结构，然后在合适的地方插入新逻辑，而不是重新生成整个文件。
实战：第五步——让 AI 做代码优化和解释
你已经有了一个可以运行的 Todo App。现在试试这些高级用法：
用法一：让 AI 解释代码
选中某段 JavaScript 代码，按 Ctrl+L，输入：
解释这段代码的逻辑，用简单的语言说明它在做什么
用法二：让 AI 做代码审查
帮我做一个代码审查，找出这段代码中可能的问题：
- 性能问题
- 可能的 Bug
- 代码风格问题
给出改进建议，但不要直接修改代码，只给建议
用法三：让 AI 添加注释
帮我为这段 JavaScript 代码添加中文注释，
让一个 JavaScript 初学者也能看懂每一部分在做什么
深度拆解：这次实战背后的关键原则
通过今天的操作，你应该已经感受到了 Vibe Coding 的几个关键点：
原则一：先规划，后执行
我们没有一开始就说"帮我写一个 Todo App"，而是先让 AI 制定计划，确认计划之后再执行。
这是第一讲强调的"规划先行"在实操中的体现。
原则二：小步迭代，不求一次完美
我们分步骤添加功能（先做基础版，再添加筛选器），而不是一次性描述所有需求。
小步迭代的好处：
- 每步都能验证是否正确
- 出错时容易定位问题
- AI 每次处理的任务更简单，质量更高
原则三：你是验证者，不是被动接受者
你不应该生成代码之后就不管了，而是要主动测试、发现问题、描述问题、让 AI 修复。
这个"测试→发现问题→描述→修复"的循环，就是 Vibe Coding 工作流的核心。
原则四：用自然语言描述意图，而不是技术实现
注意我们的提示词："添加一个筛选器，点击'未完成'只显示未完成的任务"——这是意图描述，不是技术实现（我们没有说"给 tasks 数组添加一个 filter 方法"）。
让 AI 决定怎么实现，你只需要说清楚要实现什么效果。
常见问题与解决方案
Q：AI 生成的代码报错了怎么办？
A：把错误信息原文复制给 AI：
运行时报了这个错误，帮我修复：
[粘贴错误信息]
Q：AI 生成的效果和我想的不一样怎么办？
A：描述得更具体：
现在的筛选器是下拉菜单，但我想要的是横排的三个按钮，
类似 GitHub Issues 页面的那种 Tab 按钮样式，
当前选中的按钮底部有蓝色下划线
Q：AI 一次生成了太多代码，我看不过来怎么办？
A：让 AI 解释关键部分：
这段代码里，有哪些是核心逻辑，哪些是样式代码？
帮我标出最重要的 10-15 行，解释它们是怎么联系在一起的
Q：能不能让 AI 直接运行代码？
A：在 Cursor 的 Agent 模式下，AI 可以自动运行代码（比如 npm start），不过需要你的项目有合适的运行命令。对于纯 HTML 项目，通常手动用浏览器打开就够了。
扩展练习：4个进阶挑战
如果你还想继续练习，这里有 4 个逐步进阶的挑战：
挑战一（简单）：给 Todo App 添加暗色模式，可以通过按钮切换
在右上角添加一个暗色/亮色模式切换按钮，
切换时整个页面的颜色主题跟着改变（背景、文字、边框等），
模式偏好保存在 localStorage
挑战二（中等）：把任务添加优先级（高/中/低），用不同颜色区分
挑战三（较难）：把数据存储改成通过 API 调用（需要本地启动一个简单的 Express 服务器）
挑战四（进阶）：把整个项目改成 React 版本
本讲小结
mindmap
root((第一次Vibe Coding实战)
环境准备
安装Cursor
创建项目目录
三种交互方式
Tab补全
Ctrl+K 行内生成
Ctrl+L 对话
Composer 多文件
工作流程
先规划后执行
小步迭代
测试验证
描述问题修复
关键原则
意图描述而非技术描述
你是验证者
规划先行
思考题
-
在今天的实战中，你觉得 AI 生成的代码在哪些地方超出了你的预期？在哪些地方让你失望？
-
如果没有 AI，完成同样的 Todo App 你需要多长时间？和今天的体验对比，效率提升了多少倍？
-
在"规划→生成→验证→迭代"这个循环中，你觉得哪个环节对最终结果影响最大？
下一讲预告
模块一的全景认知到这里就结束了。
从第7讲开始，我们进入模块二：提示词工程。
你已经体验过了用自然语言指挥 AI，但你可能也注意到——提示词的质量直接影响 AI 的输出质量。
为什么有些人的提示词总能得到好代码，有些人的提示词总让 AI 误解？
下一讲，我们来拆解提示词的本质。
