【VibeCoding系列教程20】开发流程

文章目录规划是Vibe Coding的底裤第一步需求研究——先搞清楚你要干啥第二步PRD——给AI画一张清晰的地图MVP原则先让车能跑再考虑装音响第三步技术设计——给AI选一套合适的工具第四步AGENTS.md——给AI立规矩第五步实现和迭代——小步快跑别想着一口吃成胖子第一步搭骨架第二步填血肉第三步化妆打扮Git你的后悔药反面教材小阿巴的翻车现场防翻车指南让AI乖乖听话的6个技巧1. 模块化别把鸡蛋放一个篮子2. 限定修改范围给AI画个圈3. 抽象复用别让AI当复读机4. 版本控制常按保存键5. 人工介入别当甩手掌柜6. 多元AI协作让AI们互相监督写在最后规划是Vibe Coding的底裤很多人以为有了AI就不需要规划了。毕竟AI那么聪明我动动嘴皮子它不就把活干完了兄弟你让AI自由发挥就像把家里钥匙交给哈士奇——它确实会帮你处理家具但处理完你可能连沙发腿都找不着。AI不是魔法师它是个执行力爆表的实习生。你让它往东它绝不往西但你如果自己都分不清东南西北它就会按照最保险的方式给你生成一堆你根本看不懂的代码。所以哪怕在AI时代规划依然是最重要的。甚至可以说比以前更重要。以前你规划不好顶多是代码写得烂现在你规划不好AI直接给你造出一座代码违章建筑拆都拆不掉。今天我就把我踩了30多个项目坑之后总结出来的一套5步流程分享给你。照着做至少能保证你的项目不会出生即夭折。第一步需求研究——先搞清楚你要干啥我见过太多人脑子里只有一个模糊的想法比如我想做个记账App然后立刻就打开Cursor开始聊天。这就好比你去理发店跟Tony老师说你看着剪吧好看就行。Tony老师微微一笑给你推了个寸头。你说这不是我要的Tony老师说“你不是说好看就行吗我觉得寸头挺好看的。”需求不清AI就是那个Tony老师而且它还不会跟你吵架它只会默默生成代码然后让你陷入无尽的修改地狱。所以动手之前先花30分钟做个调研。问自己三个问题我要解决什么问题这个问题真的值得解决吗我希望做出来的东西长什么样然后去看看市面上有没有类似的产品。别觉得这是抄袭这叫站在巨人的肩膀上——当然如果你连巨人长什么样都没见过那你可能站在的是巨人的脚后跟上。调研完了写一个简单的RESEARCH.md不用很正式就像写日记一样。比如你想做记账App可以这样写目标做个简单易用的个人记账工具调研发现市面上的App功能太复杂我只想快速记录收支看看每月花了多少钱。核心需求快速添加记录、按日期查看、月度统计、数据本地存储。就这么简单。但这30分钟能帮你后面省下300分钟的返工时间。第二步PRD——给AI画一张清晰的地图调研完了接下来要把你的想法整理成一份正式的产品需求文档也就是PRD。PRD是什么它是你给AI的作战地图。没有地图AI就像个无头苍蝇到处乱撞有了地图它才知道每一步该往哪走。写PRD有个偷懒的好办法你先写一段大白话描述比如我要做个记账App能快速记录收支查看每月统计要简单易用然后扔给AI大模型让它帮你扩展成完整的PRD。这就像你请了个秘书你把大概意思一说秘书帮你整理成正式文件。当然整理完了你得自己检查一下别让秘书把简单易用理解成只有一个按钮。一份完整的PRD应该包含产品概述、目标用户、核心功能列表、功能优先级MVP和后续版本、界面设计要求、技术栈建议、代码风格、边界场景。功能优先级特别重要。你要明确告诉AI哪些是必须做的哪些是可以以后再加的。不然AI会一视同仁把所有功能都堆进第一个版本最后你的MVP比人家的正式版还复杂。MVP原则先让车能跑再考虑装音响很多人做MVP的时候总想着反正都要做不如一次性做完。结果MVP做了三个月竞争对手都已经上线开始赚钱了。记住MVP不是最小可行产品而是最小能用的产品。只要核心功能能跑通哪怕界面丑一点、少几个高级功能也没关系。先上线再迭代。第三步技术设计——给AI选一套合适的工具PRD搞定了接下来要确定用什么技术来实现。这一步叫技术设计要创建一个TECH_DESIGN.md文件。技术设计包括技术栈选择、项目结构、数据模型、关键技术点。选技术栈就像选交通工具。你要去楼下便利店骑共享单车就行你要去隔壁城市得坐高铁你要去月球那得坐火箭。不同的项目规模需要不同的技术方案。比如做个个人记账工具前端用ReactTypeScript数据存在LocalStorage里部署到Vercel这就够了。你非要上个后端服务器、配个数据库、再来个微服务架构——兄弟你这是去便利店买瓶水结果租了辆劳斯莱斯。项目结构也要提前规划好。代码放哪、组件怎么组织、工具函数放哪这些都要写清楚。不然AI生成的代码东一块西一块后期找Bug就像在大海里捞针而且这根针还是透明的。数据模型也很关键。你要存哪些数据、每个字段是什么类型、有什么关系都要定义清楚。不然AI可能会给金额字段定义成字符串给日期字段定义成布尔值——别笑AI真的干得出来。第四步AGENTS.md——给AI立规矩PRD和技术设计都准备好了但还差一步你要给AI立规矩。想象一下你请了一个顶级程序员来帮你写代码但你没告诉他我们用什么代码规范、文件命名规则是什么、测试要求是什么。那他写出来的代码可能风格跟你完全不搭甚至你根本看不懂。AGENTS.md就是干这个的。它是一份给AI的员工手册告诉它在这个项目里应该遵循什么规则。这个文件推荐用AGENTS.md命名因为这是一个社区标准OpenAI、Anthropic、Google这些公司都在推Cursor、Windsurf、Claude Code、GitHub Copilot这些工具都支持自动读取。AGENTS.md里一般写项目概述、开发规范、代码风格、测试要求、注意事项。比如你可以规定必须用TypeScript、组件用函数式组件、样式用Tailwind CSS、命名用PascalCase、常量用UPPER_SNAKE_CASE。有了这份文件AI生成的代码就像同一个师傅教出来的风格统一、规范一致。不然你今天生成的代码是文艺风明天生成的代码是工业风后天生成的代码是抽象风你的项目就成了代码博物馆。第五步实现和迭代——小步快跑别想着一口吃成胖子前面四步都是准备工作现在终于可以写代码了。但记住不要一口气让AI把整个项目都写出来。这就好比让厨师一次性做满汉全席他很可能把糖当成了盐把醋当成了酱油。等菜上桌了你发现鱼香肉丝是甜的糖醋排骨是咸的这时候再改锅都糊了。正确的做法是小步迭代分三步走第一步搭骨架先让AI生成基础项目框架把目录结构、依赖安装、路由配置、页面框架搭好。这时候别管功能好不好用只要项目能跑起来就行。有编程基础的同学可以用脚手架比如create-vite几分钟就能搭好。没有基础的同学就让AI帮你搭但要明确说“先搭框架别写功能。”第二步填血肉框架搭好了开始实现核心功能。把项目拆成一个个小功能一个一个做。比如记账App先实现数据模型和存储再实现添加记录再实现列表显示再实现删除最后做月度统计。每做完一个功能就测试一下。能跑通吗有Bug吗界面符合预期吗有问题立刻改没问题再往下做。这一步就像拼乐高一块一块拼拼完一块检查一下别等整个城堡拼完了才发现地基是歪的。第三步化妆打扮核心功能都跑通了再优化细节。性能优化、用户体验改进、界面美化这些都可以慢慢打磨。打磨完你的MVP就完成了。这时候建议用Git提交一次版本打个标签。以后想扩展功能就从这个版本继续。Git你的后悔药强烈建议用Git管理代码。每完成一个功能就提交一次出了问题能快速回退。Cursor自带Git对比功能可以很方便地看代码变化。不用Git就像走钢丝不系安全带——你确实可能走完全程但万一摔了那就是直接落地成盒。反面教材小阿巴的翻车现场为了让你更深刻地理解这套流程的重要性我给你讲个真实的故事——小阿巴的待办事项App翻车记。小阿巴打开AI编程工具豪情万丈地输入“帮我做个待办事项应用。”AI生成了一个应用看起来还行。但小阿巴很快发现没有分类功能、没有优先级、界面风格也不喜欢。于是他说加上分类功能。AI加了分类但把原来的布局破坏了。他又说修复布局。AI修复了布局但又引入了新的Bug。他再说修复Bug。AI修复了Bug但分类功能又坏了。就这样改来改去代码变成了一团乱麻最后小阿巴看着屏幕感觉自己不是在开发App是在跟AI玩打地鼠——而且这地鼠还会繁殖。问题出在哪第一一开始没有明确需求AI只能按自己的理解生成。第二每次修改都是头痛医头脚痛医脚没有整体规划。第三没有文档记录AI根本不知道项目整体设计是什么。如果小阿巴一开始写了PRD和技术设计明确告诉AI要做什么、不要做什么就不会出现这种左右脑互搏的局面了。防翻车指南让AI乖乖听话的6个技巧掌握了流程还不够我再分享几个实战技巧让AI生成的代码更精准、更可控。1. 模块化别把鸡蛋放一个篮子AI的上下文是有限的项目越大它越容易失忆。就像你跟一个人聊了三个小时前面聊的啥他可能都忘了。所以要把项目拆成多个独立模块。比如电商系统商品管理、订单管理、用户管理各自独立。让AI写商品功能的时候别给它看支付结算的代码不然它可能会把商品价格和支付密码搞混。2. 限定修改范围给AI画个圈AI有个毛病改A功能的时候经常顺手把B功能也改了。这就像你让装修师傅修客厅灯他顺手把卧室的墙砸了——因为他觉得这样更通透。解决办法很简单在提示词里明确限定范围。比如“仅修改components/AddTransaction.tsx文件添加表单验证保持现有样式和布局不要改动其他文件。”3. 抽象复用别让AI当复读机如果你让AI生成两个布局一样的页面它可能会把页面A的代码复制一遍改个名字变成页面B。这样以后你改页面A页面B不会自动更新维护起来就是灾难。你要主动告诉AI请把这个页面抽象成可复用的组件其他页面通过传入不同参数来使用。这样代码量少AI也容易记住维护起来也方便。4. 版本控制常按保存键每完成一个功能就git commit一次。AI生成新代码后人工对比一下改动文件。Cursor有Git对比功能改动了哪里一目了然。这就像打游戏的时候多存档Boss打不过还能读档重来。不然你辛辛苦苦打了三小时一个失误全没了那感觉比失恋还难受。5. 人工介入别当甩手掌柜AI有时候会陷入循环改来改去总是同一个错误或者一直在做无用功。这时候就得人工介入了。手动指定上下文、换个角度描述问题、清空对话历史重新开始甚至手动改一部分代码给AI指明方向。有编程基础的话你能看懂代码、知道哪里出问题就能更好地把控AI。所以我说学Vibe Coding的同时也要学点编程基础。不然AI就像一匹野马你骑上去发现没有缰绳——它跑是跑了但跑哪去你可控制不了。6. 多元AI协作让AI们互相监督不同AI擅长不同的事。Cursor里的GPT写代码有问题你可以把代码和错误信息复制给Claude或Gemini让它们分析原因、给出修改建议然后再把建议告诉GPT让它改代码。这就像让几个专家会诊比让一个医生瞎猜靠谱多了。而且AI之间不会互相抬杠它们只会默默给出方案效率比人类会议高多了。写在最后看完这套流程你可能会觉得好麻烦啊写这么多文档。但你要知道前期花1小时写文档后期能省下10小时的返工时间。我做了30多个Vibe Coding项目那些一开始做好规划的开发过程都很顺利最后也都成功上线了。那些想到哪做到哪的大多数都半途而废了。Planning is Everything这是Vibe Coding的第一心法。好的规划不会限制你的创造力反而会让你更自由。因为你知道自己在做什么知道每一步该往哪走。就像开车有导航你可以放心踩油门不用担心开到沟里。当然这个流程不是死板的。随着你经验增加你会找到自己的节奏。但在一开始强烈建议按这个流程来养成好习惯。记住这几个关键点规划比代码重要、文档是AI的指南针、小步迭代不失控、模块化是大项目的关键、版本控制是你的后悔药。现在你已经掌握了完整的Vibe Coding项目开发流程。下次做项目的时候别再裸奔了先把衣服穿好——至少先把底裤穿上。