Vibe Coding 工程化：别让 AI 把你的项目写成屎山

AI 写代码很快，但代码烂得也很快。问题不出在 AI 能力不够，而出在你没有一套驾驭 AI 的工程流程。本文拆解一套可复用的 Vibe Coding 标准工作流，帮你把 AI 从"失控的代码生成器"变成"可控的工程伙伴"。

一、Vibe Coding 的甜蜜陷阱

用 Vibe Coding 做项目，前期的体验堪称完美------需求丢进去，代码秒出，功能一个接一个地堆。一周顶以前一个月。

但问题很快就会出现：

代码越往后越乱，组件从 50 行膨胀到 500 行
改一个功能，牵连三个模块，修一个 bug 引出两个新 bug
AI 开始"自由发挥"，加了一堆你没要的功能，还改了你的数据结构
最后整个项目崩盘，删库重来

这不是 AI 的问题，是你的问题。

问题在于，很多人把 Vibe Coding 理解成了"把活丢给 AI，然后去喝咖啡"。但真正的 Vibe Coding 不是放任，而是驾驭。

就像开车------方向盘在你手里，油门在 AI 手里。你不握方向盘，车肯定会撞墙。

二、解法：Harness Engineering（驾驭式工程）

核心思路就一句话：给 AI 套上缰绳，让它在边界内自由奔跑。

在让 AI 写第一行代码之前，你必须先铺好三条轨道：

轨道	作用	缺失的后果
图纸	明确要做什么、做到什么程度	AI 无限发散，功能膨胀
地基	明确技术边界和非功能约束	后期推翻重来，返工成本巨大
规矩	文档化一切，建立质量闸门	代码成屎山，无人敢动

下面展开讲每条轨道具体怎么做。

三、第一阶段：定图纸（需求 & 设计）

1. 别写代码，先聊天

像一个产品经理一样，先和 AI 聊天。把痛点、目标用户、使用场景、理想中的核心功能全部倒给 AI。

不用追求严谨，不用在意格式。就像跟朋友吐槽一样，把想法全说出来。

这个阶段的目标是：让 AI 理解你要解决什么问题，而不是让它猜你想写什么代码。

2. 把聊天内容固化为 PRD 文档

让 AI 把聊天内容整理成一份结构化的 PRD 文档，你来验收。

PRD 必须包含：

功能列表
用户流程
页面清单
每个功能的验收标准（边界）

最后一点最关键。说清楚"做到什么程度算完成"：

markdown 复制代码

❌ 错误示范："实现登录功能"
✅ 正确示范：
   - 登录成功 → 跳转到首页
   - 登录失败 → 提示"用户名或密码错误"，不清空输入框
   - 未登录访问 → 重定向到登录页，登录后回到原页面
   - 支持邮箱+密码和手机号+验证码两种方式

没有验收标准，AI 就会越写越发散。今天给你加个社交登录，明天给你加个人脸识别。

3. 定好视觉和页面框架

在 AI 开始写 UI 之前，先敲定长什么样。

两种做法：

找 2-3 个参考网站，描述你想要的风格
让 AI 生成几种风格的方案，你来选

敲定后产出一份视觉规范：布局方式、色调体系、组件风格（简约/豪华）、页面有哪些内容块。

为什么这一步不能跳？ 因为如果让 AI 一边写功能逻辑，一边自己决定 UI，它会反复推翻重来。今天觉得这个页面不好看，全改一遍，明天又换风格。功能和 UI 混在一起改，代码质量直接归零。

四、第二阶段：打地基（技术 & 架构）

4. 明确项目边界和非功能需求

四个维度必须说清楚：

维度	要回答的问题
部署	本地跑还是线上公开？单用户还是多用户？
数据	有没有用户数据？需不需要支付功能？
规模	预计多少用户？数据量多大？
非功能	安全要求？性能上限？可用性？成本预算？

安全、性能、可用性、成本------这四个问题不提前说清楚，后面一定会返工。而且不是小改，是推倒重来。

5. 锁定技术栈

选技术栈的原则不是"最新最火"，而是越可验证越好。

社区活跃、文档齐全、踩坑记录丰富
你或团队有使用经验
生态成熟，常见场景都有现成方案

比如 React + TypeScript + Tailwind CSS 就是一个典型的"稳"组合。写进 CLAUDE.md，让 AI 每次都知道自己用什么武器在干活。

6. 让 AI 出轻量架构草案

先不动代码，先让 AI 输出：

目录结构：怎么分层，每个目录放什么
核心模块：有哪些模块，模块之间怎么通信
数据模型：核心实体长什么样，字段是什么
组件树：有哪些组件，谁嵌套谁，数据怎么流

这份架构草案就是你后续开发的地图。没有地图，AI 会今天在东边盖个楼，明天在西边挖个坑。

五、第三阶段：立规矩（文档 & 质量）

7. 固化成文档

把前面所有的规划成果，写成项目根目录下的几个文本文件：

bash 复制代码

项目根目录/
├── PRD.md        # 产品需求文档 --- 要做什么、做到什么程度
├── ARCH.md       # 系统架构文档 --- 怎么分层、模块怎么交互
├── DESIGN.md     # 设计规范 --- 视觉风格、组件规范
├── PROJECT.md    # 当前项目阶段 --- 做到哪了、下一步做什么
└── CLAUDE.md     # AI 交互配置 --- 技术栈、编码规范、对话规则

这些文件是 AI 的全局上下文 和永久约束。每次对话 AI 都会读到它们，不需要你反复提醒。

8. 定开发规范

代码规范不需要从零造，直接用社区的：

ESLint + Prettier 管格式
命名规范（组件 PascalCase，函数 camelCase，常量 UPPER_CASE）
目录规范（components/、hooks/、utils/、types/）

再建一个 references/ 文件夹，把参考文档、API 文档、设计稿放进去。AI 可以随时查阅。

9. 搞好 Git 和质量闸门

Git 是你最后的安全网：

git reset --hard：果断回退。某次 AI 改得面目全非？直接回到上一个干净版本。你丢弃的是 AI 的代码产出，保住的是一张干净的图纸，重新给 AI 更好的 prompt，比修烂代码快十倍。
git reset --soft：保留修改。AI 改坏了但有些部分还能用？soft reset 回到之前的版本，修改留在暂存区，手动挑拣。
git restore --staged / git checkout --：精细控制。暂存区不要的撤回工作区，工作区不要的直接丢掉。

核心原则：频繁 commit，保持随时可以回退的能力。 AI 每完成一个独立功能就提交一次，不要攒着。

六、完整工作流总览

markdown 复制代码

第一层：定图纸
  ├── 1. 和 AI 聊天，导出需求
  ├── 2. 生成 PRD，验收边界
  └── 3. 确定视觉和页面框架

第二层：打地基
  ├── 4. 明确项目边界和非功能需求
  ├── 5. 锁定技术栈（CLAUDE.md）
  └── 6. 输出轻量架构草案

第三层：立规矩
  ├── 7. 固化文档（PRD / ARCH / DESIGN / PROJECT）
  ├── 8. 定开发规范和参考资料文件夹
  └── 9. Git 质量闸门，随时可回退
         ↓
    开始 Vibe Coding

九个步骤做完，AI 就已经不是一只脱缰的野马了。它知道自己在哪里干活、要做什么、做到什么程度算完、不能碰哪些边界。

七、总结

Vibe Coding 的本质不是"让 AI 替你写代码"，而是你作为工程管理者，用一套标准流程去驾驭 AI 这个超高速执行者。

三句话记住：

规划就是一切 --- 图上多花一小时，代码里少踩十个坑
文档是 AI 的缰绳 --- PRD 定边界，ARCH 定结构，CLAUDE.md 定规矩
Git 是最后的安全网 --- 随时可回退，你才敢让 AI 放手去干

AI 不会取代工程师，但会用工程流程驾驭 AI 的工程师，会取代那些不会的。

相关阅读：Vibe Coding 实战指南：如何用 AI 写出靠谱代码