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
你有没有想过,写代码不需要装任何东西?
我第一次用 Bolt.new 的时候,真的被震到了。打开一个网页,输入"帮我做一个 Todo App",30 秒以后——一个完整的 React 应用就在浏览器里跑起来了。不需要装 Node.js,不需要 npm install,不需要配 VS Code,甚至不需要终端。
这就是 Browser AI 编程工具的魔力。2024 年以来,这个赛道爆发了好几个产品,每个都有自己的特色。来看看主要选手:

四大 Browser 工具
| 工具 | 定位 | 最强能力 | 背后公司 |
|---|---|---|---|
| Bolt.new | 全栈快速原型 | 从 prompt 到部署一条龙 | StackBlitz |
| Lovable | 设计感优先 | 生成的 UI 好看,接近设计稿 | Lovable (前 GPT Engineer) |
| v0 | UI 组件生成 | shadcn/ui 生态,组件质量高 | Vercel |
| Firebase Studio | Google 全家桶 | Firebase 集成、Gemini 驱动 |

Bolt.new 的优势是速度和完整性。它用 WebContainer 技术在浏览器里跑了一个完整的 Node.js 环境,所以你得到的不只是前端,后端也有。想做个全栈小项目?Bolt 可能是最快的。


Lovable 的卖点是设计感。同样一句"做一个着陆页",Lovable 生成的页面通常比 Bolt 好看。如果你是产品经理或设计师,想快速出一个高保真原型给团队看,Lovable 可能更适合。

v0 的特点是和 Vercel + shadcn 生态深度绑定。生成的组件可以直接 copy 到你的 Next.js 项目里用。不是做完整应用,而是做高质量的 UI 组件。


Firebase Studio 是 Google 的新入场选手,用 Gemini 模型驱动,和 Firebase 后端服务无缝集成。如果你的项目本来就在 Google Cloud 上,这可能是最顺手的选择。
Vibe Workspace
Live build context
Browser 工具全景——打开网页就能写代码
认识 Bolt.new、Lovable、v0、Firebase Studio 等主流 Browser AI 编程工具
自动保存在此设备
了解主流 Browser AI 编程工具的能力和定位理解零安装开发的优势和天花板能根据项目需求判断该用 Browser 工具还是本地 IDE