7.2 四大核心要素

Vibe Coding 的运作闭环

Vibe Coding 不是一个玄学概念——它有一套清晰的运作机制。把它拆解开来，有四个核心要素，构成一个循环：

意图表达 → 上下文管理 → AI 执行 → 即时反馈

这四个要素缺一不可，顺序也不能乱。任何一个环节出问题，整个循环就会卡住，你的 Vibe 就"断了"。

理解这四个要素，就像学会了驾驶一辆车的四个基本操作——油门、刹车、方向盘、后视镜。单独看每个操作都很简单，但只有在实际驾驶中把它们组合起来，你才真正会开车。

要素一：意图表达

一切从你想做什么开始。你有一个想法、一个需求、一个问题——你需要把它转化成 AI 可以理解的语言。

意图表达的质量，直接决定了后续所有步骤的效果。你的表达越精确，AI 的第一轮输出就越接近你的目标。你的表达越模糊，需要的迭代轮次就越多——每一轮都在消耗 Token，也在消耗你的耐心。

实际对比：

• 模糊表达："帮我做一个项目管理工具。"
• AI 可以做，但做出来的很可能不是你想要的——因为"项目管理"这个词每个人的理解不同。你是做任务管理还是资源管理？是个人使用还是团队协作？需要哪些核心功能？AI 只能猜，猜错了你再纠正——至少多花 2~3 轮来对齐。

• 精确表达："帮我做一个面向 3 人创业团队的任务看板，能看到每个任务的负责人和截止日期，按状态分三列：待办、进行中、已完成。技术栈用 React + Tailwind，数据用 localStorage 存储。"
• AI 一次就能命中。功能边界、技术选型、数据存储方式全部明确。生成的代码即使不完全符合预期，也是在正确的轨道上。

提高意图表达质量的四个技巧：

技巧 1：说清楚你要什么，同时说清楚你不要什么。 "这是用户的个人主页，展示头像、昵称、简介。不要让用户修改任何信息，只展示不编辑。"——"不要"的部分同样重要，它帮你划定了功能的边界。

技巧 2：给出具体的例子而不是抽象的描述。 不要只说"按钮样式好看一点"，而是说"按钮参考 Apple 官网的那种——圆角 12px、毛玻璃效果、悬停时加深 20% 透明度"。

技巧 3：一次只表达一个完整的需求。 不要一次说"帮我做一个登录页面 + 注册页面 + 忘记密码 + 还要用 OAuth 登录"。把这些拆成几个连续的请求——先做登录，确认后再做注册，再确认后再做 OAuth。这样 AI 不会因为一次性处理太多信息而在某个细节上出错。

技巧 4：用 AI 能理解的语言。 如果你对技术不了解，用自己的话说也没问题——但如果你知道一些关键词（比如"全栈""SPA""SSR""响应式"），用上它们可以大幅提高 AI 的理解效率。一个词代替一段描述。

要素二：上下文管理

AI 不在真空中工作。它需要知道你现在在做什么项目、用什么技术栈、之前已经做了什么、不该动哪些文件。

上下文管理就是让 AI"了解全貌"的过程。给少了，AI 会做出不符合项目风格的东西。给多了，AI 会被无关信息干扰，而且上下文窗口会被浪费。

上下文管理的常见误区：

• 给得太少：你只说"帮我改一下这个页面"，但没告诉 AI 这是什么项目、用了什么框架、这个页面在项目中的角色。AI 只能在黑暗中摸索。
• 给得太多：你把整个项目文件压缩成一个文本，全部塞给 AI。"你先看看这个项目——它有 50 个文件、2 万行代码。"AI 的注意力被分散在大量无关信息上，反而难以聚焦于你当前要改的功能。
• 给得太晚：等 AI 已经跑偏了两轮，你才想起来说"哦对了，我们这个项目用的是 Vue 不是 React"——前面两轮的所有输出都白做了。

好的上下文管理策略：

项目开始时： 给 AI 一个"项目背景卡"——这是什么项目、技术栈是什么、核心文件的结构。这个信息可以帮助 AI 在后续的所有对话中保持正确方向。

每次对话中： 只贴出当前任务相关的代码片段。一个简单的问题不需要整个文件。如果需要 AI 理解全局结构，用简短的语言描述结构，而不是贴出所有代码。

定期做总结： 当对话变长时，让 AI 总结已确认的内容，然后开启新对话。这个技巧在 06-04 中已经详细讨论过——"上下文压缩"是保持 AI 效率最有效的方法。

要素三：AI 执行

上下文给够了，AI 开始工作。它会根据你的意图和提供的上下文，生成代码、修改文件、或者回答技术问题。

在这个阶段，你的角色是"等待和观察"。不要急着打断 AI——让它完成当前的生成。现代 AI 编程工具在生成过程中是可以看到中间结果的（比如生成的代码片段），你可以边看边形成下一步的修改意见。

AI 执行的不同模式取决于你使用的工具：

• 直接生成完整代码（ChatGPT、Claude 网页版）：AI 一次性生成完整的代码或文件。你拿到后手动复制到项目中。
• 内联编辑（Claude Code、Cursor、Windsurf）：AI 直接在 IDE 中修改代码，你可以看到它做了哪些修改、修改了哪些行。
• 多文件操作（Claude Code）：AI 可以同时修改项目中的多个文件——新建文件、修改现有文件、删除不需要的文件。

不同模式适合不同场景：

• 探索性的任务（"帮我看看这个怎么实现"）→ 用网页版对话，比较灵活。
• 具体的修改任务（"把这个功能的 bug 修了"）→ 用 IDE 内联编辑，效率更高。
• 跨文件的复杂任务（"重构整个用户认证模块"）→ 用多文件操作，AI 自己管理文件依赖。

AI 执行过程中需要注意：

AI 有时会"跑偏"——在实现你要求的功能时，顺手改了其他不该改的代码。如果你用的是 IDE 内联工具，留意 AI 的修改范围——它是否修改了额外的文件？是否动了不应该动的代码？如果是，及时纠正："只改这个文件，不要动 pages/ 目录下的其他文件。"

要素四：即时反馈

AI 生成完了，你看到了结果。这个结果对吗？能运行吗？是你想要的吗？

即时反馈是闭环中至关重要的一环。没有反馈，AI 不知道它做得好不好，下一轮仍然可能朝错误的方向走。

反馈的几种类型：

确认型反馈： "好的，这个功能好用，继续下一个。"

• 这是很重要的反馈——告诉 AI"保持这个方向"。不要以为只有批评才是反馈。正面的确认同样重要，它帮助 AI 建立了"我在正确的轨道上"的信号。

修正型反馈： "这个不对，我要的不是这样的。按钮不需要那么大，高度降低到 40px。"

• 最常见的反馈类型。关键是要具体。不说"这个不好看"——AI 不知道什么方向是"好看"。要说"这个按钮颜色太暗了，改成浅蓝色，加大圆角到 12px"——这是 AI 能执行的反馈。

质疑型反馈： "你为什么要用这种方式实现？我觉得这个方案有性能问题，你有没有考虑过……"

• 高级反馈方式。当你对 AI 的实现方案有疑问时，可以进入技术讨论。AI 会解释它的思路，你可以判断是否接受或者提出替代方案。

优先级型反馈： "这次先不优化样式了，先把功能跑通再说。"

• 告诉 AI 调整优先级。AI 默认会追求一个"完整"的输出——但有时候你不需要完整，你只需要一个可运行的原型。明确告诉 AI 当前阶段的优先级。

反馈的关键原则：具体、及时、持续。

• 具体：模糊的反馈等于没有反馈。AI 无法从"这个不太好"中学到什么。
• 及时：不要让 AI 连续输出多轮之后你才给反馈。每一轮反馈都要及时，这样 AI 可以在下一轮立即调整。
• 持续：即使 AI 的输出完全符合预期，也给一个确认信号。这有助于维持 Vibe 的流畅感。

闭环的完整运作方式

这四个要素不是线性的，而是一个永不停转的循环：

1. 你说需求（意图表达）→
2. AI 理解上下文（上下文管理）→
3. AI 生成代码（AI 执行）→
4. 你看到结果并给出意见（即时反馈）→
5. 根据你的反馈，AI 调整方向（回到意图表达或直接修改）

每一圈，都让产品更接近你想要的状态。一圈一圈转下去，一个完整的应用就出来了。

一个完整的闭环示例（开发一个简单的计数功能）：

第 1 圈：

• 意图表达："帮我写一个 React 计数器组件，有加 1 和减 1 两个按钮，显示当前数值。"
• 上下文管理：你告诉 AI 这是用 Next.js 14 + TypeScript 的项目，组件放在 components/ 目录下。
• AI 执行：生成了一个 Counter.tsx 文件。
• 即时反馈："组件可以运行，但初始值我希望是 5 而不是 0。而且按钮要加一个点击时的缩放动画。"

第 2 圈：

• 意图表达：修改初始值，增加点击动画。
• 上下文管理：AI 已经在上下文中看到了组件代码，不需要重新贴。
• AI 执行：修改了代码，添加了 transform 动画。
• 即时反馈："初始值对了。动画效果不错。现在帮我加一个最小值 0 的限制——数值不能小于 0。"

第 3 圈：

• 意图表达：增加最小值限制。
• 上下文管理：继续使用当前上下文。
• AI 执行：增加了逻辑判断。
• 即时反馈："完美。现在再做一个类似的历史记录功能——每次数值变化时，记录变化的时间戳。"

3 圈下来，一个带历史记录的计数器组件成型了。如果你一开始就要求 AI 一次性做出这个完整组件，它可能要花很长时间理解你所有需求，生成的代码中很多细节需要改。但通过三轮闭环迭代，每次增加一个明确的修改方向，整个过程顺畅、高效。

要素之间的联动关系

四个要素不是独立存在的，它们之间有密切的联动：

• 意图表达 + 上下文管理：你表达的需求越具体，需要的上下文越少。反过来，上下文越充分的对话，你的表达可以越简洁。
• 上下文管理 + AI 执行：上下文越精准，AI 的执行偏差越小。上下文越完整，AI 一次处理的正确率越高。
• AI 执行 + 即时反馈：AI 的输出质量影响你反馈的类型——几乎准确时只需要微调，完全跑偏时可能需要回到意图表达重新说。
• 即时反馈 + 意图表达：反馈的积累让你下一次的意图表达更准确——你知道 AI 在哪些方面容易理解错，下一次表达时就可以提前澄清。

当循环卡住时，诊断方法：

• AI 不理解你说什么 → 回意图表达环节，重新描述，增加具体例子。
• AI 做出来的东西不对 → 检查上下文管理——AI 是不是缺了什么背景信息？
• AI 生成的代码有语法错误 → 可能触及了AI 执行的能力边界——换一种更具体的描述方式。
• AI 反复犯同样的错误 → 你的即时反馈不够具体——告诉 AI"不要这样做，具体是……因为……"