Appearance
Vibe Coding 实战：从想法到上线
📝 课程笔记
本课核心知识点整理：
这节课你能学到什么
- 从零走完 Vibe Coding 五步循环的每一步
- 学会 GitHub 的基础操作（创建仓库、推送代码）
- 学会用 Vercel 免费部署网站
- 课堂结束时，拥有一个可以公开访问的 URL
💡 核心问题
大学期间如何开始第一个 AI 项目？
通过 Vibe Coding 五步循环（Plan → Build → Iterate → Save → Go Live），大学生可以在几天内完成从需求定义到产品上线的全过程。校园VC 数字创业教程第三章提供了完整的实战指南和部署教程，帮助零基础学生用 AI 工具（Claude Code、Cursor、Vercel）独立完成第一个项目。
开始前的准备
前置检查
上一课你应该已经完成了：
- 选定了一个项目类型（着陆页 / 作品集 / 小工具 / 小测验）
- 写了一份简短的 Plan（描述 + 功能列表 + 参考风格）
- 准备好了工具（豆包/扣子/Claude Code 任选其一）
如果还没准备好，先回到 上一课 完成准备步骤。
这节课是纯实操。我们会一步一步走完五步循环，目标只有一个：课堂结束时，你有一个可以访问的网站地址。
跟我做：五步实战
第一步：Plan（完善你的需求描述）
为什么 上一课你写了初版 Plan，现在把它打磨得更具体。描述越清晰，AI 的输出越接近你要的效果。
你需要写清楚这些：
项目名称：[你的项目名]
一句话描述：[这是什么]
核心功能：
1. [功能 1]
2. [功能 2]
3. [功能 3]
视觉风格：
- 配色：[比如"深蓝 + 白色"或"参考 XXX 网站"]
- 布局：[比如"单页滚动"或"左右分栏"]
- 氛围：[比如"简洁专业"或"活泼有趣"]好的 Plan 长这样
"做一个个人创业作品集网站。单页滚动布局。顶部是我的名字和一句话介绍，中间用卡片展示 3 个项目（每个卡片有标题、描述、截图），底部是联系方式。配色用深蓝色系，风格简洁现代。"
对比差的 Plan："做一个好看的网站。"
第二步：Build（让 AI 帮你生成代码）
为什么 有了 Plan，下一步就是让 AI 把它变成代码。
如果你用 Claude Code：
打开终端，输入你的 Plan。比如：
请帮我创建一个个人作品集网站：
- 单页滚动布局
- 顶部：名字"张三"，介绍"数创班学员 | AI 产品爱好者"
- 中间：3 个项目卡片，每个有标题、描述、图片占位符
- 底部：微信号和邮箱
- 配色：深蓝 (#1a237e) + 白色
- 用 HTML + CSS + JS，不用任何框架AI 会生成完整的代码文件。
如果你用豆包/扣子：
在对话框里输入同样的描述，豆包会生成页面内容，扣子可以搭建更复杂的交互逻辑。
你应该看到：一个或多个代码文件（通常是 index.html、style.css），或者在平台上看到初步的预览效果。
第三步：Iterate（截图反馈，来回修改）
为什么 第一版生成的结果几乎不可能完美。迭代是 Vibe Coding 的核心环节，占整个过程最多的时间。
操作方法：
- 在浏览器中打开生成的页面（双击
index.html或在平台上预览） - 看看哪里不满意
- 用具体的语言告诉 AI 怎么改
好的反馈 vs 差的反馈：
| 差的反馈 | 好的反馈 |
|---|---|
| "不好看，改一下" | "卡片之间的间距太小了，改成 24px" |
| "颜色不对" | "标题颜色从黑色改成深蓝色 #1a237e" |
| "加点动画" | "鼠标悬停在卡片上时，卡片轻微上浮并加阴影" |
截图是最好的反馈方式
如果你用 Claude Code，可以直接截图发给它。"看这个截图，左边的按钮位置太低了，往上移 20px。"比纯文字描述高效得多。
常见的迭代轮次：
| 轮次 | 通常在改什么 |
|---|---|
| 第 1 轮 | 基本布局和结构 |
| 第 2 轮 | 配色、字体、间距 |
| 第 3 轮 | 交互效果（按钮、动画） |
| 第 4 轮 | 细节打磨（响应式、小屏适配） |
| 第 5 轮+ | 内容替换（放入真实文案和图片） |
迭代 3-5 轮就能出不错的效果。别追求完美，记住上节课说的：完成 > 完美。
第四步：Save（推送到 GitHub）
为什么 代码在你电脑上只有一份，推到 GitHub 就有了云端备份。而且下一步部署需要用 GitHub。
操作步骤：
- 注册一个 GitHub 账号（如果还没有的话，去 github.com）
- 创建一个新仓库（Repository），名字和你的项目对应
- 用命令行把代码推送上去：
bash
# 初始化 Git（只需要做一次）
git init
# 添加所有文件
git add .
# 提交
git commit -m "first version of my portfolio site"
# 添加远程仓库（把 URL 换成你自己的）
git remote add origin https://github.com/你的用户名/你的仓库名.git
# 推送
git push -u origin main你应该看到：打开你的 GitHub 仓库页面，能看到刚才的代码文件。
如果你不熟悉命令行
Claude Code 可以帮你完成上面所有步骤。直接告诉它："帮我把当前项目推送到 GitHub，仓库名叫 my-portfolio。" 它会一步步执行。
第五步：Go Live（部署到 Vercel）
为什么 GitHub 上的代码别人看不到效果。部署到 Vercel 后，你会得到一个公开的 URL，任何人都能访问。
操作步骤：
- 打开 vercel.com，用 GitHub 账号登录
- 点击 "Import Project"
- 选择你刚才推送的 GitHub 仓库
- 点击 "Deploy"
- 等待 30 秒左右，部署完成
你应该看到：Vercel 给你一个 URL，比如 https://my-portfolio-abc123.vercel.app。打开这个链接，你的网站已经上线了。
免费额度
Vercel 对个人项目免费，不用花一分钱。
Don 哥的 Claude Code 实践案例
参考资料中，Don 哥用 Claude Code 搭建了一套完整的内容创作系统：
| 功能 | 做了什么 |
|---|---|
| 选题记录 | 自动记录和归类选题灵感 |
| 素材检索 | 从素材库中搜索相关内容 |
| 标题生成 | AI 批量生成标题候选 |
| 开头优化 | 自动优化文章开头 |
| 数据复盘 | 跟踪内容表现数据 |
这不是一个简单网页，而是一个完整的工作流系统。但它的构建方式和你今天做的着陆页是一样的：用自然语言描述需求，AI 帮你实现。
区别只在于复杂度和迭代轮次。你今天迭代 5 轮就能上线一个网页，Don 哥可能迭代了 50 轮才打磨出完整系统。路径是一样的。
检查点
完成今天的实操后，检查以下几项：
- [ ] 我的项目有一个可访问的 URL
- [ ] URL 在手机上也能正常显示
- [ ] 页面上的内容是我自己的（不是占位符文字）
- [ ] 至少经过了 3 轮迭代修改
如果以上都打勾了，恭喜你，你已经完成了从想法到上线的全过程。
踩坑提醒
| 常见问题 | 解决方法 |
|---|---|
| AI 生成的代码报错 | 把报错信息复制给 AI，让它修 |
| 部署后页面空白 | 检查文件名是不是 index.html（注意大小写） |
| 手机上显示乱了 | 告诉 AI "请添加响应式布局，适配手机屏幕" |
| GitHub 推送失败 | 检查是否已登录、仓库 URL 是否正确 |
| 改了代码但 Vercel 没更新 | 需要重新 push 到 GitHub，Vercel 会自动重新部署 |
本课小结
| 要点 | 核心内容 |
|---|---|
| Plan | 写清楚"是什么 + 有什么 + 长什么样" |
| Build | 把 Plan 发给 AI，让它生成代码 |
| Iterate | 截图反馈，具体描述修改点，3-5 轮出效果 |
| Save | 推送到 GitHub，备份 + 版本管理 |
| Go Live | Vercel 一键部署，获得公开 URL |
"想都是问题，做才是答案。" 你今天做出来的东西可能很简单，但它是你的第一个数字产品 MVP。
下一课预告
下一课是一个轻松的环节：趣味小调查：乔布斯 vs 中本聪。
你会参与一场有趣的投票和讨论：
- 如果可以选一位师傅，你选乔布斯还是中本聪？
- "中心化"和"去中心化"，哪种更好？
附录：参考资料
点击展开查看参考资料来源
更新时间：2026-02-02
| 内容类型 | 来源资料 | 章节 |
|---|---|---|
| 课件主体 | 数创班内容汇总.pdf | 模块 3.5 用"嘴"开发智能体（实战延伸） |
| 核心补充 | VIBE_CODING_GUIDE.md（R1） | GitHub 操作、Vercel 部署流程 |
| 实践案例 | Don 哥的 AI 辅助内容创作经验（R5） | Claude Code 内容创作系统 |
关键概念来源：
- 适合构建的项目类型：knowledge-points.md K37
- Don 哥实践案例：teaching-materials.md C17
- "想都是问题做才是答案"：teaching-materials.md Q03（课件原有金句变体）