尧图网站建设 
教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载导读本文基于 docs/de-de/stage-3/core-skills/workflow/index.md 系统讲解如何在真实开发场景中建立一套「人机协作」的开发工作流。你将掌握 AI 的能力边界判断、四种项目类型的差异化开发策略、新功能开发/故障排查/代码重构/代码审查四类高频任务的完整流程以及如何通过构建项目知识库如AGENTS.md让 AI 真正理解你的项目。文中所有提示词模板均可直接复制到 Claude Code 等 AI 编程工具中使用。在之前的课程中你已经学会了使用 AI IDE 编程、用 Git 管理代码版本、设计并实现 API 接口。但当真正面对一个开发任务时新的问题会出现「这个项目有几千个文件我该从哪里开始」「老板让我加一个新功能但我完全不了解这部分代码库。」「我完全不知道这个 bug 出在哪里代码太多了。」「我要重构这堆代码但我害怕弄坏什么。」这些问题的核心是如何在真实开发场景中高效地利用 AI 工具完成任务本课将帮助你建立一套系统化的 AI 辅助开发工作流让你在不同的开发场景中高效使用 AI。我们会通过具体示例展示如何在开发新功能、排查故障、重构代码等场景中运用 AI。前置要求学习本部分之前建议先熟悉以下内容AI-IDE 基础——掌握 AI IDE 的基本用法Git 与 GitHub 工作流——理解代码版本管理用大模型编写 API 代码——理解 AI 辅助开发的基本概念你将学到理解 AI 在开发流程中的角色及其能力边界掌握不同项目类型下的 AI 辅助开发策略学会在新功能开发、故障排查、代码重构等场景中使用 Claude Code构建项目知识库提升与 Claude Code 的协作效率掌握提升 AI 协作效率的实用技巧1. 理解 AI 的能力边界在开始用 AI 辅助开发之前我们必须先弄清楚 AI 能做什么、不能做什么。只有这样才能建立起正确的协作模式。1.1 AI 擅长什么把 AI 想象成一个非常聪明的助理但它仍然需要清晰明确的指令。它可以根据你的描述快速搭建代码骨架可以在几秒钟内读完几千行代码并找到你需要的部分。遇到明显的语法错误或常见的安全漏洞它能帮你发现。诸如批量重命名变量、格式化代码、生成文档注释这类重复性任务特别适合交给 AI。简而言之AI 擅长那些规则清晰、可以自动化的工作。1.2 AI 不擅长什么但 AI 也有它的局限性它不理解你的业务逻辑。除非你详细地解释给它听否则它不会知道你公司的订单流程是如何运转的。它无法做出技术选型、架构设计这类需要权衡利弊的决策因为这些依赖你的经验和项目理解。它不知道你团队的特殊约定比如「所有 API 都必须有日志」或「错误码必须用枚举」。你需要把这些规则配置好或明确地告诉 AI。最重要的是AI 生成的代码不能直接使用你必须审查和测试。它可能生成看起来正确但实际上有问题的代码也可能忽略某些边界情况。1.3 如何与 AI 协作理解了 AI 的能力边界之后协作模式就清晰了你负责决定做什么、做决策、质量把关AI 负责执行具体的编程任务、查找信息、发现明显问题这就像和一个初级开发者合作你告诉他需要做什么他来实现然后你来审查代码。区别在于AI 的执行速度快得多但判断力比人弱。2. 不同项目类型的开发策略不同类型的项目需要不同的开发方式和 AI 使用策略。选对策略能显著提升开发效率。2.1 新项目从零开始项目特点没有历史包袱可以自由设计需要确立项目结构和代码规范适合快速迭代和试错推荐工作流第 1 步规划项目结构在动手写代码之前先让 AI 帮忙规划项目结构和技术选型我想创建一个任务管理应用功能包括 - 用户注册和登录 - 任务的创建、编辑和删除 - 任务分类和标签 - 任务提醒 请帮我 1. 推荐合适的技术栈 2. 设计项目目录结构 3. 规划数据库表结构第 2 步搭建基础框架基于规划让 AI 创建项目的基础结构基于我们刚才讨论的方案请帮我 1. 创建项目目录结构 2. 初始化配置文件package.json、.env 等 3. 创建基础的服务端代码第 3 步按优先级逐个实现功能按照优先级逐个实现功能模块现在实现用户注册功能要求如下 - 支持邮箱和密码注册 - 密码加密存储 - 邮箱验证要点尽早确立代码规范让 AI 生成的代码遵循规范每个功能模块完成后立即测试验证及时更新项目文档2.2 成熟项目大型既有代码库项目特点代码库庞大存在历史约定需要保持代码风格一致改动必须考虑影响范围推荐工作流第 1 步理解项目结构在改动代码之前先让 AI 帮忙理解项目这是一个电商项目我需要添加一个优惠券功能。 请帮我 1. 分析整体项目结构 2. 找出与订单相关的代码 3. 看看其他类似功能是怎么实现的第 2 步查找参考代码让 AI 在项目中找出类似的实现作为参考请查找项目中其他促销功能如满减、折扣是如何实现的第 3 步遵循既有风格让 AI 按照既有代码的风格实现新功能请参照满减功能的实现方式来实现优惠券功能。 保持相同的代码风格和目录结构。要点先理解后修改不破坏既有架构保持代码风格一致修改后测试相关功能2.3 快速原型验证想法项目特点速度第一代码质量其次用于验证产品想法或技术方案之后可能被丢弃或重写推荐工作流直接描述需求、快速实现创建一个简单的 Todo 应用要求 - 支持添加、删除、标记任务完成 - 数据本地存储 - UI 保持简单能跑就行快速迭代加上搜索功能 切换成深色主题 添加任务分类要点不必过于担心代码质量和规范快速验证想法、及时调整方向如果原型成功后续需要重构2.4 维护项目以修复问题为主项目特点代码已稳定主要任务是修复问题需要快速定位问题改动要谨慎避免引入新问题推荐工作流第 1 步定位问题用户反馈点击「提交订单」按钮后页面卡死 控制台报错TypeError: Cannot read property id of undefined 请帮我 1. 分析可能的原因 2. 找到相关代码第 2 步分析根因检查这个错误在什么情况下会出现 检查数据流第 3 步实施修复修复这个问题并且 1. 添加防御性代码避免类似问题 2. 添加错误提示改善用户体验要点修复后充分测试确保不影响其他功能添加防御性代码提升系统健壮性记录问题和解决方案供日后参考3. 常见开发任务的 AI 工作流日常开发中我们会遇到很多不同类型的任务。下面介绍几种最常见的 AI 辅助工作流。3.1 开发新功能场景产品经理给你一个新需求你需要实现一个新功能。完整工作流第 1 步理解需求由你完成在动手写代码之前先明确要实现什么功能输入输出是什么有哪些边界条件和异常情况有什么性能和安全性要求第 2 步理解既有代码求助 AI我要实现一个用户评论功能。请帮我 1. 检查项目中是否已有类似功能 2. 弄清用户数据和文章数据是如何存储的 3. 了解本项目中的数据库操作约定第 3 步制定实现方案与 AI 协作基于刚才的分析实现评论功能需要 1. 创建评论数据模型 2. 实现评论的 CRUD 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 吗 你好的实现 API3.2 故障排查场景用户报告了一个问题你需要快速定位并修复。完整工作流第 1 步收集信息由你完成记录以下信息错误信息是什么如何复现这个问题从什么时候开始出现的影响范围有多大第 2 步定位问题求助 AI用户反馈点击「提交订单」按钮后页面卡死 浏览器控制台报错TypeError: Cannot read property id of undefined 错误出现在 checkout.js 的第 45 行 请帮我 1. 分析可能的原因 2. 找到相关代码 3. 检查数据流第 3 步分析根因与 AI 协作检查这个 user 对象是从哪里来的 调查在什么情况下 user 会是 undefined第 4 步实施修复AI 生成你审查修复这个问题要求 1. 添加防御性代码检查用户是否存在 2. 如果用户不存在跳转到登录页 3. 添加友好的错误提示第 5 步验证修复由你完成用原始步骤复现问题确认已解决测试相关功能确保没有引入新问题思考其他地方是否也存在类似问题真实对话示例你有用户反馈登录后刷新页面就被登出了 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 代码重构场景代码变得难以维护需要重构以提升代码质量。完整工作流第 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 test3.4 代码审查Code Review场景同事提交了代码你需要进行审查。完整工作流第 1 步快速理解变更求助 AI总结这个 PR 改了什么 主要改了哪些文件第 2 步检查常见问题求助 AI审查这次变更重点检查 1. 安全问题SQL 注入、XSS 等 2. 性能问题N1 查询、内存泄漏等 3. 明显的错误 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]); 需要我修复吗4. 构建项目知识库为了帮助 AI 更好地理解你的项目建议在项目内建立知识库。这样 AI 就能按照你的规范和习惯来工作。仓库实例本仓库easy-vibe根目录就维护了一份真实的 AGENTS.md其中记录了项目结构docs/为 VitePress 站点源码、构建命令npm run dev/npm run build、编码风格Prettier 格式化、Vue 组件命名规范、测试与提交流程等。这正是「项目知识库」在真实开源项目中的落地形态可以对照下面的模板理解其作用。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 创建 feature 分支 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对照仓库中的 AGENTS.md 可以看到真实项目中的这类文件通常还会补充「目录与模块组织」如docs/.vitepress/theme/自定义主题、「构建与测试命令」easy-vibe 要求 Node.js 18、「提交与 PR 规范」Conventional Commits 风格如feat:、fix:等章节。知识库越贴近项目实际AI 产出的代码就越符合预期。4.2 记录常见问题与解决方案在项目中创建docs/troubleshooting.md记录常见问题# 常见问题 ## 环境问题 ### 问题npm install 失败 **原因** Node 版本不兼容 **解决** 使用 Node.js 18 或更高版本 ### 问题数据库连接失败 **原因** 环境变量未配置 **解决** 复制 .env.example 为 .env 并填写数据库连接信息 ## 功能问题 ### 问题登录后刷新页面被登出 **原因** token 存储在 sessionStorage **解决** 改用 localStorage ### 问题图片上传失败 **原因** 文件大小超出限制 **解决** 在前端增加文件大小校验限制为 5 MB4.3 维护技术决策记录创建docs/decisions/目录记录重要的技术决策# ADR-001选择 PostgreSQL 作为数据库 ## 状态 已接受 ## 背景 项目需要选择关系型数据库候选方案为 MySQL 和 PostgreSQL。 ## 决策 选择 PostgreSQL ## 理由 1. 更好的 JSON 支持适合存储课程内容 2. 全文搜索能力更强 3. 团队更熟悉 PostgreSQL ## 影响 - 需要学习 PostgreSQL 特有功能 - 部署需要 PostgreSQL 环境技术决策记录ADRArchitecture Decision Record的价值在于当 AI 遇到涉及技术选型的问题时可以直接从这些记录中读取「为什么这样选」的上下文从而给出与团队方向一致的判断而不是凭通用知识猜测。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效果查询时间从 2000 ms 降到 50 ms## 5.6 学会提问的艺术 **技巧 1先问「为什么」** text 为什么这段代码会导致内存泄漏 为什么这里应该用 useCallback 而不是普通函数技巧 2询问多种方案实现用户认证有哪几种不同的方式 每种方式的优缺点是什么技巧 3请求解释这段代码是如何工作的 能详细解释一下这个算法吗6. 常见问题FAQF1AI 生成的代码可以直接使用吗答不可以必须审查和测试。AI 生成的代码可能存在以下问题逻辑错误或边界情况处理不当不符合项目代码规范存在安全风险性能优化不足你需要仔细阅读生成的代码理解其逻辑测试各种场景确认符合项目规范F2AI 误解了我的意思怎么办答及时纠正重新描述需求。我不是这个意思我的意思是…… 这个理解不对应该是…… 让我重新描述一下需求……如果多次纠正仍然错误可以提供更多上下文给出具体的代码示例把任务拆分成更小的部分F3遇到 AI 解决不了的问题怎么办答AI 不是万能的有些问题必须自己解决。AI 可能无法解决的问题非常新的技术AI 的知识有截止日期你团队独有的业务逻辑需要访问外部系统的问题复杂的性能优化问题这时你需要阅读官方文档搜索相关解决方案请教有经验的同事在社区提问F4如何判断 AI 的建议是否合理答用你自己的经验和知识来判断。评估标准是否符合最佳实践是否考虑了边界情况是否存在潜在安全风险是否匹配项目的技术栈性能是否可以接受如果不确定可以让 AI 解释为什么提出这个方案询问替代方案咨询团队成员F5团队应该如何协作使用 AI答建立统一的规范和共享的知识库。团队协作建议共享项目的CLAUDE.md配置统一代码规范和风格记录常见问题的解决方案定期分享有用的 Prompt在代码审查时检查 AI 生成的代码F6如何避免过度依赖 AI答坚持学习和思考。AI 是助手不是替代品。建议理解 AI 生成的代码而不是盲目复制主动学习不懂的概念定期复习基础知识先尝试自己解决问题再用 AI 验证参与代码审查向他人经验学习7. 总结本章你已掌握AI 能力边界理解 AI 擅长什么、不擅长什么建立正确的协作模式项目类型策略新项目、成熟项目、快速原型、维护项目各自不同的开发策略常见任务工作流新功能开发、故障排查、代码重构、代码审查的完整流程项目知识库学会搭建项目文档CLAUDE.md/AGENTS.md、故障排查记录、技术决策记录让 AI 更好地理解你的项目协作技巧提升 AI 协作效率的实用方法最重要的心得明确分工你负责决策和质量AI 负责执行和辅助清晰沟通描述要具体一次只做一件事及时验证不要盲信测试并验证持续学习理解 AI 的能力边界不断优化协作模式记住AI 是工具不是替代品。它能让你的效率更高但最终的代码质量仍然取决于你的判断。从简单的任务开始逐步建立信任你会发现 AI 能为你节省大量时间让你专注于更有价值的工作。下一步下一章我们将学习如何用 AI 进行代码审查和质量保障确保代码的可维护性和安全性。你也可以继续探索本课程 core-skills 下的 MCP、Claude Agent SDK、基于 GitHub 的迭代开发 等进阶模块进一步扩展你的 AI 协作能力。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐Easy-Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审Easy Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审 导读 当你面对一个上万行文件的项目时从哪里教程文档easy-vibe 实战构建系统化的 AI 辅助开发工作流新功能、Bug 修复、重构与代码审查全流程easy vibe 实战构建系统化的 AI 辅助开发工作流新功能、Bug 修复、重构与代码审查全流程 在之前的章节中我们已经学会了使用 AI IDE 编教程文档easy-vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用easy vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用 本篇是 Datawhale e教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 构建高效的 AI 辅助开发工作流：从需求到代码审查的完整实战指南（easy-vibe）
教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载导读本文基于 docs/de-de/stage-3/core-skills/workflow/index.md 系统讲解如何在真实开发场景中建立一套「人机协作」的开发工作流。你将掌握 AI 的能力边界判断、四种项目类型的差异化开发策略、新功能开发/故障排查/代码重构/代码审查四类高频任务的完整流程以及如何通过构建项目知识库如AGENTS.md让 AI 真正理解你的项目。文中所有提示词模板均可直接复制到 Claude Code 等 AI 编程工具中使用。在之前的课程中你已经学会了使用 AI IDE 编程、用 Git 管理代码版本、设计并实现 API 接口。但当真正面对一个开发任务时新的问题会出现「这个项目有几千个文件我该从哪里开始」「老板让我加一个新功能但我完全不了解这部分代码库。」「我完全不知道这个 bug 出在哪里代码太多了。」「我要重构这堆代码但我害怕弄坏什么。」这些问题的核心是如何在真实开发场景中高效地利用 AI 工具完成任务本课将帮助你建立一套系统化的 AI 辅助开发工作流让你在不同的开发场景中高效使用 AI。我们会通过具体示例展示如何在开发新功能、排查故障、重构代码等场景中运用 AI。前置要求学习本部分之前建议先熟悉以下内容AI-IDE 基础——掌握 AI IDE 的基本用法Git 与 GitHub 工作流——理解代码版本管理用大模型编写 API 代码——理解 AI 辅助开发的基本概念你将学到理解 AI 在开发流程中的角色及其能力边界掌握不同项目类型下的 AI 辅助开发策略学会在新功能开发、故障排查、代码重构等场景中使用 Claude Code构建项目知识库提升与 Claude Code 的协作效率掌握提升 AI 协作效率的实用技巧1. 理解 AI 的能力边界在开始用 AI 辅助开发之前我们必须先弄清楚 AI 能做什么、不能做什么。只有这样才能建立起正确的协作模式。1.1 AI 擅长什么把 AI 想象成一个非常聪明的助理但它仍然需要清晰明确的指令。它可以根据你的描述快速搭建代码骨架可以在几秒钟内读完几千行代码并找到你需要的部分。遇到明显的语法错误或常见的安全漏洞它能帮你发现。诸如批量重命名变量、格式化代码、生成文档注释这类重复性任务特别适合交给 AI。简而言之AI 擅长那些规则清晰、可以自动化的工作。1.2 AI 不擅长什么但 AI 也有它的局限性它不理解你的业务逻辑。除非你详细地解释给它听否则它不会知道你公司的订单流程是如何运转的。它无法做出技术选型、架构设计这类需要权衡利弊的决策因为这些依赖你的经验和项目理解。它不知道你团队的特殊约定比如「所有 API 都必须有日志」或「错误码必须用枚举」。你需要把这些规则配置好或明确地告诉 AI。最重要的是AI 生成的代码不能直接使用你必须审查和测试。它可能生成看起来正确但实际上有问题的代码也可能忽略某些边界情况。1.3 如何与 AI 协作理解了 AI 的能力边界之后协作模式就清晰了你负责决定做什么、做决策、质量把关AI 负责执行具体的编程任务、查找信息、发现明显问题这就像和一个初级开发者合作你告诉他需要做什么他来实现然后你来审查代码。区别在于AI 的执行速度快得多但判断力比人弱。2. 不同项目类型的开发策略不同类型的项目需要不同的开发方式和 AI 使用策略。选对策略能显著提升开发效率。2.1 新项目从零开始项目特点没有历史包袱可以自由设计需要确立项目结构和代码规范适合快速迭代和试错推荐工作流第 1 步规划项目结构在动手写代码之前先让 AI 帮忙规划项目结构和技术选型我想创建一个任务管理应用功能包括 - 用户注册和登录 - 任务的创建、编辑和删除 - 任务分类和标签 - 任务提醒 请帮我 1. 推荐合适的技术栈 2. 设计项目目录结构 3. 规划数据库表结构第 2 步搭建基础框架基于规划让 AI 创建项目的基础结构基于我们刚才讨论的方案请帮我 1. 创建项目目录结构 2. 初始化配置文件package.json、.env 等 3. 创建基础的服务端代码第 3 步按优先级逐个实现功能按照优先级逐个实现功能模块现在实现用户注册功能要求如下 - 支持邮箱和密码注册 - 密码加密存储 - 邮箱验证要点尽早确立代码规范让 AI 生成的代码遵循规范每个功能模块完成后立即测试验证及时更新项目文档2.2 成熟项目大型既有代码库项目特点代码库庞大存在历史约定需要保持代码风格一致改动必须考虑影响范围推荐工作流第 1 步理解项目结构在改动代码之前先让 AI 帮忙理解项目这是一个电商项目我需要添加一个优惠券功能。 请帮我 1. 分析整体项目结构 2. 找出与订单相关的代码 3. 看看其他类似功能是怎么实现的第 2 步查找参考代码让 AI 在项目中找出类似的实现作为参考请查找项目中其他促销功能如满减、折扣是如何实现的第 3 步遵循既有风格让 AI 按照既有代码的风格实现新功能请参照满减功能的实现方式来实现优惠券功能。 保持相同的代码风格和目录结构。要点先理解后修改不破坏既有架构保持代码风格一致修改后测试相关功能2.3 快速原型验证想法项目特点速度第一代码质量其次用于验证产品想法或技术方案之后可能被丢弃或重写推荐工作流直接描述需求、快速实现创建一个简单的 Todo 应用要求 - 支持添加、删除、标记任务完成 - 数据本地存储 - UI 保持简单能跑就行快速迭代加上搜索功能 切换成深色主题 添加任务分类要点不必过于担心代码质量和规范快速验证想法、及时调整方向如果原型成功后续需要重构2.4 维护项目以修复问题为主项目特点代码已稳定主要任务是修复问题需要快速定位问题改动要谨慎避免引入新问题推荐工作流第 1 步定位问题用户反馈点击「提交订单」按钮后页面卡死 控制台报错TypeError: Cannot read property id of undefined 请帮我 1. 分析可能的原因 2. 找到相关代码第 2 步分析根因检查这个错误在什么情况下会出现 检查数据流第 3 步实施修复修复这个问题并且 1. 添加防御性代码避免类似问题 2. 添加错误提示改善用户体验要点修复后充分测试确保不影响其他功能添加防御性代码提升系统健壮性记录问题和解决方案供日后参考3. 常见开发任务的 AI 工作流日常开发中我们会遇到很多不同类型的任务。下面介绍几种最常见的 AI 辅助工作流。3.1 开发新功能场景产品经理给你一个新需求你需要实现一个新功能。完整工作流第 1 步理解需求由你完成在动手写代码之前先明确要实现什么功能输入输出是什么有哪些边界条件和异常情况有什么性能和安全性要求第 2 步理解既有代码求助 AI我要实现一个用户评论功能。请帮我 1. 检查项目中是否已有类似功能 2. 弄清用户数据和文章数据是如何存储的 3. 了解本项目中的数据库操作约定第 3 步制定实现方案与 AI 协作基于刚才的分析实现评论功能需要 1. 创建评论数据模型 2. 实现评论的 CRUD 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 吗 你好的实现 API3.2 故障排查场景用户报告了一个问题你需要快速定位并修复。完整工作流第 1 步收集信息由你完成记录以下信息错误信息是什么如何复现这个问题从什么时候开始出现的影响范围有多大第 2 步定位问题求助 AI用户反馈点击「提交订单」按钮后页面卡死 浏览器控制台报错TypeError: Cannot read property id of undefined 错误出现在 checkout.js 的第 45 行 请帮我 1. 分析可能的原因 2. 找到相关代码 3. 检查数据流第 3 步分析根因与 AI 协作检查这个 user 对象是从哪里来的 调查在什么情况下 user 会是 undefined第 4 步实施修复AI 生成你审查修复这个问题要求 1. 添加防御性代码检查用户是否存在 2. 如果用户不存在跳转到登录页 3. 添加友好的错误提示第 5 步验证修复由你完成用原始步骤复现问题确认已解决测试相关功能确保没有引入新问题思考其他地方是否也存在类似问题真实对话示例你有用户反馈登录后刷新页面就被登出了 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 代码重构场景代码变得难以维护需要重构以提升代码质量。完整工作流第 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 test3.4 代码审查Code Review场景同事提交了代码你需要进行审查。完整工作流第 1 步快速理解变更求助 AI总结这个 PR 改了什么 主要改了哪些文件第 2 步检查常见问题求助 AI审查这次变更重点检查 1. 安全问题SQL 注入、XSS 等 2. 性能问题N1 查询、内存泄漏等 3. 明显的错误 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]); 需要我修复吗4. 构建项目知识库为了帮助 AI 更好地理解你的项目建议在项目内建立知识库。这样 AI 就能按照你的规范和习惯来工作。仓库实例本仓库easy-vibe根目录就维护了一份真实的 AGENTS.md其中记录了项目结构docs/为 VitePress 站点源码、构建命令npm run dev/npm run build、编码风格Prettier 格式化、Vue 组件命名规范、测试与提交流程等。这正是「项目知识库」在真实开源项目中的落地形态可以对照下面的模板理解其作用。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 创建 feature 分支 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对照仓库中的 AGENTS.md 可以看到真实项目中的这类文件通常还会补充「目录与模块组织」如docs/.vitepress/theme/自定义主题、「构建与测试命令」easy-vibe 要求 Node.js 18、「提交与 PR 规范」Conventional Commits 风格如feat:、fix:等章节。知识库越贴近项目实际AI 产出的代码就越符合预期。4.2 记录常见问题与解决方案在项目中创建docs/troubleshooting.md记录常见问题# 常见问题 ## 环境问题 ### 问题npm install 失败 **原因** Node 版本不兼容 **解决** 使用 Node.js 18 或更高版本 ### 问题数据库连接失败 **原因** 环境变量未配置 **解决** 复制 .env.example 为 .env 并填写数据库连接信息 ## 功能问题 ### 问题登录后刷新页面被登出 **原因** token 存储在 sessionStorage **解决** 改用 localStorage ### 问题图片上传失败 **原因** 文件大小超出限制 **解决** 在前端增加文件大小校验限制为 5 MB4.3 维护技术决策记录创建docs/decisions/目录记录重要的技术决策# ADR-001选择 PostgreSQL 作为数据库 ## 状态 已接受 ## 背景 项目需要选择关系型数据库候选方案为 MySQL 和 PostgreSQL。 ## 决策 选择 PostgreSQL ## 理由 1. 更好的 JSON 支持适合存储课程内容 2. 全文搜索能力更强 3. 团队更熟悉 PostgreSQL ## 影响 - 需要学习 PostgreSQL 特有功能 - 部署需要 PostgreSQL 环境技术决策记录ADRArchitecture Decision Record的价值在于当 AI 遇到涉及技术选型的问题时可以直接从这些记录中读取「为什么这样选」的上下文从而给出与团队方向一致的判断而不是凭通用知识猜测。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效果查询时间从 2000 ms 降到 50 ms## 5.6 学会提问的艺术 **技巧 1先问「为什么」** text 为什么这段代码会导致内存泄漏 为什么这里应该用 useCallback 而不是普通函数技巧 2询问多种方案实现用户认证有哪几种不同的方式 每种方式的优缺点是什么技巧 3请求解释这段代码是如何工作的 能详细解释一下这个算法吗6. 常见问题FAQF1AI 生成的代码可以直接使用吗答不可以必须审查和测试。AI 生成的代码可能存在以下问题逻辑错误或边界情况处理不当不符合项目代码规范存在安全风险性能优化不足你需要仔细阅读生成的代码理解其逻辑测试各种场景确认符合项目规范F2AI 误解了我的意思怎么办答及时纠正重新描述需求。我不是这个意思我的意思是…… 这个理解不对应该是…… 让我重新描述一下需求……如果多次纠正仍然错误可以提供更多上下文给出具体的代码示例把任务拆分成更小的部分F3遇到 AI 解决不了的问题怎么办答AI 不是万能的有些问题必须自己解决。AI 可能无法解决的问题非常新的技术AI 的知识有截止日期你团队独有的业务逻辑需要访问外部系统的问题复杂的性能优化问题这时你需要阅读官方文档搜索相关解决方案请教有经验的同事在社区提问F4如何判断 AI 的建议是否合理答用你自己的经验和知识来判断。评估标准是否符合最佳实践是否考虑了边界情况是否存在潜在安全风险是否匹配项目的技术栈性能是否可以接受如果不确定可以让 AI 解释为什么提出这个方案询问替代方案咨询团队成员F5团队应该如何协作使用 AI答建立统一的规范和共享的知识库。团队协作建议共享项目的CLAUDE.md配置统一代码规范和风格记录常见问题的解决方案定期分享有用的 Prompt在代码审查时检查 AI 生成的代码F6如何避免过度依赖 AI答坚持学习和思考。AI 是助手不是替代品。建议理解 AI 生成的代码而不是盲目复制主动学习不懂的概念定期复习基础知识先尝试自己解决问题再用 AI 验证参与代码审查向他人经验学习7. 总结本章你已掌握AI 能力边界理解 AI 擅长什么、不擅长什么建立正确的协作模式项目类型策略新项目、成熟项目、快速原型、维护项目各自不同的开发策略常见任务工作流新功能开发、故障排查、代码重构、代码审查的完整流程项目知识库学会搭建项目文档CLAUDE.md/AGENTS.md、故障排查记录、技术决策记录让 AI 更好地理解你的项目协作技巧提升 AI 协作效率的实用方法最重要的心得明确分工你负责决策和质量AI 负责执行和辅助清晰沟通描述要具体一次只做一件事及时验证不要盲信测试并验证持续学习理解 AI 的能力边界不断优化协作模式记住AI 是工具不是替代品。它能让你的效率更高但最终的代码质量仍然取决于你的判断。从简单的任务开始逐步建立信任你会发现 AI 能为你节省大量时间让你专注于更有价值的工作。下一步下一章我们将学习如何用 AI 进行代码审查和质量保障确保代码的可维护性和安全性。你也可以继续探索本课程 core-skills 下的 MCP、Claude Agent SDK、基于 GitHub 的迭代开发 等进阶模块进一步扩展你的 AI 协作能力。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐Easy-Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审Easy Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审 导读 当你面对一个上万行文件的项目时从哪里教程文档easy-vibe 实战构建系统化的 AI 辅助开发工作流新功能、Bug 修复、重构与代码审查全流程easy vibe 实战构建系统化的 AI 辅助开发工作流新功能、Bug 修复、重构与代码审查全流程 在之前的章节中我们已经学会了使用 AI IDE 编教程文档easy-vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用easy vibe 实战构建系统化 AI 辅助开发工作流让 Claude Code 在新功能、排错、重构与代码审查中真正可用 本篇是 Datawhale e教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考