Easy-Vibe 实战指南：用 Claude Code 构建系统化的 AI 辅助开发工作流

教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载面对一个几千个文件的项目该从哪里入手老板让加一个新功能却对那块代码不熟Bug 报错却找不到定位入口要重构一团乱麻又怕改坏东西——这些问题本质上是同一个如何在真实开发场景中高效使用 AI 工具把活干完。本文基于 Datawhale easy-vibe 开源教程第三阶段Claude Code 工作流最佳实践章节系统讲解 AI 辅助开发工作流的搭建方法先认清 AI 的能力边界再按项目类型选择策略接着掌握新功能开发、修 Bug、重构、代码评审四大高频任务的标准流程最后通过构建项目知识库与协作技巧让你在不同开发场景中都能稳定、高效地与 AI 协同工作。前置知识学习本节前建议先掌握——AI IDE 基础用法、Git 与 GitHub 工作流、用大模型编写 API 代码。若尚未安装 Claude Code可先阅读本仓库的 Claude Code 快速入门指南。1. 认清 AI 的能力边界建立正确的协作模型在让 AI 参与开发之前必须先搞清楚它擅长什么、不擅长什么否则你会要么过度依赖、要么完全不敢用。1.1 AI 擅长的事把 AI 想象成一个非常聪明但永远需要清晰指令的助手从描述快速生成代码结构你给出需求它能快速产出项目骨架和模块代码秒级阅读海量代码几秒钟内读完几千行代码帮你定位需要关注的部分发现明显错误语法错误、常见安全漏洞这类规则清晰的问题它能帮你挑出来执行重复性任务批量重命名变量、格式化代码、生成文档注释等交给它效率极高。总结一句话AI 擅长规则清晰、可自动化的工作。1.2 AI 不擅长的事AI 的局限同样明显必须心里有数不理解你的业务逻辑除非你详细说明否则它不知道你公司的订单流程是怎么运转的不能做权衡决策技术选型、架构设计这类需要权衡取舍的决定依赖你的经验和项目理解不知道团队的特殊约定比如所有 API 必须打日志错误码必须用枚举这些规则要么你配置给它要么明确告诉它生成的代码不能直接用它可能产出看起来对但实际有问题的代码也可能漏掉边界情况必须经过你的审查和测试。1.3 与 AI 协作的正确模式认清边界后协作模型就清晰了角色负责内容你决定做什么、做决策、保证质量AI执行具体编码、检索信息、指出明显问题这就像带一个初级开发人员你告诉它要做什么它去实现然后你审查代码。区别在于 AI 执行速度远超人类但判断力弱于人类——所以质量把关的责任始终在你身上。2. 按项目类型选择开发策略不同类型的项目需要不同的开发风格和 AI 使用策略选对策略能大幅提升效率。2.1 全新项目从零启动项目特征无历史包袱、可自由设计、需要建立项目结构与代码规范、适合快速迭代试错。推荐工作流第一步规划项目结构。动手编码前先让 AI 帮你规划项目结构与技术选型我想构建一个任务管理应用包含这些功能 - 用户注册和登录 - 任务的创建、修改和删除 - 任务分类和标签 - 任务提醒 请帮我 1. 推荐合适的技术栈 2. 设计项目的目录结构 3. 规划数据库表结构第二步搭建基础框架。基于规划让 AI 创建项目基础结构基于我们刚才讨论的方案请帮我 1. 创建项目目录结构 2. 初始化配置文件package.json、.env 等 3. 创建基础服务器代码第三步逐个实现功能。按优先级逐个实现功能模块现在实现用户注册功能要求如下 - 邮箱和密码注册 - 密码加密存储 - 邮箱验证关键要点尽早建立代码规范让 AI 按规范生成代码每个功能模块完成即测即验保持项目文档及时更新。2.2 成熟项目已有大量代码库项目特征代码库庞大、存在历史约定、需要保持编码风格一致、改动需考虑影响范围。推荐工作流第一步理解项目结构。修改代码前先让 AI 帮你理解项目这是一个电商项目我需要新增优惠券功能。 请帮我 1. 分析项目整体结构 2. 找到与订单相关的代码 3. 看看类似功能是怎么实现的第二步寻找参考代码。让 AI 在项目中寻找相似实现作为参照找出项目中其他促销功能如满减、折扣是如何实现的第三步遵循现有风格。让 AI 参照现有代码风格实现新功能请参照满减促销的实现方式来写优惠券功能。 保持相同的代码风格和目录结构。关键要点先理解再修改避免破坏现有架构保持编码风格一致修改后测试关联功能。2.3 快速原型验证想法项目特征速度优先、代码质量次要、用于验证产品想法或技术路线、日后可能废弃或重写。推荐工作流——直接描述需求快速实现然后快速迭代构建一个简单的 todo 应用要求 - 能添加、删除、标记任务完成 - 数据存储在本地 - 界面保持简单能用就行加一个搜索功能 切换成深色主题 加任务分类关键要点不过度纠结代码质量和规范快速验证想法、及时调整方向原型验证成功后后续需要重构。2.4 维护项目以修 Bug 为主项目特征代码已稳定、主要任务是修问题、需要快速定位问题、改动需谨慎避免引入新问题。推荐工作流第一步定位问题用户反馈点击提交订单按钮后页面卡死 控制台报错TypeError: Cannot read property id of undefined 请帮我 1. 分析可能的原因 2. 找到相关代码第二步分析根因检查这个错误会在什么情况下发生 追踪数据流第三步实施修复修复这个问题并且 1. 添加防御性代码避免类似问题 2. 补充错误提示改善用户体验关键要点修复后充分测试确保不影响其他功能添加防御性代码增强系统健壮性记录问题与解决方案供日后参考。3. 常见开发任务的标准工作流日常开发中任务类型多样以下是四种最高频的 AI 辅助工作流。3.1 开发新功能场景产品经理给你一个新需求需要实现一个新功能。完整工作流理解需求你来做编码前先明确——要实现什么功能输入输出是什么边界条件和异常情况有哪些性能和安全性要求是什么理解现有代码请 AI 协助我要实现用户评论功能。请帮我 1. 检查项目中是否已有类似功能 2. 找出用户数据和文章数据是如何存储的 3. 了解这个项目的数据库操作惯例制定实现方案与 AI 协作基于我们刚才的分析实现评论功能需要 1. 创建评论数据模型 2. 实现评论的 CRUD API 3. 前端添加评论展示和发布功能 请帮我确认这个方案是否合理有没有遗漏实现功能AI 生成你审查按方案先实现评论数据模型。 要求 - 包含评论内容、作者、文章 ID、创建时间 - 支持评论的嵌套回复 - 添加必要的索引接下来实现评论的 API 接口。 要求 - 发表评论 - 删除评论只能删除自己的评论 - 获取某篇文章的所有评论 - 支持分页最后实现前端评论组件。 要求 - 展示评论列表 - 发布评论的表单 - 支持对评论进行回复测试验证你来做手动测试主流程测试空内容、超长内容等边界情况测试权限控制如不能删除他人评论请 AI 协助编写自动化测试。真实对话示例你我想加一个用户评论功能让用户可以在文章下发表评论 AI好的我先了解一下项目结构。 [AI 分析项目代码] 我看到项目已经有用户系统models/user.js 和文章系统models/article.js。 实现评论功能需要 1. 创建评论数据模型models/comment.js 2. 添加评论相关 APIroutes/comment.js 3. 在文章详情页添加评论展示和发布功能 需要我开始实现吗 你好的开始吧。先创建数据模型 AI[生成 models/comment.js] 已创建评论数据模型包含以下字段 - id评论标识 - content评论内容 - userId作者标识 - articleId文章标识 - parentId父评论标识用于嵌套回复 - createdAt创建时间 接下来实现 API 吗 你好的实现 API3.2 修复 Bug场景用户反馈问题需要快速定位并修复。完整工作流收集信息你来做记录——报错信息是什么如何复现从什么时候开始出现的影响范围多大定位问题请 AI 协助用户反馈点击提交订单按钮后页面卡死 浏览器控制台报错TypeError: Cannot read property id of undefined 错误发生在 checkout.js 第 45 行 请帮我 1. 分析可能的原因 2. 找到相关代码 3. 检查数据流分析根因与 AI 协作检查这个 user 对象是从哪里来的 检查在什么情况下 user 会是 undefined实施修复AI 生成你审查修复这个问题要求 1. 添加防御性代码检查 user 是否存在 2. 如果 user 不存在跳转到登录页 3. 添加友好的错误提示验证修复你来做用原始步骤复现问题并确认已解决测试相关功能确保没引入新问题思考其他地方是否也存在类似问题。真实对话示例你用户反馈登录后刷新页面就掉线 AI这通常是 token 存储或校验的问题。让我检查 1. token 存在哪里localStorage 还是 cookie 2. 页面刷新时是否重新加载了 token 请告诉我哪个文件包含 token 相关代码 你utils/auth.js AI[分析 utils/auth.js] 我找到问题了token 存在 sessionStorage 里 而 sessionStorage 在页面刷新时会被清空。 解决方案改用 localStorage 需要我修改吗 你好的修改吧 AI[修改代码] 修改完成。token 现在存储在 localStorage 中 刷新页面后不会丢失。 建议你测试 1. 登录后刷新页面确认用户保持登录状态 2. 关闭并重新打开浏览器确认用户保持登录状态3.3 重构代码场景代码难以维护需要通过重构提升代码质量。完整工作流明确重构目标你来做要解决什么问题重复代码结构混乱性能问题重构范围多大可接受的风险等级。制定重构方案与 AI 协作这三个函数getUserList、getArticleList、getCommentList 包含大量分页、排序、过滤的重复代码。 请帮我 1. 分析重复的部分 2. 提出重构方案 3. 评估重构的风险准备安全网请 AI 协助重构之前请先帮我写测试用例 保证重构后行为保持一致分步重构AI 执行你验证按我们刚才讨论的方案先抽取公共函数现在优化数据结构最后更新调用点验证结果你来做运行全部测试确保通过手动测试关键功能确认代码质量是否提升。真实对话示例你这三个函数有大量重复代码能帮我重构吗 [粘贴三个函数的代码] AI我分析了一下它们的主要差异是 - getUserList获取用户列表 - getArticleList获取文章列表 - getCommentList获取评论列表 它们的公共逻辑是分页、排序和过滤。 重构方案 1. 抽取一个通用函数 getList 2. 把差异部分作为参数传入 这样可以减少 80% 的重复代码。 需要我实现吗 你好的但先帮我写测试用例 AI[生成测试] 已为三个函数写好测试 覆盖了主要使用场景。 现在可以开始重构吗 你可以开始重构 AI[重构代码] 重构完成。已创建通用函数 getList 三个原函数现在都调用这个公共函数。 请运行测试确认一切正常npm test3.4 代码评审场景同事提交了代码需要进行评审。完整工作流快速理解变更请 AI 协助总结这个 PR 改了什么 主要修改了哪些文件检查常见问题请 AI 协助检查这个变更关注 1. 安全问题SQL 注入、XSS 等 2. 性能问题N1 查询、内存泄漏等 3. 明显的 Bug 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]); 需要我修复吗4. 构建项目知识库为了让 AI 更好地理解你的项目、按你的规范和习惯工作建议在项目内构建知识库。这在 Claude Code 体系中对应CLAUDE.md/AGENTS.md等记忆文件机制——本仓库根目录下的 AGENTS.md 就是一个真实范例它记录了项目结构、构建命令、编码风格与部署注意事项供 Claude Code 等 AI Agent 启动时读取。4.1 创建项目描述文件在项目根目录创建CLAUDE.md或AGENTS.md记录项目关键信息# 项目概览 ## 项目简介 这是一个在线学习平台提供课程管理、用户学习、作业提交等功能。 ## 技术栈 - 前端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如果你已有项目但还没有CLAUDE.md可以直接在 Claude Code 中执行/init让 AI 分析项目结构、配置文件package.json、tsconfig.json 等和现有代码自动生成一份可用的CLAUDE.md——具体用法可参考 Claude Code 快速入门指南 中的技术 5/init 自动生成配置。生成后务必人工核对并微调。4.2 记录常见问题与解决方案在项目中创建docs/troubleshooting.md沉淀常见问题# 常见问题 ## 开发环境问题 ### 问题npm install 失败 **原因** Node 版本不兼容 **解决** 使用 Node.js 18 或以上版本 ### 问题数据库连接失败 **原因** 环境变量未配置 **解决** 复制 .env.example 为 .env 并填写数据库连接信息 ## 功能问题 ### 问题用户登录后刷新页面掉线 **原因** token 存在 sessionStorage 中 **解决** 改为 localStorage ### 问题图片上传失败 **原因** 文件大小超限 **解决** 前端添加文件大小校验限制为 5MB4.3 维护技术决策记录创建docs/decisions/目录记录重要的技术决策ADR-001选择 PostgreSQL 作为数据库 ## 状态 已接受 ## 背景 项目需要选择关系型数据库候选有 MySQL 和 PostgreSQL。 ## 决策 选择 PostgreSQL ## 理由 1. JSON 支持更好适合存储课程内容 2. 全文搜索能力更强 3. 团队对 PostgreSQL 更熟悉 ## 影响 - 需要学习 PostgreSQL 特有功能 - 部署需要 PostgreSQL 环境这套记忆文件 问题台账 决策记录的组合与本仓库的文档组织方式一脉相承easy-vibe 仓库通过docs/目录组织各语言版本的教程内容、通过根目录 AGENTS.md 为 AI Agent 提供仓库指南你可以参考这种结构来为自己的项目搭建知识库。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 查询一次性获取所有数据 sql SELECT articles.*, users.name as author_name FROM articles LEFT JOIN users ON articles.author_id users.id结果查询时间从 2000ms 降到 50ms### 5.6 学会提问的艺术 **技巧 1先问为什么** text 为什么这段代码会导致内存泄漏 为什么应该用 useCallback 而不是普通函数技巧 2询问多个方案实现用户认证有哪些不同的方式 各自的优缺点是什么技巧 3请求解释这段代码是怎么工作的 能详细讲解一下这个算法吗6. 常见问题解答Q1AI 生成的代码能直接用吗A不能直接使用必须经过审查和测试。AI 生成的代码可能有逻辑错误或边界情况处理不当、不符合项目编码规范、安全风险、性能优化不足。你需要仔细阅读生成代码、理解其逻辑、测试不同场景、确认符合项目规范。Q2AI 理解错了我的意思怎么办A尽快纠正重新描述需求。这不是我想表达的意思。我想说的是... 这个理解不对。应该是... 让我重新描述一下需求...多次纠正仍不对时可以提供更多上下文、给出具体的代码示例、把任务拆成更小的块。Q3遇到 AI 解决不了的问题怎么办AAI 不是万能的有些问题仍需自己解决。AI 可能解决不了的问题非常新的技术AI 知识有截止日期、你团队特有的业务逻辑、需要访问外部系统的问题、复杂的性能优化问题。这时需要阅读官方文档、搜索相关解决方案、请教有经验的同事、在社区提问。Q4如何判断 AI 的建议是否合理A用自己的经验和知识来判断。评估标准是否符合最佳实践、是否考虑了边界情况、是否存在潜在安全风险、是否匹配项目技术栈、性能是否可接受。不确定时可以让 AI 解释为什么建议这个方案、要求给出替代方案、咨询团队成员。Q5团队应该如何协作使用 AIA建立共享约定和公共知识库。团队协作建议共享项目的CLAUDE.md配置、统一规范和代码风格、记录常见问题解决方案、定期分享有用的 prompt、在代码评审时审查 AI 生成的代码。Q6如何避免过度依赖 AIA持续学习和思考。AI 是助手不是替代品。建议理解 AI 生成的代码而不是盲目复制、主动学习不懂的概念、定期回顾基础知识、先自己尝试解决问题再用 AI 验证、参与代码评审向他人学习经验。7. 总结通过本章你已掌握AI 能力边界理解 AI 擅长与不擅长的事建立正确的协作模型按项目类型的策略为全新项目、成熟项目、快速原型、维护项目选择不同的开发策略常见任务工作流新功能开发、修 Bug、重构、代码评审的完整流程项目知识库通过CLAUDE.md/AGENTS.md、问题台账、ADR 决策记录构建文档体系让 AI 更好地理解项目协作技巧清晰沟通、一次一事、快速验证、善用上下文、沉淀解决方案、学会提问。牢记三点核心角色分工明确你做决策、保质量AI 负责执行与辅助沟通清晰表述精确、一次只做一件事快速验证不要盲目信任测试验证后再继续。AI 是工具不是替代品。它能让你更高效但最终代码质量仍取决于你的判断。从简单任务开始逐步建立信任你会发现 AI 能帮你节省大量时间让你把精力投入到更有价值的工作上。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐AI小说生成器AI_NovelGenerator本地部署教程从零跑通多章节长篇写作AI小说生成器AI_NovelGenerator本地部署教程从零跑通多章节长篇写作 写长篇连载时人物设定与伏笔容易前后矛盾纯靠人工推进又慢又累。AI_No人工智能大模型AI 应用AI 写作RAG桌面应用Easy-Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审Easy Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审 导读 当你面对一个上万行文件的项目时从哪里教程文档easy-vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用easy vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用 本篇是 Datawhale e教程文档上一篇jupyter-themes开发路线图了解未来功能与改进计划下一篇Monaco Editor中的代码重复检测报告详细检测结果创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考