文档教程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 Vibevibe-vibe基础篇第 0 章的收尾内容——基础版学习地图用一张路线图和一张章节映射表把基础篇六章各自把「个人主页 数字分身」项目推进到哪个状态讲清楚并给出「什么时候可以停下来、什么时候该继续」的判断依据。读完之后你能明确自己当前所处的阶段、每完成一章会拿到什么交付物以及遇到边界时该跳去进阶篇的哪个入口。为什么要先看清整条路线基础篇第 0 章的前几节见 docs/en/Basic/00-preface/index.md已经回答了三个问题这套基础篇教什么、不教什么你最终会做出什么以及卡住时如何按统一流程向 AI 求助。第 0.4 节docs/en/Basic/00-preface/0.4-how-to-learn.md中文版对应 docs/Basic/00-preface/0.4-how-to-learn.md要解决的是最后一个问题把整条路线看清楚。文档给出的理由很直接一旦你知道自己现在处在哪个阶段、下一步为什么要做、做完会得到什么焦虑会一下少很多。换句话说学习地图的作用不是再讲一遍概念而是让每一步的「输入—动作—产出」变得可见避免学习者在「准备阶段」无限停留。整条路线长什么样学习地图的核心是一张从左到右的六章流程图每一章都对应项目的一次状态跃迁配套的章节映射表回答了「每一章把作品推进到哪里」章节作品会发生什么变化第 1 章你会先做出一个能预览、能展示、能简单聊天的v1第 2 章这个作品会从平台搬到你自己的电脑里变成可持续修改的项目第 3 章首页会从默认模板变成更像认真做过的作品第 4 章作品不再单薄访客会更容易理解你是谁也更知道该问什么第 5 章数字分身不再只是「会回话」而是开始像你本人第 6 章作品从「只在你电脑里」变成「别人也能访问的正式链接」这套六章结构在基础篇总览docs/en/Basic/index.md中被标注为「章节结构v2」并给出了每章的核心交付第 1 章交付v1原型第 2 章交付本地可运行可修改的项目第 3 章交付视觉统一的首页第 4 章交付更完整的主页加最小 Git 闭环第 5 章交付更稳定、更像你的数字分身第 6 章交付公网可访问的稳定链接。而第 0 章本身的核心交付就是这张清晰的学习地图。主线案例是「个人主页 数字分身」个人主页负责展示你是谁、你做过什么、别人如何联系你数字分身负责代替你回答别人最常问的问题正式发布则把作品变成可以分享的稳定链接见 docs/en/Basic/index.md 与 docs/en/Basic/00-preface/0.1-start-here.md。在 0.1 节中这个案例还对应了一组版本演进表与上面六章一一对应版本你将把它变成什么v1能预览、能展示内容、能简单聊天v2带回本地可以持续修改v3更像认真做过的作品的主页v4内容更完整访客知道看什么、问什么v5更像真实你的数字分身v6正式上线别人可以访问并给反馈每一章具体在推进什么对照各章索引页可以把学习地图展开为逐章的推进逻辑第 1 章先做出 v1对应 docs/en/Basic/01-awakening/index.md。这一章的目标非常明确在平台上做出第一个能预览、能展示、能简单聊天的版本。教程明确说明这一章不会展开完整的提示词理论、多平台对比、本地开发环境或 API 原理——当前最重要的不是补齐背景知识而是先做出东西。示例以「妙搭Miaoda」这类中文友好的 AI 原型工具展开但只要是支持自然语言生成页面的产品都可以照同样的方式做。完成本章后你应该已经有一个打开正常、能表明身份、带数字分身聊天入口的首页外加一份自己的下一轮改进清单。第 2 章带回本地工作台对应 docs/en/Basic/02-mindset/index.md。这一章的定位是「交接」把平台上的临时结果搬到自己的工作台。它不要求你理解所有代码只需要完成一个最小闭环导出项目、放到固定位置、用 AI IDE 打开、跑起来、改一处、看到结果。从源码结构看这一章被放在第 2 章位置的原因是第 3 章到第 6 章的所有改进都建立在这个本地项目文件夹和 AI IDE 工作区之上。第 3 章做出像样的第一印象对应 docs/en/Basic/03-technique/index.md。这一章不教设计理论而是解决「怎么把『想要更干净、更有层次、更像我』这种模糊感觉说清楚到 AI 能执行」。它刻意聚焦三个最先值得改的地方首屏布局、颜色与排版、分区层次与留白。从这一章开始积累的能力——把模糊感受转成可执行的修改方向——在后面补内容、调数字分身、准备上线时会一直复用。第 4 章补全内容并建立最小安全网对应 docs/en/Basic/04-practice-0-to-1/index.md。这一章同时做两件事从访客视角补齐真正值得加的 23 个内容模块让数字分身入口更好用以及第一次接触 Git 的最小工作流——存一次、看历史、回退。在基础篇里Git 不是协作工具而是「一改就慌」时的安全网。第 5 章让数字分身更像你对应 docs/en/Basic/05-advanced/index.md。前几章做的是「外壳」这一章开始做「内核」先建立「访客的问题如何被发给模型、又如何回到页面」的心智模型再写第一版「数字分身说明书」用 13 份真实材料校准它知道什么、不知道什么、该用什么口吻说话并学会处理最常见的四类问题同时建立最小的成本与安全边界意识。第 6 章正式上线与第一轮真实反馈对应 docs/en/Basic/06-launch/index.md。这一章完成最小发布路径本地项目进入远程仓库远程仓库进入部署平台文中以 EdgeOne Pages 为例平台给出别人可以打开的链接链接生效后再在真实环境跑一轮自检并收集第一轮反馈。部署在这里不是一门独立技术课而是让前几章的成果「进入真实世界」的那一步。这条路会把你慢慢带到哪里原文档刻意不贴抽象的能力标签只描述更实际的变化这个顺序值得完整保留先学会把需求说清楚再把作品带回自己的工作台第 2 章的最小闭环导出、放固定位置、打开、运行、改一处、看结果接着学会判断页面是不是更像作品、是不是更好用第 3 章的三个改动区域学会给代码留后路不至于一改就慌第 4 章的最小 Git 闭环然后开始让数字分身更像你第 5 章的说明书与校准最后把整个项目真正发出去让别人看到第 6 章的发布与反馈。这个顺序本身就是基础篇的教学主张代码仍然决定作品能不能运行、修改和上线但对零基础读者代码不再是进入创作世界之前的门槛而是在做项目过程中逐渐弄懂的细节。什么时候该停下来什么时候该继续学习地图给出的停止/继续判断标准不是时间或进度而是你拿到的交付物类型如果你只想体验一次「我也能做出来」做到第 1 章就已经很值——此时你拿到的是第一次正反馈如果你想完成第一次完整闭环就一路做到第 6 章——此时你拿到的是第一次完整作品闭环。原文强调这两种选择都不是失败也不是偷懒区别只在于闭环的完整度。教程结语docs/en/Basic/100-epilogue/index.md也呼应了这一点很多人缺的从来不是「再多学几个概念」而是从未完成过一次完整闭环。完成闭环之后再遇到新想法时你会多出一个更有用的念头——「先试着做出第一个版本」。到这里你已经弄清了什么第 0.4 节要求读者在离开第 0 章前确认三件事已经看清了教程的定位知道自己最终会做出什么知道怎么学、怎么问、怎么继续推进。更重要的是对后面每一章会把作品带到哪里心里已经有数。出发前的确认清单原文原样保留我知道这套基础篇不是传统语法课我知道自己最终会做出什么作品我知道这条路线是否适合我我知道卡住时该如何向 AI 求助我知道第 1 章到第 6 章分别在推进什么其中「卡住时如何向 AI 求助」指向第 0.3 节docs/en/Basic/00-preface/0.3-who-this-is-for.md的统一求助公式按「我刚才做了什么 → 现在看到的问题 → 我原本期望的结果」的顺序描述附上截图或完整报错如果第一轮没解决就把新症状和刚做的操作反馈给 AI 进入下一轮而不是硬扛。下一步先进入第 1 章遇到边界再跳进阶篇第 0.4 节的结论是不要再停留在「准备阶段」。你已经知道路线也知道自己最终要做什么下一步最重要的不是再看一篇解释而是开始做出第一个版本——入口是 第 1 章第一个版本。如果你想系统理解环境与工具、AI 工作流、产品文档、UI/UX、API、安全、Git 协作或部署可以在后续遇到边界时再跳去进阶篇而不是现在通读。仓库里提供了两张现成的「边界 → 入口」对照表附录 Gdocs/en/Basic/99-appendix/g-advanced-jump-map.md按基础篇章节映射到进阶篇在基础篇卡在哪里最推荐的进阶篇入口第 2 章项目带回本地后环境总是不稳定进阶篇第 1 章环境搭建第 3 章能改 UI但表达总是不够精确进阶篇第 5 章美观且可用的界面第 4 章内容、结构、需求越改越乱进阶篇第 3 章产品思维与文档驱动开发第 5 章聊天区、接口、安全开始变复杂进阶篇第 7 章前后端打通 与 进阶篇第 8 章谁能访问我的数据第 6 章上线后还想更专业、更稳定进阶篇第 12 章无服务器自动化部署 与 进阶篇第 13 章域名解析与接入下部预览页docs/en/Basic/101-next-part/index.md则把进阶篇总结为九个能力面环境与工具、AI 工作流、产品与文档、UI/UX、API 与后端、安全与密钥、Git 协作、部署与发布、域名与接入。它的建议用法同样是不要当成必须从头读到尾的第二本书而是当成当前项目的补给站——哪里先卡住就先跳去哪里。小结Vibe Vibe 基础篇的学习地图本质上是一张「项目状态推进表」六章分别把个人主页 数字分身从v1原型推进到正式发布每章都有明确的交付物每章结束时你都能验证作品确实发生了对应变化。它给出的学习策略是先动手拿到正反馈卡住时按统一流程问 AI遇到边界时再按附录 G 的跳转表进入进阶篇。按这张地图走你就能完成第一次从想法到上线的完整闭环。赞分享文档教程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 Coding 基础篇导读不是编程课而是学开车——从零做出个人主页 数字分身vibe vibe Vibe Coding 基础篇导读不是编程课而是学开车——从零做出个人主页 数字分身 本篇基于 vibe vibe 开源教程仓库中基文档教程Vibe Coding示例工程Vibe Vibe 基础版学习地图一张路线图看懂「从想法到上线」的六章闭环Vibe Vibe 基础版学习地图一张路线图看懂「从想法到上线」的六章闭环 本文是 Vibe Vibe 开源教程基础篇第 0 章的小结导读对应仓库文档 0.文档教程Vibe Coding示例工程VibeVibe 基础篇第 6 章实战把个人主页与数字分身从本地项目变成公网可访问的真实作品VibeVibe 基础篇第 6 章实战把个人主页与数字分身从本地项目变成公网可访问的真实作品 这一章是 VibeVibe 基础篇围绕个人主页 数字分身文档教程Vibe Coding示例工程上一篇让老照片开口说话LivePortrait 人像动画制作 6 步通关指南下一篇Phoenix LiveView 外部上传External Uploads实战指南S3、UpChunk 与预签名直传创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考