Vibe Coding 实战指南
Interactive Course·入门

Vibe Coding 实战指南

从零到一,用自然语言驱动 AI 完成完整项目。学会需求梳理 → PRD 文档 → 静态 Demo → 分阶段开发 → 部署上线的全流程闭环。无需深厚编程基础,只要会打字和描述想法,就能让 AI 帮你把想法变成可运行的网页应用。

4 章 · 8 节约 57 分钟Vibe Coding · AI 编程 · VSCode
开始第一课
当前进度0/8
CH01
工具准备与需求梳理
2
看清五步流程,装好 VSCode + AI 插件 + API Key,用四要素结构完成第一份需求文档
开始练习
01
1.1 准备工具
安装 VSCode、AI 插件,申请并配置 API Key
10 MIN
02
1.2 梳理需求
学习需求四要素,用结构化方式写出需求文档
10 MIN
CH02
PRD 与静态 Demo
2
让 AI 根据需求写出完整 PRD 产品文档,再根据 PRD 做纯静态 HTML Demo,确认外观后再开发
开始练习
03
2.1 生成 PRD
PRD 提示词要点 + 单轮澄清 + 产出 PRD.md
8 MIN
04
2.2 做静态 Demo
理解 Demo 价值 + 做纯静态 HTML + 反馈修改
7 MIN
CH03
开发计划与代码实现
2
建立结构化开发计划,让 AI 按阶段逐步搭建项目代码,验收最终成品
开始练习
05
3.1 建立开发计划
Plan 模式价值 + 发起计划 + 确认保存
5 MIN
06
3.2 开始开发
按计划分阶段开发 + 文件树爆发 + 验收成品
7 MIN
CH04
上线与使用
2
本地启动项目使用,或通过 GitHub + Vercel 一键部署上线,完成全流程闭环
开始练习
07
4.1 本地使用
运行启动命令,在浏览器中打开本地地址
3 MIN
08
4.2 线上部署
GitHub + Vercel 一键部署,获得公开网址
7 MIN