第 1 章：什么是 Vibe Coding？
🪢
🎯 本章目标：
了解 Vibe Coding 的概念起源、核心理念，以及它与传统编程方式的区别
明确 Vibe Coding 的适用场景与局限性，建立对 AI 编程工具生态的整体认知
1.1 Vibe Coding 的起源
Andrej Karpathy 的定义
2025 年 2 月，前特斯拉 AI 总监、OpenAI 创始成员 Andrej Karpathy 在社交媒体上首次提出了 "Vibe Coding" 这个概念。他在推文中这样描述：
"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."
翻译过来就是：
"有一种新的编程方式，我称之为 'Vibe Coding'——你完全沉浸在感觉中，拥抱指数级的变化，甚至忘记代码本身的存在。"
这个定义意味着什么？
Karpathy 的描述听起来有些抽象，但它揭示了一个重要的范式转变：
#NVkbTGNbEsvi text { white-space: pre; }#NVkbTGNbEsvi .fb0 { stroke: var(--N900-FG, 0.15); }#NVkbTGNbEsvi .fb0 {stroke: rgba(31,35,41, 0.15)}#NVkbTGNbEsvi .fx0 { stroke-miterlimit: 10; }#NVkbTGNbEsvi .fx0 {stroke-miterlimit: 10}#NVkbTGNbEsvi .fa1 { fill: rgb(187, 191, 196); }#NVkbTGNbEsvi .fa1 {fill: rgb(187, 191, 196)}#NVkbTGNbEsvi .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#NVkbTGNbEsvi .fx1 {font-style: normal}#NVkbTGNbEsvi .fx2 { text-anchor: middle; }#NVkbTGNbEsvi .fx2 {text-anchor: middle}#NVkbTGNbEsvi .fx3 { dominant-baseline: central; }#NVkbTGNbEsvi .fx3 {dominant-baseline: central}#NVkbTGNbEsvi .fx4 { stroke: none; }#NVkbTGNbEsvi .fx4 {stroke: none}#NVkbTGNbEsvi .fc0 { fill: var(--text-caption); }#NVkbTGNbEsvi .fc0 {fill: #646a73}#NVkbTGNbEsvi .fa2 { fill: var(--text-link-disabled); }#NVkbTGNbEsvi .fa2 {fill: rgb(187, 191, 196)}#NVkbTGNbEsvi .fx5 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#NVkbTGNbEsvi .fx5 {font-style: normal}#NVkbTGNbEsvi .fx6 { text-anchor: start; }#NVkbTGNbEsvi .fx6 {text-anchor: start}#NVkbTGNbEsvi .fx7 { dominant-baseline: alphabetic; }#NVkbTGNbEsvi .fx7 {dominant-baseline: alphabetic}#NVkbTGNbEsvi .fc1 { fill: rgb(0, 0, 0); }#NVkbTGNbEsvi .fc1 {fill: rgb(0, 0, 0)}#NVkbTGNbEsvi .fb1 { fill: var(--N900-FG, 0.15); }#NVkbTGNbEsvi .fb1 {fill: rgba(31,35,41, 0.15)}#NVkbTGNbEsvi .fb2 { fill: rgb(209, 217, 224); }#NVkbTGNbEsvi .fb2 {fill: rgb(209, 217, 224)}#NVkbTGNbEsvi .fa3 { fill: var(--bg-body); }#NVkbTGNbEsvi .fa3 {fill: #fff}AB12345传统思维我需要写代码来实现功能关注语法、API、实现细节逐行编写、逐个调试代码是核心产出Vibe Coding 思维我需要描述我想要什么关注需求、逻辑、用户体验整体描述、快速迭代功能实现是核心目标
Karpathy 在后续的访谈中进一步解释：他使用 AI 工具完成了一个周末项目，期间几乎没有亲自写代码，而是不断地用自然语言告诉 AI 他想要什么，AI 负责生成代码，他负责看效果、提反馈。
为什么是 "Vibe"？
"Vibe" 这个词在英文中意为"氛围、感觉、直觉"。选用这个词有几层含义：
•
凭感觉开发：不需要精确记住每个 API，凭"感觉"描述需求即可
•
沉浸式体验：专注于创造和验证，而非编码细节
•
放松的心态：不必为语法错误焦虑，AI 会帮你处理
1.2 传统编程 vs AI 辅助编程 vs Vibe Coding
为了更好地理解 Vibe Coding，我们需要将它放在编程方式演进的历史脉络中来看。
三种编程范式对比
代码块
Plain Text
┌─────────────────────────────────────────────────────────────────────┐
│ 编程范式演进 │
├──────────────────┬────────────────────┬─────────────────────────────┤
│ 传统编程 │ AI 辅助编程 │ Vibe Coding │
│ (Manual) │ (AI-Assisted) │ (AI-First) │
├──────────────────┼────────────────────┼─────────────────────────────┤
详细对比表
#gtWeebhVAkTg text { white-space: pre; }#gtWeebhVAkTg .fb0 { stroke: var(--N900-FG, 0.15); }#gtWeebhVAkTg .fb0 {stroke: rgba(31,35,41, 0.15)}#gtWeebhVAkTg .fx0 { stroke-miterlimit: 10; }#gtWeebhVAkTg .fx0 {stroke-miterlimit: 10}#gtWeebhVAkTg .fa1 { fill: rgb(187, 191, 196); }#gtWeebhVAkTg .fa1 {fill: rgb(187, 191, 196)}#gtWeebhVAkTg .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#gtWeebhVAkTg .fx1 {font-style: normal}#gtWeebhVAkTg .fx2 { text-anchor: middle; }#gtWeebhVAkTg .fx2 {text-anchor: middle}#gtWeebhVAkTg .fx3 { dominant-baseline: central; }#gtWeebhVAkTg .fx3 {dominant-baseline: central}#gtWeebhVAkTg .fx4 { stroke: none; }#gtWeebhVAkTg .fx4 {stroke: none}#gtWeebhVAkTg .fc0 { fill: var(--text-caption); }#gtWeebhVAkTg .fc0 {fill: #646a73}#gtWeebhVAkTg .fa2 { fill: var(--text-link-disabled); }#gtWeebhVAkTg .fa2 {fill: rgb(187, 191, 196)}#gtWeebhVAkTg .fx5 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#gtWeebhVAkTg .fx5 {font-style: normal}#gtWeebhVAkTg .fx6 { text-anchor: start; }#gtWeebhVAkTg .fx6 {text-anchor: start}#gtWeebhVAkTg .fx7 { dominant-baseline: alphabetic; }#gtWeebhVAkTg .fx7 {dominant-baseline: alphabetic}#gtWeebhVAkTg .fc1 { fill: rgb(0, 0, 0); }#gtWeebhVAkTg .fc1 {fill: rgb(0, 0, 0)}#gtWeebhVAkTg .fb1 { fill: var(--N900-FG, 0.15); }#gtWeebhVAkTg .fb1 {fill: rgba(31,35,41, 0.15)}#gtWeebhVAkTg .fb2 { fill: rgb(209, 217, 224); }#gtWeebhVAkTg .fb2 {fill: rgb(209, 217, 224)}#gtWeebhVAkTg .fa3 { fill: var(--bg-body); }#gtWeebhVAkTg .fa3 {fill: #fff}ABCD123456789维度主导者代码来源核心技能开发速度学习曲线适用场景出错时代表工具传统编程人类开发者100% 人工编写编程语言精通较慢陡峭所有场景人工调试定位VS Code, VimAI 辅助编程人类为主，AI 为辅70% 人工 + 30% AI补全编程能力 + 工具使用中等中等日常开发人工 + AI协助GitHub CopilotVibe CodingAI 为主，人类为辅10% 人工 + 90% AI生成需求表达 + 判断力快速相对平缓快速原型、探索性项目重新描述，让AI修复Cursor, Claude Code
一个具体的例子
假设我们需要实现一个用户登录表单验证功能：
传统编程方式
代码块
JavaScript
// 开发者需要：
// 1. 了解表单验证的最佳实践
// 2. 查阅正则表达式语法
// 3. 处理各种边界情况
// 4. 编写错误提示逻辑
function validateLoginForm(email, password) {
const errors = {};
// 邮箱验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email) {
errors.email = '请输入邮箱';
} else if (!emailRegex.test(email)) {
AI 辅助编程方式
开发者开始输入函数名和注释，AI（如 GitHub Copilot）自动补全：
代码块
Plain Text
开发者仍需理解代码、验证正确性、调整细节。
Vibe Coding 方式
开发者在 Cursor 中直接用自然语言描述：
代码块
Plain Text
请帮我写一个登录表单验证函数，要求：
1. 验证邮箱格式是否正确
2. 密码至少8位，需要包含大小写字母和数字
3. 返回验证结果和具体的错误信息
4. 使用 TypeScript，包含类型定义
AI 直接生成完整的、带类型的实现代码。开发者只需要：
•
阅读生成的代码（不一定要逐行理解）
•
在页面上测试功能是否正常
•
如有问题，继续用自然语言描述调整需求
1.3 Vibe Coding 的核心理念
Vibe Coding 的核心可以用一句话概括：
"表达意图，让 AI 写代码"
从"How"到"What"的转变
传统编程关注的是 "How"（怎么做）：
•
使用什么数据结构？
•
调用哪个 API？
•
循环还是递归？
•
如何处理异常？
Vibe Coding 关注的是 "What"（做什么）：
•
我想要什么功能？
•
用户会怎么使用？
•
预期的输入输出是什么？
•
有什么约束条件？
三个核心原则
原则 1：意图驱动（Intent-Driven）
代码块
Plain Text
❌ 错误的 Vibe Coding：
"写一个 for 循环遍历数组"
不要告诉 AI 怎么写代码，而是告诉它你想达成什么目标。
原则 2：迭代式对话（Iterative Dialogue）
Vibe Coding 不是"一次完成"，而是通过持续对话不断完善：
代码块
Plain Text
第一轮：先把基本功能实现出来
第二轮：这个边界情况没处理好，请修复
第三轮：增加错误提示信息
第四轮：优化一下性能
第五轮：添加单元测试
每一轮都是在前一轮的基础上改进，就像和一个经验丰富的程序员结对编程。
原则 3：验证而非盲信（Verify, Don't Trust）
AI 生成的代码可能存在问题，你需要：
•
✅ 运行代码，看实际效果
•
✅ 做边界测试
•
✅ 对关键逻辑进行 Review
•
❌ 不能直接复制粘贴就上线
•
❌ 不能假设 AI 总是对的
Vibe Coding 的工作流程
代码块
Plain Text
┌──────────────────────────────────────────────────────────────┐
│ Vibe Coding 工作流 │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 描述 │ -> │ 生成 │ -> │ 验证 │ -> │ 迭代 │ │
│ │ 需求 │ │ 代码 │ │ 效果 │ │ 优化 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
1.4 适用场景与局限性
Vibe Coding 并非万能药，了解它的适用边界非常重要。
✅ 适合使用 Vibe Coding 的场景
⚠️ 需要谨慎使用的场景
❌ 不适合 Vibe Coding 的场景
举个真实的例子
场景：你需要给公司网站添加一个联系表单
✅ 可以用 Vibe Coding：
•
表单 UI 布局
•
前端验证逻辑
•
发送邮件的基础功能
⚠️ 需要人工把关：
•
防止垃圾邮件的安全机制
•
用户数据的存储和隐私保护
•
与现有后端系统的集成
如何选择工具？
代码块
Plain Text
📝 本章小结
💪 动手练习
练习 1：体验对比
分别用传统方式和 AI 工具完成以下任务，体验两者的差异：
用 JavaScript 写一个函数，将输入的秒数转换为 "X小时Y分钟Z秒" 的格式
练习 2：思维转换
将以下"怎么做"的描述，转换为"做什么"的意图描述：
"用 for 循环遍历数组，用 if 判断是否是偶数，push 到新数组"
"定义一个对象，包含 name、age、email 三个属性"
"用 fetch 发送 POST 请求，header 设置 Content-Type 为 application/json"
练习 3：场景判断
判断以下场景是否适合使用 Vibe Coding，并说明理由：
给博客网站添加深色模式切换功能
实现一个密码加密存储模块
写一个自动整理桌面文件的 Python 脚本
开发银行转账的核心交易逻辑
🕵️ 参考思路与解析（点击展开）
练习 1：体验对比
•
传统方式：你需要记住 Math.floor，取余运算 %，以及字符串拼接。
•
Vibe Coding：直接说 "写一个函数把秒数转成时分秒格式"，甚至可以要求 "类似 01:05:09 这样的格式"。核心在于你不再关心具体的数学运算，而是关心输出格式。
练习 2：思维转换
原：怎么遍历... -> Vibe："找出数组里的所有偶数"
原：定义对象... -> Vibe："创建一个包含用户基本信息的结构"
原：用 fetch... -> Vibe："发送一个 POST 请求，带上 JSON 头" (或者更高级："调用这个接口创建新用户")
练习 3：场景判断
添加深色模式：✅ 适合。这是典型的 UI/CSS 任务，AI 非常擅长，且效果立即可见，容易验证。
密码加密模块：❌ 不适合。安全相关的核心代码，AI 可能会使用过时的加密算法或引入实现漏洞，必须由专家编写或严格审查。
整理文件脚本：✅ 适合。一次性自动化任务，逻辑简单，容错率高（可以先在测试文件夹运行）。
银行转账逻辑：❌ 不适合。涉及事务一致性、并发控制和极高的准确性要求，风险极大。