Vibe Vibe —— 让零基础小白也能用 AI 做出真实产品的开源教程

在线阅读：www.vibevibe.cn

为什么要做这个项目

2025 年初，Andrej Karpathy 在推特上提出了一个新词：Vibe Coding。

他说："有一种新的编程方式，我称之为'vibe coding'，你完全沉浸在编程的'氛围'中，拥抱指数级增长，甚至忘记代码的存在。"

这个词很快火了，甚至入选了 Collins 词典的年度词汇。

但我们发现一个问题：国内几乎没有系统化的开源 Vibe Coding 教程。

B站上到处都是"3分钟做个网页"的视频，公众号里满是"AI 帮你写代码"的文章。但做完之后呢？如何部署？如何迭代？如何处理用户数据？没人系统讲。

更麻烦的是，现有的编程教程都假设你懂编程。它们会告诉你"先学 JavaScript 语法，再学 React 框架，最后做项目"。但在 AI 时代，这个路径已经过时了。

你不需要先背完所有语法，AI 会帮你写代码。你不需要精通框架源码，AI 会帮你调用 API。你需要的是产品思维、需求拆解能力、与 AI 对话的技巧。

于是我们决定做一个不一样的教程。

不是教你"怎么写代码"，而是教你"怎么用 AI 把想法变成产品"。

不是从语法开始，而是从问题开始。

不是让你背诵知识点，而是带你走一遍完整的产品交付流程。

这就是 Vibe Vibe 的由来。

这个项目面向谁

如果你是零基础学习者，这可能是你第一次真正做出一个能上线的产品。你会发现编程没有想象中那么难，你会获得一套可重复使用的 AI 协作方法。

如果你是开发者，你会学到如何用 AI 提升 10 倍开发效率，你会了解现代全栈技术栈的最佳实践，你会掌握从 0 到 1 的完整产品交付流程。

如果你是创业者，你会学会如何快速搭建 MVP 验证想法，你会了解如何用最少的成本做出真实产品，你会获得独立完成产品开发的能力。

Vibe Vibe 有什么优势

1. 渐进式学习路径

很多人问：零基础能学吗？

我们的回答是：不仅能学，而且应该从零基础开始学。

因为在 AI 时代，传统编程教育的那套"先学语法再做项目"的路径，反而成了负担。你花了几个月背语法，结果发现 AI 几秒钟就能写出来。更迷茫的是，教程太多，有人说先学 HTML/CSS，有人说直接上框架，你根本不知道从哪开始。

所以我们设计了一条"先做出来，再理解原理"的路径：

基础篇：从一个想法开始，用 AI 做出第一个能跑的作品。你不需要懂任何编程知识，只需要会用 AI 工具。我们会教你如何把想法拆解成 AI 能理解的需求，如何让 AI 帮你写代码，如何把作品部署到互联网上。

进阶篇：从作品到产品的完整流程。这里有 16 章内容，每一章都对应一个真实的工程环节：环境搭建、数据库、用户认证、自动化测试、CI/CD、域名解析……但我们不会一上来就扔给你一堆技术名词。每一章都用故事化的方式告诉你：为什么需要这个技术？它解决了什么问题？不用它会怎样？

实践篇：项目实战，看看实践者的分享。

优质文章篇：持续更新的行业前沿。AI 技术迭代太快，今天学的明天可能就过时了。所以我们专门维护了一个资源库，收录技术博客、Newsletter 和播客。

每一步都有明确的目标和产出。你不需要纠结"该学什么"，只需要跟着走就行。

2. 产品思维 + 工程实践

很多人以为 AI 编程就是"一句话生成代码"。但实际上，从想法到产品，中间隔着巨大的鸿沟。

你有一个想法："我想做一个背单词软件。" 然后呢？

你要回答这些问题：

• 用户是谁？高中生？考研党？还是职场人士？

• 核心功能是什么？单词卡片？艾宾浩斯复习？还是游戏化闯关？

• 数据从哪来？用户自己导入？还是你提供词库？

• 如何存储用户数据？本地存储？还是云端数据库？

• 如何保护用户隐私？密码怎么加密？数据怎么备份？

很多教程教你做一个 Hello World，然后就没了。你做完了，但上面这些问题没人回答，你就卡在那里了。

所以在 Vibe Vibe 里，我们不只是教你怎么让 AI 写代码，更教你从想法到产品的完整能力：

• MVP 思维：如何设计一个"能跑的最小版本"，避免功能堆砌

• 需求拆解：如何把一个模糊的想法拆解成 AI 能理解的 PRD

• 安全意识：从第一天就建立安全底线意识，学会保护用户数据

• 工程判断力：什么时候该用数据库？什么时候该部署到云服务器？

这些问题，AI 不会帮你回答。因为它们是产品决策，不是技术实现。这些能力，比会写代码更重要。

3. 真实工具链 + CNB 云资源加持

我见过太多"AI 编程教程"，教你用 AI 生成一个 HTML 页面，然后就结束了。但那只是玩具，不是产品。

真实的产品需要：

• 用户认证系统（登录、注册、密码重置）

• 数据库（存储用户数据）

• API 接口（前后端通信）

• 自动化测试（保证代码质量）

• CI/CD（自动部署）

• 域名和 HTTPS（让用户能访问）

• ……

这些东西，传统编程教程会花几个月教你。

但在 AI 时代，你可以用几天时间走完全程。前提是：你得用对工具。

所以我们直接使用生产级工具：Claude Code、Next.js、React、TypeScript、Tailwind CSS、shadcn/ui、Drizzle ORM、PostgreSQL。这些工具都是真实公司在用的。

但还有一个门槛：环境配置。

学编程最大的障碍不是语法难，而是装 Node.js、配环境变量、解决版本冲突……光是把环境搭起来，就能劝退一大批人。更别提云服务器、对象存储都要钱，学个编程先得准备一笔"学费"。

这就是 CNB 的价值所在。

AI 解决了写代码的门槛，CNB 解决了跑代码的门槛，Vibe Vibe 则是把这两者串联起来的桥梁。

Vibe Vibe 已经入驻 CNB ，所有读者都能享受到充足的云资源支持：

注册 CNB 账号即送 1,600 开发用核时，足够完成基础篇和进阶篇的所有项目。打开浏览器就能写代码，无需本地配置环境。

我们为 Vibe Vibe 专门打造了开箱即用的云端开发环境（default-dev-env），特性如下：

• 双运行时环境：Node.js 24 LTS + Python 3.11+，覆盖前端和后端开发需求

• AI CLI 工具集：Claude Code、OpenAI Codex、Trae CLI、Kimi Code、EdgeOne、Happy Coder、Qoder、CHub、CodeBuddy 等主流 AI 编程工具

• 现代 CLI 工具：ripgrep、fd、bat、lazygit、GitHub CLI、yq、sd、hyperfine 等 20+ 高效工具

• Python 工具链：uv、pre-commit、yt-dlp、data science 基础库

• 运维面板：集成 1Panel，可视化管理容器、数据库、文件等服务

• VS Code Server：内置 code-server，预装 53 个扩展，支持中文界面

• Claude Code 技能包：44 个预配置 Skills，覆盖 Next.js、React、PostgreSQL、Better Auth 等最佳实践

• 开发者体验：Oh-My-Zsh + zsh-autosuggestions + zsh-syntax-highlighting，命令行自动补全

CNB 让学习门槛降到了最低。

当前进度与未来计划

项目状态：Alpha 内测版

• 基础篇：新上线、正在迭代

• 进阶篇：主体已经完成

• 实践篇：部分项目已上线

• 优质文章篇：持续更新中

短期计划（3个月内）

• 优化在线 IDE 体验，增加更多 AI Skills

• 补充实践篇项目

• 建立用户反馈机制

中期计划（6个月内）

• 建立学习社群

• 举办线上/线下 Workshop

• 推出"项目展示墙"，展示学员作品

长期愿景

成为国内优质的 AI 编程学习指北，帮助更多零基础学习者做出第一个真实产品。

最后

在过去，编程是少数人的特权。你得懂英文、懂数学、懂算法，才能写出像样的代码。

但在 AI 时代，这道门槛正在被填平。

就像摄影技术的发展史。以前你想拍一张像样的照片，需要懂光圈、快门、对焦、ISO、白平衡……你得把这一堆复杂原理搞明白，还得买一堆昂贵的设备。大多数人光是想想就放弃了。

现在呢？手机相机自动帮你处理了所有技术细节。你只需要关注两件事：你想拍什么，怎么拍才好看。

AI 编程工具也是如此。它们帮你处理了代码细节，你只需要关注产品本身——你想解决什么问题，如何解决。

这并不意味着你可以完全不懂技术。你仍然需要理解技术的原理和边界，就像你用手机拍照也需要知道"光线太暗会拍糊"。

但你不需要死记硬背每一行代码的写法，就像你不需要知道手机相机的底层算法。

门槛降低了，但天花板还在那里，甚至更高了。

Vibe Vibe 不只是一份教程，更是一场关于"人人都能创造"的实验。

我们相信，在 AI 时代，编程不再是少数人的特权，而是每个人都能掌握的创造工具。

你的想法值得被实现，你的创意值得被看见。

加入我们，一起 Vibe。

项目传送门

主项目：Vibe Vibe 教程

• 在线阅读：www.vibevibe.cn

• CNB 仓库：cnb.cool/vibevibe/vibevibe

• GitHub 仓库：github.com/datawhalechina/vibe-vibe

• Claude Code 全特性速览：cclog.vibevibe.cn

配套项目：CNB 云端开发环境（default-dev-env）

这是 Vibe Vibe 教程的技术底座，也是本次投稿的重要组成部分。

为了让读者真正"零配置"开始学习，我们基于 CNB 的云端开发能力，打造了一套开箱即用的标准化开发环境。这不是简单的"预装软件"，而是一个经过精心设计的、针对 Vibe Coding 场景优化的完整工具链。

仓库地址：cnb.cool/nfeyre/default-dev-env

这个开发环境基于 cnbcool/default-build-env 构建，通过 Dockerfile 实现了完整的环境封装。