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
你 landing page 现在是"瞎子状态"
P4 你做出来的是一个静态展示页。它只能输出，不能输入——访客看了什么、停留多久、点了哪个按钮、感不感兴趣，你一律不知道。
这个 Lab 的目标就是给你的 LP 装上"眼睛和耳朵"。
用户数据按"用户参与度"分 3 层
| 层级 | 叫什么 | 用户做什么 | 你拿到什么 | 这节 Lab 做吗 |
|---|---|---|---|---|
| 第 1 层 | 表单数据 | 主动填姓名邮箱留言 | 真人 + 联系方式 | ✅ |
| 第 2 层 | Analytics | 只是浏览 | 访问数 / 来源 / 停留时长 | ✅ |
| 第 3 层 | 漏斗 | 多步行为 | 每一步流失率 | 后期 |
第 1 层：表单——最贵的数据
100 个访客里能有 3 个愿意填表单已经很好了——这 3 个人比 97 个匿名访客有价值得多，因为他们留下了"再联系"的钩子。
这节 Lab 的姿势：HTML 原生 form + Google Apps Script Webhook + Google Sheets。完全免费，数据完全归你，不依赖第三方。
第 2 层：Analytics——别只收集数据，也要看转化路径
剩下 97 个不填表单就走的访客——他们的行为也都是数据，只是你需要工具帮你记录。
这节 Lab 的姿势：PostHog。免费档每月 100 万事件，对你这个阶段够用 3 年。
第 3 层：漏斗——你有流量再做
漏斗分析需要"几十到几百"流量做基础，你刚上线就分析漏斗等于看一张全是 0 的表。先把第 1、2 层做了，等数据起来再说第 3 层。
这节 Lab 跑完你拥有什么
- 一个底部带联系表单的 LP
- 表单提交后数据出现在你 Google Sheet 里
- PostHog dashboard 能看到访问数据 + form_submit 事件
- 一份"我有数据了"的真实体感
Vibe Workspace
Live build context
3 层数据：表单 / Analytics / 漏斗
在开始动手之前，先理解清楚"用户数据"到底有几种、你这节 Lab 要做哪几层
自动保存在此设备
理解用户数据采集的 3 层结构（表单 / Analytics / 漏斗），分别什么时候用用 Google Apps Script Webhook 把 HTML 表单的数据直接落到 Google Sheets——不写一行后端代码5 分钟接入 PostHog，开始追踪访问行为 + 关键事件（form_submit）