尧图网页设计 
文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载在 ai-guide 仓库的《Vibe Coding 零基础教程》项目中本文为你系统拆解一条从「模糊想法」到「可上线商业级产品」的完整 Vibe Coding 工作流。读完本文你将掌握需求研究Research、产品需求文档PRD、技术设计文档Tech Design、AI 代理指令AGENTS.md、实现与迭代Build五个关键步骤并学会通过模块化、限定修改范围、版本控制等技巧避免 AI 生成代码时「失控翻车」真正从「会用 AI 写代码」进阶到「能独立交付产品」。为什么 Vibe Coding 需要标准流程很多同学刚开始用 AI 做项目时都会犯同一个错误打开 AI 编程工具后直接就开始和 AI 聊天让它生成代码。对于小项目来说这样做没问题但如果你想做一个完整的商业级项目这样就会出问题——一开始可能还挺顺利但很快就会发现 AI 生成的代码越来越乱完全不是自己想要的。改来改去、左右脑互搏最后不得不推倒重来浪费了大量时间。原因很简单你跳过了最重要的一步——规划。在传统编程中如果你对项目规划不清楚最多就是写出来的代码质量不高但至少你知道自己在写什么。而在 Vibe Coding 中情况完全不同如果你对项目规划不清楚AI 就会「自由发挥」生成一堆你看不懂、也不需要的代码。AI 不是魔法它只是一个非常强大的执行者。你告诉它做什么它就做什么。如果你自己都不知道要做什么AI 自然也无法帮你做出理想的产品。正如仓库中 《Vibe Coding 五大核心心法》 所强调的第一心法Planning is Everything——花在规划上的 5 分钟能省下你在返工上的 30 分钟。因此一套清晰的开发流程可以帮你明确项目目标和需求让 AI 理解你的意图避免项目失控提高开发效率做出真正有用的产品完整的 5 步工作流这套流程是在实践中总结出来的参考了很多优秀开发者的经验共包含 5 个步骤需求研究Research产品需求文档PRD技术设计文档Tech DesignAI 代理指令AGENTS.md实现和迭代Build后续的实战板块文章如 《02 Vibe Coding 个人工具开发》都会基于这套流程展开。本教程 《00 Vibe Coding 项目实战导读》 也明确指出先学习标准开发流程再动手实战是做好项目的基础。下面用一个贯穿全文的案例——「个人记账应用」逐步演示每一步的具体做法。步骤一、需求研究Research在动手之前先搞清楚我到底要做什么为什么要做有没有人做过类似的东西很多同学会跳过这一步直接开始写需求文档但花 30 分钟做调研可以避免走很多弯路。1明确你的目标先问自己几个问题我想解决什么问题这个问题真的值得解决吗我希望做出来的东西是什么样的比如你想做一个记账应用那就要想清楚是给自己用还是给别人用主要记录哪些类型的账目需要哪些核心功能2调研类似产品去看看市面上有没有类似的产品它们是怎么做的有什么优点和缺点你可以搜索相关的应用或网站看看别人的开源项目或者直接问 AI「有哪些好用的记账应用它们有什么特点」这一步很重要可以帮你避免重复造轮子也能给你提供灵感和参考。3记录你的发现把你的想法和调研结果记录下来可以用一个简单的文档比如RESEARCH.md。这个文档不需要很正式就像写日记一样记录你的想法和发现就行。以记账应用为例RESEARCH.md可能是这样的# 记账应用需求研究 ## 目标 做一个简单易用的个人记账应用帮助自己养成记账习惯。 ## 调研发现 - 市面上的记账应用功能都太复杂了 - 我只需要快速记录收入和支出 - 最好能看到每月的统计数据 ## 核心需求 1. 快速添加收支记录 2. 按日期查看记录 3. 查看月度统计 4. 数据本地存储步骤二、产品需求文档PRD完成需求研究后你应对要做的产品有了清晰认识。接下来把这些想法整理成一份正式文档明确要做哪些功能、不做哪些功能。这是整个流程中最重要的一步一份好的 PRD 可以让 AI 准确理解你的意图生成高质量的代码。怎么写出一份高质量的 PRD建议先自己写一个简单的需求描述然后让 AI 帮你扩展成完整的 PRD。比如先写我要做一个记账应用能快速记录收支查看每月统计。 要简单易用不要复杂的功能。然后把这句需求发给 AI 大模型比如 Gemini 或 DeepSeek让它扩展请帮我把这个需求扩展成完整的产品需求文档PRD 要包含 1. 产品概述和目标用户 2. 详细的功能列表 3. 功能优先级MVP 和后续版本 4. 界面设计要求 5. 技术栈建议 6. 非功能性需求性能、安全等AI 会生成一份结构化的 PRD你再根据自己的需求修改和完善。PRD 应该包含什么一份完整的 PRD 通常包含产品概述简单介绍这个产品是什么目标用户谁会用这个产品核心功能列出所有要做的功能功能优先级哪些是必须做的哪些是可以后续添加的界面设计简单描述界面应该是什么样的技术栈建议代码风格和架构模式限制条件和边界场景以记账应用为例# 记账应用 PRD ## 产品概述 一个简单的个人记账应用帮助用户快速记录日常收支。 ## 目标用户 需要记账但不想用复杂应用的个人用户。 ## 核心功能 ### 必须做MVP 1. 添加收支记录 - 输入金额 - 选择类型收入/支出 - 选择分类餐饮、交通、工资等 - 添加备注可选 - 选择日期 2. 查看记录列表 - 按日期倒序显示 - 显示金额、类型、分类、备注 - 可以删除记录 3. 月度统计 - 显示当月总收入 - 显示当月总支出 - 显示当月结余 ### 后续可以做 - 数据导出 - 图表展示 - 预算设置 - 多账户管理 ## 界面设计 - 首页显示记录列表和添加按钮 - 添加页面表单输入 - 统计页面展示月度数据这里体现的正是 《Vibe Coding 五大核心心法》 中的MVP 思维先做一个最简单但能用的版本记录收支、查看列表、月度统计把「数据导出、图表、预算、多账户」等放到后续迭代。记住完成比完美更重要。步骤三、技术设计文档Tech Design有了清晰的 PRD 后我们知道「要做什么」了。下一步是确定「用什么技术实现」以及大致的架构。创建一个TECH_DESIGN.md文件包含技术栈选择前端用什么、后端用什么、数据库用什么项目结构代码怎么组织数据模型需要存储哪些数据关键技术点有哪些技术难点需要注意以记账应用为例根据 PRD 需求决定用 React 做前端生态成熟、AI 支持好数据存储用 LocalStorage 就够个人工具不需要后端。技术设计文档如下# 记账应用技术设计 ## 技术栈 - 前端React TypeScript Vite - 样式Tailwind CSS - 数据存储LocalStorage - 部署Vercel ## 项目结构 src/ components/ # 组件 pages/ # 页面 hooks/ # 自定义 Hooks utils/ # 工具函数 types/ # 类型定义 ## 数据模型 ### Transaction交易记录 - id: string - amount: number - type: income | expense - category: string - note: string - date: string ## 关键技术点 1. 使用 LocalStorage 存储数据 2. 使用 React Hooks 管理状态 3. 使用日期库处理日期date-fns如果你不熟悉技术选型可以问 AI「我要做一个记账应用应该用什么技术栈」AI 会给出推荐。想深入了解企业级项目中架构设计、技术选型的完整考量性能、易用性、团队熟悉度、业务量级等可以参考仓库中的 《进阶 - 企业项目开发流程》。步骤四、AI 代理指令AGENTS.mdPRD 和技术设计都准备好了现在要创建一个专门给 AI 看的指令文件告诉 AI 在这个项目中应该遵循什么规则。这个文件可以随便取名比如AI_RULES.md、INSTRUCTIONS.md等但推荐使用AGENTS.md因为这是一个新兴的社区标准。什么是 AGENTS.md正如 《Vibe Coding 概念大全》 所述AGENTS.md 是一种开放的文件格式专门用于给 AI 编程智能体提供项目指令本质上是一种跨工具通用的开放标准。传统的 README.md 是写给人看的介绍项目是什么、怎么用而 AGENTS.md 是写给 AI 看的包含 AI 工作时需要的技术细节。AGENTS.md 的优势在于它是开放标准被数万个开源项目采用。主流的 AI 编程工具如 Cursor、Windsurf、Claude Code、Gemini CLI、GitHub Copilot 等支持自动读取项目根目录下的 AGENTS.md 文件并将其中的指令作为上下文提供给 AI无需你每次手动引用——这就把「项目规范」固化成了 AI 自动读取的「工作手册」。AGENTS.md 应该包含什么一般包含项目概述、开发规范、测试要求、代码风格、注意事项等。继续用记账应用举例根据前面的 PRD 和技术设计可以创建这样的 AGENTS.md# 记账应用 AI 开发指令 ## 项目概述 这是一个简单的个人记账应用使用 React TypeScript 开发。 ## 开发规范 - 使用 TypeScript确保类型安全 - 组件使用函数式组件 Hooks - 使用 Tailwind CSS 编写样式 - 所有数据存储在 LocalStorage ## 代码风格 - 使用 ESLint 和 Prettier - 组件名使用 PascalCase - 函数名使用 camelCase - 常量使用 UPPER_SNAKE_CASE ## 测试要求 - 每个功能完成后手动测试 - 确保数据正确存储和读取 - 测试各种边界情况 ## 注意事项 - 保持代码简洁避免过度设计 - 优先实现核心功能 - 确保移动端适配有了这个文件AI 就知道在这个项目中应该遵循什么规则生成的代码会更加规范和一致。这本质上就是 《Vibe Coding 上下文管理技巧》 中强调的项目级上下文——把技术栈、设计规范、目录结构等背景信息固化下来让 AI 始终「在状态」而不是每次对话都重新解释一遍。步骤五、实现和迭代Build前面 4 步都是准备工作现在终于可以开始写代码了但不是一口气写完而是小步迭代——这正是「迭代优于完美」心法的实践。分步迭代策略对于复杂项目想一步到位是不现实的推荐采用 3 步走的策略1、生成基础框架先让 AI 生成基础项目框架暂时不管功能好不好用确保能够运行项目即可请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求 初始化项目并创建基本的项目结构包括 1. 安装必要的依赖 2. 创建目录结构 3. 配置开发环境 4. 创建基础的路由和页面框架 确保项目能够正常启动。对于有编程基础的同学可以用脚手架或项目模板快速生成基础框架脚手架如create-react-app、create-vite像自动化工具帮你生成项目的基本结构和配置文件项目模板则是预先配置好的项目示例可直接复制使用。用这些工具几分钟就能搭好基础框架不需要从零开始。2、逐步实现核心功能框架搭好后开始实现具体功能。关键原则是先跑通核心业务流程、实现核心功能而不是一开始就追求完美。建议把项目拆分成多个小功能一个一个来实现。比如记账应用可以这样拆分实现数据模型和存储实现添加记录功能实现记录列表显示实现删除功能实现月度统计对于每个功能可以这样和 AI 对话我要实现添加记录功能请根据 PRD.md 和 TECH_DESIGN.md 中的要求 创建一个 AddTransaction 组件包含表单输入和提交功能。每完成一个功能就测试一下功能是否正常工作有没有 Bug界面是否符合预期如果有问题就继续和 AI 对话让它修改。3、优化实现细节核心功能都实现后就可以打磨细节了。在保证不影响功能的前提下优化性能、改进用户体验、美化界面等。打磨完细节后你的 MVP 最小可行产品就完成了之后就可以根据用户反馈和自己的想法扩展更多功能了。另外跑通核心功能后强烈建议用 Git 管理代码每完成一个功能就提交一次这样即使后面出问题也能快速回退。避免 AI 失控的 6 大关键技巧在实际开发中你可能会遇到这些问题AI 输出的内容驴头不对马嘴加了一个新功能后原来的功能就不能用了改了一个 Bug 又来 3 个 Bug这些问题很常见但都有解决办法。1、项目模块化由于 AI 的上下文是有限的随着项目信息量不断增大它可能忘记之前的信息导致生成的代码错误。所以要把项目的功能尽可能隔离开把一个大项目分割成多个小模块。举个例子开发一个电商系统可以把商品管理模块独立出来。当需要 AI 生成添加商品功能的代码时只需要提供商品表的字段设计、添加商品的业务逻辑规则不需要把支付结算、用户会员等关联不大的功能作为上下文提供给 AI。2、限定修改范围AI 生成的代码没有那么可控经常改 A 功能的同时把 B 功能也顺带修改了。这个问题很好解决只要在提示词中限定修改范围即可仅修改 components/AddTransaction.tsx 文件 1. 添加表单验证功能 2. 保持现有的样式和布局 3. 不要改动其他文件3、抽象和复用假如要让 AI 生成 2 个布局一模一样的页面它有时会很死板生成完页面 A 后复制一遍页面 A 的代码来生成页面 B。这样非常不利于大项目的维护以后 AI 改了页面 A说不定页面 B 就忘了改。所以需要主动告诉 AI请帮我抽象这个页面为可复用的组件 让其他页面可以通过传入不同的参数来使用。这样既能减少整个项目的代码量也能减轻 AI 上下文记忆的负担让生成结果更准确。4、版本控制强烈建议使用 Git 版本控制工具。每正确生成一个功能后都提交一次版本在每次 AI 生成新代码之后人工对比一下改动的文件出了问题也能快速还原到之前的版本防止代码丢失每完成一个功能后提交代码 git add . git commit -m 实现添加记录功能Cursor 自带了 Git 对比功能可以很方便地查看代码变化。5、人工控制AI 有时会因缺乏关键上下文信息、或者自身能力的不足而陷入循环比如改来改去总是出现同样的错误或者一直在做无用功。这时就有必要人工介入尝试手动指定上下文、更换 Prompt 换个角度描述问题、清空对话历史重新开始甚至手动修改部分代码给 AI 一个正确的方向。这时候学编程的好处就体现出来了。如果你有一些编程基础就能更好地对 Vibe Coding 进行把控和干预看懂 AI 生成的代码、知道哪里出了问题、手动修正关键部分、引导 AI 往正确的方向走。这也是建议大家在学习 Vibe Coding 的同时也要了解一些编程基础知识的原因。6、多元 AI 协作不同 AI 大模型擅长不同任务。如果单一大模型无法正常完成工作可以利用其他大模型生成「教 AI 做事的方法和指令」。比如你在 Cursor 中使用 GPT 生成的代码有问题可以把代码和错误信息复制给 Claude 或 Gemini让它分析问题并给出修改建议把修改建议再告诉 GPT让它修改代码这种多模型协作的方式可以大大增加解决问题的可能性。反面教材需求不清导致项目翻车在 《Vibe Coding 项目实战导读》 中已预告项目实战板块会分享大量成功案例。这里先看一个反面案例看看不按流程做会出现什么问题。小阿巴想做一个待办事项应用他直接打开 AI 编程工具输入「帮我做一个待办事项应用」。AI 生成了一个应用看起来还不错但小阿巴很快发现了问题没有分类功能、没有优先级设置、界面风格也不喜欢。于是他继续对话「加上分类功能」AI 添加了分类但破坏了原有的布局小阿巴又说「修复布局问题」AI 修复了布局但又引入了新的 Bug。就这样改来改去最后代码变成了一团糟小阿巴不得不放弃这个项目。问题出在哪里一开始没有明确需求导致 AI 只能按照自己的理解生成代码每次修改都是「头痛医头脚痛医脚」没有整体规划没有文档记录AI 根本不知道项目的整体设计。如果小阿巴一开始就按照 5 步流程来做写清楚 PRD 和技术设计就不会出现这些问题了。实战技巧让 AI 生成的代码更准确掌握了完整的开发流程后再分享几个实战技巧让 AI 生成的代码更准确、更符合你的预期。更多经验技巧可以在本套教程的【经验技巧】板块查看如 《02 Vibe Coding 对话工程技巧》这里列举几个至关重要的。1、优化你的 PromptPrompt 的质量直接决定了 AI 生成代码的准确性。一个好的 Prompt 应该包含三个要素明确 AI 的角色、提供具体的细节要求、拆解复杂任务。比如你可以先告诉 AI 它的角色「你是一个经验丰富的前端开发工程师擅长使用 React 和 TypeScript 开发现代化的 Web 应用。」这样 AI 就知道应该以什么视角来工作然后再提供具体的细节要求。❌ 不好的 Prompt帮我做一个按钮✅ 好的 Prompt创建一个主要操作按钮组件 - 使用 Tailwind CSS - 支持 primary、secondary、danger 三种样式 - 支持 loading 状态显示加载动画 - 支持 disabled 状态 - 点击时有反馈动画还要学会拆解复杂任务不要让 AI 一次性完成复杂的任务而是拆解成多个小任务❌ 不好的 Prompt实现用户管理功能✅ 好的 Prompt第一步创建用户数据模型和类型定义 第二步实现用户注册接口 第三步实现用户登录接口 第四步实现用户信息查询接口 现在请先完成第一步。如果有参考的代码或设计也可以提供给 AI参考这个登录页面的设计风格[截图或链接]创建一个注册页面保持风格一致。2、注意操作系统差异AI 更熟悉 Linux 或 Mac 系统的终端命令。如果你使用 Windows 系统有两个选择安装 WSLWindows Subsystem for Linux使用 Linux 环境开发或者明确告诉 AI 你在使用 Windows 系统。可以在 AGENTS.md 中明确说明## 开发环境 - 操作系统Windows - 终端PowerShell - 请使用 Windows 兼容的命令或者在对话时明确说明「我使用的是 Windows 系统请提供 Windows 兼容的命令。」3、处理 AI 陷入循环的情况有时 AI 会陷入循环反复做同样的事情或者一直无法解决某个问题。可以尝试几种方法1清空上下文。在 Cursor 中清空当前对话重新开始但先保存重要的信息。2换个角度提问不要重复同样的问题。比如原问题是「为什么登录功能不工作」换个角度请检查登录流程的每一步 1. 前端是否正确发送了请求 2. 后端是否收到了请求 3. 数据库查询是否正确 4. 返回的数据格式是否正确 请逐步排查并告诉我哪一步出了问题。3提供更多上下文。AI 可能缺少关键信息把相关的文件、错误信息、日志等都提供给它我遇到了登录问题相关信息如下 1. 前端代码[粘贴代码] 2. 后端代码[粘贴代码] 3. 错误信息[粘贴错误] 4. 网络请求[粘贴请求和响应] 请帮我分析问题出在哪里。如果实在解决不了可以寻求其他 AI 的帮助把代码和问题复制给 Claude 或 ChatGPT让它们分析它们可能会给出不同的解决方案。4、让 AI 帮你优化 Prompt如果你不确定自己的 Prompt 是否够好可以让 AI 帮你优化我想让 AI 帮我实现用户登录功能。 我现在的 Prompt 是实现登录功能 请帮我优化这个 Prompt让它更详细、更准确 让 AI 能生成高质量的代码。AI 会给你一个优化后的 Prompt包含更多的细节和要求。5、利用 AI 的代码审查能力完成功能后可以让 AI 帮你审查代码请审查我的登录功能代码检查 1. 是否有安全问题如密码明文传输 2. 是否有性能问题 3. 代码是否符合最佳实践 4. 是否有潜在的 Bug 5. 用户体验是否可以改进 请给出具体的改进建议。AI 的审查往往能发现一些你没注意到的问题。对于核心功能还可以让多个不同的 AI 大模型同时审查交叉验证。写在最后规划是 Vibe Coding 的第一心法看到这里你可能会觉得这个流程好像有点复杂啊真的有必要吗答案是绝对有必要。很多用 Vibe Coding 做的项目经验都印证了这一点那些一开始就做好规划的项目开发过程都非常顺利最后也都成功上线了而那些「想到哪做到哪」的项目大多数都半途而废了。Planning is Everything这是 Vibe Coding 的第一心法。虽然前期需要花时间写文档但后期开发会非常顺利AI 生成的代码质量也更高。而且好的规划不会限制你的创造力反而会让你更加自由——因为你知道自己在做什么知道每一步要往哪里走。当然这个流程也不是死板的随着经验增加你会找到适合自己的节奏。但在一开始强烈建议按照这个流程来做养成好的习惯。最后再强调一下几个关键点规划比代码更重要PRD 和技术设计是 AI 的「项目宪法」文档是 AI 的指南针RESEARCH.md、PRD.md、TECH_DESIGN.md、AGENTS.md 层层递进让 AI 始终理解你的意图小步迭代不失控生成框架 → 逐步实现核心功能 → 优化细节每个功能完成后立即测试模块化是大项目的关键控制 AI 上下文把大项目拆成小模块版本控制是你的后悔药每完成一个功能就提交一次出问题能快速回退现在你已经掌握了完整的 Vibe Coding 项目开发流程。如果你想进一步了解企业级项目是如何通过需求评审、架构设计、测试验证、CI/CD 发布等更严谨的环节来保证质量的可以继续阅读仓库中的 《进阶 - 企业项目开发流程》它对比了个人项目与企业项目在需求、设计、开发、测试、部署、上线后各环节的差异。之后就可以动手实践了——挑一个简单的个人工具项目用这套 5 步流程把它完整地做出来。赞分享文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载相关推荐Vibe Coding 项目开发流程从想法到商业级产品的 5 步工作流实战指南Vibe Coding 项目开发流程从想法到商业级产品的 5 步工作流实战指南 本文是《Vibe Coding 零基础教程》项目实战板块的核心方法论文章完整文档教程知识库人工智能Vibe Coding 项目开发流程从想法到商业级产品的 5 步方法论Vibe Coding 项目开发流程从想法到商业级产品的 5 步方法论 本文是程序员鱼皮 Vibe Coding 零基础教程「项目实战」板块的纲领性文章系统文档教程知识库人工智能docker-mailserver基于 Docker 的全栈邮件服务器SMTP / IMAP / LDAP / 反垃圾 / 反病毒部署指南docker mailserver基于 Docker 的全栈邮件服务器SMTP / IMAP / LDAP / 反垃圾 / 反病毒部署指南 docker文档教程知识库人工智能上一篇Game Save Manager核心功能深度解析智能检测引擎与跨平台支持下一篇终极Cassandra CQL语言完全指南从基础语法到高级查询实战技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vibe Coding 项目开发流程：从想法到商业级产品的五步工作流实战指南（ai-guide）
文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载在 ai-guide 仓库的《Vibe Coding 零基础教程》项目中本文为你系统拆解一条从「模糊想法」到「可上线商业级产品」的完整 Vibe Coding 工作流。读完本文你将掌握需求研究Research、产品需求文档PRD、技术设计文档Tech Design、AI 代理指令AGENTS.md、实现与迭代Build五个关键步骤并学会通过模块化、限定修改范围、版本控制等技巧避免 AI 生成代码时「失控翻车」真正从「会用 AI 写代码」进阶到「能独立交付产品」。为什么 Vibe Coding 需要标准流程很多同学刚开始用 AI 做项目时都会犯同一个错误打开 AI 编程工具后直接就开始和 AI 聊天让它生成代码。对于小项目来说这样做没问题但如果你想做一个完整的商业级项目这样就会出问题——一开始可能还挺顺利但很快就会发现 AI 生成的代码越来越乱完全不是自己想要的。改来改去、左右脑互搏最后不得不推倒重来浪费了大量时间。原因很简单你跳过了最重要的一步——规划。在传统编程中如果你对项目规划不清楚最多就是写出来的代码质量不高但至少你知道自己在写什么。而在 Vibe Coding 中情况完全不同如果你对项目规划不清楚AI 就会「自由发挥」生成一堆你看不懂、也不需要的代码。AI 不是魔法它只是一个非常强大的执行者。你告诉它做什么它就做什么。如果你自己都不知道要做什么AI 自然也无法帮你做出理想的产品。正如仓库中 《Vibe Coding 五大核心心法》 所强调的第一心法Planning is Everything——花在规划上的 5 分钟能省下你在返工上的 30 分钟。因此一套清晰的开发流程可以帮你明确项目目标和需求让 AI 理解你的意图避免项目失控提高开发效率做出真正有用的产品完整的 5 步工作流这套流程是在实践中总结出来的参考了很多优秀开发者的经验共包含 5 个步骤需求研究Research产品需求文档PRD技术设计文档Tech DesignAI 代理指令AGENTS.md实现和迭代Build后续的实战板块文章如 《02 Vibe Coding 个人工具开发》都会基于这套流程展开。本教程 《00 Vibe Coding 项目实战导读》 也明确指出先学习标准开发流程再动手实战是做好项目的基础。下面用一个贯穿全文的案例——「个人记账应用」逐步演示每一步的具体做法。步骤一、需求研究Research在动手之前先搞清楚我到底要做什么为什么要做有没有人做过类似的东西很多同学会跳过这一步直接开始写需求文档但花 30 分钟做调研可以避免走很多弯路。1明确你的目标先问自己几个问题我想解决什么问题这个问题真的值得解决吗我希望做出来的东西是什么样的比如你想做一个记账应用那就要想清楚是给自己用还是给别人用主要记录哪些类型的账目需要哪些核心功能2调研类似产品去看看市面上有没有类似的产品它们是怎么做的有什么优点和缺点你可以搜索相关的应用或网站看看别人的开源项目或者直接问 AI「有哪些好用的记账应用它们有什么特点」这一步很重要可以帮你避免重复造轮子也能给你提供灵感和参考。3记录你的发现把你的想法和调研结果记录下来可以用一个简单的文档比如RESEARCH.md。这个文档不需要很正式就像写日记一样记录你的想法和发现就行。以记账应用为例RESEARCH.md可能是这样的# 记账应用需求研究 ## 目标 做一个简单易用的个人记账应用帮助自己养成记账习惯。 ## 调研发现 - 市面上的记账应用功能都太复杂了 - 我只需要快速记录收入和支出 - 最好能看到每月的统计数据 ## 核心需求 1. 快速添加收支记录 2. 按日期查看记录 3. 查看月度统计 4. 数据本地存储步骤二、产品需求文档PRD完成需求研究后你应对要做的产品有了清晰认识。接下来把这些想法整理成一份正式文档明确要做哪些功能、不做哪些功能。这是整个流程中最重要的一步一份好的 PRD 可以让 AI 准确理解你的意图生成高质量的代码。怎么写出一份高质量的 PRD建议先自己写一个简单的需求描述然后让 AI 帮你扩展成完整的 PRD。比如先写我要做一个记账应用能快速记录收支查看每月统计。 要简单易用不要复杂的功能。然后把这句需求发给 AI 大模型比如 Gemini 或 DeepSeek让它扩展请帮我把这个需求扩展成完整的产品需求文档PRD 要包含 1. 产品概述和目标用户 2. 详细的功能列表 3. 功能优先级MVP 和后续版本 4. 界面设计要求 5. 技术栈建议 6. 非功能性需求性能、安全等AI 会生成一份结构化的 PRD你再根据自己的需求修改和完善。PRD 应该包含什么一份完整的 PRD 通常包含产品概述简单介绍这个产品是什么目标用户谁会用这个产品核心功能列出所有要做的功能功能优先级哪些是必须做的哪些是可以后续添加的界面设计简单描述界面应该是什么样的技术栈建议代码风格和架构模式限制条件和边界场景以记账应用为例# 记账应用 PRD ## 产品概述 一个简单的个人记账应用帮助用户快速记录日常收支。 ## 目标用户 需要记账但不想用复杂应用的个人用户。 ## 核心功能 ### 必须做MVP 1. 添加收支记录 - 输入金额 - 选择类型收入/支出 - 选择分类餐饮、交通、工资等 - 添加备注可选 - 选择日期 2. 查看记录列表 - 按日期倒序显示 - 显示金额、类型、分类、备注 - 可以删除记录 3. 月度统计 - 显示当月总收入 - 显示当月总支出 - 显示当月结余 ### 后续可以做 - 数据导出 - 图表展示 - 预算设置 - 多账户管理 ## 界面设计 - 首页显示记录列表和添加按钮 - 添加页面表单输入 - 统计页面展示月度数据这里体现的正是 《Vibe Coding 五大核心心法》 中的MVP 思维先做一个最简单但能用的版本记录收支、查看列表、月度统计把「数据导出、图表、预算、多账户」等放到后续迭代。记住完成比完美更重要。步骤三、技术设计文档Tech Design有了清晰的 PRD 后我们知道「要做什么」了。下一步是确定「用什么技术实现」以及大致的架构。创建一个TECH_DESIGN.md文件包含技术栈选择前端用什么、后端用什么、数据库用什么项目结构代码怎么组织数据模型需要存储哪些数据关键技术点有哪些技术难点需要注意以记账应用为例根据 PRD 需求决定用 React 做前端生态成熟、AI 支持好数据存储用 LocalStorage 就够个人工具不需要后端。技术设计文档如下# 记账应用技术设计 ## 技术栈 - 前端React TypeScript Vite - 样式Tailwind CSS - 数据存储LocalStorage - 部署Vercel ## 项目结构 src/ components/ # 组件 pages/ # 页面 hooks/ # 自定义 Hooks utils/ # 工具函数 types/ # 类型定义 ## 数据模型 ### Transaction交易记录 - id: string - amount: number - type: income | expense - category: string - note: string - date: string ## 关键技术点 1. 使用 LocalStorage 存储数据 2. 使用 React Hooks 管理状态 3. 使用日期库处理日期date-fns如果你不熟悉技术选型可以问 AI「我要做一个记账应用应该用什么技术栈」AI 会给出推荐。想深入了解企业级项目中架构设计、技术选型的完整考量性能、易用性、团队熟悉度、业务量级等可以参考仓库中的 《进阶 - 企业项目开发流程》。步骤四、AI 代理指令AGENTS.mdPRD 和技术设计都准备好了现在要创建一个专门给 AI 看的指令文件告诉 AI 在这个项目中应该遵循什么规则。这个文件可以随便取名比如AI_RULES.md、INSTRUCTIONS.md等但推荐使用AGENTS.md因为这是一个新兴的社区标准。什么是 AGENTS.md正如 《Vibe Coding 概念大全》 所述AGENTS.md 是一种开放的文件格式专门用于给 AI 编程智能体提供项目指令本质上是一种跨工具通用的开放标准。传统的 README.md 是写给人看的介绍项目是什么、怎么用而 AGENTS.md 是写给 AI 看的包含 AI 工作时需要的技术细节。AGENTS.md 的优势在于它是开放标准被数万个开源项目采用。主流的 AI 编程工具如 Cursor、Windsurf、Claude Code、Gemini CLI、GitHub Copilot 等支持自动读取项目根目录下的 AGENTS.md 文件并将其中的指令作为上下文提供给 AI无需你每次手动引用——这就把「项目规范」固化成了 AI 自动读取的「工作手册」。AGENTS.md 应该包含什么一般包含项目概述、开发规范、测试要求、代码风格、注意事项等。继续用记账应用举例根据前面的 PRD 和技术设计可以创建这样的 AGENTS.md# 记账应用 AI 开发指令 ## 项目概述 这是一个简单的个人记账应用使用 React TypeScript 开发。 ## 开发规范 - 使用 TypeScript确保类型安全 - 组件使用函数式组件 Hooks - 使用 Tailwind CSS 编写样式 - 所有数据存储在 LocalStorage ## 代码风格 - 使用 ESLint 和 Prettier - 组件名使用 PascalCase - 函数名使用 camelCase - 常量使用 UPPER_SNAKE_CASE ## 测试要求 - 每个功能完成后手动测试 - 确保数据正确存储和读取 - 测试各种边界情况 ## 注意事项 - 保持代码简洁避免过度设计 - 优先实现核心功能 - 确保移动端适配有了这个文件AI 就知道在这个项目中应该遵循什么规则生成的代码会更加规范和一致。这本质上就是 《Vibe Coding 上下文管理技巧》 中强调的项目级上下文——把技术栈、设计规范、目录结构等背景信息固化下来让 AI 始终「在状态」而不是每次对话都重新解释一遍。步骤五、实现和迭代Build前面 4 步都是准备工作现在终于可以开始写代码了但不是一口气写完而是小步迭代——这正是「迭代优于完美」心法的实践。分步迭代策略对于复杂项目想一步到位是不现实的推荐采用 3 步走的策略1、生成基础框架先让 AI 生成基础项目框架暂时不管功能好不好用确保能够运行项目即可请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求 初始化项目并创建基本的项目结构包括 1. 安装必要的依赖 2. 创建目录结构 3. 配置开发环境 4. 创建基础的路由和页面框架 确保项目能够正常启动。对于有编程基础的同学可以用脚手架或项目模板快速生成基础框架脚手架如create-react-app、create-vite像自动化工具帮你生成项目的基本结构和配置文件项目模板则是预先配置好的项目示例可直接复制使用。用这些工具几分钟就能搭好基础框架不需要从零开始。2、逐步实现核心功能框架搭好后开始实现具体功能。关键原则是先跑通核心业务流程、实现核心功能而不是一开始就追求完美。建议把项目拆分成多个小功能一个一个来实现。比如记账应用可以这样拆分实现数据模型和存储实现添加记录功能实现记录列表显示实现删除功能实现月度统计对于每个功能可以这样和 AI 对话我要实现添加记录功能请根据 PRD.md 和 TECH_DESIGN.md 中的要求 创建一个 AddTransaction 组件包含表单输入和提交功能。每完成一个功能就测试一下功能是否正常工作有没有 Bug界面是否符合预期如果有问题就继续和 AI 对话让它修改。3、优化实现细节核心功能都实现后就可以打磨细节了。在保证不影响功能的前提下优化性能、改进用户体验、美化界面等。打磨完细节后你的 MVP 最小可行产品就完成了之后就可以根据用户反馈和自己的想法扩展更多功能了。另外跑通核心功能后强烈建议用 Git 管理代码每完成一个功能就提交一次这样即使后面出问题也能快速回退。避免 AI 失控的 6 大关键技巧在实际开发中你可能会遇到这些问题AI 输出的内容驴头不对马嘴加了一个新功能后原来的功能就不能用了改了一个 Bug 又来 3 个 Bug这些问题很常见但都有解决办法。1、项目模块化由于 AI 的上下文是有限的随着项目信息量不断增大它可能忘记之前的信息导致生成的代码错误。所以要把项目的功能尽可能隔离开把一个大项目分割成多个小模块。举个例子开发一个电商系统可以把商品管理模块独立出来。当需要 AI 生成添加商品功能的代码时只需要提供商品表的字段设计、添加商品的业务逻辑规则不需要把支付结算、用户会员等关联不大的功能作为上下文提供给 AI。2、限定修改范围AI 生成的代码没有那么可控经常改 A 功能的同时把 B 功能也顺带修改了。这个问题很好解决只要在提示词中限定修改范围即可仅修改 components/AddTransaction.tsx 文件 1. 添加表单验证功能 2. 保持现有的样式和布局 3. 不要改动其他文件3、抽象和复用假如要让 AI 生成 2 个布局一模一样的页面它有时会很死板生成完页面 A 后复制一遍页面 A 的代码来生成页面 B。这样非常不利于大项目的维护以后 AI 改了页面 A说不定页面 B 就忘了改。所以需要主动告诉 AI请帮我抽象这个页面为可复用的组件 让其他页面可以通过传入不同的参数来使用。这样既能减少整个项目的代码量也能减轻 AI 上下文记忆的负担让生成结果更准确。4、版本控制强烈建议使用 Git 版本控制工具。每正确生成一个功能后都提交一次版本在每次 AI 生成新代码之后人工对比一下改动的文件出了问题也能快速还原到之前的版本防止代码丢失每完成一个功能后提交代码 git add . git commit -m 实现添加记录功能Cursor 自带了 Git 对比功能可以很方便地查看代码变化。5、人工控制AI 有时会因缺乏关键上下文信息、或者自身能力的不足而陷入循环比如改来改去总是出现同样的错误或者一直在做无用功。这时就有必要人工介入尝试手动指定上下文、更换 Prompt 换个角度描述问题、清空对话历史重新开始甚至手动修改部分代码给 AI 一个正确的方向。这时候学编程的好处就体现出来了。如果你有一些编程基础就能更好地对 Vibe Coding 进行把控和干预看懂 AI 生成的代码、知道哪里出了问题、手动修正关键部分、引导 AI 往正确的方向走。这也是建议大家在学习 Vibe Coding 的同时也要了解一些编程基础知识的原因。6、多元 AI 协作不同 AI 大模型擅长不同任务。如果单一大模型无法正常完成工作可以利用其他大模型生成「教 AI 做事的方法和指令」。比如你在 Cursor 中使用 GPT 生成的代码有问题可以把代码和错误信息复制给 Claude 或 Gemini让它分析问题并给出修改建议把修改建议再告诉 GPT让它修改代码这种多模型协作的方式可以大大增加解决问题的可能性。反面教材需求不清导致项目翻车在 《Vibe Coding 项目实战导读》 中已预告项目实战板块会分享大量成功案例。这里先看一个反面案例看看不按流程做会出现什么问题。小阿巴想做一个待办事项应用他直接打开 AI 编程工具输入「帮我做一个待办事项应用」。AI 生成了一个应用看起来还不错但小阿巴很快发现了问题没有分类功能、没有优先级设置、界面风格也不喜欢。于是他继续对话「加上分类功能」AI 添加了分类但破坏了原有的布局小阿巴又说「修复布局问题」AI 修复了布局但又引入了新的 Bug。就这样改来改去最后代码变成了一团糟小阿巴不得不放弃这个项目。问题出在哪里一开始没有明确需求导致 AI 只能按照自己的理解生成代码每次修改都是「头痛医头脚痛医脚」没有整体规划没有文档记录AI 根本不知道项目的整体设计。如果小阿巴一开始就按照 5 步流程来做写清楚 PRD 和技术设计就不会出现这些问题了。实战技巧让 AI 生成的代码更准确掌握了完整的开发流程后再分享几个实战技巧让 AI 生成的代码更准确、更符合你的预期。更多经验技巧可以在本套教程的【经验技巧】板块查看如 《02 Vibe Coding 对话工程技巧》这里列举几个至关重要的。1、优化你的 PromptPrompt 的质量直接决定了 AI 生成代码的准确性。一个好的 Prompt 应该包含三个要素明确 AI 的角色、提供具体的细节要求、拆解复杂任务。比如你可以先告诉 AI 它的角色「你是一个经验丰富的前端开发工程师擅长使用 React 和 TypeScript 开发现代化的 Web 应用。」这样 AI 就知道应该以什么视角来工作然后再提供具体的细节要求。❌ 不好的 Prompt帮我做一个按钮✅ 好的 Prompt创建一个主要操作按钮组件 - 使用 Tailwind CSS - 支持 primary、secondary、danger 三种样式 - 支持 loading 状态显示加载动画 - 支持 disabled 状态 - 点击时有反馈动画还要学会拆解复杂任务不要让 AI 一次性完成复杂的任务而是拆解成多个小任务❌ 不好的 Prompt实现用户管理功能✅ 好的 Prompt第一步创建用户数据模型和类型定义 第二步实现用户注册接口 第三步实现用户登录接口 第四步实现用户信息查询接口 现在请先完成第一步。如果有参考的代码或设计也可以提供给 AI参考这个登录页面的设计风格[截图或链接]创建一个注册页面保持风格一致。2、注意操作系统差异AI 更熟悉 Linux 或 Mac 系统的终端命令。如果你使用 Windows 系统有两个选择安装 WSLWindows Subsystem for Linux使用 Linux 环境开发或者明确告诉 AI 你在使用 Windows 系统。可以在 AGENTS.md 中明确说明## 开发环境 - 操作系统Windows - 终端PowerShell - 请使用 Windows 兼容的命令或者在对话时明确说明「我使用的是 Windows 系统请提供 Windows 兼容的命令。」3、处理 AI 陷入循环的情况有时 AI 会陷入循环反复做同样的事情或者一直无法解决某个问题。可以尝试几种方法1清空上下文。在 Cursor 中清空当前对话重新开始但先保存重要的信息。2换个角度提问不要重复同样的问题。比如原问题是「为什么登录功能不工作」换个角度请检查登录流程的每一步 1. 前端是否正确发送了请求 2. 后端是否收到了请求 3. 数据库查询是否正确 4. 返回的数据格式是否正确 请逐步排查并告诉我哪一步出了问题。3提供更多上下文。AI 可能缺少关键信息把相关的文件、错误信息、日志等都提供给它我遇到了登录问题相关信息如下 1. 前端代码[粘贴代码] 2. 后端代码[粘贴代码] 3. 错误信息[粘贴错误] 4. 网络请求[粘贴请求和响应] 请帮我分析问题出在哪里。如果实在解决不了可以寻求其他 AI 的帮助把代码和问题复制给 Claude 或 ChatGPT让它们分析它们可能会给出不同的解决方案。4、让 AI 帮你优化 Prompt如果你不确定自己的 Prompt 是否够好可以让 AI 帮你优化我想让 AI 帮我实现用户登录功能。 我现在的 Prompt 是实现登录功能 请帮我优化这个 Prompt让它更详细、更准确 让 AI 能生成高质量的代码。AI 会给你一个优化后的 Prompt包含更多的细节和要求。5、利用 AI 的代码审查能力完成功能后可以让 AI 帮你审查代码请审查我的登录功能代码检查 1. 是否有安全问题如密码明文传输 2. 是否有性能问题 3. 代码是否符合最佳实践 4. 是否有潜在的 Bug 5. 用户体验是否可以改进 请给出具体的改进建议。AI 的审查往往能发现一些你没注意到的问题。对于核心功能还可以让多个不同的 AI 大模型同时审查交叉验证。写在最后规划是 Vibe Coding 的第一心法看到这里你可能会觉得这个流程好像有点复杂啊真的有必要吗答案是绝对有必要。很多用 Vibe Coding 做的项目经验都印证了这一点那些一开始就做好规划的项目开发过程都非常顺利最后也都成功上线了而那些「想到哪做到哪」的项目大多数都半途而废了。Planning is Everything这是 Vibe Coding 的第一心法。虽然前期需要花时间写文档但后期开发会非常顺利AI 生成的代码质量也更高。而且好的规划不会限制你的创造力反而会让你更加自由——因为你知道自己在做什么知道每一步要往哪里走。当然这个流程也不是死板的随着经验增加你会找到适合自己的节奏。但在一开始强烈建议按照这个流程来做养成好的习惯。最后再强调一下几个关键点规划比代码更重要PRD 和技术设计是 AI 的「项目宪法」文档是 AI 的指南针RESEARCH.md、PRD.md、TECH_DESIGN.md、AGENTS.md 层层递进让 AI 始终理解你的意图小步迭代不失控生成框架 → 逐步实现核心功能 → 优化细节每个功能完成后立即测试模块化是大项目的关键控制 AI 上下文把大项目拆成小模块版本控制是你的后悔药每完成一个功能就提交一次出问题能快速回退现在你已经掌握了完整的 Vibe Coding 项目开发流程。如果你想进一步了解企业级项目是如何通过需求评审、架构设计、测试验证、CI/CD 发布等更严谨的环节来保证质量的可以继续阅读仓库中的 《进阶 - 企业项目开发流程》它对比了个人项目与企业项目在需求、设计、开发、测试、部署、上线后各环节的差异。之后就可以动手实践了——挑一个简单的个人工具项目用这套 5 步流程把它完整地做出来。赞分享文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载相关推荐Vibe Coding 项目开发流程从想法到商业级产品的 5 步工作流实战指南Vibe Coding 项目开发流程从想法到商业级产品的 5 步工作流实战指南 本文是《Vibe Coding 零基础教程》项目实战板块的核心方法论文章完整文档教程知识库人工智能Vibe Coding 项目开发流程从想法到商业级产品的 5 步方法论Vibe Coding 项目开发流程从想法到商业级产品的 5 步方法论 本文是程序员鱼皮 Vibe Coding 零基础教程「项目实战」板块的纲领性文章系统文档教程知识库人工智能docker-mailserver基于 Docker 的全栈邮件服务器SMTP / IMAP / LDAP / 反垃圾 / 反病毒部署指南docker mailserver基于 Docker 的全栈邮件服务器SMTP / IMAP / LDAP / 反垃圾 / 反病毒部署指南 docker文档教程知识库人工智能上一篇Game Save Manager核心功能深度解析智能检测引擎与跨平台支持下一篇终极Cassandra CQL语言完全指南从基础语法到高级查询实战技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考