文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载本篇指南基于 vibe-vibe 开源教程5.4 再进化项目的持续迭代与优化第一节展开核心回答一个问题为什么做完第一版只是开始你将理解完成 ≠ 结束的迭代逻辑、一次性作业心态与持续进化心态的本质区别掌握做 → 用 → 改 → 做的迭代循环并学会用第二章的灵魂三问为自己的待办清单项目找到下一步改进方向。文中所有原理都会落到本仓库demo-01-todo、demo-02-todo-auth的真实源码上让你看到迭代思维在真实项目里留下的痕迹。你可能有的困惑为什么完成只是开始第四章做完的待办清单已经能用了还需要改吗这个想法很正常。我们从小写作业交了就完事了。但做工具不一样——好用的工具都是用出来的不是一次做出来的。把能用当成终点是典型的作业思维而做产品的人都知道第一版只是起点。教程 5.4 章的开篇说得更直接第四章你完成了待办清单的第一版。但这不是终点。真正好用的工具都是在使用中不断改进出来的。见 5.4 章节导航在本仓库中这个第一版的真实形态就存放在 demos/demo-01-todo 里——一个具备添加、删除、标记完成等基础 CRUD 能力的 Next.js 待办应用。它确实能用但它并不是这个项目的终态。看看那些你每天用的产品没有产品是一步到位的微信刚上线时是什么样子时间版本功能2011年1月1.0只能发消息、发图片2012年4月4.0加入朋友圈2013年8月5.0加入微信支付2017年1月小程序上线不用下载App就能用各种服务微信用了6年从一个简单的聊天工具变成了一个超级平台。淘宝最早就是一个简陋的网页连图片都模糊。你现在用的猜你喜欢、直播购物都是后来一点点加上去的。没有哪个产品是一步到位的。你的待办清单也不需要。一次性作业 vs 持续进化两种心态的对照一次性作业心态持续进化心态做完就不管了做完是起点要一次做到完美先能用再好用功能越多越好解决一个问题再说下一个有bug说明我做错了有bug说明我发现了改进点第二种心态是创造者的心态。注意对照表中的差异并不在于做得多不多而在于如何看待做完之后的阶段前者把 bug 视为失败的证据后者把 bug 视为改进的线索。心态一换你的待办清单就从作业变成了作品。迭代循环做 → 用 → 改 → 做┌─────────────┐ │ 做一版 │ └──────┬──────┘ │ ▼ ┌─────────────┐ │ 用一用 │ └──────┬──────┘ │ ▼ ┌─────────────┐ │ 发现问题 │ └──────┬──────┘ │ ▼ ┌─────────────┐ │ 改进它 │ └──────┬──────┘ │ └──────────────┐ │ ┌──────────────┘ │ ▼ (回到做一版)每转一圈你的工具就好用一点。这不是因为你第一次做得不好而是有些问题只有用了才会发现。自己写代码时觉得显而易见的操作真正用起来可能处处别扭只有把版本交付给使用场景问题才会浮出水面。教程 5.4 章把这个循环浓缩成了一句话第一版完成 → 自己用用看 → 让朋友试试 → 收集反馈 → 改进 → 更好用见 5.4 章节导航下一节 5.4.2 收集反馈 会专门讲如何拿到真实的反馈。仓库实证demo 项目就是迭代出来的迭代思维不是抽象口号。打开本仓库的 demo 项目你能在源码里直接看到迭代留下的痕迹——它们正是 5.4.3 节功能扩展方向里反复提到的那些功能。表结构的演进痕迹先看第一版 demo-01-todo 的表结构export const todos pgTable(todos, { id: serial(id).primaryKey(), title: text(title).notNull(), completed: boolean(completed).default(false), category: text(category).default(inbox), dueDate: timestamp(due_date), order: integer(order).default(0), createdAt: timestamp(created_at).defaultNow(), })从源码结构看可以推断这张表不是一次做出来的category分类、dueDate截止日期、order排序权重这些字段恰好对应 5.4.3 节里列出的任务分类标签⭐⭐、截止日期提醒⭐⭐⭐、任务排序⭐⭐⭐等扩展方向见 5.4.3 功能扩展。也就是说这些字段本身就是做一版 → 用一用 → 发现问题 → 改进循环的产物。而 demo-02-todo-auth 的表结构 又往前走了一步在待办表上新增了priority优先级、note备注和userId归属用户并把用户拆成user、session、account、verification四张认证相关表。这正是持续进化的直观案例——同一个待办清单从单机个人工具demo-01进化为带用户系统的多用户应用demo-02每一轮迭代只解决一个问题。功能组件把改进落成代码迭代改进最终要落成代码仓库里处处可见对应实现分类筛选CategoryFilter.tsx 定义了all / inbox / work / personal四个分类用 URL 查询参数category与后端联动搜索功能SearchInput.tsx 使用 300ms 防抖useDebouncedCallback搜索词存入全局状态app-store.ts在 page.tsx 中对标题做不区分大小写的实时筛选——任务多了之后能快速找到正是 5.4.3 节搜索功能的核心诉求截止日期高亮TodoItem.tsx 用isToday/isPast区分今天到期、已过期 · M月d日两种状态并配不同颜色徽章——对应 5.4.3 节过期任务标红、今天到期标黄的设想拖拽排序TodoItem.tsx 基于useSortable实现排序结果通过 queries.ts 中的 useReorderTodos 提交到/api/todos/reorder服务端过滤API 路由 支持按category和statusactive/completed组合查询。测试确保改不破坏用迭代最怕的是新功能把旧功能改崩。仓库里的 todos.test.ts 正好演示了如何守住这条底线测试覆盖GET /api/todos含分类过滤、POST /api/todos正常创建、标题为空返回 400、缺字段返回 400。这印证了 5.4.3 节测试检查清单的第一条——原有功能添加、删除、完成任务仍然正常。输入校验则由 validation.ts 中的 zod schema 兜底标题 1~200 字、分类枚举、可选截止日期。体验层的微迭代迭代不只发生在功能层面也发生在体验层面。queries.ts 中新增待办的onMutate乐观更新先本地立即显示新项失败再回滚以及 page.tsx 中进度达到 100% 时触发 confetti 彩带动画都是用起来觉得不顺手 → 改进的典型产物。这类细节无法在设计阶段一次想全只能靠真实使用来暴露。回顾灵魂三问你的改进方向还记得第二章的灵魂三问吗见 2.5 灵魂拷问用户是谁→ 谁在用你的待办清单你自己家人室友痛点在哪→ 用了一段时间后什么地方让你不爽为什么选你→ 和手机自带的备忘录比你的有什么特别之处这三个问题在迭代阶段同样有用。当你不知道下一步该改什么时问自己我用的时候哪一步最麻烦我希望它能做什么但目前做不到这些答案就是你的迭代方向。仓库源码也印证了这套方法论的价值demo-01 的分类设计成收件箱 / 工作 / 个人三个固定枚举validation.ts而不是随意的一堆标签正是回答了用户是谁之后做出的取舍5.4.2 节还会提醒你面对相互矛盾的需求时要回到第二章的灵魂三问你的工具到底是给谁用的优先满足核心用户的需求见 5.4.2 收集反馈。本节要点完成第一版只是开始不是终点好的工具都是在使用中慢慢进化出来的每次改进只需要解决一个问题第二章的灵魂三问可以帮你找到改进方向::: tip 一个好的心态 不要想着一次做到完美。做出来 → 用起来 → 发现问题 → 改进它。这就是创造者的日常。 :::接下来做什么迭代方向明确后就该动手收集反馈、扩展功能、优化代码、整理作品了。教程按这个顺序安排了后续四节你可以顺次深入5.4.2 收集反馈让使用者告诉你——三种零门槛的反馈收集方法与记录模板5.4.3 功能扩展让 AI 帮你添加新功能——用 S.C.A.F.F. 框架写功能扩展 Prompt本文谈到的分类、搜索、深色模式、截止日期都有现成模板5.4.4 代码优化让 AI 帮你改进代码质量——功能稳定后再优化的 5 类优化方向5.4.5 从项目到作品集——把迭代成果整理成可展示的 README 与作品。动手迭代前别忘了先做版本提交——这正是 5.4.3 节强调的黄金法则每次改动前先 Commit改崩了才能随时恢复版本管理的入门见 5.1 版本控制。你的待办清单将从能用一步步变成好用、可展示。赞分享文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载相关推荐vibe-vibe 减法思维实战功能筛选框架与「不做清单」制作指南vibe vibe 减法思维实战功能筛选框架与「不做清单」制作指南 在 Vibe Coding 时代AI 让「实现功能」的成本急剧下降也让「想清楚该做什么文档教程Vibe Coding示例工程Vibe Coding 对话工程实战指南从一次性提示词到迭代式对话Vibe Coding 对话工程实战指南从一次性提示词到迭代式对话 迭代式对话的艺术让 AI 真正听懂你的需求 在 Vibe Coding 实践中很多开发文档教程知识库人工智能Vibe Coding 对话工程完全指南从一次性提示词到迭代式协作Vibe Coding 对话工程完全指南从一次性提示词到迭代式协作 迭代式对话的艺术让 AI 真正听懂你的需求成为你的高效协作者 在 Vibe Codin文档教程知识库人工智能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考