前端工程师的 Vibe Coding 最佳实践（一）：认知与心法

这是系列的第一篇。本篇不写一行让你照抄的提示词，只解决一个问题：先把脑子里的模型建对。模型对了，工具怎么变都不慌；模型错了，越快的工具只会让你越快地写出一堆自己都不敢上线的代码。

一、先给「Vibe Coding」去魅

「Vibe Coding」这个词是 Andrej Karpathy 在 2025 年初带火的，原意带点调侃：你只管描述想要什么，剩下的交给 AI，沉浸在「氛围」里，不去逐行抠代码。

但很多人对它有两种极端误解：

误解 A（神化）：以后不用懂代码了，会聊天就能做项目。
误解 B（鄙视）：那不就是不负责任地复制粘贴 AI 的屎山吗？

真相在中间，而且更有意思。我给一个对工程师更实用的定义：

Vibe Coding = 用自然语言表达意图，让 AI 完成「实现」，而你把精力集中在「意图、约束、审查、把关」上的一种协作式编程方式。

注意四个关键词：意图、约束、审查、把关。它们恰恰是初级工程师最薄弱、而资深工程师最值钱的部分。所以——

Vibe Coding 不会淘汰工程师，它淘汰的是「只会把需求翻译成语法」的那部分工作。 它把你从打字员，逼成架构师 + 评审官 + 产品判断者。

二、一张图看懂你的角色转变

传统编程，你的时间分配大概是这样：

理解需求 ▓▓
设计方案 ▓▓▓
写代码   ▓▓▓▓▓▓▓▓▓▓   ← 大头
调试     ▓▓▓▓
自测     ▓▓

Vibe Coding 之后，时间被重新分配：

理解需求 ▓▓▓▓        ← 变重要
设计方案 ▓▓▓▓▓▓      ← 变重要
写提示   ▓▓▓
读 AI 的代码（审查）▓▓▓▓▓▓▓▓   ← 新的大头
验证/测试 ▓▓▓▓▓

一句话总结：你不再是「生产代码」的人，而是「定义问题 + 验收结果」的人。 写得快不再是核心竞争力，判断得准才是。

三、心法一：你永远为输出负责，而不是 AI

这是最重要的一条，没有之一。

AI 生成的每一行代码，一旦你提交了，它就是你的代码。线上出了 bug，没有人会接受「这是 AI 写的」当借口。

由此推出一条铁律：

不要提交你看不懂的代码。

如果 AI 生成了一段你看不懂的实现，你有两个选择，且只有这两个：

让它解释，直到你看懂；
让它换一种你能看懂的写法。

绝不能选第三个:「看起来能跑，先提交吧」。那不是 Vibe Coding，那是给未来的自己埋雷。

四、心法二：AI 是「自信的初级队友」，不是「全知的资深专家」

给 AI 一个准确的人设，你就知道怎么跟它相处了：

它知识面极广，但对你的项目一无所知（除非你告诉它）。
它打字飞快，但会一本正经地胡说（幻觉 API、编造库的用法）。
它很听话，但不会反驳你的错误假设，除非你鼓励它质疑。
它没有上下文记忆的连贯性，容易忘记几轮之前的约束。

所以你对待它的方式，应该像带一个聪明但刚来的实习生：

你不会对实习生做的事	对应到 AI
只说「做个登录页」就指望他做对	不要用模糊的一句话提示
让他改核心模块却不 review	不要不读 diff 就合并
假设他知道团队规范	不要省略约定（命名、目录、技术选型）
他说啥信啥	对它声称的 API/库用法保持怀疑，去查证

五、心法三：小步快跑，紧密回环

新手最容易犯的错：一个超大提示词，让 AI 一次生成整个功能，然后对着 300 行陌生代码发呆，不知道哪里对哪里错。

正确姿势是把大任务切成可独立验证的小步，每一步都形成「提示 → 生成 → 审查 → 验证」的闭环：

❌ 大爆炸：
   "帮我做一个带搜索、筛选、分页、收藏的商品列表页"

✅ 小步快跑：
   1. "先设计数据结构和 API 类型定义"
   2. "实现一个纯展示的商品卡片组件，带 props 类型"
   3. "实现商品列表容器，先只做数据加载和渲染"
   4. "加上分页"
   5. "加上搜索（防抖）"
   ...

每一步代码量小、容易读、容易测、容易回滚。回环越紧，你对代码的掌控力越强，返工成本越低。

六、心法四：意图 > 实现

把你的认知重心从「怎么写」前移到「要什么」。一个高质量的意图描述通常包含三层：

目标（What）：要解决什么问题，给谁用。
约束（Constraints）：技术栈、性能要求、兼容性、不能引入新依赖、要遵守的设计系统等。
验收标准（Acceptance）：怎样算做对了？边界条件是什么？

举例对比：

🟡 「写个表单校验」

🟢 「给这个注册表单加校验。用 react-hook-form + zod（项目已有）。规则：邮箱格式、密码 8-32 位且含字母数字、两次密码一致。错误信息中文、显示在输入框下方。提交时禁用按钮防重复提交。不要引入新的 UI 库，复用现有的 <FormField> 组件。」

第二个提示，AI 几乎不可能做错；第一个提示，AI 怎么做你都得返工。好的提示词，本质是一份写得好的小型需求规格。