Course Map
练习进度 0/55
💡 Stage 0: 觉醒 (5)
Vibe Coding 是什么从 Coder 到 Commander — 你的角色变了Vibe Coding vs Spec Coding — 两种范式,两种活法Vibe Coding 工具全景图 — 选对工具少走弯路你的第一个 Vibe 项目 — 从需求到指令🧘 Stage 1: 心法 (9)
MVP 思维 — 别做完美产品,做能用的产品需求拆解 — 从模糊想法到 AI 能执行的任务PRD 驱动开发 — 写清楚再动手代码 Prompt 五要素 — 让 AI 写出能用的代码Prompt 迭代与追问 — 第一次一定不够好Vibe Coding 思维模型用 Cowork 找设计参考 + 生成 design.mdStudio用 AI 生图给 PPT 配图 — 同一套风格,不再东拼西凑StudioAI 生图 + 数据图表给 PDF 配图Studio🛠️ Stage 2: 工具精通 (12)
Cursor 入门 — Vibe Coding 的代名词Cursor 进阶 — 多文件编辑和 Agent 模式Claude Code 入门 — 终端里的 AI 程序员MCP 入门 — 让 AI 连接整个世界Claude Code Skills 和 Agent Teams — AI 能力复用Browser 工具 — 零安装的 AI 编程体验GitHub Copilot 和 Windsurf — IDE 选择题工具选型实战 — 没有绝对的最好,只有最适合用 Cowork 给你的科普 PPT 批量生成配图Studio用 ElevenLabs 给科普 PPT 配中英双语旁白Studio一稿多发实战 — 把 PPT 内容改成 3 个平台版本Studio用 Suno 生成 60s 科普视频 BGMStudio🏗️ Stage 3: Context Engineering (9)
Context Engineering 入门 — 让 AI 不再"失忆"CLAUDE.md 设计实战 — 让 AI 秒懂你的项目Cursor Project Rules 设计实战项目结构与 AI — 让你的项目 AI 友好Token 经济学 — 省钱和效率的平衡文档驱动开发 — AI 时代的新范式让 AI 把一段乱文本变成 JSON 表格Studio用 Claude 设计每天运行的 JSON 提取任务StudioObsidian + AI 第二大脑:设计一套可审核的笔记整理流程Studio🚀 Stage 4: 全栈实战 (13)
环境搭建 — 让 AI 帮你配环境AI 前端开发 — 从截图到 React 代码AI 后端开发 — 从 API 设计到实现数据库设计与 AI — Schema 到迁移安全与认证 — AI 生成的代码怎么不掉坑调试 AI 代码 — 读错误日志和修复 BugGit 工作流 — AI 怎么写 Commit 和 PR部署到上线 — AI 加速从开发到生产Code Review 和质量保证 — AI 写的代码咋审测试 TDD — 先写测试再让 AI 实现用 AI 写一个最小 Admin CMS(产品增删改查)Studio给 Landing Page 加联系表单 + 数据收集Studio用 Cowork 搭一个每日金融新闻聚合 AgentStudio Learning Guide
你的代码在 localhost 上跑得好好的,然后呢?
我见过太多这种情况了:一个人花了一周用 Cursor 做了一个很酷的项目,本地跑得很流畅,截图发到朋友圈——然后就没有然后了。因为他不知道怎么把项目部署到网上让别人也能用。
或者更常见的场景:他知道要部署,但一打开 AWS 的控制台就傻眼了——几十个服务,每个都有一堆配置选项,光安全组规则就能搞一下午。
这就是为什么 Vercel 改变了游戏规则。

部署的本质
先说一个很多人搞不清楚的概念:部署(Deploy)到底是在做什么?
简单粗暴地说,部署就是把你电脑上的代码放到一台"别人也能访问到的电脑"上跑起来。你的笔记本电脑只有你自己能用,但如果你把代码放到一台有公网 IP 的服务器上,全世界的人都能通过浏览器访问到。
传统的部署流程大概是这样的:
- 买一台云服务器(AWS EC2、阿里云 ECS 之类的)
- 配置服务器环境(装 Node.js、Nginx 等)
- 把代码传上去
- 配置域名、SSL 证书
- 配置防火墙、安全组
- 设置进程守护(让程序崩溃后自动重启)
- 配置日志、监控
Vercel 做了什么?
Vercel 本质上是把上面那 7 个步骤全自动化了。你只需要做一件事:把 GitHub 仓库连接到 Vercel。
然后 Vercel 会自动:
- 检测你的项目类型(Next.js?React?Vue?)
- 选择正确的构建命令
- 构建你的项目
- 部署到全球 CDN
- 生成一个 .vercel.app 的域名
- 配好 HTTPS
- 每次你 push 代码,自动重新部署

什么项目适合 Vercel?什么不适合?
Vercel 这么好用,是不是所有项目都应该用它?不是。
| 适合 Vercel 的 | 不太适合 Vercel 的 |
|---|---|
| Next.js / React / Vue 等前端项目 | 需要长时间运行的后端服务(WebSocket、定时任务) |
| 静态网站、博客 | 需要 GPU 的 AI 推理服务 |
| Serverless API Routes | 需要精细控制服务器配置的场景 |
| 个人项目、MVP 验证 | 大型企业项目(成本考虑) |
| JAMstack 架构 | 需要自建数据库、Redis 等有状态服务 |

其他类似的平台
Vercel 不是唯一的选择。类似的平台还有:
- Netlify:和 Vercel 类似,对静态站点特别友好
- Railway:擅长后端部署,支持 Node.js、Python、Go 等
- Fly.io:全球边缘部署,Docker 容器方案
- Cloudflare Pages:免费额度非常慷慨
- Firebase Hosting:Google 家的,跟 Firebase 生态集成好
Vibe Coding 中的部署
话说回来,部署这件事在 Vibe Coding 的语境下有一个额外的好处:你可以让 AI 帮你写部署配置。
传统的部署配置(Dockerfile、nginx.conf、CI/CD pipeline)对很多人来说是"天书"。但这些配置文件本质上是有固定模式的,非常适合让 AI 来生成。你只需要告诉 AI"我的项目用什么技术栈、要部署到哪个平台",它就能帮你生成一个可用的配置。
不过有一个东西你绝对不能让 AI 帮你管——那就是环境变量和 Secret。这个我们下一步讲。
Vibe Workspace
Live build context
部署到底是怎么回事?为什么 Vercel 能"一键"?
从零理解部署的本质,以及为什么有些项目可以一键搞定、有些不行
自动保存在此设备
理解 Vercel 等平台的一键部署原理和适用场景掌握环境变量和 Secret 的管理规范能用 AI 生成部署相关的配置文件