表达想法
学会把“我想做一个页面”说成目标、内容、风格、限制和修改要求。
12 节 · 每节 45 分钟 · 10-14 岁零基础
让孩子把想法变成真正能打开的网页。
Vibe Coding 少儿网页创造课用作品驱动学习：孩子直接使用 AI 协作，学习表达需求、判断结果、修改代码，并完成个人网页作品集。
- 对象
- 10-14 岁
- 基础
- 零基础可学
- 成果
- 个人作品集
课程价值
先做出作品，再理解代码为什么这样写。
这门课不把孩子困在语法背诵里，而是让每个概念都服务于一个可展示的小网页。
判断输出
看懂 AI 给出的结构，知道哪些地方可用、哪里需要追问、哪里不能照搬。
亲手修改
用 HTML、CSS 和一点 JavaScript 修改文字、布局、交互和视觉细节。
完成展示
每节课都有小成果，最后合成一个可以讲解创作过程的个人作品集。
45 分钟课堂机制
每节课只推进一件清楚的事。
- 5 分钟导入目标
- 10 分钟老师示范
- 20 分钟学生创作
- 10 分钟展示复盘
12 节课程计划
从第一张个人介绍页，到完整作品集。
可按阶段筛选查看：基础搭建、AI 协作、互动项目和结课展示。不开 JavaScript 时，完整课表仍会全部显示。
什么是 Vibe Coding
理解“说清楚想法、让 AI 生成、自己判断修改”。
产出：第一张个人介绍网页网页的骨架 HTML
认识标题、段落、图片、链接和列表。
产出：“我的兴趣卡片”页面CSS 让网页变好看
学会颜色、字体、间距和边框。
产出：个性化兴趣卡片升级版AI 提问课：把想法说清楚
学会描述目标、风格、限制和修改要求。
产出：一套个人网页提示词布局：从一页到一个小网站
理解区块、导航、双栏和网格。
产出：“我的作品主页”图片与素材安全
学会使用可授权素材、写 alt 文本、避免隐私泄露。
产出：图文故事页JavaScript 初体验
理解按钮、点击、显示和隐藏。
产出：可点击互动问答页AI 帮我 debug
学会读错误、截图描述和逐步排查。
产出：修好一个故障网页小项目一：互动故事
组合 HTML、CSS 和 JavaScript 做选择剧情。
产出：互动故事原型小项目二：AI 网页改造
用 AI 生成多个版本，学习比较与取舍。
产出：作品第二版发布与展示准备
理解本地文件、静态发布和作品说明。
产出：完整结课作品页Demo Day
展示作品、讲解 AI 协作过程、复盘改进。
产出：个人网页作品集点击课程开始学习
第 1 节：什么是 Vibe Coding
本节让孩子第一次体验“说清楚想法、让 AI 生成、自己判断修改”的完整流程，并完成一张个人介绍网页。
这节课要学会
- 知道网页由内容、样式和互动组成。
- 能把一个模糊想法说成 AI 能理解的任务。
- 能指出 AI 生成结果里哪里满意、哪里要修改。
课堂步骤
- 观察两个网页，讨论它们分别想表达什么。
- 老师示范把“做一个介绍我自己的页面”拆成内容、风格和限制。
- 学生用提示词生成第一版网页，并修改姓名、兴趣和作品入口。
- 每人说出一个自己改过的地方，以及为什么这样改。
作品路径
孩子不是“学过网页”，而是带走一组作品。
个人主页
孩子用 HTML 搭出自我介绍、兴趣和作品入口，再用 CSS 做出自己的视觉风格。
AI 使用规范
直接使用 AI，但不把判断交给 AI。
课程会把 AI 当成“会写代码的搭档”，同时建立适合少儿课堂的边界。
不输入真实隐私
不用真实姓名、学校、地址、电话和个人照片做提示词素材。
不复制不理解的代码
每次粘贴前，必须让 AI 解释“改了哪里、为什么这样改”。
老师检查后再使用
涉及素材、外链、发布和账号操作时，先由老师确认安全性。
保留创作记录
孩子要能讲出自己提出过什么要求、比较过哪些版本、最后为什么选择它。
适合与不适合
这不是刷题课，是把想法做出来的网页创作课。
适合
- 零基础，但愿意表达想法的孩子
- 喜欢做个人主页、故事、问答和小作品
- 能在老师引导下安全使用 AI 工具
- 需要短周期看见学习成果的课堂
不以这些为主
- 不以编程竞赛刷题为目标
- 不追求复杂框架和后端系统
- 不鼓励孩子无理解地复制 AI 代码
- 不把网页做成只有模板替换的作业