第29期 | 实战3AI驱动开发全流程 今天你将学会体验一个完整功能从 0 到 1 用 AI 协作开发的全过程记录 AI 参与度——AI 做了多少、你做了多少分析效率提升——对比传统开发 vs AI 协作开发的时间差异总结 AI 协作开发的最佳实践和踩坑记录 核心知识AI 驱动开发的完整流程这不是一个理论框架——这是我实际做一个功能的完整记录。任务给博客系统添加「标签管理系统」。五阶段流程1. 需求分析 → 你主导AI 辅助梳理 2. 方案设计 → 你决策AI 提供选项 3. 代码实现 → AI 主导你审查 4. 测试验证 → AI 生成你审查 执行 5. 文档完善 → AI 主导你审查阶段1需求分析5分钟我的初始需求描述「博客需要标签管理功能——能创建、编辑、删除标签搜索标签给文章分配标签。」这个描述太模糊了。我用 AI 来帮我把模糊需求变成清晰需求Prompt我的初始需求博客需要标签管理功能——能创建、编辑、删除标签搜索标签给文章分配标签。 帮我把这个需求拆解成具体的功能点列表标注优先级P0必须/P1重要/P2可选和依赖关系。AI 拆解的需求列表功能点优先级依赖Tag 数据模型id, name, color, slugP0无Tag CRUD创建/编辑/删除P0Tag 数据模型Tag 搜索模糊匹配P1Tag 数据模型文章-标签关联多对多P0Tag 数据模型 Article 数据模型TagFilter 组件博客列表页按标签过滤P1文章-标签关联标签颜色自定义P2Tag CRUD标签使用统计每个标签有多少文章P2文章-标签关联我的调整P2 功能先不做先实现 P0 P1。AI 参与度需求拆解 AI 做了 80%我调整了 20%砍掉 P2。时间 5 分钟 vs 传统方式 15 分钟。阶段2方案设计10分钟Prompt项目React 18 TypeScript Zustand Tailwind Vite 目录结构feature-basedsrc/features/xxx/ 为标签管理系统设计方案 1. 数据模型设计TypeScript 类型定义 2. 状态管理方案Zustand store 设计 3. 组件架构需要哪些组件各自职责 4. API 层设计需要哪些接口 5. 路由设计标签管理页面的 URL 参考现有 blog feature 的设计风格src/features/blog/AI 方案输出数据模型interfaceTag{id:string;name:string;slug:string;// URL 友好的标识自动生成color:string;// 标签颜色默认 #666createdAt:string;}interfaceArticleTag{articleId:string;tagId:string;}组件架构src/features/tag/ ├── components/ │ ├── TagList.tsx — 标签列表带搜索、分页 │ ├── TagForm.tsx — 创建/编辑标签表单 │ ├── TagFilter.tsx — 博客列表页的标签过滤 │ └── TagBadge.tsx — 标签展示徽章用在文章卡片和详情页 ├── store/ │ └── tagStore.ts — Zustand storeCRUD 搜索 统计 ├── services/ │ └── tagService.ts — API 接口层 ├── hooks/ │ └── useTags.ts — 便捷 hooks └── types/ │ └── index.ts — 类型定义我的决策调整✅ 数据模型设计合理——slug 自动生成是好主意✅ 组件架构清晰——TagBadge 是我没想到的但很有用❌ API 层我不需要——这是纯前端项目标签数据用 localStorage mock✅ store 设计合理——同意AI 参与度方案设计 AI 做了 70%我调整了 30%砍掉 API 层改用 mock 数据。时间 10 分钟 vs 传统方式 30 分钟。阶段3代码实现30分钟我用 Composer CRISP Prompt 逐个实现组件实现 TagBadge5分钟src/features/tag/types/index.ts 创建 TagBadge 组件 - 展示标签名 标签颜色的小徽章 - 支持两种尺寸sm用在卡片上和 md用在详情页 - Propstag: Tag, size: sm | md, onClick?: () void - 样式圆角背景色 白色文字背景色用 tag.colorAI 生成 → 我审查 → ✅ 直接可用不需要修改。实现 TagForm8分钟src/features/tag/types/index.ts src/features/tag/store/tagStore.ts 创建 TagForm 组件 - 创建新标签 / 编辑已有标签的表单 - Propsmode: create | edit, initialTag?: Tag, onSubmit, onCancel - 表单字段name必填2-20字符、color选色器默认#666 - name 输入时自动生成 slug中文转拼音英文直接 slugify - 验证name 不能为空、不能重复查 store - 提交后调用 store 的 createTag / updateTagAI 生成 → 我审查 → 发现 2 个问题验证用了window.alert→ 改为 inline error messageslug 生成只处理了英文 → 追加中文拼音处理追加修改 → 2 分钟 → 最终可用。实现 TagList8分钟src/features/tag/types/index.ts src/features/tag/store/tagStore.ts TagBadge.tsx 创建 TagList 组件 - 展示所有标签列表用 TagBadge 展示每个标签 - 上方有搜索框debounce 300ms模糊匹配 name/slug - 支持编辑点击标签弹出 TagForm edit 模式 - 支持删除点击删除按钮弹出确认对话框 - 底部有「创建新标签」按钮AI 生成 → 审查 → ✅ 可用只改了搜索为大小写不敏感。实现 TagFilter5分钟src/features/tag/types/index.ts src/features/tag/store/tagStore.ts TagBadge.tsx 创建 TagFilter 组件 - 博客列表页的标签过滤栏 - 展示所有标签TagBadge sm 尺寸 - 点击标签切换选中/取消选中 - 「全部」按钮清除所有过滤 - 多标签组合过滤选中的标签用 Setstring 管理 - 过滤状态同步到 URL?tagsreact,typescriptAI 生成 → 审查 → ✅ 可用。实现 tagStore4分钟之前方案阶段已经定义好了 store 结构直接让 AI 按方案实现src/features/tag/types/index.ts 按之前确认的方案实现 tagStore.ts - state: tags, searchQuery, selectedTags, loading, error - actions: fetchTags, createTag, updateTag, deleteTag, setSearchQuery, toggleTag, clearFilter - computed: filteredTags按搜索选中标签过滤、tagStats每个标签的文章数 - persist tags 到 localStorageAI 参与度统计代码实现阶段组件AI 生成代码量我审查修改时间AI 占比TagBadge100%0 分钟直接可用100%TagForm90%2 分钟90%TagList95%1 分钟95%TagFilter100%0 分钟100%tagStore100%0 分钟100%总计AI 写了 95% 的代码我审查修改了 5%。时间 30 分钟 vs 传统方式约 2-3 小时。阶段4测试验证15分钟AI 生成测试src/features/tag/store/tagStore.ts 为 tagStore 生成测试用例 - 正常流程fetchTags、createTag、updateTag、deleteTag - 边界情况搜索为空、标签名重复、删除不存在标签 - 状态一致性搜索 选中标签组合过滤 框架VitestAI 生成 → 我补充了 2 个边界情况 → 运行测试 → 全部通过。AI 参与度测试代码 AI 生成 85%我补充 15%。时间 15 分钟 vs 传统方式约 45 分钟。阶段5文档完善5分钟为标签管理功能生成文档 1. TagBadge 组件文档Props 表格 使用示例 2. tagStore 文档state actions 使用示例 3. 功能说明在 README 中添加标签管理章节AI 生成 → 我审查格式 → ✅ 直接使用。全流程效率分析阶段AI 协作时间传统预估时间效率提升需求分析5 分钟15 分钟3x方案设计10 分钟30 分钟3x代码实现30 分钟150 分钟5x测试验证15 分钟45 分钟3x文档完善5 分钟30 分钟6x总计65 分钟270 分钟4.1xAI 参与度总结维度AI 占比你占比代码量95%5%审查修改决策量20%80%需求、方案、验证时间量70%生成等待执行30%审查决策验证核心发现AI 写了绝大多数代码但你做了绝大多数决策。效率提升的本质不是「AI 替你写代码」而是「你把写代码的时间省下来专注做决策和验证」。常见误区误区1让 AI 从头到尾做完一切AI 能写代码但不能做业务决策。你必须参与需求分析和方案设计——否则 AI 的代码可能功能完整但方向不对。误区2不审查 AI 的代码直接用95% 的 AI 代码是正确的但 5% 的错误可能是最关键的——比如安全漏洞、性能问题、边界情况遗漏。审查是你的责任。误区3只看时间节省不看质量AI 协作开发节省了 4 倍时间但如果质量下降节省的时间会在后续 Bug 修复中浪费掉。确保 AI 代码通过测试和审查后才算完成。 AI协作实战实战你自己做一个完整功能选你项目中的一个新功能按本期五阶段流程执行需求分析用 AI 拆解需求标注优先级方案设计用 AI 生成方案你做关键决策代码实现用 Composer CRISP Prompt 逐个实现测试验证用 AI 生成测试运行并补充遗漏文档完善用 AI 生成文档记录每个阶段的耗时AI 参与度代码量占比遇到的问题和解决方式效率提升倍数把记录做成一个表格像本期的效率分析表一样。学到了什么AI 协作开发不是「AI 替你做一切」而是「你决策、AI 执行、你验证」。你的角色从「写代码的人」变成了「做决策和审查的人」——这要求你更懂架构和业务逻辑而不是更少。 动手练习练习1简单记录一个功能的 AI 参与度选你最近做的一个功能用 AI 协作的记录 AI 在每个阶段的参与比例。跟本期的数据对比看你的 AI 使用效率在什么水平。练习2中等按五阶段流程开发一个新功能严格按本期的五阶段流程从需求分析到文档完善做一个新功能。每阶段记录耗时和 AI 参与度做成效率分析表。练习3挑战对比实验同一个功能两种方式选一个小功能比如 30 分钟能手写完的分别用两种方式做方式 A纯手写不用 AI方式 BAI 协作按五阶段流程对比时间、代码质量Bug 数、你对代码的理解深度。写一份实验报告结论是什么AI 协作真的提升了效率吗 本期要点五阶段流程需求分析 → 方案设计 → 代码实现 → 测试验证 → 文档完善你决策 AI执行AI 参与度代码量 95% AI 写决策量 80% 你做——效率来自分工明确效率提升 4x65 分钟 vs 270 分钟但前提是审查质量不降审查是你的责任5% 的 AI 代码错误可能是最关键的——安全、性能、边界你从「写代码的人」变成「做决策和审查的人」这要求你更懂架构和业务逻辑 下期预告下一期是模块三的复盘——AI 工具使用的红线。什么该让 AI 做、什么不该、如何避免过度依赖。你将建立一份个人 AI 使用准则。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交