Vibe Coding完整实操:用AI写代码不踩坑的工程化流程

📅 2026/6/23 10:19:32
Vibe Coding完整实操:用AI写代码不踩坑的工程化流程
文章目录前言先搞清一件事Vibe Coding ≠ 乱Accept范式总览The Review-Driven LoopPhase 1项目初始化工程规范前置1. 建一个 AGENTS.md项目宪法Project: MyApp — 一个SaaS/工具/游戏Stack目录约定禁令2. 目录结构早定别让AI自由生长Phase 2日常开发循环增量不要大爆炸正确姿势Micro-CommitsPrompt 的黄金公式Phase 3质量底线不做这些 定时炸弹成熟度自检你在 L1/L2/L3 哪一级一句话总结P.S. 无意间发现了一个巨牛的人工智能教程非常通俗易懂对AI感兴趣的朋友强烈推荐去看看传送门https://blog.csdn.net/HHX_01前言说实话我第一次听说Vibe Coding的时候以为这是一种新型冥想。就是那种你坐在电脑前闭上眼睛感受宇宙的频率然后代码就自己从键盘缝里长出来了。结果试了一次睁开眼屏幕上只有一行字“Hello World”——还拼错了。后来我才知道Vibe Coding不是 vibe 着 vibe 着就 coding 了它是有套路的。先搞清一件事Vibe Coding ≠ 乱AcceptAndrej Karpathy 原话是fully give in to the vibes翻译过来不是放弃治疗而是周末搞原型的时候可以浪一点。就像你周末可以穿睡衣出门倒垃圾但周一上班还穿睡衣HR会找你谈话。所以真要把项目做靠谱你得换个身份——从打字员变成产品经理代码评审官。AI是那个手脚麻利但偶尔会焊错板的实习生你才是车间主任。范式总览The Review-Driven Loop这里有个六步循环我管它叫AI防坑六连拍。① Spec写清楚做什么→ ② Context把约束喂给AI→ ③ Generate生成小步增量代码→ ④ Review像审PR一样逐行看Diff→ ⑤ Test跑通验证→ ⑥ Commit过了才入库永远可回退这六步跳一步技术债就偷偷累积。技术债这玩意儿跟信用卡账单一样你觉得就欠一点没事等到还款日你会发现AI已经给你欠了一套房。你跳过Review就像跳过体检——感觉省事了但肿瘤已经长到三期了。Phase 1项目初始化工程规范前置很多人一上来就说“AI帮我做个网站。”这就像你走进一家餐厅对厨师说“做个菜。”厨师可能给你端上一盘仰望星空派—— technically 是道菜但你敢吃吗1. 建一个 AGENTS.md项目宪法放在项目根目录这叫AI的入职手册。没有这玩意儿AI就像没有KPI的实习生今天用React明天觉得Vue也不错后天突然给你引入了一个叫LeftPad 2.0的库。有了这个文件你之后每句 prompt 都不用重复背景AI会自觉对齐你的规范。Project: MyApp — 一个SaaS/工具/游戏StackNext.js 15 · TypeScript(strict) · Tailwind · Supabase(PostgreSQL)目录约定src/app/ → 路由页src/components/ → 可复用UIsrc/lib/ → 业务逻辑 DB查询DB不准在组件里查禁令不许引入新第三方库除非问我所有API输入走 Zod 校验报错要有边界处理不准 silent fail2. 目录结构早定别让AI自由生长AI的天性和我的猫一样——眼前最优解不管长期后果。你把毛线球放那儿它能给你织出一张蜘蛛网。AI写代码也一样会把逻辑堆进一个大文件文件名还叫utils_final_final_v2_really.ts。你要在生成大量代码前先把骨架钉死不然AI会给你盖一座代码违章建筑。Phase 2日常开发循环增量不要大爆炸我见过有人给AI下指令“帮我做一个带登录、商品管理、购物车、支付的电商网站。”AI听完沉默了三秒然后给你生成了一坨代码。这坨代码的特点是过度设计、版本冲突、以及你看不懂。就像你让实习生一天盖完一栋楼他确实盖完了但你敢住吗正确姿势Micro-Commits每个 prompt 只做一个可独立验证的小任务。先定类型和数据库schema再写一个路由再写一个页面再接auth。一步一步来就像吃火锅一片一片涮你别把整盘肉倒进去最后得到一锅肉汤。Prompt 的黄金公式给AI下指令也有套路。弱prompt“加个用户设置页。”AI听完给你加了一个页面但用的是jQuery配色是荧光绿还配了一首自动播放的BGM。强prompt要包含上下文 精确描述 约束 示例。就像你点外卖你说来个饭可能收到一碗白米饭。但你说来份黄焖鸡不要辣多加土豆参考上次那份这就靠谱多了。在 app/settings/page.tsx 建用户设置页可改 displayName/email/avatarURL。复用现有 UserForm 模式见 app/profile/page.tsx。fetch user via getServerSessionupdate via PATCH /api/user。加 Zod schemasuccess 时调 sonner toast见 lib/toast.ts。Phase 3质量底线不做这些 定时炸弹永远看Diff。AI会偷偷import新包就像孩子会偷偷往购物车里加零食。你得一包一包检查不然到家才发现购物车里多了个无人机。测试是护栏。理想模式是你写测试用例AI填空让测试变绿。这就像老师出卷学生答但AI是那个会偷偷翻书的学生你得盯着。上下文管理也很重要。对话长了AI会变蠢就像你开会开了三小时最后大家都不知道在讨论什么。该清上下文就清关键信息写进文件里别让AI在熵增里变成人工智障。安全红线绝不硬编码密钥。AI特别喜欢硬编码它觉得这样方便啊。是方便方便到黑客可以直接登录你的数据库把你的用户数据打包下载顺便给你发个勒索邮件。成熟度自检你在 L1/L2/L3 哪一级L1 新手复制AI代码不问why。就像去餐厅吃饭厨师说这盘菜可能有毒你说没事我先尝尝。风险极高。L2 进阶会review diff、设约束但底层原理模糊。能跑但维护起来像考古——你得一层一层挖才能搞清楚当初是谁埋的雷。L3 专家你定架构和边界AI当执行器。AI是杠杆人是大脑。这时候你终于从被AI带着跑变成了骑着AI跑。一句话总结Vibe Coding的范式不是不写代码而是规范前置 → 意图精确 → 增量交付 → Diff审查 → 测试关门 → 频繁提交。把AI当极快的实习生——你不会因为他敲得快就让代码直接上线同理别因为AI快就跳过工程纪律。毕竟代码可以vibe但线上事故可不会跟你vibe。P.S. 无意间发现了一个巨牛的人工智能教程非常通俗易懂对AI感兴趣的朋友强烈推荐去看看传送门https://blog.csdn.net/HHX_01