easy-vibe 实战：构建系统化的 AI 辅助开发工作流（新功能、Bug 修复、重构与代码审查全流程）

easy-vibe 实战构建系统化的 AI 辅助开发工作流新功能、Bug 修复、重构与代码审查全流程【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe在之前的章节中我们已经学会了使用 AI IDE 编写代码、用 Git 管理版本、设计 API 接口。但真正面对一个上千文件的真实项目时你仍然会遇到这样的问题我该从哪里开始老板让我加新功能但我不熟悉这部分代码这个 Bug 到底在哪重构会不会改出问题。这些问题的本质只有一个如何在真实的开发场景中高效地使用 AI 工具完成工作。本文基于 easy-vibe 课程体系系统讲解一套可复制的 AI 辅助开发工作流——从理解 AI 的能力边界到四类项目的差异化开发策略再到新功能开发、Bug 修复、代码重构、代码审查的完整流程以及如何通过CLAUDE.md/AGENTS.md建立项目知识库。读完本文你将掌握一套在任何开发场景下都能稳定复用的 AI 协作方法论而不是零散的提示词技巧。前置知识在学习本节之前建议你先了解以下内容AI IDE 基础easy-vibe Stage-1 —— 掌握 AI IDE 的基本使用Git 与 GitHub 工作流 —— 了解代码版本管理大模型辅助编写 API 接口代码 —— 了解 AI 辅助开发的基本概念::: info 你将学到理解 AI 在开发流程中的定位和能力边界掌握不同项目类型的 AI 辅助开发策略学会在新功能开发、Bug 修复、代码重构等场景下使用 Claude Code 等工具建立项目知识库提高与 AI 工具的协作效率掌握提高 AI 协作效率的实用技巧:::1. 理解 AI 的能力边界在开始使用 AI 辅助开发之前我们需要先理解 AI 能做什么、不能做什么。只有建立正确的认知才能构建正确的协作方式。1.1 AI 擅长什么把 AI 想象成一个很聪明但需要明确指令的助手。它能根据你的描述快速生成代码框架也能在几秒钟内读完几千行代码、帮你定位到需要的部分。遇到明显的语法错误、常见的安全漏洞它也能帮你发现。那些重复性的工作——批量重命名变量、格式化代码、生成文档注释——交给它最合适不过。从 easy-vibe 仓库的实际使用方式来看AI 的快速生成骨架能力在 examples 目录中体现得非常直观例如 examples/trae-block-game/prompt.txt 只用了一句话帮我做一个像这样的方块小游戏。人物可以走动也可以放方块。做好后帮我打开看看AI 就能据此生成一个完整的可运行页面examples/trae-3d-block-game 更是把这一句话需求扩展成了带 Vite 构建配置、Electron 壳的完整项目。这正是AI 擅长把清晰指令快速翻译成代码的典型场景。简单来说AI 擅长的是那些有明确规则、可以自动化的工作。1.2 AI 不擅长什么但 AI 也有它的局限性它不了解你的业务逻辑——除非你详细告诉它否则它不知道你们公司的订单流程是怎么走的技术选型、架构设计这种需要权衡利弊的决策它做不了因为这需要你的经验和对项目的理解团队的特殊规范如所有 API 都要加日志错误码必须用枚举AI 不会天然知道需要你配置或明确告诉它。最重要的是AI 生成的代码不能直接用你必须审查和测试。它可能写出看起来对、实际有问题的代码也可能忽略边界情况。1.3 怎么和 AI 协作理解了 AI 的能力边界协作方式就清楚了你负责想清楚要做什么、做决策、把关质量AI 负责执行具体的编码工作、查找信息、发现明显的问题。这就像和一个初级开发者合作你告诉他要做什么他去实现然后你审查代码。区别是 AI 的执行速度快得多但判断力不如人。2. 不同项目类型的开发策略不同类型的项目开发方式和 AI 使用策略也不一样。选择合适的策略可以大大提高开发效率。2.1 全新项目从零开始项目特点没有历史包袱可以自由设计需要建立项目结构和代码规范适合快速迭代和试错推荐工作流第一步规划项目结构在开始编码之前先让 AI 帮你规划项目结构和技术选型我要做一个任务管理应用功能包括 - 用户注册和登录 - 创建、编辑、删除任务 - 任务分类和标签 - 任务提醒 请帮我 1. 推荐合适的技术栈 2. 设计项目目录结构 3. 规划数据库表结构第二步搭建基础框架根据规划让 AI 创建基础的项目结构按照刚才的规划帮我 1. 创建项目目录结构 2. 初始化配置文件package.json、.env 等 3. 创建基础的服务器代码第三步逐个实现功能按照优先级逐个实现功能模块现在实现用户注册功能要求 - 邮箱和密码注册 - 密码加密存储 - 邮箱验证关键点一开始就建立好代码规范让 AI 按照规范生成代码每完成一个功能模块就测试验证及时更新项目文档仓库实例easy-vibe 本身就是从零开始 快速迭代的产物。它的 package.json 在一开始就明确了技术栈VitePress Vue 3、Node.js 版本要求engines: node 18、代码规范工具Prettier、ESLint和完整脚本体系dev/build/test/format而 AGENTS.md 则把目录结构、构建命令、命名规范沉淀成了 AI 可直接读取的项目知识。新项目在第一天就做好这些基础设施后续 AI 协作的效率会高得多。2.2 成熟项目已有大量代码项目特点代码量大有历史规范需要保持代码风格一致性修改需要考虑影响范围推荐工作流第一步了解项目结构在修改代码之前先让 AI 帮你了解项目这是一个电商项目我需要添加优惠券功能。 请帮我 1. 分析项目的整体结构 2. 找到订单相关的代码 3. 看看其他类似功能是怎么实现的第二步找到参考代码让 AI 找到项目中类似的实现作为参考找一下项目中其他促销活动如满减、折扣是怎么实现的第三步模仿现有风格让 AI 参考现有代码的风格来实现新功能参考满减活动的实现方式帮我实现优惠券功能 保持相同的代码风格和目录结构关键点先理解再动手避免破坏现有架构保持代码风格一致性修改后要测试相关功能2.3 快速原型验证想法项目特点追求速度不太在意代码质量用于验证产品想法或技术方案可能会被丢弃或重写推荐工作流直接描述需求快速实现做一个简单的待办事项应用要求 - 能添加、删除、标记完成任务 - 数据存储在本地 - 界面简洁能用就行快速迭代加个搜索功能 改成深色主题 添加任务分类关键点不用太在意代码质量和规范快速验证想法及时调整方向如果原型成功后续需要重构仓库实例easy-vibe 的 examples/trae-block-game 和 examples/trae-linear-dashboard 正是快速原型策略的产物——先用一句需求描述快速生成单文件页面验证想法后再决定是否扩展成完整项目如 examples/trae-3d-block-game 那样补上 Vite 配置与 Electron 壳。2.4 维护项目修 Bug 为主项目特点代码已经稳定主要是修复问题需要快速定位问题修改要谨慎避免引入新问题推荐工作流第一步定位问题用户反馈点击提交订单按钮后页面卡住不动 控制台报错TypeError: Cannot read property id of undefined 请帮我 1. 分析可能的原因 2. 找到相关的代码第二步分析根因看看这个错误是在什么情况下产生的 检查一下数据流向第三步实施修复修复这个问题并 1. 添加防御性代码避免类似问题 2. 添加错误提示提升用户体验关键点修复后要充分测试确保不影响其他功能添加防御性代码提高系统健壮性记录问题和解决方案方便后续参考3. 常见开发任务的工作流在日常开发中我们会遇到各种不同的任务。下面介绍几种最常见任务的 AI 辅助工作流。无论是使用 Claude Code、Cursor 还是其他 AI 编码工具这套人负责决策、AI 负责执行的分步流程都同样适用。3.1 开发新功能场景产品经理给了你一个新需求需要实现一个新功能。完整工作流步骤 1理解需求你自己完成在开始编码之前先搞清楚要实现什么功能输入和输出是什么有哪些边界条件和异常情况性能和安全要求是什么步骤 2了解现有代码让 AI 帮你我需要实现用户评论功能请帮我 1. 看看项目中有没有类似的功能 2. 找到用户数据和文章数据的存储方式 3. 了解项目的数据库操作规范步骤 3制定实现计划和 AI 一起基于刚才的分析实现评论功能需要 1. 创建评论数据模型 2. 实现评论的增删改查 API 3. 在前端添加评论展示和发表功能 请帮我确认这个计划是否合理有没有遗漏的地方步骤 4实现功能AI 生成你审查按照计划先实现评论数据模型 要求 - 包含评论内容、作者、文章 ID、创建时间 - 支持评论的嵌套回复 - 添加必要的索引现在实现评论的 API 接口 要求 - 发表评论 - 删除评论只能删除自己的 - 获取文章的所有评论 - 支持分页最后实现前端的评论组件 要求 - 显示评论列表 - 评论发表表单 - 支持回复评论步骤 5测试验证你自己完成手动测试主要流程测试边界情况空内容、超长内容等测试权限控制不能删除别人的评论让 AI 帮你写自动化测试实际对话示例你我要加一个用户评论功能用户可以对文章发表评论 AI好的我先了解一下项目结构。 [AI 分析项目代码] 我看到项目已经有用户系统models/user.js和文章系统models/article.js。 实现评论功能需要 1. 创建评论数据模型models/comment.js 2. 添加评论相关的 APIroutes/comment.js 3. 在文章详情页添加评论展示和发表功能 需要我开始实现吗 你好的开始吧。先创建数据模型 AI[生成 models/comment.js 代码] 我已经创建了评论数据模型包含以下字段 - id: 评论 ID - content: 评论内容 - userId: 作者 ID - articleId: 文章 ID - parentId: 父评论 ID用于嵌套回复 - createdAt: 创建时间 接下来实现 API 接口吗 你是的实现 API 接口3.2 修复 Bug场景用户报告了一个问题需要快速定位和修复。完整工作流步骤 1收集信息你自己完成记录以下信息错误信息是什么如何复现这个问题什么时候开始出现的影响范围有多大步骤 2定位问题让 AI 帮你用户反馈点击提交订单按钮后页面卡住不动 浏览器控制台报错TypeError: Cannot read property id of undefined 错误发生在 checkout.js 第 45 行 请帮我 1. 分析可能的原因 2. 找到相关的代码 3. 检查数据流向步骤 3分析根因和 AI 一起看看这个 user 对象是从哪里来的 检查一下在什么情况下 user 会是 undefined步骤 4实施修复AI 生成你审查修复这个问题要求 1. 添加防御性代码检查 user 是否存在 2. 如果 user 不存在跳转到登录页 3. 添加友好的错误提示步骤 5验证修复你自己完成按照原来的步骤复现确认问题解决测试相关功能确保没有引入新问题思考是否有其他地方存在类似问题实际对话示例你用户反馈登录后刷新页面就退出了 AI这通常是 token 存储或验证的问题。让我检查一下 1. token 是存在哪里的localStorage 还是 cookie 2. 刷新页面时有没有重新读取 token 请告诉我 token 相关的代码在哪个文件 你在 utils/auth.js AI[分析 utils/auth.js] 我找到问题了token 存在 sessionStorage 里 刷新页面后 sessionStorage 会清空。 解决方案改用 localStorage 存储 token 需要我修改吗 你好的改一下 AI[修改代码] 已经修改完成现在 token 会存储在 localStorage 中 刷新页面后不会丢失。 建议你测试一下 1. 登录后刷新页面确认还是登录状态 2. 关闭浏览器重新打开确认还是登录状态3.3 重构代码场景代码变得难以维护需要重构以提高代码质量。完整工作流步骤 1确定重构目标你自己完成明确以下问题要解决什么问题代码重复结构混乱性能问题重构的范围有多大能接受的风险程度步骤 2制定重构计划和 AI 一起这三个函数getUserList、getArticleList、getCommentList 有很多重复代码都是做分页、排序、筛选。 请帮我 1. 分析重复的部分 2. 提出重构方案 3. 评估重构的风险步骤 3准备安全网让 AI 帮你在重构之前先帮我写测试用例 确保重构后功能不变步骤 4逐步重构AI 执行你验证按照刚才的方案先提取公共函数现在优化数据结构最后更新调用的地方步骤 5验证结果你自己完成运行所有测试确保通过手动测试关键功能检查代码质量是否提升实际对话示例你这三个函数有很多重复代码能帮我重构一下吗 [贴上三个函数的代码] AI我分析了一下这三个函数的主要区别是 - getUserList获取用户列表 - getArticleList获取文章列表 - getCommentList获取评论列表 它们的共同逻辑是分页、排序、筛选 重构方案 1. 提取通用的 getList 函数 2. 将不同的部分作为参数传入 这样可以减少 80% 的重复代码。 需要我实现吗 你好的但是先帮我写测试用例 AI[生成测试用例] 我已经为这三个函数写了测试用例 覆盖了主要的使用场景。 现在可以开始重构了吗 你可以开始重构 AI[重构代码] 重构完成。我创建了一个通用的 getList 函数 三个原来的函数现在都调用这个通用函数。 请运行测试确认功能正常npm test仓库实例easy-vibe 的 scripts 目录同样体现了提取公共逻辑的重构思路——例如 scripts/book-shared.mjs 把多语言电子书构建的共享逻辑抽离出来供 scripts 下的多个构建脚本复用eslint.config.js 则把代码规范集中管理。重构的本质不是把代码变少而是把重复变成复用。3.4 代码审查场景同事提交了代码需要你审查。完整工作流步骤 1快速了解改动让 AI 帮你总结一下这次 PR 做了什么改动 主要修改了哪些文件步骤 2检查常见问题让 AI 帮你检查这次改动 1. 有没有安全问题SQL 注入、XSS 等 2. 有没有性能问题N1 查询、内存泄漏等 3. 有没有明显的 Bug 4. 代码风格是否符合项目规范步骤 3深入审查你自己完成业务逻辑是否正确是否考虑了边界情况是否有更好的实现方式是否需要添加测试步骤 4给出反馈你自己完成指出需要修改的地方解释为什么要这样改提供改进建议实际对话示例你帮我审查一下这个 PR [提供 PR 链接或代码] AI我审查了这次改动发现以下问题 1. 安全问题 - 第 23 行用户输入没有转义可能有 XSS 风险 - 第 45 行SQL 查询直接拼接字符串有注入风险 2. 性能问题 - 第 67 行在循环里查询数据库会产生 N1 问题 3. 代码质量 - handleSubmit 函数太长200 行建议拆分 - 缺少错误处理 需要我详细说明这些问题吗 你详细说一下 SQL 注入的问题 AI在第 45 行 javascript const query SELECT * FROM users WHERE name ${userName}; 这种写法直接将用户输入拼接到 SQL 语句中 如果用户输入 OR 11就会变成 sql SELECT * FROM users WHERE name OR 11 这会返回所有用户数据。 正确的做法是使用参数化查询 javascript const query SELECT * FROM users WHERE name ?; db.query(query, [userName]); 需要我修改吗仓库实例easy-vibe 自己就在实践这套审查标准。AGENTS.md 明确记录了仓库的代码规范Prettier 格式化、Vue 3 SFC 与 PascalCase 命名、VitePress 主题变量等eslint.config.js 从工具层面强制检查风格问题而npm run lint、npm run build见 package.json则作为 CI 式的正确性检查手段。这些项目级规范正是 AI 做代码审查时最需要的上下文。4. 建立项目知识库为了让 AI 更好地理解你的项目建议在项目中建立知识库。这样 AI 就能按照你的规范和习惯工作——这相当于把 1.2 节提到的团队特殊规范显式地告诉 AI。4.1 创建项目说明文件在项目根目录创建CLAUDE.md或AGENTS.md文件记录项目的关键信息。这是一份可供 AI 持续读取的项目说明书# 项目说明 ## 项目概述 这是一个在线教育平台提供课程管理、用户学习、作业提交等功能。 ## 技术栈 - 前端React 18 TypeScript Vite - 后端Node.js Express PostgreSQL - 部署Vercel前端 Railway后端 ## 项目结构 src/ ├── components/ # React 组件 ├── pages/ # 页面组件 ├── api/ # API 调用 ├── utils/ # 工具函数 └── types/ # TypeScript 类型定义 ## 代码规范 - 使用 ESLint 和 Prettier 格式化代码 - 组件文件使用 PascalCase如 UserProfile.tsx - 工具函数使用 camelCase如 formatDate.ts - 常量使用 UPPER_SNAKE_CASE如 API_BASE_URL ## 开发流程 1. 从 main 分支创建功能分支 2. 开发完成后提交 PR 3. 代码审查通过后合并 ## 常见任务 - 启动开发服务器npm run dev - 运行测试npm test - 构建生产版本npm run build - 代码格式化npm run format ## 注意事项 - 所有 API 调用都要添加错误处理 - 用户输入必须做验证和转义 - 数据库操作使用参数化查询避免 SQL 注入 - 敏感信息密码、token不能记录到日志 ## 数据库表结构 - users: 用户表id, email, password_hash, created_at - courses: 课程表id, title, description, teacher_id - enrollments: 选课表id, user_id, course_id, enrolled_at仓库实例这份模板不是空想——easy-vibe 仓库根目录的 AGENTS.md 就是它的真实落地版本。它记录了项目结构与模块组织docs/是 VitePress 站点源码、assets/存放仓库级图片、scripts/是维护文档的工具脚本构建、测试与开发命令明确要求 Node.js 18并给出npm install、npm run dev、npm run build、npm run preview、npm run format五条核心命令编码风格与命名约定Prettier 格式化、Vue 3 SFC 使用script setup、组件文件 PascalCase提交与 PR 指南遵循 Conventional Commits 风格feat:、fix:、docs:PR 需包含描述、截图和相关路径配置与部署说明vercel.json的存在与可复现构建要求。这些信息在 AI 初次接触该仓库时就能被立即读取从而让它生成的代码天然符合仓库规范。4.2 记录常见问题和解决方案在项目中创建docs/troubleshooting.md记录常见问题形成团队的踩坑手册# 常见问题 ## 开发环境问题 ### 问题npm install 失败 **原因** Node 版本不兼容 **解决方案** 使用 Node.js 18 或更高版本 ### 问题数据库连接失败 **原因** 环境变量未配置 **解决方案** 复制 .env.example 为 .env填写数据库连接信息 ## 功能问题 ### 问题用户登录后刷新页面就退出 **原因** Token 存储在 sessionStorage **解决方案** 改用 localStorage 存储 token ### 问题图片上传失败 **原因** 文件大小超过限制 **解决方案** 在前端添加文件大小检查限制为 5MB4.3 维护技术决策记录创建docs/decisions/目录用 ADRArchitecture Decision Record格式记录重要的技术决策。这样 AI 和后来的同事都能理解为什么当时要这么做# ADR-001: 选择 PostgreSQL 作为数据库 ## 状态 已采纳 ## 背景 项目需要选择一个关系型数据库候选方案有 MySQL 和 PostgreSQL。 ## 决策 选择 PostgreSQL ## 理由 1. 更好的 JSON 支持适合存储课程内容 2. 更强大的全文搜索功能 3. 团队成员更熟悉 PostgreSQL ## 后果 - 需要学习 PostgreSQL 特有的功能 - 部署时需要 PostgreSQL 环境5. 提高 AI 协作效率的技巧掌握一些实用技巧可以让你和 AI 的协作更加高效。5.1 描述要清晰具体不好的描述这个功能有问题 帮我优化一下好的描述用户点击提交按钮后表单没有提交 浏览器控制台报错Uncaught TypeError: Cannot read property value of null 错误发生在 form.js 第 23 行 这个列表加载很慢有 1000 条数据 请帮我添加分页功能每页显示 20 条关键点提供具体的错误信息说明期望的结果给出相关的上下文5.2 一次只做一件事不好的做法帮我实现登录、注册、找回密码、个人中心、 修改密码、邮箱验证这些功能好的做法先实现登录功能要求 - 邮箱和密码登录 - 记住登录状态 - 错误提示 完成后现在实现注册功能 完成后现在实现找回密码功能关键点将大任务拆分成小任务每完成一个任务就测试验证确认没问题再继续下一个5.3 及时验证结果不好的做法让 AI 连续修改了 10 个文件最后发现第一个就错了浪费了大量时间好的做法修改一个文件立即测试确认没问题再继续发现问题及时纠正关键点小步快跑快速反馈不要盲目信任 AI保持对代码的掌控5.4 善用上下文技巧 1引用之前的对话按照刚才的方案实现 参考之前的 getUserList 函数技巧 2提供相关代码这是现有的用户模型代码 [贴上代码] 请参考这个风格实现文章模型技巧 3说明项目背景这是一个电商项目使用 React Node.js 已经有用户系统和商品系统 现在要添加购物车功能5.5 保存有用的对话场景解决了一个复杂问题做法将解决方案记录到项目文档下次遇到类似问题可以参考分享给团队其他成员示例在docs/solutions/目录创建文档# 解决 N1 查询问题 ## 问题描述 获取文章列表时每篇文章都要查询一次作者信息 导致性能问题。 ## 解决方案 使用 JOIN 查询一次性获取所有数据 SELECT articles.*, users.name as author_name FROM articles LEFT JOIN users ON articles.author_id users.id **效果** 查询时间从 2000ms 降低到 50ms5.6 学会提问的艺术技巧 1先问为什么为什么这段代码会导致内存泄漏 为什么要使用 useCallback 而不是普通函数技巧 2请求多个方案实现用户认证有哪几种方案 各有什么优缺点技巧 3请求解释这段代码是怎么工作的 能详细解释一下这个算法吗6. 常见问题解答Q1AI 生成的代码能直接用吗A不能直接用需要审查和测试。AI 生成的代码可能存在以下问题逻辑错误或边界情况处理不当不符合项目的代码规范存在安全隐患性能不够优化你需要仔细阅读生成的代码理解代码的逻辑测试各种情况确认符合项目规范Q2AI 理解错了我的意思怎么办A及时纠正重新描述需求。不是这样的我的意思是... 这个理解不对应该是... 让我重新描述一下需求...如果多次纠正还是不对可以提供更多上下文信息给出具体的代码示例拆分成更小的任务Q3遇到 AI 不会的问题怎么办AAI 不是万能的有些问题需要你自己解决。AI 可能无法解决的问题非常新的技术AI 的知识有截止日期你们团队特有的业务逻辑需要访问外部系统的问题复杂的性能优化问题这时你需要查阅官方文档搜索相关解决方案咨询有经验的同事在社区提问Q4怎么判断 AI 的建议是否合理A用你的经验和知识判断。评估标准是否符合最佳实践是否考虑了边界情况是否有潜在的安全风险是否符合项目的技术栈性能是否可接受如果不确定可以让 AI 解释为什么这样做请求提供其他方案咨询团队成员Q5团队协作时怎么用 AIA建立共同的规范和知识库。团队协作建议共享项目的CLAUDE.md/AGENTS.md配置参考 easy-vibe 根目录的 AGENTS.md 写法统一代码规范和风格记录常见问题的解决方案定期分享有用的提示词在代码审查时检查 AI 生成的代码Q6如何避免过度依赖 AIA保持学习和思考AI 是辅助工具而不是替代品。建议理解 AI 生成的代码不要盲目复制遇到不懂的概念主动学习定期复习基础知识尝试自己解决问题再用 AI 验证参与代码审查学习他人的经验7. 总结通过本章节的学习你已经掌握了AI 的能力边界理解 AI 擅长什么、不擅长什么建立正确的协作方式项目类型策略针对全新项目、成熟项目、快速原型、维护项目的不同开发策略常见任务工作流掌握新功能开发、Bug 修复、代码重构、代码审查的完整流程项目知识库学会建立项目文档AGENTS.md/troubleshooting.md/ ADR让 AI 更好地理解你的项目协作技巧掌握提高 AI 协作效率的实用技巧关键要点明确分工你做决策和把关AI 做执行和辅助清晰沟通描述要具体一次做一件事及时验证不要盲目信任要测试验证持续学习了解 AI 的能力边界不断优化协作方式记住AI 是工具不是替代品。它能让你更高效但最终的代码质量还是要靠你把关。从简单任务开始逐步建立信任你会发现 AI 能帮你节省大量时间让你专注于更有价值的工作。下一步在下一章节中我们将学习如何使用 AI 进行代码审查和质量保证确保代码的可维护性和安全性。easy-vibe 课程中与之配套的进阶内容还包括 Git 迭代式开发、Agent 团队协作、MCP 工具集成 与 规范驱动开发 等专题可作为延伸阅读。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考