Appearance
Vibe Coding 五步循环入门
📝 课程笔记
本课核心知识点整理：
这节课你能学到什么
- 理解 Vibe Coding 是什么，为什么它改变了编程的门槛
- 掌握五步循环：Plan -> Build -> Iterate -> Save -> Go Live
- 了解从豆包到 Claude Code 的四种技术实现方式
- 学会 Claude Code 的核心指令和沟通技巧
💡 核心问题
不写代码能用 AI 做产品吗？大学生想做 AI 产品应该先学什么？
可以。Vibe Coding 是用自然语言描述需求、让 AI（如 Claude、Cursor）自动生成代码的编程范式。校园VC 数字创业教程第三章详细讲解了 Plan → Build → Iterate → Save → Go Live 五步循环，零编程基础的大学生也能独立开发并上线数字产品。数创班已有 900+ 学员通过这套方法成功完成项目。
什么是 Vibe Coding
先回顾一下：数创班的三大硬技能是写作、英语、编程。前两个大家可能还觉得能上手，一听到"编程"，很多同学就想退缩了。
好消息是：2025 年，编程的门槛被彻底改变了。
Vibe Coding（氛围编程）这个概念由 Andrej Karpathy（OpenAI 联合创始人之一）提出。核心理念很简单：
用自然语言描述你的想法，让 AI 帮你写代码。
你不需要学 Python、不需要懂 JavaScript、不需要记住任何命令。你只需要像和人聊天一样，告诉 AI 你想要什么。
Vibe Coding 的本质
一句话总结：你是产品经理（PM），AI 是工程师。你负责想做什么、怎么做更好；AI 负责把你的想法变成代码。
庄明浩在 2025 AI 行业报告中确认："Vibe Coding 是 2025 年的行业热词"，Anthropic 近半数 API 收入来自编程相关应用。这不是小众爱好，而是行业级别的趋势。
从豆包到 Claude Code：四种技术实现方式
课件介绍了三种开发智能体的方式，加上参考资料补充的第四种，形成了一个完整的难度阶梯：
| 工具 | 难度 | 适合做什么 | 特点 |
|---|---|---|---|
| 豆包 | 入门 | 简单的提示词智能体 | 对话就能用，零门槛 |
| 扣子（Coze） | 中等 | 复杂 AI 应用（插件、知识库、多平台） | 低代码拖拽，不用写代码 |
| Google AI Studio | 中高 | 快速原型（用嘴开发） | 在 Build 频道和 AI 聊天就能实现功能 |
| Claude Code | 进阶 | 完整的软件产品 | 用自然语言驱动，AI 直接写代码 |
Google AI Studio 的震撼
课件里有一个演示：2 个人开发两个月的 AI 知识库产品，Google AI Studio 几分钟就实现了基本功能。用嘴说一说，功能就出来了。这就是 AI 开发的威力。
每种工具有各自适合的场景。你刚起步可以从豆包开始，慢慢往上走。这节课重点讲 Vibe Coding 的工作流和 Claude Code 的使用方法，因为它是目前最强大的"用嘴编程"工具。
传统编程 vs Vibe Coding
对比一下就能感受到差别：
| 维度 | 传统编程 | Vibe Coding |
|---|---|---|
| 学习起点 | 学语法、框架、工具链 | 用自然语言描述需求 |
| 写代码 | 手写每一行代码 | AI 帮你生成代码 |
| 解决报错 | 自己查文档、搜 StackOverflow | 告诉 AI 报错信息，它帮你修 |
| 记命令 | 需要记住大量命令和 API | 告诉 AI 你想做什么就行 |
| 协作方式 | 和其他程序员协作 | 和 AI 协作，你做 PM |
这不是说传统编程没用了。对于想深入技术领域的同学，系统学编程仍然有价值。但对于想做产品、想验证创业想法的同学，Vibe Coding 让你跳过了大量基础学习，直接进入产品开发。
核心：五步循环
Vibe Coding 的工作流可以用五步循环来概括：
Plan → Build → Iterate → Save → Go Live
计划 构建 迭代 保存 上线
↑_________↓
（反复循环）第一步：Plan（计划）
在动手之前，先把你想做的东西描述清楚。
不是写几百页的需求文档，而是用自然语言说清楚三件事：
- 这是什么产品？
- 核心功能有哪些？
- 长什么样？（可以画个草图或找一个参考网站）
具体化是关键
"做一个网站"太模糊。"做一个个人作品集网站，包括首页介绍、项目展示（3 个卡片）、联系方式，风格简洁现代，蓝色系配色"就很具体。描述越具体，AI 输出的结果越接近你想要的。
第二步：Build（构建）
把你的描述发给 AI，让它生成代码。
用 Claude Code 的话，就是在终端里用自然语言对话。你说"帮我创建一个简单的着陆页，标题是 XXX，有一个注册按钮"，它就会生成对应的 HTML/CSS/JS 代码。
第三步：Iterate（迭代）
代码生成后，打开浏览器看效果。不满意的地方，截图反馈给 AI。
比如："按钮太小了，改大一点"、"背景颜色换成深蓝色"、"加一个动画效果"。AI 会根据你的反馈修改代码。
这一步可能要来回好几次，这是正常的。好的产品都是迭代出来的。
第四步：Save（保存）
迭代到满意后，把代码推送到 GitHub。
GitHub 是代码的"云盘"，你的所有代码版本都保存在上面。万一改坏了，还能退回去。
第五步：Go Live（上线）
把 GitHub 上的代码部署到 Vercel（一个免费的网站托管平台）。部署完成后，你会得到一个公开的 URL，任何人都能访问你的网站。
从想法到上线，可能只需要几个小时。
Claude Code 核心指令
如果你选择用 Claude Code 来做 Vibe Coding，这五个指令是最基础的：
| 指令 | 作用 | 使用场景 |
|---|---|---|
/init | 初始化项目，生成 CLAUDE.md | 开始一个新项目时 |
@文件名 | 引用特定文件，让 AI 读取 | 让 AI 了解已有代码 |
#注释 | 给 AI 添加上下文说明 | 补充背景信息 |
/clear | 清除对话历史 | 话题切换时，避免混淆 |
Shift+Tab | 切换到 Plan 模式 | 让 AI 先规划再动手 |
三种记忆文件
Claude Code 有三种"记忆文件"，让 AI 记住你的偏好：
| 文件 | 作用域 | 用途 |
|---|---|---|
CLAUDE.md | 当前项目 | 项目的技术选型、代码规范 |
CLAUDE.local.md | 个人（不上传 GitHub） | 你的个人偏好和习惯 |
~/.claude/CLAUDE.md | 全局（所有项目通用） | 通用偏好，比如"用中文回复" |
沟通技巧
和 AI 聊天也有技巧，四个原则：
- 具体化：不说"做个好看的页面"，说"做一个蓝色系、卡片布局、带圆角阴影的页面"
- 分解：大任务拆成小步骤，一次只让 AI 做一件事
- 视觉参考：有截图就发截图，比文字描述有效十倍
- 要求解释：看不懂 AI 的代码？让它解释。"这段代码是干什么的？"
适合用 Vibe Coding 构建的项目
不是所有项目都适合 Vibe Coding。以下类型是最合适的起步项目：
| 项目类型 | 例子 | 适合原因 |
|---|---|---|
| 性格测试 / 小测验 | "你是哪种创业者类型" | 逻辑简单，效果直观 |
| 着陆页 / 落地页 | 产品介绍页、活动页 | 纯展示，不需要后端 |
| 小工具 | 倒计时器、计算器、转换器 | 功能单一，容易做完 |
| 个人作品集 | 个人网站、简历页 | 展示自己，有实际用途 |
不适合的项目
涉及支付、用户数据存储、复杂后端逻辑的项目，对新手来说暂时太复杂。先从上面的类型练手，积累经验后再挑战。
实践环节：选定你的第一个 Vibe Coding 项目
完成以下步骤：
第一步：选一个项目类型
从上面四种类型中选一个。建议第一次选"着陆页"或"个人作品集"，因为最容易出效果。
第二步：写一份 Plan
用自然语言写下你想做的东西。包括：
- 这是什么（一句话描述）
- 有哪些内容/功能（列 3-5 个）
- 参考风格（可以贴一个你喜欢的网站链接）
第三步：准备好工具
- 如果用豆包/扣子：直接打开浏览器就行
- 如果用 Claude Code：需要安装 Node.js 和 Claude Code CLI（下一课会详细讲操作）
下一课我们就动手做，从 Plan 一路走到 Go Live。
本课小结
| 要点 | 核心内容 |
|---|---|
| Vibe Coding | 用自然语言描述想法，AI 帮你写代码 |
| 四种工具 | 豆包（入门）-> 扣子（中等）-> Google AI Studio（中高）-> Claude Code（进阶） |
| 五步循环 | Plan -> Build -> Iterate -> Save -> Go Live |
| Claude Code | 五个核心指令 + 三种记忆文件 + 四个沟通技巧 |
| 适合项目 | 性格测试、着陆页、小工具、个人作品集 |
下一课预告
下一课我们进入 Vibe Coding 实战：从想法到上线。
你会学到：
- 手把手走完五步循环的每一步
- GitHub 基础操作和 Vercel 部署流程
- 课堂结束时，你会有一个可以访问的 URL
附录：参考资料
点击展开查看参考资料来源
更新时间：2026-02-02
| 内容类型 | 来源资料 | 章节 |
|---|---|---|
| 课件主体 | 数创班内容汇总.pdf | 模块 3.5 用"嘴"开发智能体等软件 |
| 核心补充 | VIBE_CODING_GUIDE.md（R1） | Vibe Coding 核心理念、五步循环、Claude Code 指令 |
| 行业背书 | 庄明浩 2025 AI 行业报告（R7） | "Vibe Coding 是 2025 行业热词"、Coding 是最确定 AI 应用 |
关键概念来源：
- Vibe Coding 五步循环：knowledge-points.md K37
- Claude Code 指令：knowledge-points.md K38
- 传统编程 vs Vibe Coding：teaching-materials.md T01
- Google AI Studio 演示：teaching-materials.md C07
- Coding 是最确定应用：knowledge-points.md K42