动手前 · 先懂概念
在网页里把 AI 当一个组件用 —— 写 prompt、设计 context、做出能给真人交付的工具。
建议先花 5 分钟到「概念地基」看完这一节的萌芽版讲解 —— 你做项目时就不再"照着步骤抄"，而是知道为什么。
→ 看「提示词工程 + 上下文工程」概念地基真代码 · 真工具 · 给真人做的
不要玩具语法，不要拖拽方块。孩子在这里写真正的 HTML、CSS、JavaScript —— 浏览器里能跑的那种。到了创作者层，他们调真的开源 AI API、写真的测试、给一个具体的人做一个完整的工具。
为什么不用 Scratch 或 Code.org？因为那些工具的"代码"，到孩子 13 岁就用不上了。这里教的代码，是真实工程师每天写的代码 —— 只是先写最少的部分。学完，孩子能直接看懂任何网站背后的代码。
把网页想象成一个真人：
三个东西都写在 .html 文件里，一个浏览器就能打开 —— 不用任何安装。这就是孩子第一节"代码课"的全部门槛。
→ 任何不熟悉的词在 小词典 里都有一句话解释。
原版用国外代码工具（付费）+ 国外 API（付费）。我们换成完全免费的中国工具：
tomato / dodgerblue / #FFD700）、或者加一个表情在文字前面。每次改完按"运行"就能看到结果。没有唯一的答案。这里是一个例子，展示了怎么改多个地方：
<html>
<body style="font-family: sans-serif; padding: 2rem;">
<h2>我的第一个按钮</h2>
<button style="
padding: 16px 32px;
background-color: dodgerblue;
color: white;
border: none;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
">🎉 点我开启魔法！</button>
</body>
</html>
改了什么？① 文字改成了"🎉 点我开启魔法！"；② 颜色改成了 dodgerblue；③ 按钮的 padding 和 border-radius 改得更大，看起来更舒服。每一个改动都能直接看到。这就是"前端开发"的感觉 —— 改代码、看结果、再改。
什么是网页？为什么打开浏览器能看见东西？这一节，孩子写下第一行代码，按下保存，看见自己写的字出现在浏览器里。神奇感从这一刻开始。
颜色、字体、布局。孩子学的不是规则，是"为什么这个排版让人想多看一眼"。CSS 是审美工具的入门版。
按钮被点了会怎样？输入框里写了字会怎样？JavaScript 让网页"活"过来 —— 这是孩子第一次"和网页对话"。
用免费的 GitHub Pages 把网页发布到互联网。孩子第一次拥有一个真正能分享的链接，发给爷爷奶奶看。
真实代码里 90%