高中生 Vibe Coding 入门课程培训方案

培训目标

🧠

快速建立基础认知

快速建立对AI、Vibe Coding、ChatGPT的基础认知

🔍

学会找资源、建武器库

学会用Google、GitHub、内容平台找资源/找灵感，并养成收藏整理习惯

🖥️

第一场即出成果

第一场结束前，每人至少做出1~2个可运行的简单网页应用

🚀

深化实战独立完成项目

第二场深化实战，独立完成一个更完整的项目

课前准备（培训前1-2天完成）

工具与账号准备：

🪜

科学上网工具

用途：科学上网（选择美国节点）
https://dash.cocoduck.live/user

提前注册测试

💬

ChatGPT及账号

用途：对话式AI体验、辅助编程
1. 提前测试网络访问是否稳定，ChatGPT及账号能正常访问
2. Plus会员充值（无质保）：https://gpt.fnon.cn/

提前1-2天测试

🔎

Google、GitHub、X 及账号

用途：搜索资源、查看开源项目/案例、AI工具登录账号

提前注册

🤖

Codex

用途：核心开发工具，理解需求后自动生成/编写应用代码
1. 提前注册账号并登录，确认可正常打开
2. 简单了解"说需求、它写代码"的基本使用方式

主力开发工具

🗂️

Qoder IDE

用途：代码编辑环境，作为Codex生成代码的"工作台"，方便查看/编辑/调试
1. 提前注册账号并登录，确认可正常打开
2. 简单熟悉界面（代码显示区、AI对话区在哪）

配合Codex使用

▲

Vercel账号

用途：网页应用一键部署上线
提前用GitHub账号注册登录，确认可正常使用（避免现场绑定占用时间）

提前注册

💻

电脑

用途：现场操作
每人一台笔记本，提前确认可科学上网（访问Google）、已安装相关软件（ChatGPT）

每人一台

🧭 工具速查卡——减少现场"这个用哪个工具"的困惑：

环节	用的工具
构思、写文案	ChatGPT
生成/编写应用代码	Codex
查看/编辑/调试代码	Qoder IDE
保存代码版本	GitHub
上线发布	Vercel

第一场培训：基础认知 + 武器库 + 快速上手做网页应用

AI + Vibe Coding + ChatGPT 快速认知

认知启蒙 · 建立基础概念

20分钟 ⌄

AI是什么

一句话讲清：AI是"读过海量文字/图片后，能模仿人类思考和创作的程序"
AI能做什么、不能做什么

什么是ChatGPT

简单展示界面，讲清楚"怎么问问题"最基本的原则

什么是Vibe Coding

一句话讲清："用聊天的方式，让AI帮你写代码、做网页应用，不需要自己懂编程"
现场快速演示：输入一句需求，当场生成网页应用，建立信心
今天会用Codex来"开发"应用（你说需求，它生成代码），用Qoder这个编辑器来"盛放"和调整这些代码——类似"大脑负责思考，笔记本负责记录"的关系

1.5

怎么跟AI"说话"——打字、拍照、画图、说话都可以

大白话讲解 · 降低表达门槛

10分钟 ⌄

核心心态：把ChatGPT当成一个很聪明但需要你说清楚的朋友，脑子里想什么，就直接说给它听，没有"标准答案"的说法方式

💬 打字告诉它

最简单的方式，不需要专业术语，就像发微信一样。举例对比：不用说"生成响应式个人主页"，直接说"我想做一个介绍我自己的网页，有照片、爱好，颜色用蓝色"就行

📸 上传图片给它看

有参考图（喜欢的网站截图、海报、照片、配色图）直接拖进对话框或点"＋"上传，告诉它"我想要类似这种风格"

✏️ 手绘草图给它看（最适合零基础）

拿张纸画几个方框、标注"这里放照片""这里放标题"，拍照发给它，AI也能看懂并做出网页——不需要会设计软件

🎤 直接说话，不用打字

点输入框旁的麦克风图标，按住说话，想法比较多、打字太慢时特别好用

🎬 发视频给它看（进阶了解即可）

看到比较复杂的效果（比如很酷的动画），可以录屏/录视频发给它，问"这个效果怎么实现的"

现场演示清单：①准备1张网页设计截图演示"上传图片"；②准备纸笔现场手绘草图演示；③现场演示1次语音输入。演示后让学生用至少2种方式向ChatGPT表达同一个简单想法（5分钟练习），为模块4实战做铺垫

完善"武器库"——学会找资源、找灵感、做整理

搜索能力 · 收藏习惯

15分钟 ⌄

1）用好Google、GitHub找参考

Google搜索技巧：关键词组合、找素材（图片/配色/文案参考）
GitHub基础：搜索优秀开源项目/模板（如搜"个人主页模板"），学会"借鉴创作思路"

2）善用内容平台找灵感 + 建立收藏习惯

B站/小红书/YouTube搜索技巧（如"AI做的小项目"、"vibe coding教程"）
现场演示搜1-2个真实案例，简单点评"这个思路可以借鉴的地方"
用浏览器收藏夹或Obsidian，现场练习收藏1-2个素材/案例

💡 这个模块的目标：让学生建立"遇到问题先去找参考，而不是从零死磕"的习惯，为后面做网页应用做铺垫

ChatGPT快速练习

动手练习 · 说清楚需求

15分钟 ⌄

学生用ChatGPT完成任务：写一段"自我介绍文字"，为下一步做网页应用准备内容
顺带练习"说清楚需求"的技巧

Vibe Coding实战——做出第一个简单网页应用

动手实操 · 独立完成第一件作品

50分钟 ⌄

目标：每人独立完成一个简单的个人介绍网页应用

1. 构思+找参考

应用模块2的技巧，快速搜1个类似的网页应用案例做参考

2. 第一次生成

把想法+ChatGPT写好的自我介绍文字，描述给Vibe Coding工具，生成第一版

3. 观察+提问题

看看效果，哪里不满意？

4. 调试式修改

反复用自然语言告诉AI要改什么

5. 成果展示与互评

两人互相看看对方的网页应用

Codex开发应用（在Qoder中编写/整理代码）、GitHub保存代码、Vercel一键部署

从生成到上线

10分钟 ⌄

Codex和Qoder的关系：Codex是主力开发工具，负责理解需求、生成应用代码；Qoder是IDE编辑器，作为代码的"工作台"，方便查看、编辑、调试Codex生成的代码

Codex 开发应用

用Codex辅助生成/完善代码内容

Qoder 中查看/整理代码

在Qoder中打开生成的代码，查看结构、做简单调整

GitHub 保存代码

将项目代码保存到GitHub，形成版本记录

Vercel 一键部署

用Vercel将网页应用一键部署上线，生成可访问链接

⏱ 建议课前测试一次完整流程，确认10分钟是否现实；如不够可压缩模块6或模块3各1-2分钟补给本模块

快速总结

回顾 · 预告第二场

10分钟 ⌄

回顾今天做了什么：认识了AI/ChatGPT/Vibe Coding，学会了找资源，并做出了一个网页应用
预告第二场内容：用今天学的技能，做一个更完整、更有实用性的项目

第二场培训：深化实战——独立完成一个完整项目

复盘 + 进阶场景介绍

回顾第一场技能 · 选定进阶方向

15分钟 ⌄

快速回顾第一场学到的技能（找资源、Vibe Coding基本操作）
介绍进阶场景选项，学生二选一

场景	说明	难度
学习工具类小程序	单词卡片、番茄钟、错题本	⭐⭐
小游戏	猜数字、答题游戏	⭐⭐
兴趣社团/活动小工具	报名表、投票系统	⭐⭐
校园生活小应用	课程表生成器、值日安排表	⭐⭐
数据可视化小项目	班级成绩统计图表	⭐⭐⭐

找参考 + 构思

应用武器库技能 · 明确项目功能

15分钟 ⌄

应用第一场学的Google/GitHub/内容平台搜索技巧，找1-2个参考案例
简单记录到Obsidian/收藏夹（巩固第一场的收藏习惯）
明确这次项目要实现的核心功能

Vibe Coding实战——构建+调试

核心实操环节

70分钟 ⌄

1. 第一次生成（10分钟）

描述需求，生成初版

2. 调试式修改（45分钟）

逐步完善功能，遇到问题先尝试自己描述给AI解决，卡壳时老师介入引导

3. 中途休息（10分钟）

4. 最后打磨（5分钟）

调整细节，让成品更完整

成果展示与总结

对比成长 · 展望后续

20分钟 ⌄

展示两场培训的成果对比（第一个简单网页应用 → 第二个更完整的项目）
互相点评，说说"做的过程中遇到什么问题，怎么解决的"
布置课后可继续尝试的方向
推荐后续自学资源

课后延伸

🧰

AI工具+资源清单

提供"AI工具+资源清单"（ChatGPT、Vibe Coding工具、Google/GitHub技巧、值得关注的博主）

📁

持续做项目形成作品集

建议学生持续做1-2个小项目，形成作品集

🔁

找参考+收藏+复盘习惯

鼓励养成"找参考+收藏+复盘"的习惯

📈

进阶学习方向

如有兴趣可进阶学习知识库、智能体搭建

高中生 Vibe Coding
入门课程培训方案

培训目标

课前准备（培训前1-2天完成）

第一场培训：基础认知 + 武器库 + 快速上手做网页应用

第二场培训：深化实战——独立完成一个完整项目

课后延伸