ClassFeedback/.claude/lesson/AI03/AICODE-06/AICODE06-08 涂鸦PK（一）— 画图工具 + 角色设计.md at 52f21814e8fc14dd7b2ca1b8385703ed01422a32

1. 课程目标

2. 核心概念与误概念预设

3. 教学准备

4. 教学流程

5. AI助教使用指南

6. 教师指南

7. 5分钟日常AI挑战

8. 拓展任务

1. 课程目标

2. 核心概念与误概念预设

3. 教学准备

4. 教学流程

5. AI助教使用指南

6. 教师指南

7. 5分钟日常AI挑战

8. 拓展任务

35 KiB

Raw Blame History

35 KiB Raw Blame History Unescape Escape

35 KiB

Raw Blame History

Files

chengzi e542f013b9 更新 AI03 课程内容，替换为 AICODE-03 和 AICODE-06 课程体系

- 删除旧的 AI03 课程文件（第4-5课）
- 新增 AICODE-03 课程体系（AI是怎么想的、AI训练师、我是大作家等）
- 新增 AICODE-06 课程体系（从扣子到代码、个人主页、涂鸦PK等）

2026-04-14 21:31:13 +08:00

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线

课时

主题

核心能力

核心工具

时长

透明化层级

适用路线

涂鸦PK（一）— 画图工具 + 角色设计

拆解力

审美力

Trae IDE

Kimi

90分钟

过程层

AICODE-06

知识目标：

理解「精准需求 > 冗余需求」：需求文档的价值在于可测试性，不在于篇幅长短
理解「新窗口审核」的本质：不同上下文的 AI 才能发现你看不见的漏洞
理解角色属性是「打法定位」的策略设计，不是随意填写的数字

能力目标：

能用 Plan Mode 三步（窗口A整理→窗口B审核→窗口C执行）完成画图工具的需求文档（拆解力）
能用自己生成的画图工具画出两帧角色（帧1待机 + 帧2攻击），差异度清晰可见（审美力）
能根据20分预算制，选定自己的打法定位，合理分配属性点（拆解力）

情感目标：

建立「工具是自己做的」的自豪感——不是用别人的软件，而是先造工具再用工具
发现「像素画」的审美乐趣：小小的64×64格子里也能表达角色个性
体验「打法定位」带来的策略感：我的角色是有设计意图的，不是随便画的

核心概念认知层级：

概念	学生类比	认知层级
Spritesheet（精灵图集）	动画书里的一页纸上排了多幅连续图，快速翻动就成了动画；Spritesheet 就是把所有帧拼成一张图，程序按顺序裁取每一帧	识别层
帧（Frame）	动画里每一张静止的画面；两帧之间的差异越大，动画的动感越强	识别层
属性预算制	创建角色时只有20个技能点，花在HP多了ATK就少——这就是策略，不是加法题	理解层
需求可测试性	「字要好看」不可测试；「字体大小16px、颜色白色」可以测试。只有写得出来测试步骤的需求，才是写清楚了的需求	应用层
打法定位	篮球队里有中锋/控卫/得分手，分工不同；坦克型靠血厚扛伤害，刺客型靠高攻一击必杀——每种打法都有对应的属性分配	应用层

典型误概念表：

编号	误概念	正确认知	激发策略
M1	需求写得越多越好，越详细越安全	冗余需求会制造更多歧义和 bug；精准的需求才是关键——每条需求都要能写出测试步骤	展示一份100行需求文档生成的混乱代码 vs 精准15行需求生成的干净代码；问「这条需求，你怎么测试它对不对？」
M2	让 AI 直接写代码更快，需求文档浪费时间	没有需求文档，验收时你不知道从哪里查；出了 bug 无法溯源，只能靠直觉瞎改	问：「如果 AI 做出来画布不是64×64，你怎么知道是哪条需求没说清楚？」
M3	需求审核就是自己再读一遍	新窗口审核：上下文不同的 AI 能发现你看不见的漏洞；自己审等于让同一个人既出题又判卷	演示：把需求文档发给同一窗口的 AI，它说「没问题」；发给新窗口，它提了3个你没想到的问题
M4	两帧画一样就行，动画不重要	帧1待机姿势 + 帧2攻击姿势，差异越大动画越有冲击力；帧2完全复制帧1等于没有动画	打开 demo-3-animation：展示两帧相同 vs 帧2明显前冲的动画对比，让学生自己感受差距
M5	属性随便填，反正都是数字	属性是角色的「打法定位」，这是策略设计，不是填表格；20分预算是有限资源，怎么分配决定了这个角色的战斗风格	类比：篮球队里有中锋/控卫/得分手，不是每个人都练同一个技能；问「你是想先手打爆对方，还是慢慢耗死对方？」

工具与环境：

每台电脑已登录 Kimi（网页版），网络正常
每台电脑装有 Trae IDE，可以创建 HTML 文件并用浏览器预览
教师电脑准备好 demo-pk 目录下的两个 demo 文件：
- demo-1-draw-tool.html（完整画图工具，备用展示）
- demo-3-animation.html（角色动画展示，Connect 环节使用）

教学资源：

教师准备：打开 demo-3-animation.html，导入一个提前画好的临时涂鸦角色 Spritesheet，用于 Connect 导入
教师准备：「画图工具需求文档模板」文字版（见第5节，投屏展示）
教师准备：一份「属性分配表」展示四种打法定位（见第5节）
学生资源：上节课完成的俄罗斯方块作品（精神延续，不需要文件）

教师备课体验任务：

备课前，教师必须亲自完成以下操作：

走完完整的 Plan Mode 三步：用窗口A整理画图工具需求文档 → 窗口B审核（记录 AI 问了哪些你没想到的问题）→ 窗口C生成画图工具

用生成的画图工具画一个角色（帧1待机 + 帧2攻击），感受64×64像素格子的限制和乐趣

故意画一个「两帧完全相同」的角色，导出预览，体验「没有动画感」的效果——备用作为 M4 反例

验证 demo-3-animation.html 的导入功能是否正常，准备一张 128×64 的 Spritesheet PNG

第一幕：联系 (Connect) — 10分钟 🔗

本幕目标：用上周挑战回顾激活工程思维记忆；用 demo-3-animation 的动画展示制造「哇！」的感受，建立今天的项目目标

【环节】上节课挑战回顾 (3分钟)

师：上节课我布置了一个5分钟挑战——给测试脚本补一条没有被覆盖的规则。谁补了？补了什么？

生：（预期 A：我补了一条，测试「方块碰到左边界不能出去」）

师：具体怎么补的？你是发现了哪条规则测试脚本没写？

生：（预期：测试脚本里没有检查边界，我就加了一个模拟按键到最左边的测试）

师：很好——你不只是「加了一条」，你先发现了漏洞，再去补。这就是工程师的思维方式：不是随便加，而是找到没覆盖的地方补上去。

【诊断点：学生能否清晰描述「我发现了什么漏洞 → 我用什么方法补上去了」，而不只是「我加了一条测试」】【理解层】

【分支A】若学生能说出具体的漏洞和补法： 师：这条补得很到位。以后做任何项目，验收脚本里「没写到的地方」就是最容易漏 bug 的地方。

【分支B】若学生说「我没有补，不知道怎么补」： 师：没关系，今天我们马上会用到同样的思路——先写需求，需求就是验收的标准。你今天会自己搞清楚这个流程。

【分支C】若没有学生做了挑战： 师：好，我来快速过一遍——测试脚本的核心作用是什么？

生：（预期：验证游戏规则有没有做对）

师：对。「没被覆盖的规则」就是「测试脚本没想到的情况」。记住这个概念，今天会继续用到。

【环节】情景导入 (7分钟)

师：上节课我们用 Plan Mode 完成了俄罗斯方块。今天我们开启一个全新项目——涂鸦PK。

师：先不解释「PK」是什么，我先让你们看一个东西。

【投屏打开 demo-3-animation.html】

师：这是一个角色动画展示器。你们看——这两个角色在做什么？

生：（预期：在动！/ 一个在走路，一个在打架）

师：对，这是两帧动画——帧1是待机状态，帧2是攻击状态，快速交替播放就有了动感。但是这两个角色，是我临时画的，我花了大概5分钟。

师：现在，我要把这个临时角色换成你们自己画的角色。

【教师演示导入提前准备的临时涂鸦 Spritesheet，动画播放起来】

师：这个动画里的角色，是用一个 HTML 画图工具做的。这个画图工具——是我们今天自己写出来的。

师：今天的任务，两件事：第一，用 Plan Mode 做出一个画图工具；第二，用这个工具画你自己的战斗角色——帧1待机，帧2攻击。

师：上节课用的 Plan Mode 三步，还记得吗？

生：（预期：记得！窗口A整理需求，窗口B审核，窗口C执行）

师：对，一模一样的流程。只是这次做的不是游戏，而是工具。先造工具，再用工具。

【诊断点：学生是否能自己说出 Plan Mode 三步，而不是被教师提示】【识别层】

第二幕：建构 (Construct) — 65分钟 🛠️

本幕目标：完整走完 Plan Mode 三步生成画图工具；逐条验收画图功能；用生成的工具画出两帧角色并填写属性 JSON

【分段一：Plan Mode — 画图工具需求文档】(25分钟)

本段重点：引导学生从「我要做什么」出发，用窗口A整理需求文档，再用窗口B（新窗口审核工程师）发现漏洞，补充完整后准备提交

预设误概念：

误概念 M1：需求写得越多越好，越长越安全
误概念 M2：直接让 AI 写代码更快，不需要文档
误概念 M3：需求审核就是自己再读一遍，不用开新窗口

讲解与演示 (Teach & Demo): (8分钟)

师：开始 Plan Mode 第一步——整理需求。我们要做的画图工具有哪些功能？先不急着写，我们来想一想，这个工具要能做什么。

师：用这个画图工具，最后要交出一张图。这张图有什么要求？

生：（预期：要是方块组成的 / 要有两帧 / 颜色要能选）

师：我来把这些需求点梳理一下，一共6个部分。你们跟着我一起确认每个部分的内容，然后我们用 AI 整理成规范文档——

师：第一部分——画布大小。我们用 64×64 像素，但显示的时候放大 8 倍显示，这样格子就有 512×512 的大小，不会太小看不清。

师：第二部分——工具。需要三个：画笔（点击涂色）、橡皮（把像素变透明或白色）、填充桶（把一片同色区域一起换色）。

师：第三部分——调色板。至少 16 种颜色，支持自定义颜色选择器。

师：第四部分——多帧编辑。这是最关键的——我们有两帧，帧1是待机姿势，帧2是攻击姿势，可以切换编辑，而且可以把帧1复制到帧2作为修改起点。

师：第五部分——动画预览。在工具里就能看到两帧切换的动画效果，不用每次都导出去看。

师：第六部分——导出。生成一张 128×64 的 PNG 图片，两帧横向拼在一起，就是 Spritesheet。

师：这 6 个部分，每一个都有一个关键问题：「怎么测试它做对了？」这叫需求可测试性。比如「画布 64×64 像素」——怎么测试？

生：（预期：在画布上画一条线，看有没有 64 格 / 在画布最边上点，看坐标是不是（63，63））

师：对，能说出测试步骤，说明需求写清楚了。如果是「颜色要好看」——怎么测试「好看」？

生：（停顿）……好像测不了……

师：对，「好看」不可测试。所以需求文档里不能出现「好看」「流畅」「方便」这类词。要写具体的、能测试的描述。【理解层：建立「需求可测试性」的直觉，澄清 M1 误概念】

师：现在看一下今天用的三步流程——

师：窗口A——打开 Kimi，把这6个需求要点告诉 AI，请它整理成规范的需求文档（五部分格式：功能描述/触发条件/功能规则/交互规则/验收标准）。

师：窗口B——全新 Kimi 对话，把文档发给「审核工程师」，让它只问问题不给答案，找出所有描述不清楚的地方。

师：窗口C——再新一个 Kimi 对话，把补充完整的需求文档发给它，生成画图工具的 HTML 代码。

师：我来演示窗口A这一步。

【教师打开 Kimi，用保底提示词一（见第5节）提交，投屏展示 AI 整理出来的需求文档结构】

师：你看 AI 给我整理出来的格式——每个功能都有「功能规则」和「验收标准」。你们对比一下：AI 加的这些验收标准，我在口头说的时候有没有提到？

生：（预期：有几条我没说 / 填充桶的那条我没想到边界情况）

师：对，AI 帮我补了一些我没说清楚的细节。但注意——AI 整理的内容可能有你不想要的，也可能漏掉你想要的。整理完之后要自己过一遍，确认每条都是你真正想要的。【应用层：学生开始区分「AI 帮我补充的」和「我自己想要的」】

学生实践 (Practice): (12分钟)

学生操作：

打开 Kimi，新建对话（窗口A）
根据教师给出的保底提示词一，补充自己想要的特殊需求，提交
拿到 AI 整理的需求文档，自己读一遍，圈出「这条我没提到的」和「这条说法我不认可的」
打开新的 Kimi 对话（窗口B），把文档和审核提示词一起提交

教师走动观察重点：

学生在窗口A拿到文档后，有没有真的读了一遍？还是直接复制粘贴给窗口B？「读一遍」是诊断这步的关键行为。

窗口B的 AI 问了哪些问题？有没有学生对某个问题感到惊讶——「这个我真的没想过」是好信号。

是否有学生在同一个对话窗口里同时做整理和审核？这是 M3 误概念的表现，需要介入。

进度同步 (Checkpoint): (5分钟)

师：窗口B审核出来了，AI 问了你哪个最意外的问题？谁来说一下？

生：（预期 A：它问我「橡皮是把像素变透明还是变白色」，我没想过这两种不一样）

师：好——这两种有什么区别？

生：（预期：透明就是真的没颜色，白色就是变成白色格子）

师：对，区别很重要。如果背景是黑色的，你用橡皮想抹掉一块，变成「白色」就是留了个白点，变成「透明」才是真正删掉。你准备选哪个？

生：透明！

师：那就在你的需求文档里补上：「橡皮擦除后像素变为透明（alpha=0）」。

【诊断点：学生能否说出一条「因为 AI 审核问了这个问题，我补充了这条描述」，而不是「AI 问了很多，我不知道填哪些」】【理解层】

【分支A】若学生能说出具体补充了什么： 师：很好。需求每补充一条，代码出问题的概率就降低一点点。这就是 Plan Mode 的价值。

【分支B】若学生说「AI 问了很多但我觉得都不重要」： 师：好，拿出来看看。最意外的那条是哪个？我们一起判断——这条如果不补，代码生成出来会发生什么？（引导学生预测后果，建立「需求漏洞→代码行为异常」的因果感）

【分支C】若学生在同一窗口做了整理和审核： 师：我注意到你在同一个对话框里做的审核。还记得上节课说的「上下文污染」是什么意思吗？现在再开一个全新对话，把文档重新发过去，对比一下这次 AI 问的问题和刚才有没有不同。

【分段二：窗口C生成画图工具 → 逐条验收 → 溯源修复】(20分钟)

本段重点：提交需求文档生成画图工具；建立「按需求逐条验收」的习惯；遇到问题先溯源需求再修改

预设误概念：

误概念 M2：直接改代码比溯源需求更快
误概念：看起来能用就算完成，不需要逐条验收

讲解与演示 (Teach & Demo): (3分钟)

师：需求文档补完了，进入窗口C——提交生成。把补充完整的需求文档粘贴进新的 Kimi 对话，加上保底提示词三，提交。

师：生成完之后，你会拿到一段 HTML 代码。把这段代码复制出来，在 Trae 里新建一个 draw-tool.html 文件，粘贴进去，保存，用浏览器打开。

师：打开之后——不要急着画。先做一件事：用你的需求文档，逐条验收。验收方式：你需求文档里写了什么，就测什么。

师：我给你们一个最快的验收清单——五条最关键的：

【投屏展示验收清单】

1. 画笔工具：选颜色，点击画布能涂色
2. 橡皮工具：点击有颜色的格子，变为透明/白色
3. 填充桶：点击一片同色区域，整体换色
4. 多帧切换：点「帧1」「帧2」Tab，画的内容各自独立
5. 动画预览：点播放，两帧交替显示

师：这五条，每条真的去操作一次，不能只「看起来好像对」。有一条不通过就标叉，写下「实际看到了什么现象」。【应用层：建立「验收 = 逐条测试 + 记录现象」的习惯】

学生实践 (Practice): (13分钟)

学生操作：

在 Trae 新建 draw-tool.html，粘贴 AI 生成的代码，浏览器打开
按五条验收清单逐条测试，记录「通过✓」或「不通过✗ + 实际现象」
遇到「不通过」先不改代码——找回需求文档，找到是哪条需求没说清楚，标注出来
把找到的漏洞描述清楚（「步骤→预期→实际」格式），让 AI 针对性修复

教师走动观察重点：

有没有学生遇到 bug 直接问 AI「帮我改这个 bug」，而没有先溯源需求？主动走过去问「你知道是哪条需求没说清楚吗？」

有没有学生卡在代码生成失败（如 AI 输出不完整）？准备好备用的 demo-1-draw-tool.html，但先引导学生尝试重新生成

验收清单有没有学生不知道「如何测试填充桶」？示范：先用画笔画一个封闭区域，再用填充桶点内部

进度同步 (Checkpoint): (4分钟)

师：五条验收，全部通过的举手。

师：好。有没有人验到「不通过」的？说一下你发现了什么。

生：（预期 A：帧1和帧2切换，但画的内容是共用的，切换没效果）

师：好，你溯源到需求文档了吗？哪条需求没写清楚？

生：（预期：我写了「可以切换帧」，但没写「两帧的数据是独立存储的」）

师：对，这就是漏洞。「切换帧」和「数据独立」是两件事，你只说了一件。现在补上这条，用「步骤→预期→实际」格式描述给 AI，让它修复。

【诊断点：学生能否从「出了 bug」出发，溯源到「是哪条需求没写清楚」，而不是直接「AI 帮我改一下」】【应用层】

【分支A】若学生完成了溯源并修复了 bug： 师：这是真正的工程师思维——不是改代码，是改需求，然后重新生成。

【分支B】若学生直接把代码发给 AI 说「帮我改」： 师：先停一下。你现在让 AI 改的是代码，但 AI 不知道你要的是什么效果。你能不能先找到需求文档里「两帧切换」那一条，把它描述得更清楚再提交？

【分支C】若 AI 生成的代码完全无法运行（语法错误）： 师：遇到这种情况，先用「步骤→预期→实际」描述给 AI：「我打开 HTML 文件，浏览器显示空白/报错，期望看到画图工具界面」。让 AI 自己排查哪里有问题。如果还不行，可以用老师电脑上的备用 demo 继续后面的步骤——画角色才是今天更重要的部分。

【分段三：用工具画角色（帧1待机 + 帧2攻击）+ 填属性JSON】(20分钟)

本段重点：用画图工具完成角色设计；理解两帧差异的审美原则；用20分预算制选定打法定位并填写属性

预设误概念：

误概念 M4：两帧画一样就行，动画不重要
误概念 M5：属性随便填，反正都是数字

讲解与演示 (Teach & Demo): (5分钟)

师：画图工具做好了。现在正式开始画你的战斗角色。

师：先确认一件事——帧1和帧2要画什么？

师：帧1是「待机」姿势——就是角色站在那里，什么都没发生。这一帧决定了角色的整体外形和配色。

师：帧2是「攻击」姿势——角色在出击的那一瞬间。这一帧决定了动画的冲击感。

师：我让你们看一个对比。

【投屏打开 demo-3-animation.html，分别导入两个角色：一个帧1和帧2完全一样，一个帧2明显前冲】

师：哪个更有打击感？

生：第二个！第一个完全没动……

师：对，帧1和帧2差异越大，动画的冲击感越强。帧2复制帧1不修改，等于没有动画。攻击帧要做什么？肢体前冲、武器伸出去、颜色变化——让角色看起来「正在做某件事」。【识别层：建立「帧1待机 vs 帧2攻击」的视觉差异意识，澄清 M4 误概念】

师：画完之后，我们要给角色填属性。属性系统用的是「20分预算制」——你有20分，分配完就没了，怎么分是你的策略。

师：四个属性：

【投屏展示属性表】

HP（生命值）：1分 = 10血  范围 3-10分
ATK（攻击力）：1分 = 5伤害  范围 2-10分
DEF（防御力）：1分 = 3减伤  范围 0-6分
SPD（速度）：1分 = 1速度值  范围 1-6分

师：我给你们四种打法定位参考，你选一种，或者自己设计——

坦克型：HP 8 + ATK 4 + DEF 6 + SPD 2 = 20分（耗死对方）
刺客型：HP 4 + ATK 10 + DEF 0 + SPD 6 = 20分（一击毙命）
平衡型：HP 5 + ATK 5 + DEF 4 + SPD 6 = 20分（没有弱点）
速攻型：HP 6 + ATK 7 + DEF 1 + SPD 6 = 20分（先手压制）

师：注意——你的角色外观要和你的打法定位「匹配」。刺客型画个超大的圆圆的胖角色，感觉不对；坦克型画个细细的小人，也感觉不对。角色的视觉设计要传达出它的战斗风格。

师：还有一个特技系统——每个角色可以选一个特技，不占预算：

🔥燃烧：每回合额外-5血，持续3回合
🛡护甲：首次受击伤害归零
⚡连击：25%概率攻击两次
💉吸血：攻击回复伤害30%血量
❄️冰冻：每场一次，对方跳过下回合
🎯穿透：一次攻击无视防御

师：选好了吗？现在开始画。先定打法定位，再动手画角色外形。【应用层：学生开始从策略角度设计角色，而不是「随便画一个」】

学生实践 (Practice): (12分钟)

学生操作：

在画图工具里，先选定自己的打法定位（坦克/刺客/平衡/速攻，或自定义）
在帧1画待机姿势——确定角色外形、配色、整体风格
点「复制帧1到帧2」，在帧2的基础上修改攻击姿势（肢体前冲、武器伸出、颜色变化等）
预览动画，确认帧1和帧2有明显差异
完成后，在 Trae 新建一个 character.json，填写属性数据：

{
  "name": "你的角色名",
  "hp": 50,
  "atk": 25,
  "def": 12,
  "spd": 4,
  "special": "⚡连击",
  "description": "一句话描述你的打法"
}

教师走动观察重点：

有没有学生帧2完全没改，只是复制了帧1？走过去问「攻击的时候角色在做什么动作？」

有没有学生分配完属性后发现「总分超了20分」？引导他重新算一下

关注速度慢的学生：如果卡在画角色，帧2可以暂时只改一两个像素，保证完成基本的两帧结构；细节可以之后优化

进度同步 (Checkpoint): (3分钟)

师：谁的帧2跟帧1有明显不同的，把动画预览给大家看一下。

生：（学生展示动画预览）

师：帧2里，角色做了什么动作？

生：（预期：他的手臂伸出来了 / 整个身体往前倾了）

师：这就是攻击感。你们的打法定位是什么型？

生：刺客型！

师：刺客型——高攻低血。碰到坦克型怎么办？

生：（预期：先手攻击！速度快，先打对方）

师：好，这说明你的策略是清晰的。你知道你的角色能赢谁，也知道怕谁——这才是策略设计。

【诊断点：学生能否说出自己的打法定位，并能解释「这个定位的优势和弱点」，而不只是「我觉得这个好看」】【应用层】

第三幕：反思 (Contemplate) — 10分钟 🤔

本幕目标：2-3名学生展示角色并说出打法定位的策略思考；让其他学生从「对抗」角度给出评价

【环节】成果展示 (6分钟)

师：现在我们来做一个角色路演。每个人只说三件事：第一，你的角色叫什么名字；第二，你的打法定位是什么型；第三，你的特技是什么，为什么选这个。

师：谁先来？

【1-2名学生上来展示角色动画，说出三件事】

师：（对展示的学生）你是刺客型，特技选了「穿透」。你的思路是什么？

生：（预期：因为刺客型攻击高，加上穿透直接无视防御，坦克型也扛不住）

师：这个搭配有意思——高攻 + 穿透，专门克制高防御的坦克。但是你血量很少，碰到先手比你快的角色怎么办？

生：（预期：就……输了？ / 要速度快才行）

师：所以你的角色有一个明显弱点。这不是坏事——有弱点才有对抗的乐趣。

【环节】互评与讨论 (4分钟)

师：大家来评价刚才展示的这个角色——一个优点 + 一句「如果我拿XX型去打他，我的策略是」。

生：（预期：优点是攻击穿透很厉害；如果我用速攻型，速度比他快，先手打他，因为他血少可能一下就输了）

师：很好——你在想「反制策略」了。这就是涂鸦PK的乐趣：不只是画角色，而是设计一个有自己思考的战斗方案。

师：帧2动画有一个想问的——你们觉得帧2改变得最大、最有攻击感的是哪个角色？

【学生投票或说出谁的】

师：为什么你觉得那个最有攻击感？

生：（预期：因为他帧2整个身体都往前扑了，和帧1差别很大）

师：对——差异越大，冲击感越强。 这是今天审美设计的核心原则，记住它。

第四幕：延续 (Continue) — 5分钟 🚀

【环节】抽象总结 (3分钟)

师：今天我们做了两件事：先用 Plan Mode 做出了画图工具，然后用工具画了角色、填了属性。我来问你们——今天用的三步流程（窗口A整理、窗口B审核、窗口C执行），和上节课做俄罗斯方块时有什么一样的地方？

生：（预期：流程完全一样 / 都是先写需求再生成）

师：对——流程是可以迁移的。 这套流程不只用来做游戏，不只用来做画图工具。以后你们要做任何稍微复杂一点的项目，都可以用这三步。

师：今天还有一个新东西——「先造工具，再用工具」。你们不是下载别人的画图软件来用，而是自己写了一个。这个思路以后还会用到：当你发现某个工具不好用，或者根本没有，你可以自己造。

师：今天的「审美力」训练，核心是什么？

生：（预期：帧1和帧2差异要大 / 攻击帧要有动感）

师：对，帧2差异越大，动画越有冲击感。这条原则不只用在像素画——你以后做任何动画、做任何交互，「差异对比产生冲击感」都是一条通用的审美原则。

【迁移层：将「先造工具」「差异产生冲击感」提炼为可迁移的思维模型】

【环节】下节预告 + 5分钟挑战 (2分钟)

师：下节课——涂鸦PK（二）。你们今天画好的角色和属性，会被真正用来对战。我们要搭建一个战斗引擎，让你的角色和同学的角色打起来，看看谁的策略赢。

师：想一想——你的打法定位，碰到哪种对手会输？下节课我们来验证。

师：本周 5 分钟挑战：用你今天做的画图工具，帮一个同学画一个角色，然后对比和他自己画的有什么不同——外形、配色、攻击姿势，哪里不一样？拍照或截图，下节课分享。

教师演示用提示词（需求文档整理，窗口A）：

你是一个需求分析师。我要做一个HTML5像素画图工具，功能是：64×64画布、8倍缩放显示、支持画笔/橡皮/填充桶、有调色板、两帧编辑（帧1待机/帧2攻击）、可复制帧1到帧2、有动画预览、能导出128×64 Spritesheet PNG。请把这些需求整理成规范的需求文档，包含：功能描述、触发条件、功能规则、交互规则、验收标准五个部分。

审核用提示词（窗口B——新窗口，不要在整理窗口里使用）：

你是一个挑刺工程师。下面是一份画图工具的需求文档，请只提出你觉得描述不清楚或有遗漏的问题（每个问题一行），不要给答案，不要写代码：

[粘贴需求文档]

学生保底提示词（生成画图工具，窗口C）：

请帮我用HTML5 Canvas做一个像素画图工具：64×64像素画布、8倍缩放显示、支持画笔/橡皮/填充桶、有颜色调色板（至少16色）、有两帧（帧1待机/帧2攻击）可切换编辑、可复制帧1到帧2、有动画预览（循环播放）、能导出128×64 Spritesheet PNG。单文件HTML，不用任何外部库。

进阶提示词（属性 JSON 生成辅助）：

我的角色是刺客型，打法是先手高爆发。20分预算制：HP/ATK/DEF/SPD各有范围限制（HP:3-10，ATK:2-10，DEF:0-6，SPD:1-6）。请帮我给出一个满足20分总预算、符合刺客型定位的属性分配方案，并说明每个属性为什么这样分配。

属性分配参考表（投屏展示用）：

本课技术备注：

Spritesheet 格式：128×64 PNG，左半（0-63像素宽）是帧1，右半（64-127像素宽）是帧2。对战引擎会按这个坐标裁取每帧。导出时必须确保两帧横向拼接，否则下节课的战斗引擎无法正确读取。
Canvas 像素操作：画图工具底层用 getImageData/putImageData 操作像素数组。每个像素有 RGBA 四个值（各0-255）。橡皮设为「透明」等于把该像素的 alpha 通道设为 0。这部分不需要传达给学生，但教师需要了解，以便解释「橡皮变透明 vs 变白色」的区别。
填充桶（洪水填充）：用 BFS 或 DFS 算法扩展同色区域。如果学生报告「填充桶没有反应」，可能是起点像素和周边颜色完全相同导致；让学生先用画笔画一个封闭区域再测试。
帧数据独立存储：每帧用一个独立的 Uint8ClampedArray 存储像素数据。切换帧时先保存当前帧数据，再加载目标帧数据。如果生成的代码两帧共用数据，需要在需求里补充「每帧像素数据独立存储，互不影响」。
导出 PNG：用 canvas.toDataURL('image/png') 获取 base64 编码后触发下载。导出前需要把两帧数据拼接到一个 128×64 的临时 canvas 上再导出。

常见问题 FAQ：

问题	应对
「AI 生成的代码报错，打开是空白页」	让学生把报错信息（浏览器 F12 控制台）截图给 AI，用「步骤→预期→实际」描述问题让 AI 修复
「橡皮擦了但颜色还在」	先确认是否切换到了橡皮工具；如果工具选对但无效，可能是代码把橡皮当成了「白色画笔」，需要溯源需求文档里橡皮的功能描述
「填充桶整个画面都变色了」	这是填充桶「溢出」问题——起点像素周围没有封闭边界，颜色扩散到整个画布。让学生先用画笔封闭区域再用填充桶
「帧1和帧2切换后内容一样」	需求文档里需要补充「两帧像素数据独立存储」；溯源后让 AI 修复数据存储逻辑
「导出的 PNG 只有一帧」	需求里「128×64 Spritesheet」的描述可能没说清楚是「两帧横向拼接」；补充描述后重新生成导出功能
「20分分配不够，不知道怎么算」	给学生纸笔，列出四个属性的分值，加减法算一遍；主要目的是让学生思考优先级，不是数学练习
「帧2不知道怎么画才有攻击感」	给三个具体操作方向：1）身体/手臂前倾；2）把武器或特效从帧1的位置移动到「伸出去」的位置；3）帧2加一些颜色特效（爆炸光晕、冲击线条）

课堂风险预案：

AI 服务不可用：使用 demo-1-draw-tool.html 作为备用画图工具，跳过 Plan Mode 生成步骤，直接让学生用 demo 画角色。Plan Mode 三步可以在白板上演示讲解，不需要真的生成。
学生进度差异过大：画图工具生成完成的学生直接开始画角色；还在 Plan Mode 阶段的学生可以在分段三时使用教师备用的 demo-1-draw-tool.html 画角色，保证每位学生都能产出两帧角色。
属性分配争议（学生觉得某个定位「必胜」）：预先告知下节课会有实际对战，不同对手克制关系不同，没有「必胜型」。这个问题留到实战后讨论，今天重点是把角色画完。

本周挑战： 用画图工具帮同学画一个角色，然后对比差异

挑战说明： 用你今天做好的画图工具，帮一个同学（家人或朋友也行）画一个角色（帧1待机 + 帧2攻击），然后让他自己也画一个版本，对比两个版本有什么不同：外形、配色、攻击姿势，哪里不一样？想一想：为什么会不一样？是因为你们对「好看」的标准不同，还是因为对「攻击感」的理解不同？

下节课分享： 下节课选2-3位同学展示「你画的版本」和「同学画的版本」，说出最大的一处差异是什么。

拓展一（推荐）： 设计一个「克制链」——你的角色克制哪种打法定位的对手，被哪种打法定位克制？用文字写出来：「我是XX型，我克制XX型，因为……；我怕XX型，因为……。」然后想想下节课对战时要不要调整属性。

拓展二（挑战）： 给你的角色再画一帧「受伤帧」——当角色被攻击时显示的状态（帧3）。试着修改画图工具的代码，让它支持三帧编辑，并在动画预览里加入「受伤」动画。

血厚扛伤害，慢慢耗死对方

先手高爆发，一击毙命

无明显弱点，应对各种对手