Easy-Vibe 实战：构建 Claude Code AI 辅助开发工作流（新功能、修 Bug、重构与代码评审）

Easy-Vibe 实战构建 Claude Code AI 辅助开发工作流新功能、修 Bug、重构与代码评审【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe导读当你面对一个上万行文件的项目时从哪里入手老板让你加一个新功能但你完全不熟悉这部分代码一个 Bug 毫无头绪一堆需要重构的代码却怕改坏。这些问题的本质是如何在真实开发场景中高效地使用 AI 工具把活干完。本文基于 Easy-Vibe 课程 Stage 3 的《AI-Assisted Development Workflow》章节系统讲解如何围绕 Claude Code 搭建一套可复用的 AI 辅助开发工作流覆盖新功能开发、Bug 修复、代码重构、代码评审四大高频场景并教你通过项目知识库CLAUDE.md/AGENTS.md和协作技巧让 AI 真正成为你的得力助手。读完本文你将掌握一套人能决策、AI 能执行、流程可验证的完整方法论并看到本仓库Easy-Vibe 文档项目中的真实落地范例。前置知识学习本节前建议先掌握AI IDE 基础——掌握 AI IDE 的基本用法Git 与 GitHub 工作流——理解代码版本管理用大模型辅助编写 API 代码——理解 AI 辅助开发的基本概念1. 先认清 AI 的能力边界在开始让 AI 辅助开发之前我们必须先搞清楚 AI 擅长什么、不擅长什么才能建立正确的协作模型。1.1 AI 擅长什么把 AI 想象成一个非常聪明但仍需要明确指令的助理它能根据你的描述快速生成代码骨架能在几秒钟内读完成千上万行代码帮你找到需要的那部分能发现明显的语法错误和常见的安全漏洞。而像批量修改变量名、格式化代码、生成文档注释这类重复性工作尤其适合交给 AI 处理。一句话总结AI 擅长那些规则清晰、可以被自动化的工作。1.2 AI 不擅长什么但 AI 也有明显的局限它不懂你的业务逻辑——除非你详细告诉它否则它不知道你们公司的订单流转是怎么回事它不能做技术选型、架构设计这类需要权衡利弊的决策因为这依赖你对项目的经验和理解它不知道你们团队的特殊约定比如所有 API 必须加日志、错误码必须用枚举这些规则需要你配置好或明确告诉它。最关键的一点AI 生成的代码不能直接使用必须经过你的评审和测试。它可能生成看起来正确但实际上有问题的代码也可能忽略某些边界情况。1.3 如何与 AI 协作理解了能力边界后协作模型就清晰了你负责决定做什么、做决策、保证质量AI 负责执行具体的编码工作、查找信息、暴露明显的问题。这就像和一个初级开发者共事你告诉他该做什么他实现然后你 review 代码。区别在于 AI 执行速度更快但判断力比人弱。2. 不同类型项目的 AI 开发策略不同类型的项目需要不同的开发风格和 AI 使用策略选对策略能大幅提升开发效率。2.1 全新项目从零开始项目特征没有历史包袱可以自由设计需要建立项目结构和代码规范适合快速迭代和试错。推荐工作流Step 1规划项目结构。动手写代码前先让 AI 帮你规划项目结构和技术选型I want to build a task management app with these features: - User registration and login - Create, edit, and delete tasks - Task categories and tags - Task reminders Please help me: 1. Recommend a suitable tech stack 2. Design the project directory structure 3. Plan the database schemaStep 2搭建基础框架。基于规划让 AI 创建基础项目结构Based on the plan we just discussed, help me: 1. Create the project directory structure 2. Initialize config files (package.json, .env, etc.) 3. Create the basic server codeStep 3按优先级逐个实现功能模块Now implement the user registration feature with these requirements: - Register with email and password - Store passwords in encrypted form - Email verification关键点尽早建立代码规范让 AI 生成的代码遵循这些规范每个功能模块完成后立即测试验证及时更新项目文档。2.2 成熟项目大型存量代码库项目特征代码库庞大且有历史约定需要保持编码风格一致改动必须考虑影响范围。推荐工作流Step 1先理解项目结构再动手改代码This is an e-commerce project, and I need to add a coupon feature. Please help me: 1. Analyze the overall project structure 2. Find the order-related code 3. See how other similar features are implementedStep 2寻找参考代码。让 AI 找到项目中类似的实现作为参照Find how other promotional features in the project, such as full reduction and discounts, are implementedStep 3沿用既有风格实现新功能Please implement the coupon feature by referring to how the full-reduction promotion is implemented. Keep the same code style and directory structure.关键点先理解再改动不要破坏现有架构保持代码风格一致改动后测试相关功能。2.3 快速原型验证想法项目特征速度第一代码质量其次用于验证产品想法或技术路线之后可能被丢弃或重写。推荐工作流直接描述需求、快速实现Build a simple todo app with these requirements: - Add, delete, and mark tasks as completed - Store data locally - Keep the UI simple, as long as it works然后快速迭代Add search Switch it to a dark theme Add task categories关键点不要太在意代码质量和规范快速验证想法并及时调整方向如果原型成功之后需要重构。2.4 维护项目以修 Bug 为主项目特征代码已稳定主要任务是修问题需要快速定位问题改动要谨慎避免引入新问题。推荐工作流Step 1定位问题User feedback: after clicking the Submit Order button, the page freezes Console error: TypeError: Cannot read property id of undefined Please help me: 1. Analyze possible causes 2. Find the relevant codeStep 2分析根因Check in what situations this error occurs Inspect the data flowStep 3实施修复Fix this problem, and: 1. Add defensive code to avoid similar issues 2. Add error messages to improve user experience关键点修复后充分测试确保不影响其他功能添加防御性代码提升系统健壮性记录问题与解决方案供后续参考。3. 常见开发任务的完整工作流日常开发中我们会遇到各种类型的任务以下是几种最常见的 AI 辅助工作流。3.1 开发新功能场景产品经理给你一个新需求需要实现一个新功能。完整工作流Step 1理解需求你做。动手写代码前先明确要实现什么功能输入输出是什么边界条件和异常情况有哪些性能和安全性有什么要求Step 2理解现有代码让 AI 帮忙I need to implement a user comment feature. Please help me: 1. Check whether there is anything similar in the project 2. Find how user data and article data are stored 3. Understand the database operation conventions in this projectStep 3制定实现计划与 AI 一起Based on the analysis we just did, implementing the comment feature requires: 1. Creating a comment data model 2. Implementing CRUD APIs for comments 3. Adding comment display and posting functionality to the frontend Please help me confirm whether this plan is reasonable and whether anything is missingStep 4实现功能AI 生成你评审According to the plan, first implement the comment data model. Requirements: - Include comment content, author, article ID, and creation time - Support nested comment replies - Add necessary indexesNow implement the comment API endpoints. Requirements: - Post a comment - Delete a comment (only your own comments can be deleted) - Get all comments for an article - Support paginationFinally implement the frontend comment component. Requirements: - Show the comment list - Comment posting form - Support replying to commentsStep 5测试验证你做。手动测试主流程测试空内容、超长内容等边界情况测试权限控制如不能删除别人的评论让 AI 帮你编写自动化测试。真实对话示例You: I want to add a user comment feature so users can post comments on articles AI: Okay, let me first understand the project structure. [AI analyzes the project code] I see that the project already has a user system (models/user.js) and an article system (models/article.js). Implementing the comment feature requires: 1. Creating a comment data model (models/comment.js) 2. Adding comment-related APIs (routes/comment.js) 3. Adding comment display and posting functionality to the article detail page Should I start implementing it? You: Yes, lets start. Create the data model first AI: [Generates models/comment.js] I have created the comment data model with these fields: - id: comment ID - content: comment content - userId: author ID - articleId: article ID - parentId: parent comment ID (for nested replies) - createdAt: creation time Should I implement the API next? You: Yes, implement the API3.2 修复 Bug场景用户反馈问题需要快速定位并修复。完整工作流Step 1收集信息你做。记录以下信息错误信息是什么如何复现什么时候开始出现的影响范围有多大Step 2定位问题让 AI 帮忙User feedback: after clicking the Submit Order button, the page freezes Browser console error: TypeError: Cannot read property id of undefined The error occurs on line 45 of checkout.js Please help me: 1. Analyze possible causes 2. Find the relevant code 3. Check the data flowStep 3分析根因与 AI 一起Check where this user object comes from Inspect under what circumstances user could be undefinedStep 4实施修复AI 生成你评审Fix this problem with these requirements: 1. Add defensive code to check whether user exists 2. If user does not exist, redirect to the login page 3. Add a friendly error messageStep 5验证修复你做。用原始步骤复现问题并确认已解决测试相关功能确保没有引入新问题思考其他地方是否也存在类似问题。真实对话示例You: A user reported that after logging in, refreshing the page logs them out AI: This is usually a token storage or validation issue. Let me check: 1. Where is the token stored, localStorage or cookies? 2. Is the token reloaded when the page refreshes? Please tell me which file contains the token-related code You: utils/auth.js AI: [Analyzes utils/auth.js] I found the issue: the token is stored in sessionStorage, and sessionStorage is cleared when the page is refreshed. Solution: use localStorage instead Would you like me to change it? You: Yes, change it AI: [Modifies the code] The change is complete. The token is now stored in localStorage, so it will not be lost after a page refresh. I recommend that you test: 1. Log in and refresh the page to confirm the user stays logged in 2. Close and reopen the browser to confirm the user stays logged in3.3 重构代码场景代码变得难以维护需要重构以提升代码质量。完整工作流Step 1明确重构目标你做。要解决什么问题重复代码结构混乱性能问题重构范围有多大可以接受多大的风险。Step 2制定重构计划与 AI 一起These three functions (getUserList, getArticleList, getCommentList) contain a lot of duplicated code for pagination, sorting, and filtering. Please help me: 1. Analyze the duplicated parts 2. Propose a refactoring plan 3. Evaluate the risk of the refactorStep 3准备安全网让 AI 帮忙。重构前先让 AI 写好测试用例确保重构后行为不变Before refactoring, please write test cases for me first so that the behavior stays the same after the refactorStep 4逐步重构AI 执行你验证According to the plan we just discussed, first extract the shared functionNow optimize the data structureFinally update the call sitesStep 5验证结果你做。运行所有测试确保通过手动测试关键功能检查代码质量是否提升。真实对话示例You: These three functions have a lot of duplicate code. Can you help me refactor them? [Paste the code of the three functions] AI: I analyzed them, and the main differences are: - getUserList: gets the user list - getArticleList: gets the article list - getCommentList: gets the comment list Their common logic is pagination, sorting, and filtering. Refactoring plan: 1. Extract a generic getList function 2. Pass the different parts as parameters This can reduce 80% of the duplicated code. Should I implement it? You: Yes, but first help me write test cases AI: [Generates tests] I have written tests for all three functions, covering the main use cases. Can I start refactoring now? You: Yes, start refactoring AI: [Refactors the code] Refactoring is complete. I created a generic getList function, and the original three functions now all call that shared function. Please run the tests to confirm everything works: npm test3.4 代码评审场景队友提交了代码需要你来评审。完整工作流Step 1快速理解改动让 AI 帮忙Summarize what this PR changed Which files were mainly modifiedStep 2检查常见问题让 AI 帮忙Check this change for: 1. Security issues (SQL injection, XSS, etc.) 2. Performance problems (N1 queries, memory leaks, etc.) 3. Obvious bugs 4. Whether the coding style follows the project conventionsStep 3深入评审你做。业务逻辑是否正确是否考虑了边界情况是否有更好的实现方式是否应该补充测试。Step 4给出反馈你做。指出需要修改的地方解释为什么需要改给出改进建议。真实对话示例SQL 注入问题You: Help me review this PR [Provide the PR link or code] AI: I reviewed the change and found these issues: 1. Security issues: - Line 23: user input is not escaped, which may lead to XSS risk - Line 45: the SQL query is built by string concatenation, which risks injection 2. Performance problems: - Line 67: the database is queried inside a loop, which creates an N1 problem 3. Code quality: - The handleSubmit function is too long (200 lines); consider splitting it - Error handling is missing Would you like me to explain any of these in more detail? You: Explain the SQL injection issue in detail AI: On line 45: javascript const query SELECT * FROM users WHERE name ${userName}; This directly concatenates user input into the SQL statement. If a user enters OR 11, it becomes: sql SELECT * FROM users WHERE name OR 11 This would return all user data. The correct approach is to use a parameterized query: javascript const query SELECT * FROM users WHERE name ?; db.query(query, [userName]); Would you like me to fix it?4. 构建项目知识库让 AI 更懂你的项目为了让 AI 更好地理解你的项目建议在项目内构建知识库让 AI 能按照你的约定和习惯工作。4.1 创建项目描述文件在项目根目录创建CLAUDE.md或AGENTS.md文件记录关键项目信息。本仓库就是一个真实范例Easy-Vibe 仓库根目录的 AGENTS.md 就是这样一个文件它包含了以下典型板块这也是 Claude Code / Agent 启动时默认读取的约定文件# Repository Guidelines ## Project Structure Module Organization - docs/: VitePress site source (Markdown content, sidebar/nav, assets referenced by docs). - assets/: repo-level images/media - scripts/, tools/, update_readmes.cjs: utility scripts for maintaining docs. ## Build, Test, and Development Commands This repo is a VitePress (Vue 3) documentation project. Requires Node.js ** 18**. bash npm install npm run dev # start local docs server (hot reload) npm run build # production build (use as CI-style check) npm run preview # preview the built site locally npm run format # run Prettier on the whole repoCoding Style Naming ConventionsFormatting: Prettier (npm run format).Vue components: Vue 3 SFCs withscript setup, PascalCase filenames.Docs: use clear headings and short paragraphs.Commit Pull Request GuidelinesCommits follow a Conventional Commits style seen in history:feat: ...,fix: ...,docs: ...对照本文 4.1 节给出的模板可以看出真实项目知识库的核心板块完全一致**项目概述、技术栈、项目结构、代码规范、开发流程、常用命令、注意事项、数据库结构**。例如 Common Tasks 板块记录的常用命令在 Easy-Vibe 的 [package.json](https://link.gitcode.com/i/b9ebe27ee715c9af12457e7615cf9815) 中都能一一对应验证npm run dev、npm test、npm run build、npm run format。 一个通用模板如下 markdown # Project Overview ## Project Summary This is an online learning platform that provides course management, user learning, assignment submission, and other features. ## Tech Stack - Frontend: React 18 TypeScript Vite - Backend: Node.js Express PostgreSQL - Deployment: Vercel (frontend) Railway (backend) ## Project Structuresrc/ ├── components/ # React components ├── pages/ # Page components ├── api/ # API calls ├── utils/ # Utility functions └── types/ # TypeScript type definitions## Code Conventions - Use ESLint and Prettier to format code - Component files use PascalCase (such as UserProfile.tsx) - Utility functions use camelCase (such as formatDate.ts) - Constants use UPPER_SNAKE_CASE (such as API_BASE_URL) ## Development Flow 1. Create a feature branch from main 2. Submit a PR after development is complete 3. Merge after code review passes ## Common Tasks - Start the development server: npm run dev - Run tests: npm test - Build for production: npm run build - Format code: npm run format ## Notes - All API calls must include error handling - User input must be validated and escaped - Use parameterized queries for database operations to avoid SQL injection - Sensitive information (passwords, tokens) must not be written to logs ## Database Schema - users: user table (id, email, password_hash, created_at) - courses: course table (id, title, description, teacher_id) - enrollments: enrollment table (id, user_id, course_id, enrolled_at)4.2 记录常见问题与解决方案在项目中创建docs/troubleshooting.md记录常见问题# Common Problems ## Development Environment Problems ### Problem: npm install fails **Cause:** Node version is incompatible **Solution:** Use Node.js 18 or higher ### Problem: database connection fails **Cause:** environment variables are not configured **Solution:** Copy .env.example to .env and fill in the database connection info ## Feature Problems ### Problem: after users log in, refreshing the page logs them out **Cause:** the token is stored in sessionStorage **Solution:** switch to localStorage ### Problem: image upload fails **Cause:** file size exceeds the limit **Solution:** add a file size check on the frontend and limit it to 5MB4.3 维护技术决策记录创建docs/decisions/目录记录重要的技术决策ADR# ADR-001: Choosing PostgreSQL as the Database ## Status Accepted ## Background The project needs to choose a relational database. The candidates are MySQL and PostgreSQL. ## Decision Choose PostgreSQL ## Rationale 1. Better JSON support, suitable for storing course content 2. Stronger full-text search 3. The team is more familiar with PostgreSQL ## Consequences - We need to learn PostgreSQL-specific features - Deployment requires a PostgreSQL environment5. 提升 AI 协作效率的实用技巧掌握一些实用技巧可以让你的 AI 协作更加高效。5.1 描述问题要清晰具体不好的描述This feature has a problem Help me optimize it好的描述After the user clicks the Submit button, the form is not submitted The browser console reports: Uncaught TypeError: Cannot read property value of null The error occurs on line 23 of form.js This list loads very slowly and has 1000 items Please help me add pagination with 20 items per page关键点提供具体的错误信息说明期望的结果给出相关上下文。5.2 一次只做一件事不好的做法一次让 AI 实现登录、注册、找回密码、个人中心、改密码、邮箱验证六个功能。好的做法Implement the login feature first, with these requirements: - Email and password login - Remember login state - Error messages (After it is done) Now implement the registration feature (After it is done) Now implement the password recovery feature关键点把大任务拆成小任务每完成一个任务就测试验证确认无误后再进行下一个。5.3 及时验证结果不好的做法让 AI 连续修改 10 个文件最后才发现第一个改动就是错的浪费大量时间。好的做法修改一个文件立即测试确认没问题再继续发现问题及时纠正。关键点小步快跑快速反馈不要盲目信任 AI保持对代码的掌控。5.4 善用上下文技巧一引用之前的对话Implement according to the plan we just discussed Refer to the previous getUserList function技巧二提供相关代码This is the existing user model code: [paste code] Please implement the article model in the same style技巧三说明项目背景This is an e-commerce project using React Node.js It already has a user system and a product system Now we need to add a shopping cart feature5.5 保存有价值的对话场景你解决了一个复杂问题。做法把解决方案记录到项目文档下次出现类似问题时参考它分享给团队成员。示例在docs/solutions/下创建文档# Solving the N1 Query Problem ## Problem Description When fetching the article list, the system queries the author information once per article, which causes a performance problem. ## Solution Use a JOIN query to fetch all the data in one go: sql SELECT articles.*, users.name as author_name FROM articles LEFT JOIN users ON articles.author_id users.idResult:query time dropped from 2000ms to 50ms### 5.6 学会提问的艺术 **技巧一先问为什么** text Why does this code cause a memory leak? Why should we use useCallback instead of a normal function?技巧二要求给出多个方案What are the different ways to implement user authentication? What are the pros and cons of each?技巧三要求解释How does this code work? Can you explain this algorithm in detail?6. 进阶佐证工作流在 Easy-Vibe 仓库中的落地形态以上方法论并非纸上谈兵。在 Easy-Vibe 这个真实的开源文档仓库中你可以看到工作流各环节的实际载体项目知识库文件AGENTS.md 位于仓库根目录是 Claude Code / 各类 AI Agent 默认读取的约定文件里面记录了项目结构docs/为 VitePress 站点源码、assets/为仓库级图片、scripts/为维护脚本、构建命令、编码规范Prettier 格式化、Vue 3 SFCscript setup、PascalCase 命名与提交规范Conventional Commits。这正是 4.1 节创建项目描述文件的真实样板。常用命令可验证知识库中Common Tasks板块声明的npm run dev、npm test、npm run build、npm run format与 package.json 中的 scripts 一一对应说明约定必须与事实一致是知识库可信的关键。上下文与工具扩展若你的任务需要浏览器自动化等额外能力可以在 MCP 配置中声明工具服务器仓库的 config/mcporter.json 给出了 MCP server 的标准 JSON 配置结构mcpServers下的命令、启动参数、日志目录可作为参考模板更系统的 MCP 用法可阅读 MCP 与 Claude Code 完全指南。Prompt 的实战形态本仓库 examples 目录下的示例 prompt如帮我做一个像这样的方块小游戏。人物可以走动也可以放方块。做好后帮我打开看看。展示了一句话需求 快速原型策略在真实项目中的用法对应第 2.3 节快速原型工作流。工具本身的快速上手Claude Code 的安装、首次启动配置与基础操作见 Claude Code 快速上手核心指南工作流章节正是建立在这些工具能力之上。这些仓库证据表明知识库文件、可执行命令、上下文注入、MCP 工具扩展构成了 AI 辅助开发工作流的四个落地支柱。7. 常见问题解答Q1AI 生成的代码可以直接使用吗A不能。AI 生成的代码可能存在逻辑错误或边界情况处理不当不符合项目编码规范安全风险性能优化不足。你需要仔细阅读生成的代码理解其逻辑测试不同场景确认符合项目规范。Q2AI 理解错我的意思怎么办A及时纠正并重新描述需求Thats not what I meant. What I mean is... This understanding is incorrect. It should be... Let me describe the requirement again...如果多次纠正后仍然不对可以提供更多上下文给出具体的代码示例把任务拆得更小。Q3遇到 AI 解决不了的问题怎么办AAI 不是万能的。AI 可能无法解决的问题包括太新的技术AI 知识存在截止日期你团队特有的业务逻辑需要访问外部系统的问题复杂的性能优化问题。这时你需要阅读官方文档搜索相关解决方案请教有经验的同事在社区提问。Q4如何判断 AI 的建议是否合理A用自己的经验和知识来判断。评估标准是否符合最佳实践是否考虑了边界情况是否存在潜在安全风险是否契合项目技术栈性能是否可接受。如果不确定可以让 AI 解释为什么这样建议、要求给出备选方案、或咨询团队成员。Q5团队应该如何用 AI 协作A建立共同的约定和共享的知识库。团队协作建议共享项目的CLAUDE.md配置统一代码规范和风格记录常见问题的解决方案定期分享有用的 prompt在代码评审时检查 AI 生成的代码。Q6如何避免过度依赖 AIA保持学习和思考。AI 是助手不是替代品。建议理解 AI 生成的代码而不是盲目复制主动学习不懂的概念定期复习基础知识先尝试自己解决问题再用 AI 验证参与代码评审学习他人经验。8. 本章总结通过本章你已掌握AI 的能力边界理解 AI 擅长与不擅长的事建立正确的协作模型项目类型策略针对全新项目、成熟项目、快速原型、维护项目采用不同开发策略常见任务工作流新功能开发、Bug 修复、代码重构、代码评审的完整流程项目知识库通过项目文档CLAUDE.md/AGENTS.md、troubleshooting、ADR让 AI 更懂你的项目协作技巧提升 AI 协作效率的实用方法。核心要点明确分工你做决策、保证质量AI 负责执行和辅助清晰沟通描述具体、一次只做一件事及时验证不盲信测试验证持续学习理解 AI 能力边界不断改进协作模式。记住AI 是工具不是替代品。它能让你的效率更高但最终的代码质量仍取决于你的判断。从简单任务开始逐步建立信任你会发现 AI 能帮你省下大量时间让你专注于更有价值的工作。下一步接下来将学习如何用 AI 进行代码评审与质量保障确保代码的可维护性与安全性。相关延伸可继续阅读 Claude Code 工作流最佳实践 的姊妹篇——用 GitHub Issues 端到端开发 与 Claude Code 团队协作。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考