VibeCamp
Vibe Coding · 游戏化 AI 编程训练营

AI 编程教程
零基础做出真产品

Vibe Coding 是 2025 年最重要的新技能——不学编程语言，用自然语言指挥 Claude Code / Trae 写代码，26 个实战关卡，每关都有可上线的真实产出。

免费开始闯关什么是 AI 编程？
零基础可学
每关有产出
学完能上线
副业变现路径
🏆
学员案例
零基础 3-5 周做出有收入的产品
🚀
实战项目库
6 个真实可上线的项目模板
💡
什么是 AI 编程
Vibe Coding 与传统编程的区别

Quest Map

互动闯关地图：从零到独立开发

26 个关卡，每关结束都有可以展示的产出。有基础可以直接跳到感兴趣的章节。

PROLOGUE·2 个关卡

认识 AI 编程工具

进入章节 →
0-1
安装 AI 编程助手
10 分钟装好 Claude Code 或 Trae
+50 XP
0-2
第一个 AI 生成的页面
用自然语言让 AI 写出你的第一个网页
+100 XP
CHAPTER 1·3 个关卡

做出第一个静态网站

进入章节 →
1-1
Prompt 核心技巧
学会下指令，让 AI 精确理解你的需求
+120 XP
1-2
个人名片页
做一个可以发给别人的自我介绍页面
+150 XP
1-3
多页作品集
把多个页面组合成完整网站
+200 XP
CHAPTER 2·4 个关卡

工程化：React + Tailwind

进入章节 →
2-1
搭建 Next.js 项目
用 AI 初始化一个真正的前端工程
+200 XP
2-2
组件化思维
把页面拆成可复用的积木
+250 XP
2-3
响应式布局
手机和电脑都好看
+200 XP
2-4
部署上线
免费发布到 Vercel，全球可访问
+300 XP
CHAPTER 3·3 个关卡

接入 AI 能力

进入章节 →
3-1
调用 OpenAI API
给你的网站加上对话能力
+350 XP
3-2
流式输出
像 ChatGPT 一样逐字显示
+400 XP
3-3
接入生图 API
文字生成图片，嵌入你的产品
+450 XP
CHAPTER 4·4 个关卡

全栈：后端 + 数据库 + 支付

进入章节 →
4-1
API 路由
写后端接口，处理数据
+500 XP
4-2
Supabase 数据库
存储用户数据，读写自如
+550 XP
4-3
用户登录系统
注册、登录、权限控制
+600 XP
4-4
Stripe 支付
接入支付，开始收钱
+700 XP
CHAPTER 5·3 个关卡

上线，让全世界用

进入章节 →
5-1
GitHub 版本管理
代码不丢失，多人协作
+600 XP
5-2
Vercel 生产部署
自定义域名，HTTPS，全球 CDN
+650 XP
5-3
SEO 基础优化
让 Google 找到你的产品
+700 XP

FAQ

常见问题

AI 编程（Vibe Coding）需要编程基础吗？

完全不需要。你不需要学任何编程语言，只需要学会如何用自然语言指挥 AI 帮你写代码。会打字、会上网就够了。

Claude Code、Codex、Trae 用哪个？

三个都可以完成本课程所有关卡。Trae 是字节跳动出品，国内用户无需翻墙，完全免费，推荐优先试试。Claude Code 代码理解力强，Codex 有图形界面对零基础最友好。

有编程基础，可以跳过前几关吗？

完全可以。每一关都是独立的，你可以直接从任意章节开始。段位系统基于累计 XP 计算，跳关入场完全不影响。

这个课程要收费吗？

核心关卡内容完全免费开放。游戏化互动让学习更有趣，你可以按自己的节奏闯关，没有任何强制付费墙。

Start Building

从第一关开始，
或者直接跳关。

不用从头来，有基础的直接选章节入场。

开始闯关 查看课程地图