语言驱动创造 · 智能融合教学
Vibe Coding Workshop 101
高中英语科组 · 2026年8月
探索AI赋能教学的有效路径
从"是什么"到"怎么做" —— 重新认识 Vibe Coding
近期各类专家讲座与培训已介绍了大量AI工具
工具认知已有基础，但缺乏系统化的使用方法和操作框架
不仅要知道"有什么工具"，更要掌握"如何有效使用这些工具"
本次目标：建立系统化的认知框架与可复用的操作路径
Vibe Coding —— 核心定义与理解
提出背景
前OpenAI联合创始人
Andrej Karpathy
2025年2月提出
Andrej Karpathy
2025年2月提出
核心定义
使用自然语言向AI描述意图
AI生成可运行的代码
用户无需具备编程能力
AI生成可运行的代码
用户无需具备编程能力
术语说明
中文也称"氛围编程"
本文统一使用
Vibe Coding
本文统一使用
Vibe Coding
通俗理解
用大白话描述"想要什么"
具体实现
交给AI处理
具体实现
交给AI处理
2026年AI领域关键趋势
智能体（Agent）
从"能对话"迈向
"能办事"
"能办事"
AI编程工具
大厂全线押注
VC掀起"全民造应用"浪潮
VC掀起"全民造应用"浪潮
词元（Token）
国家数据局定名
"智能时代的价值锚点"
"智能时代的价值锚点"
Kimi K3
全球热度空前
综合实力世界第三
综合实力世界第三
这些趋势的共同逻辑：AI正在从"理解语言"走向"执行任务"
为什么选择 Vibe Coding？
🎤
胡彦斌
歌手 · 用Vibe Coding独立开发
粉丝专属APP"彦火"
登上App Store热门榜
粉丝专属APP"彦火"
登上App Store热门榜
🔍 点击看大图（2张）
👩
全职妈妈
用Vibe Coding
给孩子们造了个
"AI学伴"
给孩子们造了个
"AI学伴"
🔍 点击看大图
📚
考研学生 吴桐雨
开发"考点便签"
学习网站
学习网站
🔍 点击看大图
这些案例说明一个事实 ——
Vibe Coding的门槛，没有想象中那么高。
Vibe Coding的门槛，没有想象中那么高。
为什么选择 Vibe Coding？（续）
落地门槛最低
- 无需复杂技术
- 用大白话就能上手
- 不需要等培训、等IT支持
教研沉淀最强
- 工具直接归档、复用、迭代
- 不是一次性的
- 可以积累成活的资源库
个人感受
"一线老师最需要的，不是高大上的理论，
而是一条今天听完、明天就能落地的路。"
"一线老师最需要的，不是高大上的理论，
而是一条今天听完、明天就能落地的路。"
已产出工具展示 —— 从想法到可用
课堂点名器
幸运转盘
记忆闪卡
句序拼图
一键开讲
心跳听写
单词水果忍者
书声成林
一句话 —— 够吗？
前面展示了8个工具，从点名器到一键开讲，覆盖了不同课堂场景。
这类工具
- 功能单一
- 无需数据存储
- 无边界条件
- 样式可接受即可
这类工具
- 功能组合
- 需记录数据（错词、成绩）
- 有边界条件（不重复抽取、校验）
- 有明确的视觉和体验要求
同样是一句话，有的人能让AI精准产出，有的人却让AI不知从何下手。
区别不在于"说没说"，而在于"怎么说"。
区别不在于"说没说"，而在于"怎么说"。
看同一需求的不同写法 —— 写法一
写法一 · 提示词
"生成一个英语词汇配对的HTML页面，
英文配中文。"
英文配中文。"
↗点击卡片，打开该提示词生成的工具 tool1.html
看同一需求的不同写法 —— 写法二
写法二 · 提示词
"生成一个英语词汇配对的HTML页面，英文配中文。
用户自己在页面上输入单词和释义，生成配对练习。"
用户自己在页面上输入单词和释义，生成配对练习。"
↗点击卡片，打开该提示词生成的工具 tool2.html
看同一需求的不同写法 —— 写法三
写法三 · 提示词
"生成一个英语词汇配对的HTML页面，英文配中文。用户自己输入单词和释义，生成配对练习。
点击配对，配对成功显示正确，错误显示错误。"
点击配对，配对成功显示正确，错误显示错误。"
↗点击卡片，打开该提示词生成的工具 tool3.html
看同一需求的不同写法 —— 写法四
写法四 · 提示词
"生成一个英语词汇配对的HTML页面，英文配中文。用户自己批量输入单词和释义，或者导入txt文件，生成配对练习。点击配对，配对成功显示正确，错误显示错误。界面适合课堂大屏。"
↗点击卡片，打开该提示词生成的工具 tool4.html
看同一需求的不同写法 —— 写法五
写法五 · 提示词（结构化描述）
"生成一个英语词汇配对的HTML页面，英文配中文。用户自己批量输入单词和释义，或者导入txt文件，或者拖拽txt文件，生成配对练习。点击配对，配对成功显示绿色连线，错误显示红色闪烁。交互：点击一个词选中，再点击对应词完成配对，配对后不可再选。支持重置按钮重新开始。样式：暖色调，圆角卡片，教室一体机大屏适配，字体适合后排观看。"
↗点击卡片，打开该提示词生成的工具 tool5.html
回头看 —— 从写法一到写法五
从写法一到写法五，我们加进去了什么？
| 写法 | 新增维度 | 具体内容 |
|---|---|---|
| 写法一 | 技术形式 | HTML页面，英文配中文 |
| 写法二 | 数据来源 | 用户自己输入单词和释义 |
| 写法三 | 交互反馈 | 点击配对，显示正确 / 错误 |
| 写法四 | 交互流程 + 使用场景 | 批量输入 / 导入txt文件 ＋ 课堂大屏适配 |
| 写法五 | 样式要求 + 功能扩展 | 暖色调 / 圆角卡片 / 大屏适配 ＋ 拖拽上传 / 配对锁定 / 重置 |
👉 点击体验写法五生成的完整工具 tool5.html
技术形式 → 数据来源 → 交互反馈 → 交互流程 → 使用场景 → 样式要求 → 功能扩展
每补充一个维度的信息，AI的产出就向"可用"靠近一步。
这就是结构化提示词。
这就是结构化提示词。
动手跟做 —— 在写法五基础上追加需求
写法五的提示词已输入到AI中，页面已生成并运行。
现在，请各位老师在写法五的基础上追加1-2个新需求。
现在，请各位老师在写法五的基础上追加1-2个新需求。
示例需求
● 增加计时功能，记录完成用时
● 增加配对完成后的庆祝动画
● 调整配色方案
● 其他你自己想到的方向
● 增加配对完成后的庆祝动画
● 调整配色方案
● 其他你自己想到的方向
操作步骤
输入新需求 → AI生成新代码
→ 复制运行 → 查看效果
→ 复制运行 → 查看效果
写法五不是终点 —— 工具是在"对话"中逐步完善的。
CO-STAR框架 —— 一个完整的示例
C
Context
背景
背景
高中英语教师
词汇复习课
限时配对PK活动
词汇复习课
限时配对PK活动
O
Objective
目标
目标
生成词汇配对
HTML页面
（英文配中文）
HTML页面
（英文配中文）
S
Style
风格
风格
紫色渐变主题
圆角卡片
左右分屏 · 竞赛氛围
圆角卡片
左右分屏 · 竞赛氛围
T
Tone
语气
语气
直接给代码
无需额外解释
无需额外解释
A
Audience
受众
受众
课堂大屏
全班观看
两名学生同时操作
全班观看
两名学生同时操作
R
Response
回答要素
回答要素
导入词库
左右分屏PK
30秒倒计时 · 榜单排名
左右分屏PK
30秒倒计时 · 榜单排名
完整提示词
我是一名高中英语教师，在词汇复习课上组织限时配对PK活动……
👉 点击展开查看完整提示词
我是一名高中英语教师，在词汇复习课上组织限时配对PK活动……
👉 点击展开查看完整提示词
这就是CO-STAR框架的实际应用 ——
将需求拆解为六个维度，逐项描述清楚，确保AI能完整理解你的意图。
将需求拆解为六个维度，逐项描述清楚，确保AI能完整理解你的意图。
👉 点击打开结构化提示词工具 vocabulary-pk.html
工具美化 —— 让工具更好看
路径一 · 参考已有页面
- 遇到觉得好看的页面，以该页面为参考
- 将参考页面的截图或链接发给AI
- 说明："请参考这个页面的风格进行美化"
路径二 · 加入 Tailwind CSS
- 在提示词中直接加入 Tailwind CSS 样式库
- AI会调用现成样式库，自动优化页面视觉
- 无需手动调整具体样式
两种路径，都能让AI产出的工具从"能用"走向"好看"。
人机协同与角色边界 —— 以单词配对工具为例
AI做的事
- 生成HTML页面
- 实现交互逻辑
- 将描述转换为代码
- 按指令调整样式与功能
人做的事
- 定义工具要解决什么问题
- 预设使用场景
- 判断功能优先级
- 测试工具在课堂中的实际使用效果
AI幻觉与VC的应对
AI幻觉率超过19% → VC产出的是可运行代码，能跑通就是能跑通，不存在"虚构"的空间
工作流天然提供纠正机制：运行测试 → 发现错误 → 反馈AI → AI修正
工作流天然提供纠正机制：运行测试 → 发现错误 → 反馈AI → AI修正
VC产出的不是"建议"，而是"可直接运行的工具"。
AI融入课堂的路径 —— 以单词配对工具为例
● 发现问题
词汇复习课参与度不高，传统形式单一
↓
● 拆解需求
需要左右分屏、计时计分的PK工具
↓
● 描述给AI
从写法一到写法五，形成结构化提示词
↓
● 生成工具
AI生成HTML页面，投入课堂使用
● 发现新问题
台上PK火热，台下学生缺乏参与感
↓
● 追加需求
加入纠错机制、同步纸版小测
↓
● 迭代后工具
从"少数人参与"走向"全员卷入"
不是一次性交付，而是在真实使用中持续迭代。
Vibe Coding融入英语课堂
—— 四个关键认知
①从课堂问题出发，而不是从工具出发
②信息越完整，产出越接近可用
③工具是骨架，教师填充血肉
④一个迭代闭环：问题 → 描述 → 生成 → 迭代
Vibe Coding的终点不是"工具做出来了"，
而是"工具在课堂上用起来了，并且越来越好用"。
而是"工具在课堂上用起来了，并且越来越好用"。
呼吁参与 —— 从"看到"到"做到"
如果有一种方式，能让这些环节少占用一点时间……
HTML可读
直接看懂结构
英文资源
直接使用原文
课堂场景
天然适配VC
指令语言
英文更精准
从解决自己课堂中的一个小问题开始。
不需要一次性做出完美的工具。
这条路是可复制的，我们比想象中更适合走这条路。
不需要一次性做出完美的工具。
这条路是可复制的，我们比想象中更适合走这条路。
你的下一份课件，又何必一定是PPT？
不是PPT，是Vibe Coding生成的HTML页面。
生成课件时用的提示词
"请帮我生成一个可直接运行的HTML课件……"
👉 点击查看完整提示词
"请帮我生成一个可直接运行的HTML课件……"
👉 点击查看完整提示词
S5
课件生成提示词截图
1280×720
总结
从课堂中来，到课堂中去 ——
用起来，才能越来越好用。
用起来，才能越来越好用。