你早就在做软件了
嘴动一下，应用就来了——这一站，先帮你看清"原来我已经在路上"。
"要是有个 X 就好了"——那一刻你已经开干
你在生活里说过多少次"要是有个记账小程序、要是有个倒计时、要是有个早上催我喝水的小工具"——那一刻你脑子里诞生的那段话，技术圈有个词叫产品需求文档。
过去：你需要先学三年代码，才能把这句话变成软件。
现在：Vibe Coding 把这句话直接翻译成能跑的应用。
Vibe Coding 的本质不是放弃理解，而是把"理解"从"语法记忆"挪到了"目标定义"。你的真实工作变成了——把想要什么说清楚。
从自家厨房点外卖：一个比喻看清差别
以前做软件像开酒店——先学厨艺、买设备、招厨师，开张前你已经累趴下了。
现在像在自家厨房点外卖——你说"今晚我想吃红烧肉"，AI IDE 把菜端上桌让你尝。你的角色从"厨师"变成"美食家+老板"——尝味道、提改进、做决定。
用中文，用大白话，越具体越好。
读你的项目、生成代码、跑命令、装依赖——它都自己来。
道生一→万物：AI 能力的四层进化
Vibe Coding 圈子里有句口诀，叫"道生一万物"——意思是 AI 能力是分阶进化的，从一个最小起点扩散到一切：
获得跟 AI 对话的能力——这是入场券，5 分钟搞定。
你不再需要手动复制粘贴代码——它直接改文件。
装依赖、配数据库、部署项目——它自己跑命令搞定。
代码、文档、测试、脚本、营销文案——你说要啥就有啥。
人机分工：你是导演，AI 是剧组
把电影类比拿过来——你是导演（管方向和判断），AI 是整个剧组（管执行和产出）。两边各干各的，互不抢戏。
"我要一个能跑在手机上的记账 App，不要联网，最多 3 个页面"——这种话只有你能说。
读懂你说的话、写代码、跑命令、把测试结果摆给你看——这是它的活。
"我是 AI 的寄生者，没有 AI 我失去一切能力"——这不是自嘲，这是新工作方式的核心宣言。承认它，你就上路了。
动手翻译：把"中文心愿"变成 AI 听得懂的话
左边是你平时随口讲的需求；右边是把它整理成 AI 能精准接住的 Prompt 模板。差别只在于"五段式"的明确化：
我想要个记账 App，
能记每天花了多少钱，
最好简单点，
我妈也能用。1. 目标：做一个个人记账 App，给完全不懂技术的中老年人用。
2. 界面：单页面，最大字号，三个按钮——加一笔、看本月、清空。
3. 功能：每笔输入金额+一句备注，自动累计本月总额。
4. 数据：存在浏览器本地，不联网、不登录。
5. 技术栈：HTML+CSS+JavaScript 单文件，能直接双击打开。
看见区别了吗？左边是愿望，右边是规格。AI 不是读心术——你说得越清楚，它给得越准。
小测验：场景判断
你今晚突然想要一个"记账小程序"，自己也不会写代码。最划算的下一步是？
AI IDE 三件套——你的新装备库
不是 1979 年的 Vim，也不是传统 VS Code——你需要一个"听得懂中文、能改你文件、会跑命令"的编辑器。
选车比喻：家用 SUV、跑车、卡车
三款主流的 AI IDE，定位完全不同。挑工具就像挑车——你要看自己跑的是什么路。
Cursor · 家用 SUV
上手难度：中
是否免费：有免费额度，深度用要订阅
适合场景：窗口里直接写代码、改代码、看预览，全程图形界面。第一次接触 AI IDE 的人最容易找到感觉。
Claude Code · 跑车
上手难度：中高
是否免费：需 Claude 订阅
适合场景：在终端里跑，能读懂整个项目结构、批量改文件、自己跑命令。专业玩家的"长跑利器"。
Trae · 重型卡车（免费）
上手难度：低
是否免费：完全免费
适合场景：字节出品，内置 GPT-4o / Claude Sonnet / DeepSeek R1 多模型可选。零门槛、不用付费、想体验 vibe coding 但不想先掏钱的人首选。
同一句需求，三家工具怎么接
下面这段对话演示：你说"做个待办 App"，三个 IDE 各自的响应风格是什么样的。点 "下一句" 一句句看。
三步上手：从下载到第一个项目
不管选哪一家，路径都是这三步——先装好，再登录，再开第一个文件夹。
去对应官网（cursor.com / claude.ai/code / trae.ai），按操作系统下载，双击装好——和装一个普通 App 完全一样。
第一次打开会让你登录。Cursor 用邮箱、Claude Code 用 Anthropic 账号、Trae 用字节抖音/手机号——都是常见登录方式。
菜单里点 Open Folder，新建一个空文件夹（比如 my-todo），打开它。从此你的 vibe coding 工位就开张了。
同一需求两种界面：Composer vs 终端
Cursor 的 Composer 让你用聊天框；Claude Code 让你在终端里说话。下面是同一句需求在两种界面里的样子：
# 在右侧 Composer 输入框里粘贴：
新建一个 index.html，
做个待办 App，
能加任务、勾掉、删除，
存在 localStorage 里。
完成后帮我打开预览。启动：在 my-todo/ 文件夹里跑 claude。
提问：直接打字"做个待办 App，能加任务、勾掉、删除，存 localStorage"。
差异：它会先列出"我准备做这几步，你 OK 吗"，等你回 "go" 才开始动手。
结果：同样产出 index.html，但你看到的是终端日志而非可视面板。
prompt 翻译：一句中文 → AI 听得懂的"做单"
同样的需求，写得越像"工单"，AI 出错越少：
给我做个待办 App，
能加任务能勾掉。1. 目标：单文件待办 App。
2. 文件：只生成 index.html，CSS/JS 内嵌。
3. 功能：输入框加任务 / 复选框勾掉 / 红叉删除。
4. 存储：localStorage 持久化，刷新不丢。
5. 完成判定：双击 html 在浏览器打开能用。
遇到 Agent Mode 选项一定要打开——它代表"AI 自己跑、自己看结果、自己迭代"，这是 vibe coding 真正的爽点。
小测验：怎么挑工具
你只想晚上摸鱼做个小工具，绝对不想付费——选哪个？
从一句话到能跑的原型
15 分钟做一个贪吃蛇——这是 vibe coding 的"折纸第一只鸟"。
折纸比喻：白纸 → 小鸟
原型就像折纸——一开始是张白纸（空文件夹），按几个折法折几下，立马变成一只能"立"起来的小鸟（能跑的MVP）。
贪吃蛇是 Stage 1 教程里最经典的"第一只鸟"——它简单到一屏代码就够，又复杂到包含了"画布、键盘、循环、计分"四件事，是 vibe coding 的最佳成就解锁副本。
从干净的空白起步——AI 不会被旧文件干扰。
画布尺寸、操作方式、计分规则、技术栈、完成判定——一次写清楚。
它会自动建 index.html，把 HTML+CSS+JS 内嵌进去。
没错——你已经在玩自己的第一个游戏了。
"把蛇换成蓝色 / 加一个最高纪录 localStorage"——继续聊就行。
幕后追踪：你按下回车后发生了什么
这一屏是 vibe coding 的"地铁线路图"——从你打字到游戏跑起来，6 站全程。点 "下一步" 一站站走。
prompt 翻译：你只描述了 What，没描述 How
下面这段贪吃蛇 prompt 看着很短，但已经足够。注意——你只说了"画什么、怎么操作、怎么得分"，完全没说"用 canvas 还是 div、定时器多少毫秒、数组怎么存"——那是 AI 该想的事。
做个 200x200 的贪吃蛇网页，
方向键控制，
吃到苹果加 1 分，
撞墙或撞自己游戏结束。
HTML+CSS+JS 单文件，
双击就能玩。1. 画布尺寸：200x200——告诉 AI 大小，避免它给你来个全屏。
2. 操作方式：方向键——锁定输入设备，不会做出鼠标点击版。
3. 计分规则：吃苹果 +1——明确产出，AI 知道要做计分 UI。
4. 失败条件：撞墙/撞自己——边界清晰，AI 不会自己加奇怪规则。
5. 技术约束：单文件 + 双击运行——这一句帮你避开 80% 装环境的坑。
代码翻译：AI 给你写了什么
AI 生成的代码里有这么一段——这是"键盘控制"的核心。看不懂没关系，右边白话能让你知道它在做啥：
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowUp") snake.setDir(0, -1);
if (e.key === "ArrowDown") snake.setDir(0, 1);
if (e.key === "ArrowLeft") snake.setDir(-1, 0);
if (e.key === "ArrowRight") snake.setDir( 1, 0);
});第 1 行："嘿浏览器，帮我盯着键盘——一旦有人按键，叫我一声。"
第 2 行：按了上箭头？——蛇头方向改成"向上一格"。
第 3 行：下箭头——"向下一格"。
第 4-5 行：左右同理。
整段意思：把键盘的物理按键 → 翻译成蛇的运动方向。
贪吃蛇能跑 ≠ 代码能上线——它只是 demo。Stage 2 才教你怎么从 demo 变成"全网用户都能玩"的产品。
练手三选一：把贪吃蛇换成你自己的产品
掌握了套路，下面这三个想法，你今晚都能跑出 demo——选一个，照"五要素"写 prompt：
记账小程序
五要素：
① 单页面记账
② 加一笔含金额+备注
③ 自动算本月总额
④ localStorage 存储
⑤ 单 html 双击打开
番茄钟
五要素：
① 25 分钟工作 5 分钟休息
② 圆环倒计时 + 听觉提醒
③ 一天累计完成几个番茄
④ 数据本地存
⑤ 单 html 直开
个人博客首页
五要素：
① 首页+文章列表+正文三页
② Markdown 写正文
③ 暗色/亮色切换
④ 文章存 JSON 文件
⑤ 静态站、可直接部署
小测验：找出 prompt 里的硬伤
你写了如下 prompt，但 AI 给你生成的项目复杂得跑不起来：
"做一个待办 App，能加任务、能勾掉，要好看一点。"
哪句话漏了，导致 AI 跑偏？
让原型变成真产品
能跑 ≠ 能上线——从家庭作坊到工厂，多了一整套 SOP。
家庭作坊 → 工厂：少了什么？
贪吃蛇能在你电脑上跑，但要"全网用户都能用"，缺了一整套配套：数据库（SOP）、部署（质检+物流）、支付（合规）、AI 工作流（生产线）……这就是 Stage 2/3 的内容，也是从原型到产品的真实差距。
下面这 7 块拼图，每一块都是"工厂"绕不开的工种。一个一个认识就行——你不用今晚学完，但听过一遍后，下次别人提起时你不会再陌生。
全栈拼图：7 块工厂零件
Dify
Dify 是 AI 工作流工厂——拖拽节点拼一条 AI 流水线，不用写代码。
Supabase
Supabase 是数据库+登录系统二合一——存数据、管用户，五分钟搞定后端。
Git
Git 是代码的"时光机"——每一版改动都存档，不怕改坏。
Vercel
Vercel 是上线发射器——push 一下，全世界 30 秒后能访问你的站。
Stripe
Stripe 是收银台——海外信用卡、订阅、退款，半天接完。
MCP
MCP 是 AI 的"USB 接口"——让大模型能调你的工具、数据库、API。
RAG
RAG 是"AI 的私域知识库"——把你的文档喂进去，AI 用你的资料回答。
数据库一瞥：Supabase 建表的 SQL
下面这段是 Supabase 里建一张"用户表"的 SQL 语句。看不懂没关系，右边白话告诉你它在干嘛：
create table users (
id uuid primary key,
email text unique not null,
created_at timestamp default now()
);第 1 行："建一个名叫 users 的表"——就像新建一张 Excel 工作表。
第 2 行：表里有一列叫 id，每个用户一个唯一编号。
第 3 行：有一列叫 email，每人一个、不能重复、不能空。
第 4 行：有一列叫 created_at，自动填进"这个用户什么时候注册的"。
整段意思：建一张用户表，每个用户记录"是谁、邮箱什么、什么时候来的"。
跨平台：从浏览器到手机到桌面
Stage 3 教程把"原型"扩展到三大跨平台分支——你可以选一个最贴近你目标用户的方向：
不用下载、扫码即用、覆盖 14 亿微信用户——做国内 toC 产品的首选。
一套 JavaScript 代码，同时编译出安卓和苹果的原生 App——上架两个商店。
把网页打包成 Mac/Windows 桌面 App——VS Code、Discord 都是这么来的。
小测验：朋友想用你的 demo
你今晚做了一个待办 demo，朋友想用——下一步最合理是？
MCP / RAG / Stripe 都是 Stage 3 才需要碰的。你今天听过一次，下次别人提起时就不会陌生——这就是这模块的目标。
学习地图与下一步
80+ 主题听起来吓人——但你不用全学，你只要会查"我现在卡在哪、去哪查"。
地铁线路图：找到你的当前站
Easy-Vibe 仓库就像北京地铁——你不会一口气坐完所有线，但你随时能查"我在哪个站、要换乘几次到目的地"。
下面是仓库的"线路图"，stage-0 入门起点 → stage-1/2/3 三条主干线 → appendix 是 9 大附录知识库：
9 大附录：什么时候来翻它
这 9 块是"图书馆里的 9 个书架"——不需要全看，遇到具体问题来翻对应那一架就够。
计算机基础
操作系统、文件、进程——遇到"这条命令为啥不工作"时来。
前端
HTML / CSS / JS / React——做 UI 时来。
后端
Node / Python / API 设计——做服务端逻辑时来。
AI 原理
大模型、token、上下文——想搞清"AI 为啥这样答"时来。
架构
分层、解耦、SOLID——项目变大开始乱时来。
数据库
SQL / NoSQL / 索引——存数据查不快时来。
部署运维
Docker / CI / 监控——上线后稳不住时来。
网络
HTTP / WebSocket / 跨域——前后端通信报错时来。
工具链
Git / npm / 包管理——装东西/版本冲突时来。
卡点求救公式：每次卡住就跑这三步
新手最容易死在"装环境"和"报错信息看不懂"上——这套求救公式，把"卡住的具体内容"打包给网页 AI（ChatGPT / Claude），让它给你做一份按你电脑量身定制的拆解。
当前小节全文 + 你执行的命令 + 完整报错——一字不漏，越啰嗦越好。AI 不嫌烦。
注意——是网页版，不是你卡住的那个 AI IDE。让另一个"局外人 AI"来诊断。
"我用 Mac M3 / Windows 11 / Ubuntu 24，请按我的系统给逐条 shell 命令，每条说为什么这么做"。
求救 prompt 模板：拿走就能用
你是一个专业的 AI 编程环境配置助手。
我要从新电脑开始学习 Vibe Coding。
请先问我：
1. 我的操作系统？
2. 我是否能访问 OpenAI/GitHub？
3. 是否已有 Codex 订阅？
然后帮我：
1. 判断网络与订阅
2. 生成安装 Codex CLI 步骤
3. 命令单独放代码块
4. 跑通后让本地 Agent 配剩余环境
5. 报错逐条解释
要求：不跳步；每步只做一件事；每步说明如何判断成功。"专业的 AI 编程环境配置助手"：给 AI 一个清晰角色，它会切换到"耐心师傅"模式。
"请先问我"三件事：避免 AI 凭空猜你环境。它会先采访你，再给方案。
"命令单独放代码块"：方便你复制粘贴，不混进解释里。
"跑通后让本地 Agent 配剩余环境"：第一步 CLI 装好后，剩下的让本地 AI 接手。
"报错逐条解释"：这是新手的救命绳——AI 会给你"这条报错什么意思 + 怎么修"。
"不跳步"：逼 AI 慢下来，不会一次扔给你 50 条命令把你淹死。
终关测验：你照教程做但跑不起来
你照着教程一步步操作，命令报错跑不起来——下一步最该做什么？
收束：你已经在路上了
回头看这五站——
"要是有个 X 就好了"那一刻你已经是产品经理。
Cursor / Claude Code / Trae，挑一个开张。
贪吃蛇 15 分钟——折纸第一只鸟。
Supabase + Vercel + Stripe，从作坊到工厂。
知道去哪查 + 知道怎么呼救——你已具备入门 vibe coder 的全部内功。
入门到精通从来不是线性进步——而是"每解决一个卡点就升一级"。你不需要把 80+ 主题全学完才动手，你只需要现在就开干，遇到卡点拿求救公式爬出来。
系列 1 教你"上路"，系列 2 教你"开得稳"——怎么写出 AI 听得稳的 prompt、怎么管多文件项目、怎么避开 vibe coder 最常见的 7 个坑。系列 3 教你工具地图。
地图已经在你手里。下一站见。