logo

Vibe Coding 心法：像带实习生一样使用 AI 编程

2025年6月18日 · 2520 字

最近，Vibe Coding 这个词风靡大江南北，给很多人描绘了一副梦想中的蓝图。好像有了 AI，人人都可以编程，做产品，随便说一句话，一个漂亮的界面就自己长出来了。

但是，当你满怀期待地投身实践，尝试 Vibe Coding 的时候，是不是遇到过这样的烦恼：

  • 想让它优化一个页面逻辑，结果它「杀疯了」，把 state 逻辑和 props 传递全搞乱了。
  • 让它写个新页面，代码看着像模像样，真要集成进项目，却发现 state 满天飞，根本没法维护，最后还是得自己吭哧吭哧重构。
  • 有时候它给了一段看似干脆利落的代码，但是一运行，报了满屏幕的错。有个已有的功能不小心被它改坏了！接下来就是漫长而痛苦的 「Vibe Debugging」过程。

一通操作下来，兴奋感荡然无存，只剩下疲惫。感觉 Vibe Coding 看起来很美，用起来心累。难道 AI 编程就是个花架子？

在和 AI 结对编程中沉浸许久，在 Vibe Coding 和「古法编程」之间来回横跳多次之后，我终于发现，问题不在于工具本身，而在于我们使用它的方式和心态。AI 编程的秘诀其实很简单：

我们要找准给 AI 的定位。你需要把 AI 看成一个「智商超群的实习生」，而你，是带他干活的那个资深工程师。

AI 的智商高得离谱，清北毕业，知识超群

为啥说 AI「智商超群」，主要体现在三点：

  1. 对于明确的算法问题，可以秒杀。 你让他现场手撕一个复杂的算法，无论是快排还是红黑树，他眼睛都不眨一下，给出的代码甚至比你在网上搜的还要优雅。这种纯粹的逻辑和算法能力，它无可匹敌。

  2. 知识面广到没朋友。 从远古时代的编程语言设计，到最新的开发框架，再到某个犄角旮旯的 API，你问他，他基本都知道。这个知识广度，人类在清北读 50 年书大概能达到。

  3. 模仿能力超强。 这是最厉害的一点。你只要给他一段代码，无论是你们项目里祖传的业务流程，还是你刚写的复杂组件，他都能依葫芦画瓢，照着写出风格一致的代码，完美融入。

但是，也正因为他这么能干，我们才更容易被迷惑，太过于信任他。AI 强大的模仿能力是一把双刃剑：你喂给他好的范例，他就是神队友；你喂给他烂代码，他就是屎山堆砌工；如果你干脆不喂任何范例，他就会凭着想象开始自由发挥，产出一些看似正确但脱离项目实际的代码，后果不堪设想。

请不要忘记，在天才的外衣下，AI 的本质还只是个「实习生」。为什么这么说呢？因为它有以下几样实习生的特质。

第一，它没有任何项目经验

别看 AI 智商超群，学识渊博，那都只是他在学校里学的。别忘了他还一天工作经验都没有呢，对于你的那些项目背景，他一无所知。项目用什么语言？什么框架？开发流程是什么？编码规范是什么？你得一一教给他。

更严重的是，这个实习生极度健忘，每天早上来都像第一天入职。这其实是 LLM 的"无状态性"（Stateless），你每次开新对话，它的记忆就被清空了。

既然他记不住，那我们就每次都告诉他！所以最好的办法是把项目背景、开发规范写成文档，每次都把文档塞到 AI 的上下文里。

我们可以保存一个 Markdown 格式的「项目背景说明书」，每次干活前，用这份文档让 AI 实习生「快速入职」。

# 项目背景说明书

## 1. 项目概览
我们正在开发一个名为 "PixelPerfect Dashboard" 的数据可视化平台。

## 2. 技术栈
- **框架**: Next.js 13 (App Router)
- **语言**: TypeScript
- **状态管理**: Zustand
- **UI/样式**: Tailwind CSS

## 3. 核心开发规范与约定
- **设计模式**: 组件遵循原子化原则 (Atomic Design)。
- **目录结构**: 可复用组件存放在 `src/components`，页面级组件在 `src/app`。
- **命名约定**: 组件用大驼峰 (e.g., `DataCard.tsx`)，Hooks 用 `use` 前缀 (e.g., `useUserData.ts`)。
- **数据请求**: 必须通过自定义 Hooks 封装 TanStack Query 来实现。
- **状态管理**: 全局状态（如用户信息）由 Zustand 管理，组件内部状态使用 React Hooks。
- **禁止事项**: 禁止直接操作 DOM，禁止在组件中直接发起 `fetch` 请求。

如果你用 Claude Code，可以把这些内容放到 CLAUDE.md 文件里。如果你用 Cursor，则可以放到 .cursorrule 里。这样就能在每次任务自动加载到 AI 的上下文里。

第二，它听不懂模糊的任务

实习生再聪明，也不可能理解行业黑话和项目里陈年的业务逻辑。要让他做什么任务，你得给他完整的上下文，他才能理解。

对待 AI，就要像对待实习生一样，下达清晰、具体、已分解的指令。

糟糕的指令 👎：

"帮我写一个登录表单"

清晰的指令 👍：

"请为我们的 'PixelPerfect' 项目创建一个 React 登录表单组件 LoginForm.tsx。

  1. 使用 TypeScript，并为 props 定义明确的类型。
  2. 包含 email 和 password 两个输入框，使用 useState 管理其状态。
  3. 使用 Tailwind CSS 进行布局和样式设计。
  4. 表单提交时调用 onSubmit prop 函数，并传入 email 和 password。
  5. 添加一个 isLoading prop，当其为 true 时，提交按钮应被禁用并显示加载状态。"

这个实习生还有一个优点：他任劳任怨，从不抱怨。当你对他的第一版代码不满意时，不要客气，直接告诉他哪里需要修改。例如：

  • 「代码里硬编码太多，要把 CSS 里的颜色提取成主题变量」
  • 「你用的这个 API 不符合规范，用我们项目里的 useCustomFetch 来代替」

第三，你得为实习生的工作兜底

在公司里，实习生允许犯错，带实习生的人需要有兜底能力，对产品功能负责。

那么在 AI 做 Vibe Coding 的时候，你有没有能力对代码的效果负责呢？

要知道 AI 可能比人类实习生更为自信甚至自大，人类实习生遇到不会的可能会请教你，但是 AI 可以一本正经地编一个答案，这就是我们常说的「幻觉」。

这是血的教训：永远不要盲目地信任 AI 生成的代码！

无论是做 Code Review，还是做好每一次测试。你需要用各种方式检查 AI 生成的代码是否正确。

无论是做 Code Review，还是做好每一次测试，你需要用你的经验和专业知识，确保这些产出的质量是过关的。在 Code Review 时，要像检查实习生的代码一样，特别留意以下几个 AI 容易给你挖的坑：

  • 小聪明走捷径：你让它修复一个 Bug，并要求所有测试通过。它可能会为了让测试跑通，直接去修改测试用例的 assert。表面看起来，测试确实是通过了，就是赌你不会去 review。
  • 啥东西都想改：有时 AI 会特别勤奋（尤其是 Claude 模型），在修改某个文件的同时，把其他它认为可以优化的代码也顺手改了。这很容易引入意想不到的 bug，如果你不仔细看，下次运行可能就会给你个惊喜。
  • 重新发明轮子：AI 可能不知道你的代码库里已经有了一个完美的工具函数，于是它自己又写了一个功能类似的。这会导致代码冗余，增加维护成本。你需要指导它复用项目中已有的公共函数。

AI 负责快速产出，而你，负责用你的经验和专业知识，把好最后一道质量关。

最后一点：把 AI 当成你的副手，与它共同成长

无论是那些认为 Vibe Coding 所向披靡，能替代一切的人，还是那些因噎废食，认为 AI 写不出严肃代码的人，都无法真正驾驭 AI 编程。前者会因盲目信任而导致项目失控，后者则会错失提升生产力的巨大机遇。

真正能用好 AI 编程的人，需要深刻理解：AI 是来辅助你的，而不是来替代你的。 它是一个能力放大器，而不是一个自动驾驶仪。

这位聪明的实习生，他的到来，可以把你从那些繁琐、重复的“体力活”中解放出来——比如编写组件的模板代码、实现一个已知逻辑的工具函数、或者生成单元测试。这样，你就能把宝贵的精力投入到更需要人类智慧的地方：梳理复杂的需求、设计灵活的系统架构、与团队探讨最佳的技术方案、以及规划产品的长期演进。你的角色，正在从一个执行者，转变为一个思考者和决策者。

而你，也会在这段“带实习生”的旅程中不断成长。为了给 AI 下达清晰的指令，你必须先在脑海里把问题分解得更透彻；为了审核 AI 的产出，你必须对项目的代码规范和最佳实践有更深的理解。工具越强大，对掌舵人的要求就越高。

那么，你想好怎么去带这位聪明的「实习生」了吗？