Skip to content

vibe-vibe #380

@Barca0412

Description

@Barca0412

你是否已经阅读并同意《Datawhale开源项目指南》?

你是否已经阅读并同意《Datawhale开源项目行为准则》?

项目简介

Vibe Vibe: From Scratch to Full Stack——人人都能学会的 AI 编程(Vibe Coding)指南

1. 基本信息

项目 内容
项目名称 Vibe Coding 全栈实战教程
英文名称 Vibe Vibe: From Scratch to Full Stack
项目副标题 写给所有人的 AI 编程入门与实战
项目地址 https://vc.nfeyre.top/ (暂定,后续会转移到datawhale)
GitHub (待创建 Datawhale 仓库)

2. 一句话介绍

面向零编程基础学习者的 AI 辅助编程系统化教程,从「我有一个想法」到「我做出了一个产品」,让人人都能成为 Builder。

3. 项目定位

本教程是国内首个系统化的 Vibe Coding 开源教程,分为基础篇进阶篇两大板块:

板块 名称 定位 适合人群
📘 基础篇 Vibe Coding 启示录 AI 编程入门 + 心法 + 第一个项目 完全零基础、用过 ChatGPT 但没做过项目
📗 进阶篇 Vibe Coding 全栈实战 全栈技术栈 + 工程化 + 生产级部署 想深入学习、有一定编程基础想转型

4. 学习产出

完成本教程后,学习者将获得:

阶段 具体产出
基础篇完成 ✅ 掌握 Vibe Coding 核心心法
✅ 能用自然语言"指挥" AI 写代码
✅ 独立完成 1-2 个个人工具项目
✅ 具备版本管理和部署上线能力
进阶篇完成 ✅ 掌握现代全栈技术栈(Next.js/TS/Prisma)
✅ 理解前后端分离架构
✅ 能独立开发带用户系统的完整应用
✅ 具备生产级部署和运维能力
✅ 建立工程化思维和协作规范

5. 核心理念

践行 OpenAI 联合创始人 Andrej Karpathy 提出的 Vibe Coding 理念:

"There's a new kind of coding I call vibe coding... you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

"完全沉浸于编程的'氛围'中,忘记代码的存在。"

从 Coder 到 Commander:让编程从"写代码"转变为"对话式创作",开发者从"逐行编码者"升级为"产品思维指挥官"。

立项理由

1. 时代背景:Vibe Coding 已成为全球趋势

Vibe Coding(氛围编程) 由OpenAI联合创始人Andrej Karpathy于2025年2月正式提出,被Collins Dictionary评选为2025年度词汇。该理念主张通过自然语言与大语言模型交互,由AI生成和迭代代码,开发者从"逐行编码者"转变为"产品思维引导者"。

关键数据支撑:

  • Y Combinator 2025年冬季批次中,25%的创业公司代码库95%由AI生成
  • Cursor编辑器已吸引全球超过2600万开发者使用
  • 据《华尔街日报》2025年7月报道,Vibe Coding已开始进入商业化应用

2. 市场需求:学习资源碎片化严重

目前国内Vibe Coding学习资源存在以下问题:

问题类型 具体表现
碎片化 教程多为博客文章、单篇视频,缺乏系统性
门槛高 大多数教程假设读者有编程基础
工具单一 集中于Cursor单一工具,缺乏全景视野
理论偏重 介绍概念多,实战项目少
缺乏进阶 缺少从入门到精通的完整路径

3. Datawhale定位契合

本项目高度契合Datawhale使命:"for the learner,和学习者一起成长":

  • 降低门槛:让零基础学习者也能用AI创造软件
  • 开源共享:秉承开源精神,内容完全免费
  • 实战导向:项目式学习,学完即有作品产出
  • 社区协作:适合组队学习模式

项目受众

1. 核心受众

受众群体 画像描述 学习动机
编程零基础者 产品经理、设计师、运营人员等非技术背景人群 希望独立开发工具/验证想法
大学生 文科/理科等全部专业的本科生、研究生 提升动手实践能力、交叉学科探索
创业者 有产品想法但缺乏技术能力、或者想快速验证idea 快速构建MVP原型
传统程序员 想要提升AI编程效率的在职开发者 学习新范式,提升生产力
职场人士 想使用AI帮助提高工作效率 提高日常工作效率,了解AI的能力边界

2. 预估用户规模

参考Datawhale类似教程数据:

  • 预计首轮组队学习参与人数:1000-5000人?
  • 预计GitHub Star数(3个月):5000-10000
  • 预计长期受益学习者:50000+

项目亮点

1. 类似项目调研

经充分调研,目前市面上已有以下相关项目:

国内项目

项目名称 来源 特点 不足
zhanglunet/vibe-coding GitHub 中文Vibe Coding指南,介绍概念和流程 偏理论,实战项目少,非零基础友好
火山引擎-Vibe Coding实践 知乎/CSDN 详细的概念介绍和工具对比 单篇文章,非系统化教程
Cursor保姆级教程(多篇) CSDN/知乎 工具使用详解 聚焦单一工具,缺乏全栈视角

国际项目

项目名称 来源 特点 不足
Google Cloud Vibe Coding Guide Google Cloud 权威、系统的官方指南 英文为主,聚焦Google工具生态
Vibe Coding Wikipedia Wikipedia 概念定义权威 百科性质,非教程

2. 本项目差异化优势

与上述项目相比,Vibe Coding 全栈实战教程具有以下独特优势:

差异化维度 本项目特色
真正零基础 从"什么是代码"讲起,无需任何编程经验
全栈实战 涵盖前端、后端、数据库、部署全流程
多工具覆盖 Cursor/Windsurf/Claude Code/Replit等主流工具全景
项目驱动 每章一个完整可运行项目,学完即有作品
中国本土化 针对国内网络环境、支付方式等进行适配
组队学习适配 章节设计匹配Datawhale 2周学习周期
持续更新 跟进AI编程工具快速迭代,保持内容新鲜度

3. 创新点总结

  1. 首个Datawhale零基础Vibe Coding教程:填补生态空白
  2. "概念+工具+实战"三位一体:理论与实践深度结合
  3. 适配中国开发者生态:解决工具访问、支付等本土化问题
  4. 开源社区共建模式:持续迭代,吸引贡献者

项目规划

5.1 内容规划(目录)

本教程分为基础篇进阶篇两大板块,采用渐进式学习路径设计:

📘 基础篇:Vibe Coding 启示录(写给所有人的 AI 编程入门)

基础篇目录
│
├── 写在最前面:这份教程是写给谁的
│   ├── 写给不同的你(爸妈/文科生/理工生/职场人/创业者)
│   ├── 自测清单:你应该从哪里开始?
│   └── 学完这份教程,你将获得什么
│
├── 第1章:觉醒 —— 为什么现在是编程最好的时代
│   ├── 1.1 编程已死,编程永生:从 Coder 到 Commander
│   ├── 1.2 核心概念:Vibe Coding 与 Spec Coding 详解
│   ├── 1.3 破除迷信:不懂英文、数学不好也能写代码吗?
│   ├── 1.4 工具初探:Cursor、Windsurf、Bolt.new 与 Replit 选型指南
│   └── 1.5 Hello World:你的第一个 3 分钟 AI 网页
│
├── 第2章:心法 —— 像产品经理一样思考
│   ├── 2.1 拒绝功能堆砌:为什么你的 AI 写不出复杂的 App?
│   ├── 2.2 MVP 思维:如何设计一个"能跑的最小版本"
│   ├── 2.3 灵魂三问:用户是谁?痛点在哪?为何用你?
│   └── 2.4 实战演练:拆解一个"背单词软件"的想法
│
├── 第3章:技法 —— 与 AI 对话的艺术
│   ├── 3.1 提示词工程基础:Context is King
│   ├── 3.2 用户旅程地图:把想法变成 AI 能懂的路径
│   ├── 3.3 编写第一份 PRD:让 AI 不再胡编乱造
│   └── 3.4 功能优先级 P0/P1/P2:学会对 AI 说"这个先不做"
│
├── 第4章:实战 —— 从 0 到 1 开发个人工具
│   ├── 4.1 环境准备:无需命令行的开发环境搭建
│   ├── 4.2 第一轮:生成静态页面 —— 先看"脸"
│   ├── 4.3 第二轮:注入逻辑与交互 —— 再长"脑"
│   ├── 4.4 第三轮:数据存储基础
│   └── 4.5 Debug 指南:当 AI 报错时,如何用 AI 修复 AI
│
├── 第5章:进阶 —— 真实世界的开发流程
│   ├── 5.1 版本管理:为什么我改崩了回不去?
│   ├── 5.2 部署上线:把你的网页发给全世界
│   ├── 5.3 安全意识:不要把密码告诉 AI
│   └── 5.4 局限性:Vibe Coding 搞不定的时刻
│
├── 第6章:不同人群的学习路径与资源
│   ├── 6.1 文科生/商科生路径
│   ├── 6.2 理工科学生路径
│   ├── 6.3 职场人士路径
│   ├── 6.4 推荐学习资源
│   ├── 6.5 持续学习建议
│   └── 6.6 进入进阶版的准备
│
└── 附录
    ├── A. 常用 Prompt 模板库
    ├── B. 常见错误与解决方案速查表
    ├── C. 术语表(中英对照)
    ├── D. 工具对比速查表
    └── E. 项目 idea 清单

📗 进阶篇:Vibe Coding 全栈实战教程

进阶篇目录
│
├── 第0章:Bootcamp(零基础概念打底)
│   ├── 0.0 课程概念定义:术语表与课程范围
│   ├── 0.1 计算机与操作系统基础:文件/进程/端口/路径/权限
│   ├── 0.2 命令行入门:pwd/ls/cd/cat/grep/nano
│   ├── 0.3 前端三件套:HTML/CSS/JS 基础语法与作用
│   ├── 0.4 开发环境配置:Node.js、包管理器与工具链
│   ├── 0.5 JS → TS 思维转换
│   ├── 0.6 开发安全底线
│   └── 0.7 Docker 核心概念
│
├── 第1章:概念与准备(从思维到工具)
│   ├── 1.1 工具装配与最小项目验证
│   ├── 1.2 Vibe Coding 心法
│   ├── 1.3 最小上线实战与 1Panel 部署
│   ├── 1.4 AI 协作工作流实战与最佳实践
│   └── 1.5 工具链与环境
│
├── 第2章:技术选型与架构蓝图
│   ├── 2.0 技术栈全景
│   ├── 2.1 Next.js + TS + Prisma + OSS 架构全景
│   ├── 2.2 Next.js 渲染策略全景(CSR/SSR/SSG/ISR)
│   ├── 2.3 Next.js 核心概念深入
│   ├── 2.4 前后端协作:接口契约/API Route
│   ├── 2.5 架构分层详解
│   └── 2.6 拓展:Supabase 适用与取舍
│
├── 第3章:前端到后端(把页面跑起来)
│   ├── 3.1 App Router:文件路由与数据获取
│   ├── 3.2 前端构建块:组件/状态/路由/数据获取
│   ├── 3.3 Figma 集成实战与 AI 协作
│   ├── 3.4 Tailwind + shadcn/ui:统一设计体系
│   ├── 3.5 Debug 实战:断点/Network/日志
│   ├── 3.6 API Route 与服务层分离
│   ├── 3.7 可用性:错误/空态/加载骨架
│   └── 3.8 可访问性/UX 原则/i18n
│
├── 第4章:数据库与数据生命周期
│   ├── 4.1 数据建模与 ER 图
│   ├── 4.2 关系型数据库:CRUD/索引/事务
│   ├── 4.3 SQL 基础操作
│   ├── 4.4 Prisma 实战
│   └── 4.5 数据迁移与版本管理
│
├── 第5章:产品文档与沟通规范
│
├── 第6章:用户认证与权限
│   ├── 6.1 NextAuth.js 快速上手
│   ├── 6.2 认证与授权安全实践
│   ├── 6.3 API 安全防护实践
│   ├── 6.4 常见 Web 安全威胁与防护
│   └── 6.5 第三方登录集成(微信/QQ/钉钉)
│
├── 第7章:API 设计与开发规范
│   ├── 7.1 HTTP 与 API 方法/幂等/重试
│   ├── 7.2 REST 最小原则与错误返回
│   ├── 7.3 API 文档:Swagger/Postman
│   └── 7.4 API 版本管理与兼容性
│
├── 第8章:项目规则与协作
│   ├── 8.1 Git 基本流程
│   ├── 8.2 分支策略与分支保护
│   ├── 8.3 提交规范:Conventional Commits
│   ├── 8.4 .gitignore 管理
│   └── 8.5 文档与评审流程
│
├── 第9章:测试与质量
│   ├── 9.1 测试金字塔
│   ├── 9.2 测试环境与隔离
│   ├── 9.3 单元测试/集成测试:Jest
│   ├── 9.4 错误处理与日志规范
│   └── 9.5 CI 质量门禁与 GitHub Actions
│
├── 第10章:部署与运维
│   ├── 10.1 云服务/网络/域名/证书
│   ├── 10.2 1Panel 可视化部署
│   ├── 10.3 Docker Compose 编排
│   ├── 10.4 反向代理与负载均衡
│   └── 10.5 监控与日志
│
├── 第11章:发布、复盘与教学沉淀
│   ├── 11.1 语义化版本与发布流
│   ├── 11.2 GitHub Actions 部署
│   ├── 11.3 课程化产出
│   └── 11.4 复盘模板
│
└── 第12章:高级专题与优化
    ├── 12.1 Node 进程与事件循环
    ├── 12.2 SEO:SSR/Meta/站点地图
    ├── 12.3 Vercel AI SDK 与流式响应
    ├── 12.4 WebSockets 实时通信
    ├── 12.5 文件分片传输
    ├── 12.6 爬虫基础
    └── 12.7 版本化与变更日志

🎯 新增板块规划

板块名称 内容描述 形式
「他们说」资源库 收集高质量的 Vibe Coding 相关博客、文章、播客、Talk 等 Markdown 列表 + 简评
Web 互动教学工具 面向进阶篇核心概念的可视化交互演示 React 组件 / 独立网页

Web 互动教学工具覆盖概念(包括但不限于)

  • 数据库概念(ER 图、SQL 查询可视化)
  • 前后端交互(API 请求/响应流程动画)
  • HTTP 协议(请求头、状态码交互演示)
  • 渲染策略(CSR/SSR/SSG/ISR 对比演示)
  • Git 工作流(分支、合并可视化)

2. 时间规划

总周期:1-2 个月(2025年12月 - 2026年1月)

阶段 时间范围 核心任务 里程碑 状态
初稿完成 已完成 基础篇 + 进阶篇全部章节初稿 ✅ 初稿完成 ✅ Done
Phase 1:基础篇精修 12月1日-12月10日 基础篇6章逐篇校验、内容丰富 基础篇定稿 🔄 进行中
Phase 2:进阶篇核心章节精修 12月11日-12月20日 进阶篇核心章节(第0-4章、第10章)校验 进阶篇核心定稿 📋 待开始
Phase 3:配套内容建设 12月11日-12月15日 「他们说」资源库 + Web互动工具开发 配套内容上线 📋 待开始
内测启动 12月中旬 发布内测版,招募种子用户 内测启动 📋 待开始
内测迭代 12月中旬-1月初 收集反馈、快速修订 内测版稳定 📋 待开始
Datawhale组队学习 2月/3月(待定) 首次正式组队学习 首轮学习完成 📋 待定

3. 人员规划

角色 负责内容 人数 主要职责
项目负责人 全局 1人 统筹进度、质量把控、Datawhale对接
基础篇校验 基础篇第1-6章 1-2人 内容校验、案例补充、语言润色
进阶篇校验 进阶篇第0-12章 1-2人 技术准确性、代码验证、内容完善
「他们说」编辑 资源库 2-3人 资源收集、筛选、撰写简评
Web工具开发 互动教学工具 1-2人 前端开发、交互设计、概念可视化
社区运营 全局 1人 内测组织、反馈收集、社群维护

预计团队规模可根据实际情况灵活调整

已完成内容

已完成内容

1. 已上线内容

项目官网Vibe Vibe: From Scratch to Full Stack(暂存)待后续datawhale的repo建好后,使用基于datawhale的repo来做vitepress页面。此外,我们最近购买了一个vibevibe.cn的域名,届时或许可以使用docs.vibevibe.cn和whale.vibevibe.cn来作为我们的教程网页的访问地址

  • 已完成教程框架搭建
  • 已实现零基础友好的landing page设计
  • 后续章节内容持续开发中

2. 相关技术储备

项目负责人具备以下相关经验:

  • 长期使用Cursor/Claude Code等AI编程工具
  • 有AWS Kiro等平台AI编程教程创作经验
  • 受邀进行Vibe Coding主题分享
  • AI+社区建设者(湖南大学金融科技协会创始人)
  • AI创业者(为外贸电商行业公司提供AI化转型服务)
  • 正在NUS NExT++ Research Center担任Research Intern,开展AI+金融研究工作(supervisor:Dr. Fengbin Zhu, Prof. Tat-Seng Chua)
  • 个人主页:www.guohaoqi.cn

❗❗❗注意事项❗❗❗:为了便于我们跟你取得联系,请务必加我们的微信:at-Sm1les(备注你来自于项目立项即可),发起立项申请后DOPMC成员将会在7天内给出审核意见并评论在该Issue,若7天内无反对意见则默认立项通过,如有任何疑问或者需要帮助均可随时联系微信:at-Sm1les

  • 我已知悉上述注意事项并添加了微信:at-Sm1les

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions