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
你有没有让 AI "帮我写一个用户注册接口",结果拿到的代码你根本不敢用?
我有过。那是在做一个 Side Project 的时候,我跟 Claude 说:"帮我用 Express + TypeScript 写一个用户注册 API。" 它很快生成了一段代码——路由、controller、service 都有,看起来挺像回事的。
但仔细一看,问题一大堆:
- 密码直接存明文到数据库(没有 hash)
- 没有检查邮箱格式是否合法
- 没有检查用户名是否已存在
- 返回的数据里带着密码字段
- 错误处理就一个
catch(err) { res.status(500).send('Error') }
当你说"写一个用户注册接口",AI 只知道三件事:有一个用户模型,有一个注册操作,要写成 API。至于密码要不要 hash、邮箱要不要校验、返回数据要不要脱敏——你没说,它就不一定做。
这就是为什么后端开发比前端开发更需要精确的指令。前端代码写错了最多是样式丑一点,后端代码写错了可能是安全漏洞、数据丢失、或者整个服务挂掉。

API 先行:先画蓝图,再盖房子
"API 先行"不是什么新概念——在传统开发中,很多团队会先写 API 文档(Swagger/OpenAPI),前后端对着文档同步开发。但在 Vibe Coding 时代,API 先行有了新的含义:你的 API 规格就是你给 AI 的核心指令。
思路是这样的:
传统后端开发:
想清楚需求 → 写代码 → 写文档 → 前端对接
API 先行 + AI:
想清楚需求 → 写 API 规格 → 把规格给 AI → AI 生成代码
"API 规格"听起来很正式,但其实不需要写成 Swagger 那种格式。用自然语言写就行,但要写清楚几个关键信息:
| 必须写清的 | 为什么 | 不写的后果 |
|---|---|---|
| 请求方法 + 路径 | AI 需要知道是 GET/POST/PUT/DELETE | AI 可能用错方法,比如用 GET 做删除 |
| 请求参数(body/query/params) | AI 需要知道传什么数据 | AI 自己编参数名,跟前端对不上 |
| 参数校验规则 | AI 需要知道什么数据合法 | AI 不做校验,脏数据直接进数据库 |
| 成功响应的数据结构 | 前端需要知道拿到什么 | AI 每次返回的格式不一样 |
| 错误响应的格式 | 统一的错误处理 | AI 每个接口的错误格式都不同 |
| 权限要求 | 谁能调这个接口 | AI 不加权限检查,任何人都能调 |
一个对比:差的指令 vs 好的指令
❌ 差的指令:
"帮我写一个用户注册 API,用 Express + TypeScript"
✅ 好的指令:
"帮我实现用户注册 API,规格如下:
POST /api/auth/register
请求 Body:
{
email: string // 必填,合法邮箱格式
password: string // 必填,至少 8 位,必须包含大小写字母和数字
name: string // 必填,2-50 个字符
}
成功响应(201):
{
success: true,
data: {
id: string,
email: string,
name: string,
createdAt: string
}
// 注意:响应里不能包含密码
}
错误响应:
- 400:参数校验失败,返回具体的校验错误信息
- 409:邮箱已注册
- 500:服务器内部错误
安全要求:
- 密码用 bcrypt hash,salt rounds = 12
- 存入数据库前检查邮箱是否已存在
- 使用 Zod 做参数校验
- Rate limiting:同一 IP 每分钟最多 5 次注册请求
技术栈:Express + TypeScript + Prisma + PostgreSQL"
看到差别了吗?好的指令基本上就是一份简化版的 API 文档。AI 拿到这个指令,生成的代码会包含参数校验、密码 hash、重复检查、错误处理——因为你每一条都明确要求了。

有人可能会说:"这不是我自己把 API 都设计好了吗,AI 只是帮我翻译成代码?" 没错,这恰恰就是 Vibe Coding 的正确姿势——你做设计决策,AI 做编码实现。你是架构师,AI 是施工队。你不需要知道 bcrypt 的具体用法,但你需要知道"密码不能明文存储"。
Vibe Workspace
Live build context
为什么"先定义 API,再让 AI 写代码"是最高效的后端开发方式?
理解 API 先行的开发思维,以及它如何让 AI 生成更可靠的后端代码
自动保存在此设备
理解"API 先行"的思维方式以及它为什么能让 AI 写出更好的后端代码掌握如何用自然语言写出清晰的 API 规格描述学会在指令中指定数据校验、错误处理和权限控制