TEACHER FIELD GUIDE
Vibe Coding
三日训练营
DAY 0 · 上课前必须完成
零基础教师起飞检查
先在一台干净的学生 Mac 上完整走通。红色安全项不可跳过。
BUILD · SAVE · SHARE
小恐龙游戏 × Git
一款能跳、能得分、能重新开始的小游戏，并把代码推到 Gitee。
→ 体验提示词 → 运行 → 观察 → 修改
→ 理解 Git 像游戏存档
→ 安全完成第一次代码提交
□ 确认 Git 与 OpenCode 可用
□ 准备 Gitee 注册备用方案
□ 缓存游戏模板与原创素材
Day 1 · 小恐龙游戏 × Git
一款能跳、能得分、能重新开始的小游戏，并把代码推到 Gitee。
□ 认识 Mac、文件夹与终端 20 分钟
目标：让零基础学生知道命令应该输入在哪里。
- 按 Command + 空格，输入 Terminal，打开“终端”。
- 指出最后一行闪烁光标的位置，说明命令只输入在这里。
- 输入 pwd 并按回车，再输入 ls 并按回车。
- 打开 Finder，对照终端显示的文件夹名称。
pwd
ls
完成标准：全班能打开 Terminal，并成功运行 pwd 和 ls。
□ 检查并安装 Git 20 分钟
目标：让每台 Mac 都能使用 Git。
- 先运行版本检查，不要重复安装。
- 若出现 git version 2...，直接记录通过。
- 若 macOS 弹出开发者工具安装提示，点击“安装”并等待。
- 没有弹窗时运行 xcode-select --install，再次检查版本。
git --version
xcode-select --install
完成标准：每台可操作电脑运行 git --version 有版本输出，或已切换已记录的备用方案。
□ 安装 Node.js 与 npm 25 分钟
目标：准备网页工具与 Wrangler 所需运行环境。
- 运行 node --version 和 npm --version。
- 未安装时打开 nodejs.org，只选择标有 LTS 的 macOS 安装包。
- 运行 uname -m：arm64 选择 Apple Silicon，x86_64 选择 Intel。
- 双击 .pkg，依次点击继续和安装。
- 关闭并重新打开 Terminal，再次运行两个版本命令。
node --version npm --version
uname -m
完成标准：node --version 与 npm --version 都有版本输出。
□ 安装并连接 OpenCode 25 分钟
目标：让学生可以在项目文件夹中与 AI 协作。
- 先运行 opencode --version。
- 未安装时使用课前核验的官方稳定版安装命令。
- 关闭并重新打开 Terminal，再次检查版本。
- 在教师指定的练习文件夹运行 opencode。
- 按教师课前锁定的供应商完成授权；API Key 不投屏、不保存到本网页。
opencode --version
curl -fsSL https://opencode.ai/install | bash
opencode
完成标准：OpenCode 能启动并完成一次简单问答，或已采用教师演示备用方案。
□ 拆解小恐龙游戏 20 分钟
目标：把一个游戏拆成 AI 能逐步完成的小任务。
- 演示成品，只观察角色、地面、障碍、分数和重开。
- 让孩子说出：什么时候跳？什么时候失败？
- 强调只借鉴横版跳跃机制，名称、画面和声音必须原创。
完成标准：孩子能用一句话描述游戏规则。
□ 和 OpenCode 一起做游戏 70 分钟
目标：完成最小可玩的版本，再逐次改善。
- 让 OpenCode 先创建一个无需复杂安装的网页小游戏。
- 运行后一次只提一个修改：跳跃、碰撞、计分、重开。
- 每次修改都亲手试玩，描述看到的问题。
- 提前完成：加入昼夜模式或逐渐加速。
请创建一个原创的横版小恐龙跳跃网页游戏。先实现最小版本：空格键或点击跳跃、障碍移动、碰撞失败、分数和重新开始。请告诉我如何运行。
完成标准：可跳跃、障碍移动、碰撞失败、可重开、分数增长。
□ Git：给代码做存档 20 分钟
目标：理解工作区、暂存、commit 和远程仓库。
- 工作区＝正在玩的关卡。
- git add＝选择这次要存什么。
- commit＝创建带说明的存档点。
- push＝把存档备份到远程仓库。
完成标准：学生能说出 commit 和 push 的区别。
□ 注册 Gitee 与连接 SSH 35 分钟
目标：安全地让电脑获得推送权限。
- 先由教师/监护人确认年龄与账号条款，不符合时使用教师演示账号。
- 在 Gitee 创建空仓库，不勾选自动生成文件。
- 检查现有密钥；存在时优先复用公钥，不覆盖私钥。
- 复制以 .pub 结尾的公钥到 Gitee 的 SSH 公钥设置。
- 测试连接；首次询问主机指纹时核对域名后确认。
ls -la ~/.ssh
ssh-keygen -t ed25519 -C "Gitee 登录邮箱"
cat ~/.ssh/id_ed25519.pub
ssh -T git@gitee.com
完成标准：Gitee 能识别账号，终端不再请求仓库密码。
□ 第一次 commit 与 push 25 分钟
目标：把可玩的第一版安全推到远程仓库。
- 先配置课堂昵称和获准使用的邮箱。
- 在游戏目录初始化仓库并查看状态。
- 添加文件，创建描述清楚的 commit。
- 关联 Gitee SSH 地址并推送 main 分支。
git config --global user.name "课堂昵称" git config --global user.email "获准使用的邮箱"
git init git add . git commit -m "完成小恐龙游戏第一版"
git branch -M main git remote add origin git@gitee.com:用户名/仓库名.git git push -u origin main
完成标准：Gitee 页面可看到代码和至少一次提交。
Day 2 · 个人主页 × Cloudflare
一个保护隐私、适配手机，并拥有公开访问链接的个人作品页。
□ 规划安全的个人页 25 分钟
目标：选出既有个性又不暴露身份的内容。
- 只使用昵称、兴趣和作品。
- 禁止真实姓名、学校、位置、日程、电话、人脸照片。
- 画出首页：招呼语、关于我、兴趣、作品四块。
- 发布前由教师做一次隐私检查。
完成标准：内容清单中没有可识别个人身份的信息。
□ 让 OpenCode 制作个人页 70 分钟
目标：做出清晰、有个性、能适配不同屏幕的网页。
- 先生成结构完整的第一版。
- 替换为学生自己的安全内容。
- 一次调整一个视觉目标：颜色、字体、卡片或间距。
- 分别用窄窗口和宽窗口检查。
请帮我制作一个响应式个人作品页，包含招呼语、关于我、兴趣和作品四个部分。使用昵称，不放真实联系方式。风格要有活力，并适配手机和电脑。
完成标准：375px、768px、1280px 宽度没有横向滚动。
□ 注册并登录 Cloudflare 20 分钟
目标：理解网页发布需要平台身份授权。
- 由教师/监护人先确认账号条件。
- 注册并完成邮箱验证；不可注册时使用教师演示。
- 在项目目录安装 Wrangler。
- 运行登录命令，在浏览器确认授权。
npm install --save-dev wrangler
npx wrangler login
完成标准：浏览器授权完成，终端显示登录成功。
□ 发布到 Cloudflare Pages 35 分钟
目标：获得公开链接，并理解再次部署。
- 确认发布目录内直接包含 index.html。
- 首次创建 Pages 项目，记下项目名。
- 部署正确目录并打开公开 URL。
- 修改一句文字后再次部署，观察线上更新。
- 公开前再次完成教师隐私检查。
npx wrangler pages project create
npx wrangler pages deploy <包含 index.html 的目录>
完成标准：公开 URL 可打开，页面内容正确，修改后可重新部署。
□ 展示、撤下与收尾 15 分钟
目标：会展示，也知道如何停止公开。
- 同伴只评价作品的一个亮点和一个建议。
- 在 Cloudflare 控制台找到 Pages 项目管理位置。
- 讲解暂停/删除项目与缓存延迟。
- 把公开 URL 记录在项目 README。
完成标准：学生能指出上线入口和撤下入口。
Day 3 · Skills × Slides × 视频
一份 5–8 页演示文稿和一段 20–45 秒的 MP4 短视频。
□ 认识 Skills 20 分钟
目标：理解技能说明会改变 AI 完成任务的方式。
- 比较没有技能与有技能时的任务结果。
- 说明技能来源、版本和权限都需要核对。
- 打开 OpenCode 的技能列表，观察已安装技能。
完成标准：学生能解释模型与技能的区别。
□ 安装并验证两个 Skills 35 分钟
目标：只使用教师课前验证过的来源和命令。
- 使用下方配置中锁定的权威来源。
- 逐个安装，不同时排查两个问题。
- 运行技能列表或最小调用验证。
- 仅下载文件不算安装成功。
完成标准：Open Slides 与 HyperFrames 都能被 OpenCode 识别和调用。
□ 用 Open Slides 讲一个故事 55 分钟
目标：把主题整理成短小、可讲述的视觉结构。
- 选一个小主题，先列 5 个要点。
- 生成 5–8 页：标题、问题、过程、成果、总结。
- 统一字体、颜色和图形语言。
- 用已验证命令导出到 exports/slides。
把我的主题整理成 6 页演示文稿：标题、为什么、核心知识、制作过程、最终成果、总结。每页只表达一个重点。
完成标准：5–8 页，可正常打开，保存到 exports/slides。
□ 用 HyperFrames 制作短视频 55 分钟
目标：用节奏、字幕和转场表达同一主题。
- 先写 20–45 秒的场景清单。
- 至少制作标题、两个内容场景和结尾。
- 调整字幕停留时间，不堆叠过多动效。
- 用已验证命令导出 MP4 到 exports/video。
把这个主题制作成 30 秒短视频：2 秒标题、三个简洁内容场景、3 秒结尾。字幕清楚，转场克制，画面适合横屏播放。
完成标准：MP4 为 20–45 秒，可完整播放，位于 exports/video。
□ 双作品展示与复盘 15 分钟
目标：比较 Slide 与视频的表达差异。
- 每人用 30 秒介绍主题。
- 先展示一页最满意的 Slide。
- 再播放视频，观察节奏是否清楚。
- 说出下次最想改进的一件事。
完成标准：两种成果均可打开，目录整洁，不含隐私信息。