文档教程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点击查看免费下载在 VibeVibe 基础篇中第 1 章的任务是用 2 小时在 AI 原型平台以秒哒为例里做出你的第一个「个人主页 数字分身」v1原型完成「能预览、能展示、能简单聊天」的最小闭环。本篇是这一章的收官指南先明确第 1 章的「过关线」到底在哪里再用一份直接可用的验收清单完成第一轮验收最后把发现的问题整理成可执行的下一轮优化清单backlog为第 26 章的后续迭代留下明确输入。读完本篇你将掌握如何判断一个 AI 生成的 v1 是否达标、如何从访客视角做验收、以及如何把模糊的「不满意」转成有优先级、有归属章节的改进计划。先停一下别把第 1 章拖长走到这一步很多人会自然进入一个陷阱“既然已经做出来了那我再多改一点再加一点再调一点……”这样很容易把第 1 章拖成一个没有结束点的过程。第 1 章在 章节首页 里就定下了基调重点不在「把所有方法都学会」而在「先把你的第一个作品做出来」——它是为了第一次正反馈服务的不是一次做到完美的工程冲刺。所以这一节要做的就是把完成标准定下来什么情况下这一章就算过关有了明确的终点你才能干净利落地进入下一章而不是陷在无穷无尽的微调里。过关线在哪里第 1 章的过关线其实不复杂可以拆成四条可观察的标准页面能正常打开别人点开预览页时至少应该看到一个能正常打开的完整页面而不是空白或明显报错能清楚表达“你是谁”页面里至少包括名字、一句话介绍以及一眼能看出的个人定位数字分身入口已经出现哪怕它还不够聪明也得让人知道这里可以提问并完成一轮基础对话手机端不至于崩掉移动端不用追求精致但至少要保证文字能看、区块不严重重叠、主要按钮还能点。对照 第 1 章的目标定义“能预览、能展示、能简单聊天”的v1原型你会发现过关线其实就是把这句目标翻译成了四条可检查的具体表现。它刻意不要求「惊艳全场」因为第 1 章的成功标准从来不是一步到位而是先把一个能继续改的版本拉出来。一份直接可用的第一轮验收清单把过关线落成可勾选的清单就是下面这 5 项。建议打开预览页后一项一项真实地过一遍而不是凭印象打钩页面能正常打开我的名字和一句话介绍清楚显示页面看起来已经像“我的个人主页”而不是完全空白模板聊天入口存在并且能完成基础提问手机端至少可以正常浏览具体怎么检查可以按这个顺序操作先刷新预览链接确认不白屏、不报错再看首屏名字与一句话介绍是否与你在 素材阶段 提供的事实一致滚动一遍整页判断它是否已经有了「个人主页」的样子点开聊天入口真实发一条提问比如“你现在在做什么”确认它至少能回一轮基础对话最后把浏览器窗口缩窄到手机宽度或用手机打开检查文字是否可读、区块是否严重错位、主要按钮能否点中。值得注意的是第一版结果上出现下面这些问题非常正常正如 1.3 节的生成示例 所展示的名字或信息被抽错、聊天框离页面右边缘太近、Q1/Q2/Q3只是演示用的快捷按钮而没有真正接上大模型、部分链接和按钮看起来能点但实际没有跳转。这些都不是「路走不通」的信号而是「v1 本来就应该继续迭代」的信号。一个很实用的检查动作换一个视角看页面不要只用“作者视角”看页面。你可以假装自己是第一次访问的朋友问自己三个问题我能不能一眼知道这是谁我知不知道应该点哪里、问什么这个页面现在值不值得继续迭代如果这三个问题大体都能回答“可以”这个版本就已经过关了。这个「访客视角」在 第 4 章让主页更完整 里会被继续放大——你会从访客视角决定要补什么内容、判断别人最想知道什么。现在先把它用起来作为第一轮验收的最后一个动作即可。记录下一轮优化清单第一个版本跑出来以后你一定已经注意到一些地方还可以更好。这很正常而且很有价值。因为后面的第 2 章到第 5 章并不是凭空多讲几章内容而是在继续解决你现在已经看见的问题。推荐按这四类来记类别你可以怎么记界面问题颜色不喜欢、排版不顺、聊天框贴边、移动端不舒服内容问题自我介绍太空、名字信息有误、作品区还没有、联系信息不完整数字分身问题回答太机械、Q1/Q2/Q3 还是占位、还没接真实模型、不够像我体验问题访客不知道聊什么、按钮文案不清楚、链接不能跳、入口不明显一个可以直接复制的模板我的下一轮优化清单 【界面】 - ______ - ______ 【内容】 - ______ - ______ 【数字分身】 - ______ - ______ 【体验】 - ______ - ______比如如果你拿到的第一页结果和 1.3 节的截图示例 类似你完全可以先这样记我的下一轮优化清单 【界面】 - 聊天框离右边缘太近视觉上有点挤 - 首屏和聊天区还不够协调 【内容】 - 名字 / 中文名显示不对要改正 - 某些介绍文案还不够像我 【数字分身】 - Q1 / Q2 / Q3 还是演示按钮不是真实问答 - 聊天区要确认有没有接上真实模型 【体验】 - 底部链接还不能跳转 - 页面里有些按钮看起来能点但实际上没动作注意清单的写法要点具体比抽象更有用。这与你在 素材阶段 学到的原则一脉相承——“太空的写法”是「希望聊天机器人聪明一点」「更有用的写法」是「希望数字分身能回答你最近在做什么、你有哪些作品、怎么联系你」。优化清单同理把“这里感觉不对”写成“聊天框离右边缘太近、需要更自然的外边距”后续无论是你自己改还是让 AI 改都更可执行。给优化清单排个优先级如果你想再往前走一点可以顺手给每条问题加一个「优先级」并预估它可能在后面哪一章被系统解决问题优先级可能在哪一章解决首页还像默认模板高第 3 章页面内容太少高第 4 章访客不知道聊什么高第 4 章数字分身不像我高第 5 章想让别人稳定访问中第 6 章这个「问题 → 优先级 → 归属章节」的映射正是 VibeVibe 基础篇主线设计的体现第 2 章把项目带回本地工作台见 第 2 章导读第 3 章解决界面与风格见 第 3 章导读第 4 章补内容并引入 Git 最小闭环见 第 4 章导读第 5 章让数字分身更像你并处理基础排错见 第 5 章导读第 6 章完成上线与真实反馈见 第 6 章导读。也就是说你现在记下的每条问题都不是被丢掉的抱怨而是后续章节的「任务输入」。这也符合 基础篇总览 对章节结构的定位——第 1 章的核心交付是v1原型而“优化清单”正是连接 v1 与后续每一章的 backlog。回头看这一章你已经拿到了什么先停一下回看第 1 章的完整链路对应 1.1 → 1.2 → 1.3 → 1.4你准备了第一批真实素材基本信息、当前状态、兴趣特点、访客视角、常见问题把模糊想法变成了可执行需求你用填空式模板写成了第一版需求并交给了 AI 原型平台你生成并预览了第一个v1原型完成了几轮正常迭代修明显错误 → 调风格和内容 → 小幅细化你做了第一轮验收并记下了后面几章会继续处理的优化清单。换句话说你已经完成了「素材 → 需求 → v1 → 迭代 → 验收 → backlog」的第一次完整小循环。这一章验收清单是我已经有一个能预览的个人主页 数字分身v1我知道这个版本哪里还不够好我已经把这些问题记成了后续可继续推进的清单下一步把作品带回你自己的电脑接下来我们会做一件很关键的事把这个还停留在平台里的作品带回你自己的电脑。只有它进了你自己的工作台你才算真正开始拥有它、管理它、持续修改它——这正是 第 2 章带回自己的工作台 要解决的事。在此之前请确保你手里的下一轮优化清单已经写好。它是你进入第 2 章后继续判断“改动方向对不对”的重要参照。延伸把优化清单升级成更正式的需求管理如果你在第 1 章之后想更进一步而不是停留在“随手记问题”的层面可以在 进阶篇第三章产品思维与文档驱动 里找到把优化清单升级为正式需求管理的完整方法。其中与本节直接相关的三个能力是需求范围管理明确 In-Scope范围内与 Out-of-Scope范围外对应到你的优化清单上就是“这一轮到底改哪几项、哪些暂时不做”需求优先级排序把优化项拆解成需求点用“需求 ID、模块、描述、优先级、状态”的表格管理比“四类清单 高/中/低”更可追踪与 AI 确认需求每次把修改想法交给 AI 前先让 AI 复述它对需求的理解目标用户、核心功能、不做哪些、可能有什么问题避免第 1 章里“来回改三轮还不满意”的情况反复出现详见 3.2 与 AI 确认需求 与 3.3 PRD 编写实战。第 1 章结束时的这份优化清单就是未来所有迭代的起点。把它记好、排好优先级然后带着它进入第 2 章——从平台用户变成项目拥有者。赞分享文档教程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点击查看免费下载相关推荐如何在Apple Silicon上快速部署mlx-community/DeepSeek-V4-Pro-Qwen3.5-9B-4bit超简单3步教程如何在Apple Silicon上快速部署mlx community/DeepSeek V4 Pro Qwen3.5 9B 4bit超简单3步教程 mlx c100 Exercises to Learn Rust 第三章收官实战用集成测试驱动一个带校验的 Order 类型100 Exercises to Learn Rust 第三章收官实战用集成测试驱动一个带校验的 Order 类型 本章是《100 Exercises to示例工程教程用 Sunshine 搭一台免费游戏串流主机:从安装到第一次配对成功用 Sunshine 搭一台免费游戏串流主机:从安装到第一次配对成功 电视、平板、手机上都想跑 PC 游戏,又不想被云游戏服务绑住?Sunshine 是个自托管音视频后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考