模块6B：Vibe Coding产品开发
选修（创业轨） 📅 第6周 ⏱️ 约12小时
目标：掌握Vibe Coding的核心方法论——用自然语言让AI帮你写代码，从零到上线一个真实可用的产品。不需要任何编程基础，只需要清晰的思考和准确的表达。
什么是Vibe Coding？
Vibe Coding是2025年由Andrej Karpathy（OpenAI联合创始人）提出的概念：你不再需要一行行写代码，而是用自然语言描述你想要什么，AI帮你生成代码。你只需要专注于"感觉"（Vibe）——产品应该长什么样、做什么——剩下的交给AI。
到了2026年，Vibe Coding已经从概念变成了主流开发方式。GitHub 2025年Octoverse报告显示，全球新增代码中超过46%由AI生成。Datawhale Easy-Vibe开源教程在GitHub上获得10.3k星，成为国内最受欢迎的AI编程入门资源之一。
学习目标
学完本模块，你将能够：
- ✅ 熟练使用至少2个Vibe Coding工具（Cursor、Trae、Bolt.new等）
- ✅ 用自然语言描述产品需求，让AI生成完整的产品原型
- ✅ 掌握"分步开发"策略，从简单功能开始迭代到完整产品
- ✅ 独立调试AI生成的代码，解决常见的报错和bug
- ✅ 将产品免费部署到公网，获得一个可分享的URL
课前准备
| 准备项 | 说明 |
|---|---|
| 电脑 | Windows / macOS 均可，推荐8GB内存以上 |
| 浏览器 | Chrome / Edge（用于使用Bolt.new、Lovable等在线工具） |
| AI工具 | 注册Cursor（推荐）或 Trae + 至少1个在线Vibe Coding工具 |
| 心态 | 不需要任何编程基础。如果你会写Prompt，你就已经会Vibe Coding了 |
| 模块5B产出 | 带上你在模块5B中写的商业计划书，我们把它变成产品 |
| 预计时间 | 学习约6小时 + 实操约6小时 |
第1课：2026年Vibe Coding工具对比 —— 选对工具，事半功倍
时长: 约90分钟 | 类型: 认知 + 工具安装
核心概念
2026年Vibe Coding工具全景图
截至2026年6月，主流的Vibe Coding工具可以分为两大类：本地IDE类（需要安装）和云端在线类（浏览器直接用）。
┌──────────────────────────────────────────────────────────────────┐
│ 2026年 Vibe Coding 工具全景图 │
├────────────────────┬─────────────────────────────────────────────┤
│ 本地IDE类 │ 云端在线类 │
│ （需安装桌面软件） │ （浏览器打开即用） │
│ │ │
│ Cursor │ Bolt.new Lovable │
│ Windsurf │ Replit Agent v0 (Vercel) │
│ Trae │ Tempo Labs Claude Artifacts │
│ │ GitHub Copilot Workspace │
└────────────────────┴─────────────────────────────────────────────┘七大工具详细对比
| 维度 | Cursor | Trae | Windsurf | Bolt.new | Lovable | Replit Agent | v0 (Vercel) |
|---|---|---|---|---|---|---|---|
| 类型 | 本地IDE | 本地IDE | 本地IDE | 云端在线 | 云端在线 | 云端在线 | 云端在线 |
| 底层模型 | Claude Opus 4.7/自研Composer 2 | Claude 3.5 Sonnet/GPT-4o/豆包1.5 Pro | Claude 4/GPT-4o | Claude 4 | GPT-4o | 自研+Claude 4 | v0自研模型 |
| 免费额度 | 2000次/月补全 | 免费（字节跳动） | 50次高级对话/月 | 每日免费额度 | 每日5次免费 | 3个免费Repl | 每日免费额度 |
| 付费价格 | Pro $20/月 | 免费 | Pro $15/月 | Pro $20/月 | Starter $20/月 | Core $25/月 | Premium $20/月 |
| 中文支持 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 适合场景 | 完整项目开发 | 新手入门/中文项目 | 代码重构/大型项目 | 快速原型 | 全栈应用 | 全栈应用 | React/Next.js前端 |
| 部署能力 | 需手动部署 | 需手动部署 | 需手动部署 | 一键部署 | 一键部署到Lovable | 一键部署 | 一键部署到Vercel |
| Git集成 | ✅ 原生 | ✅ 原生 | ✅ 原生 | ❌ | ✅ 连接GitHub | ✅ GitHub | ✅ Vercel绑定 |
| 学习曲线 | 中等 | 低 | 中等 | 低 | 低 | 中等 | 低 |
| 2026年亮点 | 4月发布Agent模式，自主编程能力大幅提升 | 字节跳动持续投入，完全免费，中文最好 | 3月发布Cascade模式，多文件编辑能力突出 | 5月发布Bolt 2.0，支持全栈项目 | 增长最快的AI开发工具，2026年Q1用户增长300% | 支持Python/Node.js双语言Agent | Vercel 2026年集成，v0可直接生成可部署的React组件 |
选型建议
| 你的情况 | 推荐工具组合 | 理由 |
|---|---|---|
| 我是纯新手，从没写过代码 | Trae（免费+中文好）+ Bolt.new（快速原型） | Trae完全免费，中文界面友好；Bolt.new浏览器打开即用，无需安装 |
| 我有一点编程基础 | Cursor（功能最强）+ Lovable（全栈应用） | Cursor功能最全面，Agent模式可自主编程；Lovable自动处理部署 |
| 我想快速做原型验证想法 | Bolt.new + v0 | 两者都是纯浏览器操作，10分钟就能出一个可交互原型 |
| 我想做完整的全栈产品 | Cursor 或 Replit Agent | 两者都支持前后端完整开发，Cursor更灵活，Replit更省心 |
| 预算有限 | Trae（免费）+ Bolt.new（免费额度） | 零成本入门Vibe Coding |
本模块实操工具推荐
本模块的实操将以 Trae（免费、中文友好）和 Bolt.new（快速原型）作为主要演示工具。如果你预算允许，强烈推荐升级到Cursor Pro（$20/月），Agent模式在2026年非常强大。
动手实操：安装并配置你的第一个Vibe Coding工具
方案A：Trae（推荐新手，免费）
- 访问 trae.ai 下载Trae桌面客户端
- 安装后打开，用邮箱注册账号（免费）
- 首次启动时，Trae会引导你选择AI模型（推荐默认的Claude 4）
- 熟悉界面：左侧是文件管理器，右侧是代码编辑器，底部是AI对话框
方案B：Bolt.new（零安装，浏览器直接使用）
- 打开 bolt.new（无需注册也能试用）
- 在首页的输入框中，你可以直接输入你想创建的应用描述
- 或者注册免费账号，获得更多使用额度
方案C：Cursor（功能最强，推荐有预算的同学）
- 访问 cursor.com 下载Cursor
- 安装后，可以用GitHub账号登录
- 首次使用有14天Pro免费试用
- 按
Cmd+K（Mac）或Ctrl+K（Windows）打开AI对话框
安装建议
至少安装 Trae 和试用 Bolt.new。如果你时间有限，只用Bolt.new也能完成本模块80%的实操内容。
第2课：从Idea到MVP工作流 —— 把你的想法变成产品
时长: 约120分钟 | 类型: 实操为主
核心概念
什么是MVP？
MVP（Minimum Viable Product，最小可行产品）是指用最少的功能验证你的核心假设。它不是"半成品"，而是"只解决一个核心问题的完整产品"。
MVP的关键原则：
- ✅ 只做1个核心功能（不是3个，不是5个，是1个）
- ✅ 这个核心功能必须完整可用（不是"差不多能用"）
- ✅ 上线后马上找真实用户测试
- ❌ 不要做登录注册系统（除非你的产品核心就是账号系统）
- ❌ 不要做"好看但没用"的功能
- ❌ 不要等"完美了"再发布
Vibe Coding MVP开发流程
┌─────────────────────────────────────────────────────────────┐
│ Vibe Coding 从Idea到MVP 完整流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 第1步：需求定义（自然语言描述） │
│ ↓ │
│ 第2步：产品原型（AI生成原型图） │
│ ↓ │
│ 第3步：核心功能开发（分步实现） │
│ ↓ │
│ 第4步：测试与迭代（自己用→给朋友用→修bug） │
│ ↓ │
│ 第5步：部署上线（公网可访问的URL） │
│ │
└─────────────────────────────────────────────────────────────┘动手实操1：用自然语言定义产品需求
在动手之前，你需要先写清楚你要做什么。用以下模板把想法整理成AI能理解的需求文档：
text
# 产品名称：[填入产品名称]
## 一句话描述
[用一句话说清楚这个产品是什么]
## 目标用户
- 用户画像：[谁会用这个产品？]
- 核心痛点：[他们遇到什么问题？]
## 核心功能（MVP只做1个）
[描述唯一的核心功能，越具体越好]
## 用户使用流程
1. 用户打开产品 → 看到 [什么]
2. 用户点击/输入 [什么] → 触发 [什么功能]
3. 用户得到 [什么结果]
## 设计风格
- 配色：[如：蓝色系、简约风]
- 风格：[如：现代简约、可爱、科技感]
- 参考：[填入你喜欢的类似产品，如：Notion的风格]
## 技术约束
- 需要适配手机吗？[是/否]
- 需要后端/数据库吗？[是/否]
- 需要登录功能吗？[是/否]需求文档范例：以"AI简历优化工具"为例
text
# 产品名称：简优AI
## 一句话描述
帮助大学生用AI优化简历，让简历通过率提升3倍。
## 目标用户
- 用户画像：大四学生，正在找工作，不会写简历
- 核心痛点：简历投了100份没回音，不知道问题出在哪
## 核心功能（MVP只做1个）
用户粘贴简历文本 → AI分析简历问题 → 给出优化建议 → 一键生成优化后的简历
## 用户使用流程
1. 用户打开产品 → 看到一个简洁的文本框
2. 用户粘贴自己的简历文本 → 点击"AI分析"
3. AI分析简历 → 显示评分（1-100分）和3个最关键的问题
4. 用户点击"一键优化" → AI生成优化后的简历
5. 用户可以复制优化后的简历
## 设计风格
- 配色：蓝色系（#2563eb 作为主色）
- 风格：现代简约，像Apple官网一样干净
- 参考：Notion的简洁风格
## 技术约束
- 需要适配手机：是
- 需要后端/数据库：否（MVP阶段不需要）
- 需要登录功能：否（MVP阶段不需要）动手实操2：用AI生成产品原型
方案A：用Bolt.new生成（最快，推荐新手）
- 打开 bolt.new
- 在输入框中粘贴以下Prompt（替换方括号内容）：
text
请帮我创建一个单页Web应用：[产品名称]
产品描述：[粘贴你的一句话说清楚]
核心功能：
- [粘贴你的核心功能描述]
用户使用流程：
[粘贴你的用户使用流程]
设计风格：
- [粘贴你的设计风格要求]
- 使用现代简约设计
- 需要适配手机和电脑（响应式设计）
- 使用Tailwind CSS
技术要求：
- 使用Next.js或纯HTML/CSS/JS
- 所有文字使用中文
- 不需要后端，所有功能在前端实现
- 添加适当的动画效果让体验更好- 等待AI生成（通常1-3分钟）
- 在右侧预览区查看效果
- 如果不满意，直接在对话框里描述修改需求，AI会帮你改
方案B：用Trae/Cursor生成（更灵活，适合迭代）
- 打开Trae或Cursor，创建一个新项目文件夹
- 在AI对话框中输入以下Prompt：
text
你是一个全栈开发专家。请帮我创建一个完整的Web应用。
产品名称：[填入]
核心功能：[填入]
用户流程：
1. [填入步骤1]
2. [填入步骤2]
3. [填入步骤3]
技术栈：
- 前端框架：React + Tailwind CSS
- 不需要后端（MVP阶段）
- 响应式设计，适配手机和电脑
要求：
1. 创建完整的项目文件结构
2. 所有文字使用中文
3. 代码注释使用中文
4. 使用现代UI设计，干净简洁
5. 添加适当的加载状态和错误提示
请从创建项目开始，一步一步引导我。先创建项目的基础结构和主要组件。动手实操3：分步开发核心功能
Vibe Coding最重要的原则之一：不要一次性让AI做所有事情，一步一步来。
分步开发策略
第1步：搭骨架（15分钟）
让AI生成项目结构、导航栏、基本布局
→ 检查：页面能打开吗？布局合理吗？
第2步：做核心功能（30分钟）
让AI实现最核心的一个功能
→ 检查：核心功能能用吗？有bug吗？
第3步：优化体验（20分钟）
让AI添加loading状态、错误提示、空状态
→ 检查：各种边界情况都处理了吗？
第4步：美化UI（15分钟）
让AI优化颜色、字体、间距、动画
→ 检查：在手机上好看吗？
第5步：修复bug（20分钟）
自己测试，把问题描述给AI修复
→ 检查：所有功能都正常吗？分步Prompt模板
第1步Prompt（搭骨架）：
text
请帮我创建一个[产品类型]的项目基础结构。
技术栈：React + Tailwind CSS + Vite
请创建以下文件：
1. 项目入口文件（index.html, main.jsx, App.jsx）
2. 导航栏组件（Navbar.jsx）- 包含产品名称和几个导航链接
3. 主要内容区（MainContent.jsx）- 先放一个空白的占位区域
4. 页脚组件（Footer.jsx）
要求：
- 使用Tailwind CSS进行样式设计
- 响应式布局，适配手机和电脑
- 配色方案：[主色 #XXXXXX，辅色 #XXXXXX]
- 所有文字使用中文第2步Prompt（做核心功能）：
text
现在请帮我在 MainContent.jsx 中实现核心功能。
功能描述：[详细描述核心功能]
用户操作流程：
1. [步骤1]
2. [步骤2]
3. [步骤3]
技术要求：
- 使用React的useState管理状态
- 添加表单验证（如果涉及输入）
- 添加loading状态（模拟数据加载）
- 添加错误处理（如果AI功能失败，显示友好提示）
- 所有提示文字使用中文
AI模拟说明：
由于这是MVP阶段，我们不接入真实的后端API。
请用JavaScript模拟AI的处理逻辑（例如：用字符串处理模拟AI分析）。
在代码中用注释标注"此处后续接入真实AI API"。第3步Prompt（优化体验）：
text
请帮我优化用户体验，添加以下细节：
1. **加载状态**：当AI处理时，显示一个优雅的加载动画（不要用转圈圈，用骨架屏或进度条）
2. **空状态**：当用户还没输入任何内容时，显示引导文字和示例
3. **成功状态**：当AI处理完成后，显示一个轻微的成功动画
4. **错误状态**：当出现错误时，显示友好的错误提示而不是代码报错
5. **过渡动画**：在状态切换时，添加平滑的过渡动画
要求：使用Tailwind CSS的动画类，不需要额外安装动画库。第4步Prompt（美化UI）：
text
请帮我美化UI设计，具体要求：
1. 增加合适的留白（padding和margin）
2. 优化字体大小和行高，让文字更易读
3. 添加柔和的阴影效果
4. 按钮添加hover效果（颜色变化+轻微放大）
5. 卡片添加圆角和边框
6. 确保在手机上的显示效果（375px宽度下测试）
配色参考：
- 主色：#2563eb（蓝色）
- 背景：#f8fafc（浅灰）
- 卡片：#ffffff（白色）
- 文字：#1e293b（深灰）
不需要改变任何功能，只优化视觉。动手实操4：完整MVP案例走读
以下是一个从0到MVP的完整时间线，以"AI简历优化工具"为例：
| 时间 | 阶段 | 做了什么 | 用时 |
|---|---|---|---|
| 第1天 | 需求定义 | 用模板写清楚产品需求文档 | 30分钟 |
| 第1天 | 原型生成 | 用Bolt.new生成第一版原型 | 15分钟 |
| 第1天 | 骨架搭建 | 用Cursor创建项目结构 | 20分钟 |
| 第2天 | 核心功能 | 实现简历粘贴→AI分析→显示结果 | 90分钟 |
| 第2天 | 体验优化 | 添加loading/empty/error/success状态 | 45分钟 |
| 第3天 | UI美化 | 优化配色、字体、动画 | 45分钟 |
| 第3天 | 测试修复 | 自己测试+找3个朋友测试+修bug | 60分钟 |
| 第4天 | 部署上线 | 用Vercel部署到公网 | 30分钟 |
总计：约6小时实际开发时间（分散在3-4天）。
第3课：Prompt Engineering for Coding —— 如何让AI写出你想要的代码
时长: 约90分钟 | 类型: 认知 + 实操
核心概念
Vibe Coding的核心不是"写代码"，而是"写Prompt让AI写代码"。好Prompt和差Prompt之间的代码质量差距巨大。以下是Vibe Coding的Prompt工程核心原则：
原则1：给AI足够的上下文
AI不知道你的项目是什么、你的技术栈是什么、你的设计风格是什么——除非你告诉它。
差Prompt：
帮我做一个登录页面好Prompt：
text
请帮我创建一个登录页面组件（LoginPage.jsx）。
项目上下文：
- 技术栈：React 18 + Tailwind CSS + Vite
- 设计系统：主色#2563eb，圆角8px，字体Inter
- 现有组件：Navbar（顶部导航）、Footer（底部）
登录页面要求：
- 邮箱和密码两个输入框
- "登录"按钮（主色，全宽）
- "忘记密码"链接（右对齐）
- 底部"没有账号？注册"链接
- 表单验证：邮箱格式检查、密码至少6位
- 响应式：桌面端居中卡片（400px宽），移动端全宽原则2：分步开发，不要一次全做
差做法：把10个需求一次性发给AI，给出一大堆不完整的代码。 好做法：每次只做1-2个功能，确认AI理解了再继续。
原则3：用"示例"引导AI
如果你想让AI生成特定风格的代码，最好给它一个示例：
text
请帮我创建一个按钮组件，风格参考以下代码：
参考代码：
```jsx
<button className="bg-blue-600 hover:bg-blue-700 text-white
font-medium py-2 px-4 rounded-lg transition-all
duration-200 hover:scale-105 active:scale-95">
点击我
</button>请基于这个风格，为我创建以下按钮变体：
- 主按钮（蓝底白字）
- 次按钮（白底蓝字蓝边框）
- 危险按钮（红底白字）
- 禁用按钮（灰底灰字）
#### 原则4：明确告诉AI"不要做什么"
有时比"要做什么"更重要的是"不要做什么"：
```text
创建这个页面时，请注意：
- ❌ 不要使用任何第三方UI库（如Material UI、Ant Design）
- ❌ 不要使用class组件，只使用函数组件
- ❌ 不要添加任何没有提到的功能
- ❌ 不要使用内联样式（inline style），统一使用Tailwind CSS
- ✅ 使用React Hooks（useState, useEffect）
- ✅ 所有文字使用中文常用Vibe Coding Prompt模板库
模板1：创建新页面
text
请帮我创建一个[页面名称]页面。
功能列表：
- [功能1]
- [功能2]
- [功能3]
设计参考：参考[你喜欢的网站/产品]的风格。
数据：由于是MVP阶段，请使用硬编码的模拟数据（不要请求API）。
请在[文件名]中创建此页面，并确保路由已正确配置。模板2：修改现有功能
text
请帮我修改[文件名]中的[功能名称]。
当前问题：[描述当前的问题]
期望效果：[描述你想要的最终效果]
限制条件：
- 不要修改其他功能
- 保持现有的代码风格
- 如有必要，可以添加新的state变量模板3：修复Bug
text
我遇到了一个bug，请帮我修复。
问题描述：[描述发生了什么，以及你期望发生什么]
复现步骤：
1. [步骤1]
2. [步骤2]
3. [步骤3]
错误信息：[粘贴控制台中的错误信息]
相关文件：[列出可能相关的文件]模板4：添加样式/美化
text
请帮我优化[组件名]的视觉设计。
优化方向：
- [具体要优化的方面，如：间距、颜色、字体]
设计参考：
- [参考图片或产品名称]
限制：
- 不要改变功能逻辑
- 只修改CSS/Tailwind类名
- 确保在移动端也好看模板5：代码审查/安全检查
text
请帮我审查[文件名]的代码，重点关注：
1. 是否有明显的bug或逻辑错误
2. 是否有性能问题（如不必要的重渲染）
3. 是否有安全隐患（如XSS漏洞）
4. 代码可读性如何
5. 是否有更好的实现方式
对于每个问题，请给出具体的修改建议和代码示例。动手实操：Prompt实战训练
请用以下任务训练你的Vibe Coding Prompt能力：
任务1：用不超过200字的Prompt，让AI生成一个"待办事项列表（Todo List）"应用。要求能添加、删除、标记完成。
任务2：在任务1的基础上，用不超过100字的Prompt，让AI添加"待办事项分类"功能（工作/生活/学习）。
任务3：在任务2的基础上，用不超过100字的Prompt，让AI修改配色方案为"深色模式"。
任务4：在任务3的基础上，用不超过100字的Prompt，让AI修复一个bug（如果你发现了bug）或添加一个微小的动画效果。
第4课：非程序员调试指南 —— 当AI写的代码报错时
时长: 约90分钟 | 类型: 实操为主
核心概念
你不需要成为程序员才能调试代码——你只需要学会"把问题描述清楚，让AI帮你修"。这是Vibe Coding时代最重要的元技能之一。
非程序员调试三步法
发现问题 → 收集信息 → 让AI修复
↓ ↓ ↓
"这个按钮 复制错误信息 "请帮我修复
点了没反应" 截图发给AI 这个bug"常见错误类型与应对策略
| 错误类型 | 典型表现 | 原因 | 如何告诉AI修复 |
|---|---|---|---|
| 语法错误 | 页面白屏、什么都不显示 | 代码写错了（如少了一个括号） | "页面白屏了，控制台报错是[粘贴错误信息]，请帮我修复" |
| 逻辑错误 | 点击按钮没反应或结果不对 | 代码逻辑写错了 | "我点击[按钮名]时，期望[效果]，但实际[效果]，请帮我检查和修复" |
| 样式错误 | 布局乱了、颜色不对、手机上不好看 | CSS写错了或响应式没做好 | "在手机上[描述显示问题]，请帮我修复响应式布局" |
| 依赖错误 | npm install失败、找不到模块 | 缺少依赖包或版本冲突 | "运行npm install时出现[粘贴错误]，请帮我修复" |
| API错误 | 数据加载不出来、网络请求失败 | API地址错误或跨域问题 | "调用API时返回[错误信息]，请帮我检查" |
| 状态错误 | 数据没有更新、页面没刷新 | React state管理问题 | "修改数据后页面没有更新，相关代码在[文件名]，请帮我修复" |
动手实操：用AI调试AI
调试技巧1：直接把错误信息丢给AI
这是最简单也最有效的方法。当你看到红色错误信息时：
- 复制完整的错误信息（Ctrl+C / Cmd+C）
- 粘贴到AI对话框，加上一句话：
text
我遇到了这个错误，请帮我修复：
[粘贴错误信息]
我的项目技术栈：React + Tailwind CSS + Vite调试技巧2：用截图让AI理解视觉问题
当问题是"看起来不对"（而非代码报错）时：
- 截图问题页面
- 在AI对话框中描述：
text
请看我遇到的问题（附截图描述）：
我在[页面/组件]中，[具体位置]显示不正常。
期望效果：[描述期望的样子]
实际效果：[描述实际看到的样子]
相关代码在[文件名]中。调试技巧3：让AI解释代码
如果AI给你的代码你看不懂，直接让它解释：
text
请用通俗易懂的语言解释以下代码是做什么的，假设我是一个完全不懂编程的人：
[粘贴代码]
请解释：
1. 这段代码的整体目的是什么？
2. 每一行/每个部分做了什么？
3. 如果我想修改[某个具体行为]，应该改哪里？调试技巧4：让AI写测试
让AI帮你写一些简单的测试来验证功能是否正常：
text
请为我的[功能名称]写一些简单的测试用例。
测试格式：用自然语言描述，不需要代码。
测试场景：
1. 正常情况：[描述正常使用场景]
2. 边界情况：[描述极端情况，如空输入、超长输入]
3. 错误情况：[描述可能的错误场景]
对于每个测试用例，告诉我：
- 输入什么
- 期望输出什么
- 如果结果不对，可能是什么原因调试技巧5：回退到上一个正常版本
在Vibe Coding工具中，如果你改坏了代码，可以：
- Cursor/Trae：用Git undo（在AI对话框中输入"请帮我撤销最近的修改，恢复到上一次正常运行的版本"）
- Bolt.new：点击版本历史，选择之前的版本恢复
- 通用方法：复制之前正常运行的代码，让AI"回到这个版本"
调试实战案例
案例1：页面白屏
问题：用户说"页面打开是白的，什么都看不到"
解决流程：
- 打开浏览器开发者工具（按F12）
- 查看Console标签页，复制红色错误信息
- 把错误信息发给AI："页面白屏了，控制台报错：Uncaught TypeError: Cannot read properties of undefined (reading 'map')，请帮我修复"
AI的典型修复：添加安全检查（如 data && data.map(...) 或 data?.map(...)）
案例2：按钮点击没反应
问题：用户说"点击'提交'按钮后什么都没发生"
解决流程：
- 确认问题：点击按钮确实没反应
- 告诉AI："点击'提交'按钮后没有反应，相关代码在SubmitButton.jsx中。按钮的onClick事件似乎没有触发，请帮我检查并修复"
- 如果AI一次修不好，加上更多信息："我在onClick函数里加了console.log，发现函数根本没有被调用"
案例3：手机上看很丑
问题：电脑上看起来很好，手机上布局乱了
解决流程：
- 截图手机上的问题
- 告诉AI："在手机上（宽度约375px），[描述具体问题，如：按钮超出了屏幕宽度、文字被截断、卡片间距太大]。请帮我修复响应式布局。使用的是Tailwind CSS。"
第5课：免费部署到公网 —— 让全世界看到你的产品
时长: 约90分钟 | 类型: 实操为主
核心概念
写完代码只是第一步，让产品上线、让用户可以访问才是真正的终点。2026年，有大量免费的工具可以让你零成本把产品部署到公网。
七大免费部署平台对比
| 平台 | 免费额度 | 最适合 | 自定义域名 | HTTPS | 部署方式 | 限制 |
|---|---|---|---|---|---|---|
| Vercel | 无限静态+100GB带宽/月 | React/Next.js项目 | ✅ | ✅ 自动 | Git推送自动部署 | 商业用途需付费 |
| Netlify | 100GB带宽/月 | 静态网站 | ✅ | ✅ 自动 | Git推送/拖拽上传 | 带宽限制 |
| GitHub Pages | 无限流量 | 纯静态网站 | ✅ | ✅ | Git推送 | 仅静态文件 |
| Cloudflare Pages | 无限带宽 | 所有类型 | ✅ | ✅ 自动 | Git推送 | 单文件25MB限制 |
| Railway | $5信用额度/月 | 全栈应用（需后端） | ✅ | ✅ | Git推送 | 额度用完即停 |
| Render | 静态网站免费 | 静态+简单后端 | ✅ | ✅ | Git推送 | 免费版15分钟无访问会休眠 |
| Bolt.new内置 | 随免费额度 | Bolt.new创建的项目 | ❌ | ✅ | 一键部署 | 仅限Bolt.new项目 |
推荐组合
对于本模块的MVP产品，推荐使用 Vercel 或 Netlify。它们都是：
- 完全免费（个人项目）
- 自动HTTPS
- Git推送自动部署
- 支持自定义域名
- 部署速度极快（通常30秒内完成）
动手实操1：用Vercel部署（推荐）
前提条件
- 你的代码已推送到GitHub（如果没有，先去 github.com 创建仓库并推送代码）
- 注册了Vercel账号（用GitHub账号直接登录 vercel.com）
部署步骤
第1步：连接GitHub仓库
- 打开 vercel.com，用GitHub账号登录
- 点击「New Project」
- 选择你的GitHub仓库
- 点击「Import」
第2步：配置部署
- Vercel会自动检测你的项目框架（React/Vue/Next.js等）
- 通常不需要修改任何配置，直接点击「Deploy」
- 等待部署完成（通常30秒到2分钟）
第3步：访问你的产品
- 部署完成后，Vercel会给你一个URL（格式：
https://你的项目名.vercel.app） - 点击URL即可访问你的产品
- 把这个URL分享给朋友，让他们测试
第4步：每次更新代码自动部署
- 在你的项目中修改代码
- Git提交并推送：
git add . && git commit -m "修复bug" && git push - Vercel会自动检测到新的推送，自动重新部署
- 你不需要做任何额外操作
如果不想用Git（拖拽部署）
Netlify拖拽部署：
- 打开 app.netlify.com
- 把你的项目文件夹（打包后的dist或build文件夹）直接拖拽到网页上
- 等待几秒钟，Netlify会自动部署并给你一个URL
动手实操2：配置自定义域名
当你有了自己的域名后，可以把它绑定到你的产品上：
Vercel配置域名：
- 在Vercel项目页面，点击「Settings」→「Domains」
- 输入你的域名（如：
myapp.com） - Vercel会告诉你要添加什么DNS记录
- 去你的域名服务商（如阿里云、腾讯云）添加对应的DNS记录
- 等待DNS生效（通常几分钟到几小时）
免费域名方案：
- 如果你还没有域名，可以用以下方式获得免费域名：
- Vercel/Neltify提供的免费子域名（
xxx.vercel.app/xxx.netlify.app） - GitHub Student Developer Pack（学生可免费获得
.me域名） - Freenom（免费顶级域名，但不太稳定，不推荐正式项目）
- Vercel/Neltify提供的免费子域名（
动手实操3：部署前检查清单
在部署之前，用这个清单确保一切就绪：
| 检查项 | 说明 | 通过？ |
|---|---|---|
| 所有链接正确 | 相对路径（不是本地路径如 C:\Users\...） | |
| 没有硬编码的localhost | 所有API地址没有写死 http://localhost:3000 | |
| 在本地build成功 | 运行 npm run build 没有错误 | |
| 页面标题和描述 | <title> 和 meta description 已设置 | |
| 移动端测试 | 在手机上打开过，确认显示正常 | |
| 所有功能可用 | 核心功能全部测试通过 | |
| 没有console.log | 删除了调试用的console.log | |
| 图标已设置 | favicon已替换为你的图标 |
动手实操4：完整部署工作流（从代码到公网）
第1步：确保代码在GitHub上（5分钟）
├── 如果还没有GitHub仓库，创建一个
├── git init → git add . → git commit → git push
└── 确认：在GitHub上能看到你的代码
第2步：连接Vercel（3分钟）
├── 用GitHub账号登录vercel.com
├── Import你的GitHub仓库
└── 确认：Vercel显示"Import Successful"
第3步：部署（2分钟）
├── 点击Deploy
├── 等待构建完成
└── 确认：看到绿色的"Ready"标记
第4步：测试（5分钟）
├── 打开Vercel给的URL
├── 在手机上也打开测试
├── 测试所有核心功能
└── 确认：一切正常
第5步：分享（1分钟）
├── 复制URL
├── 发给3-5个朋友测试
└── 收集反馈，准备下一轮迭代
总耗时：约15-20分钟课后作业
基础版（必做）
作业1：MVP产品上线
完成以下内容并提交：
- 你的产品需求文档（使用第2课的模板）
- 你的产品公网URL（部署在Vercel/Netlify等平台上）
- 3个用户对你产品的反馈（截图或文字记录）
作业2：Vibe Coding实战日志
记录你在Vibe Coding过程中的关键决策和遇到的坑：
- 你用了什么工具？为什么选它？
- AI生成的代码中，你遇到了几次bug？分别怎么解决的？
- 你用了哪些Prompt技巧？哪个最有效？
- 如果重新来一次，你会怎么做不一样的？
进阶版（选做）
作业3：产品迭代V2
基于用户反馈，对你的产品进行一轮迭代：
- 根据用户反馈，修复至少3个bug或添加至少2个改进
- 重新部署上线
- 提交迭代前后的对比（附截图）
提交方式
- 作业模板链接：将在课程正式开始前通过微信群/课程群公布
- 收集表链接：将在课程正式开始前通过微信群/课程群公布
- 截止时间：第6周周日 23:59
模块6B检查清单
在进入模块7B之前，请确认你完成了以下所有事项：
- [ ] 安装并配置了至少2个Vibe Coding工具（Trae + Bolt.new推荐）
- [ ] 用自然语言写清了产品需求文档
- [ ] 用AI生成了产品原型
- [ ] 实现了至少1个核心功能
- [ ] 掌握了"分步开发"策略（不是一次性全做完）
- [ ] 用AI调试了至少3个bug
- [ ] 理解了常见的错误类型和调试方法
- [ ] 将产品成功部署到公网（获得可分享的URL）
- [ ] 在手机上测试过产品
- [ ] 完成了基础版作业（MVP上线 + 实战日志）
- [ ] （选做）完成了产品迭代V2
FAQ
Q1: 我真的完全不会编程，能学会Vibe Coding吗？
能。Vibe Coding就是为不会编程的人设计的。本模块假设你零编程基础。你只需要会：
- 用自然语言描述你想要什么（你已经在模块1-4中学会了）
- 复制粘贴错误信息给AI
- 有耐心（AI不会一次就完美，需要迭代）
Q2: AI生成的代码质量可靠吗？
2026年的AI代码生成能力已经非常强。对于MVP级别的产品（单页应用、简单工具），AI生成的代码质量通常足够好。但你需要测试——不要假设AI写的代码一定是正确的。
Q3: 我应该选Trae还是Cursor？
如果你预算有限，选Trae（完全免费，中文友好）。如果你预算允许（$20/月），选Cursor（功能更强，Agent模式很强大）。两者都是优秀的工具，入门阶段Trae完全够用。
Q4: 我的产品需要登录功能吗？
MVP阶段不需要。登录功能会增加开发复杂度（需要后端、数据库、安全处理），而且会阻碍用户试用你的产品。先让用户无门槛使用，等验证了价值再考虑加登录。
Q5: 部署后修改代码，需要重新部署吗？
如果你用的是Vercel + GitHub，每次推送代码会自动重新部署，你不需要手动操作。如果你用的是Netlify拖拽部署，需要重新拖拽一次。
Q6: 我的产品会有用户吗？
MVP阶段的目标不是"有很多用户"，而是"验证你的想法是否有人需要"。先找3-5个朋友试用，看他们的反应。如果他们都觉得有用，再考虑如何获客（模块7B会教你）。
Q7: 我可以用AI做商业产品吗？
可以。但需要注意：
- 检查你使用的AI工具的服务条款（大部分允许商业用途）
- 如果你的产品涉及用户数据，需要添加隐私政策
- 如果你的产品有收入，可能需要考虑付费方案（如Vercel Pro/Netlify Pro）
延伸阅读
- Datawhale Easy-Vibe —— GitHub 10.3k星，国内最全面的AI编程入门教程，从零到上线
- Cursor官方文档 —— Cursor的完整使用指南
- Bolt.new官方文档 —— Bolt.new的使用教程
- Vercel部署文档 —— Vercel部署指南
- Andrej Karpathy: Vibe Coding Explained —— Vibe Coding概念的提出者
- GitHub 2025 Octoverse Report —— 全球开发者生态数据，了解AI代码生成趋势
- Design Whispers —— UI设计灵感，帮你在描述产品时更准确
- Tailwind CSS Cheatsheet —— 当你需要微调AI生成的样式时，查这个速查表
下一模块预告：模块7B：AI营销与获客 —— 让你的产品被看见
产品做好了，下一步是让用户找到你。你将学会用AI做内容营销、社交媒体运营和用户增长。