不会编程也能造工具：氛围编程入门

一句话总结：氛围编程不是让你学会写代码，而是让你学会把想要的效果描述清楚——剩下的代码，AI 来写。

很多老师一听”编程”就想退。但这一章要讲的氛围编程（Vibe Coding），本质上不是写代码，而是用自然语言描述你想要的东西，让 AI 把它变成一个能直接打开使用的网页小工具。一个词汇配对游戏、一个限时口算练习、一个课文填空闯关，都可以这样做出来。

但要先说清一件事：做出来的工具学生爱不爱用，决定因素不是技术，而是教育设计。同样用 AI，有的老师做的练习学生抢着玩，有的无人问津，差别在于前者想清楚了”学生需要怎样的学习体验”,后者只想着”做个东西出来”。所以这一章既教你怎么做，也教你怎么做得有用。建议你跟着走一遍，最好选一个下周要教的知识点当练手对象。

你只需要三样东西

第一是一个能写代码的 AI，前面章节用到的大语言模型基本都行——海外的 Claude、Gemini，国内的 DeepSeek、豆包等都能胜任，挑你顺手的即可。第二是一个能存文本的编辑器，Windows 的记事本、macOS 的文本编辑都自带，足够用；想进阶可以装免费的 VS Code。第三是一个分享的地方，最常用的是 GitHub Pages，免费、稳定，学生通过一个链接就能打开，不用下载任何东西。后面会讲怎么用它发布。

核心功夫：把话说清楚，而不是说”技术”

氛围编程能不能成，关键在描述够不够清楚。这里要先打消一个顾虑：说清楚不等于要懂代码术语。 你不需要知道什么是”像素""十六进制颜色码”,你要做的，是把心里想要的效果，用自己的大白话描述得具体、不含糊。

拿颜色举例。你只说”用绿色”,AI 就犯难了：深绿、浅绿、草绿？每次生成都可能不一样。但你不必去查”草绿到底是哪个色号”,你可以这样说：“用那种让人想到春天草地的清新绿色,像微信图标那种绿。” 这就足够具体了。同理，与其说”字要大”,不如说”字要大到坐在教室最后一排的学生也看得清”——你描述的是效果和场景，技术数值交给 AI 去换算。

下面这张对照，左边是 AI 难办的说法，右边是你完全可以用日常语言说出来的版本：

维度	太模糊	用你自己的话说清楚
颜色	”用蓝色"	"用沉稳的深蓝，像学校校服那种颜色”
大小	”按钮要大"	"按钮要明显、好点，手指容易点到”
反馈	”点击有反应"	"答对了立刻变绿并打个勾，让学生一眼知道对了”
节奏	”快一点"	"切换别太慢，孩子等不及就会走神”
难度	”适合初中"	"七年级水平，前几题简单些，后面再难起来”

还有一招很省心：让 AI 先做一版，再用大白话回调。 它做出来后，你觉得不对，就直接说”这个绿太深了，浅一点""按钮再大些""动画太快了,慢下来”。你不需要懂背后的数值，AI 懂——你只负责当那个有审美、懂学生的人。想清楚要什么效果，再一轮轮告诉它，就是这章最核心的功夫。

一个好提示词的三层结构

把”精确”落到实处，可以套一个三层结构来组织你的描述——和上一章的三层提问法是一脉相承的，只是换到了做工具的场景。想象你在给一个非常听话、但完全不懂教育的助手布置任务，你要交代清楚三件事：这个工具要达成什么教学目的，学生具体怎么操作、怎么得到反馈，以及界面长什么样。

下面是一个可以直接复制使用的完整示例，做一个英语单词配对游戏：

请创建一个七年级英语单词配对游戏，做成一个 HTML 网页文件。

教育目标：
帮助学生记忆食物类英语单词，目标词汇：apple, banana, bread, milk, rice。

游戏机制：
左侧竖排 5 个英文单词，右侧竖排 5 个打乱顺序的中文释义；
学生把英文拖到对应的中文上完成配对；
配对正确：单词变绿(#4CAF50)，显示 ✓，并锁定不可再拖动；
配对错误：显示红色(#F44336)的 ✗，停留 1 秒后消失，允许重试；
全部配对完成后，显示总用时和尝试次数。

界面设计：
卡片式设计，每个词是一张独立卡片，大小 120px×60px，圆角 8px；
背景浅灰(#F5F5F5)，字体 18px；
拖动时卡片半透明(opacity 0.7)。

这段示例里出现了几个颜色码和尺寸，你完全不用自己想——直接复制套用就行；想改哪里，按上面说的，用大白话告诉 AI 即可。把这段发给 AI，它会返回一段 HTML 代码。复制进记事本，存成 game.html，双击用浏览器打开，就能看到一个能玩的游戏。先做这个最简单的，跑通整个流程，建立信心。

熟悉之后，可以往上加复杂度。比如加入 60 秒倒计时和计分做成”限时口算挑战”,或者套一个故事外壳做成”诗词闯关”——做法都一样，只是在上面三层里写得更细：把难度怎么递进、答对答错怎么处理、结束画面显示什么，一条条说清楚。难度永远要服务于学习目标，而不是为了花哨。

出问题了，就把问题描述给 AI

新手最容易卡在”做出来不对怎么办”。答案很简单：别自己跟代码较劲，把问题描述给 AI 就行。掌握了这一点，你能解决绝大多数技术问题。

一个好用的报错对话模板是：

我生成的网页出现了问题：
1. 我想要的效果：（描述期望）
2. 实际的情况：（描述现在的问题）
请帮我修改代码解决。

关键在描述要具体。不说”不工作”,而说”点击提交按钮后没有任何反应”;不说”样式不对”,而说”中文显示成了乱码”。再补上你用的浏览器和系统，AI 改起来会更准。如果一次没解决，就继续把剩下的问题描述给它，一轮轮逼近。还有一个习惯值得养成：每次大改之前，先把当前能用的版本另存一份，万一改坏了能退回去。

发布：设置一次，长期使用

工具做好了，用 GitHub Pages 发给学生。整个过程第一次大约十分钟，之后更新只是拖一下文件：

在 github.com 注册一个账号，免费。
新建一个仓库（点 New），起个名字如 my-edu-games，选 Public，创建。
上传文件：点”uploading an existing file”,把 game.html 拖进去，提交。
启用 Pages：进 Settings → Pages，Source 选 Deploy from a branch，Branch 选 main，保存。
等两三分钟，你的链接就是 https://你的用户名.github.io/my-edu-games/game.html，发给学生即可。

以后要更新或加新游戏，进仓库拖文件、提交，等一分钟就生效。

什么样的教育游戏才算好

最后回到设计本身。做工具时很容易掉进”炫技”的坑——加一堆特效和动画，结果学习目标反而模糊了。请始终记住，教育游戏的核心是”教育”，不是”游戏”。一个界面朴素但目标清晰的词汇练习，往往比花哨却不知道在练什么的游戏有效得多。

有三条原则值得贯穿始终：目标要明确而非花哨；反馈要即时而具体，与其只说”对/错”,不如说”你记住了 5 个里的 4 个，再试试 banana”;难度要适中且递进，让学生在”舒适区边缘”学习，开头容易些建立信心，再逐步加码。

这周就选一个知识点，花半小时做一个最简单的配对或选择题，别追求完美，先让它能用。拿到课堂上试，看学生反应，再改。几轮之后你会发现，自己已经能稳定地造出趁手的教学小工具了。最好的工具从来不是技术最先进的，而是最懂学生的——而最懂学生的，是站在讲台上的你。

本文属于《给老师的 AI 指南》系列。具体来源、参考资料与 AI 使用说明见系列目录页。