ClassFeedback/.claude/lesson/AI03/AICODE-06/AICODE06-01 从扣子到代码.md

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

课时	主题	核心能力	核心工具	时长	透明化层级	适用路线
1	从扣子到代码	提问力 拆解力	Trae IDE	90分钟	结果层	AICODE-06（有扣子/低代码经验的学生）

1. 课程目标

知识目标：

• 理解"扣子智能体"和"AI编程"的本质区别：配置 vs 创造
• 掌握 Trae IDE 的界面布局和核心操作流程
• 理解"Vibe Coding"的含义：用自然语言驱动AI写代码

能力目标：

• 能独立完成 Trae 的完整操作流程：新建项目 → AI对话 → 接受代码 → 预览结果
• 能使用 Trae 的 Builder 模式让AI生成一个完整的交互网页
• 能在 Trae 中对AI生成的代码进行基本的迭代修改

情感目标：

• 感受到"从配置到创造"的自由度跃迁
• 对 Trae 工具产生"这个东西好用"的正面第一印象
• 建立"我能用代码做出扣子做不到的东西"的信念

---

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

核心概念认知层级：

概念	六年级类比	认知层级
Trae IDE = AI编程工作台	像一个超级画室：画布(编辑器)+颜料(代码)+AI助手都在里面	识别层
Builder 模式 = AI创建整个项目	像跟助手说"帮我画一幅画"，它直接画出来	识别层
Chat 模式 = 跟AI聊代码问题	像问助手"这笔颜色对不对"，它给你建议	识别层
扣子 = 配置型工具	像乐高说明书，按步骤拼，只能拼出预定造型	识别层
AI编程 = 创造型工具	像拿到一堆零件+超强助手，想做什么都行	理解层
Vibe Coding	用自然语言告诉AI你要什么，AI帮你写代码	理解层

典型误概念表：

编号	误概念	正确认知	激发策略
M1	"Trae和扣子差不多，换了个界面"	本质不同：扣子产出对话，Trae产出可运行的程序	同一任务两个工具对比
M2	"写代码要背很多语法，很难"	Vibe Coding用自然语言，你说中文AI写代码	当场演示一句话生成网页
M3	"这个界面好复杂，我学不会"	90%的按钮你不需要碰，只用3个区域就够了	界面引导时只聚焦核心区域
M4	"AI帮我写代码，那我什么都不用学了"	你是"产品经理"，AI是"程序员"，你要会提需求、会验收	展示模糊指令导致的糟糕结果
M5	"代码我完全看不懂也没关系"	不需要写，但需要能看一眼大概知道在干嘛	后续课程深入，本课只点到为止

---

3. 教学准备

工具与环境：

• 每台电脑已预装 Trae IDE（校区统一部署，教师课前验证可正常启动）
• Trae 已登录校区账号（学生无需注册）
• 网络环境正常（Trae AI功能需联网）
• 浏览器 Chrome（用于预览生成的网页）

教学资源：

• 教师准备：1个用 Trae 做的交互网页成品（开课展示用）
• 教师准备：1个预制的 index.html 文件（AI翻车时的备用）
• 教师准备：3个经过验证的"保底提示词"（学生想不出来时用）
• 学生资源：无需提前准备

教师备课体验任务：

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

1. 在 Trae IDE 中完整走一遍：打开 → 新建项目 → Builder 对话 → 接受代码 → 预览网页
2. 用 Trae 做一个"反应力测试游戏"，记录全过程和遇到的问题
3. 故意给 Trae 一个模糊指令（如"帮我做个游戏"），观察生成质量，准备对比演示
4. 确认校区每台电脑的 Trae 可正常启动、AI功能可用

---

4. 教学流程

---

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

本幕目标：用成品展示制造"哇"的冲击，激发学习动机

情景导入 (10分钟)

师： 同学们，在正式上课之前，我先给你们看一个东西。

（教师打开浏览器，展示一个课前做好的交互网页——比如"反应力测试游戏"或"英语单词闯关"）

师： 来，谁来玩一下？

（邀请1-2位学生上台操作，全班观看）

师： 好玩吧？这个小游戏有按钮、有计时、有动画效果。你们觉得，做这个东西难吗？

生： （预期：难吧/不知道）

师： 告诉你们一个秘密——做这个东西，我一行代码都没写。我只是用中文跟AI说了我想要什么，AI就帮我生成了全部代码。整个过程不到5分钟。

（停顿）

师： 你们之前用扣子做过智能体对吧？扣子很好用，但它只能做"对话型"的东西——你问它答。而刚才这个游戏，有界面、能点击、有动画——这个在扣子里做得到吗？【诊断点：检测学生对扣子能力边界的认知】【识别层】

生： （预期：做不到）

师： 做不到。这就是我们今天要解锁的新工具——Trae。

师： 我跟你们说一下这学期我们要干什么。给你们剧透一下：

• 第3课，你们每个人会做出一个完整的网页作品，可以分享给同学
• 第8课，你们会做出真正的游戏——有关卡、有计分、有特效的那种
• 期末，我们会开一场发布会——你上台展示你的作品，像真正的产品经理一样

这些软件全是你自己设计的，你想怎么设计就怎么设计。做完之后可以给你的爸爸妈妈用、给同学用、给老师用。

师： 你们只要跟着老师好好学，我会把你变成一个编程大师。你不需要记住任何代码，你只要能把你想要的东西说清楚——你想做什么、长什么样、怎么用——AI就帮你实现。能说清楚 = 能做出来。 这就是我们这门课的超能力。

师： 今天是第一步——你们每个人都会用 Trae 做出一个自己的交互网页。我们开始。

---

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

---

【分段一：Trae 是什么 + 界面快速导览】(10分钟)

本段重点：最快速度认识 Trae 界面，消除恐惧感，把更多时间留给动手创作

讲解与演示 (5分钟):

预设误概念：

• M3: 界面好复杂我学不会
• M1: 跟扣子差不多

师： 大家打开桌面上的 Trae。

（等待全班打开，教师投屏同步展示）

师： 第一眼看到这个界面，你可能觉得"好复杂"。别担心——90%的按钮你都不需要碰。今天只需要认识三个地方：

（教师投屏，快速逐一指出）

师： 跟我一起看：

① 左边：文件管理器

师： 左边这个面板就是你的"文件夹"——你做的网页文件会出现在这里。

② 中间：代码编辑器

师： 中间最大的区域，AI帮你写的代码会显示在这里。五颜六色的文字不是乱码，是正常的。现在不需要看懂。

③ 右边：AI对话面板（最重要！）

师： 这是今天最重要的地方——AI对话面板。点左边的AI图标打开它。

（教师点开AI面板）

师： 这里有两个模式，很关键：

• Builder模式：让AI帮你创建整个项目。像跟装修公司说"帮我装修整个房间"。
• Chat模式：跟AI聊天、问问题。像问"这面墙颜色好不好看"。

师： 今天主要用 Builder模式——我们要从零开始，让AI帮我们写整个网页。

师： 还有一个关键操作——AI写完代码后，你会看到绿色的 Accept（接受） 按钮。点它就行，就像验收装修成果，满意就签字。

学生实践 (3分钟):

师： 现在跟我做三步，确认你找到了这些地方：

1. 点左边的AI图标 ——看到AI对话面板了吗？
2. 在AI面板上方找到 Builder 和 Chat 两个标签——点 Builder，确认切换到了 Builder 模式
3. 再点左边的文件图标 ——看到文件管理器了吗？

（教师走动检查，重点关注找不到AI图标或分不清Builder/Chat的学生）

师： 有人找不到的举手，我来帮你。

进度同步 (2分钟):

师： Builder模式打开的同学举手？好。记住：最重要的是右边的AI面板，用Builder模式。其他的先不管。【诊断点：检测学生是否记住了核心区域】【识别层】

---

【分段二：新建项目 + 第一次AI对话】(15分钟)

本段重点：走完"新建项目 → AI生成代码 → 预览网页"的完整流程

讲解与演示 (5分钟):

预设误概念：

• M2: 写代码很难

师： 好，在我们动手之前，先搞清楚一个非常重要的概念——"项目"。

师： 你们平时在电脑上用文件夹存东西对吧？一个文件夹里放几张图片、几个文档。你也经常用浏览器上网，打开各种网页。那 Trae 里的"项目"和这些有什么区别？

（停顿，让学生思考）

师： 这样理解——文件夹就是一个抽屉，你把东西往里面一放就行。浏览器是一个窗户，你通过它看别人做的东西。但项目不一样，项目是一个工作间——你在里面创造东西。

师： 打个比方：你做手工的时候，需要一张工作台，把材料、工具都放在台上，然后在这上面做出你的作品。Trae 的"项目"就是这张工作台。你不在里面开一个项目，AI就不知道把代码往哪里放，你也没法预览你做的东西。

师： 所以记住：每次做新东西，第一步永远是开一个新项目。 不开项目就跟AI说话，就像站在空地上跟装修工人说"帮我装修"——装修哪里？没有房子你装修什么？

师： 好，现在我们来走一遍完整的流程。从零开始，做出一个网页。跟我一步一步来。

第一步：新建项目文件夹

师： 在 Trae 里，我们需要先给项目建一个"工作台"——就是在桌面上新建一个文件夹，然后让 Trae 打开它。

操作步骤：

1. 点击菜单 文件 → 打开文件夹（或者用快捷键 Ctrl+K Ctrl+O）
2. 在弹出的窗口里，导航到桌面
3. 点右键 → 新建文件夹，命名为 我的第一个网页
4. 选中这个文件夹，点确认/打开

师： 看左边的文件管理器——现在应该显示了你的文件夹名字，里面还是空的。这就是你的"工作台"准备好了，等着AI往里面放东西。

（教师投屏同步演示每一步）

第二步：在 Builder 里跟AI说话

师： 现在切换到AI面板的 Builder 模式。在对话框里输入你想做的东西。

（教师演示输入）

师： 我先来示范。我输入这段话：

帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
- 大标题显示"你好，我是穹狼老师"
- 下面有一段自我介绍文字
- 背景用好看的渐变色
- 要有一个按钮，点击后弹出一句鼓励的话

（发送后等待AI响应）

师： 看！AI回复了。它帮我写了一段代码，还告诉我它做了什么。现在关键来了——

第三步：接受代码

师： 看到代码区域上方的按钮了吗？有一个绿色的 Accept All（全部接受）。点它——这就是告诉AI"好的，我接受你写的代码"。

（点击Accept，文件出现在左侧文件管理器中）

师： 看左边——index.html 文件出现了！

第四步：预览网页

师： 最后一步——在文件管理器里右键点击 index.html，选择 "在默认浏览器中打开"。或者你可以直接去桌面的文件夹里双击这个文件。

（浏览器打开，显示生成的网页）

师： 搞定！从打开Trae到看到网页，四步：建文件夹 → Builder说话 → 接受代码 → 浏览器预览。

学生实践 (8分钟):

师： 现在轮到你们了。按照刚才的四个步骤，做你自己的第一个网页。

你的任务： 在 Builder 里输入下面这段话（把名字换成你自己的）：

帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
- 大标题显示"你好，我是[你的名字]"
- 下面写几句你想说的话
- 背景用你喜欢的颜色
- 加一个按钮，点击后显示一句你喜欢的话

师： 做完四步（建文件夹→Builder说话→接受代码→浏览器预览）的同学，举手让我知道。

（教师走动协助）

（教师走动观察，重点关注：）

• 有没有学生卡在"新建文件夹"步骤
• 有没有学生没切换到 Builder 模式（用了Chat模式）
• 有没有学生不知道点 Accept
• 有没有学生找不到怎么预览文件
• AI是否成功生成了代码（网络问题？）

Plan B： 如果某个学生的AI没有正确生成代码（网络超时/报错），教师直接帮忙在文件夹中创建 index.html，粘贴预制代码，先保证学生看到结果不掉队。

进度同步 (2分钟):

师： 看到自己网页的同学举手！

（统计人数，目标：至少80%的学生成功）

师： 你们刚才完成了一件事——没写一行代码，只用中文跟AI说了你想要什么，就得到了一个能在浏览器里打开的网页。 这就是 Vibe Coding。

师： 跟扣子比比——在扣子里你能做出一个"有背景色、有按钮、能点击弹出消息"的网页吗？

生： （预期：不能）

师： 这就是区别。扣子做对话，Trae做产品。而我们才刚刚开始。

---

【分段三：做一个交互式网页游戏】(25分钟)

本段重点：用 Trae 完成一个真正有交互、有视觉效果的作品——这是本课的核心"哇"时刻

讲解与演示 (5分钟):

预设误概念：

• M4: AI帮我写了就行，我什么都不用管

师： 刚才的自我介绍页面是"入门级"。现在来点真正酷的——我们做一个交互式网页游戏。

师： 先看我怎么做。注意看我给AI的指令有多具体：

（教师在 Builder 中输入）

帮我重新创建 index.html，这次做一个反应力测试小游戏：
1. 页面中央有一个大圆形区域，初始是红色，上面写"等待..."
2. 随机等待2-5秒后，圆形变成绿色，文字变成"点我！"
3. 玩家点击绿色圆形后，显示反应时间（精确到毫秒）
4. 如果在变绿之前就点了，显示"太早了！重新开始"
5. 下方有"再来一次"按钮
6. 页面整体深色主题，有渐变背景，圆形有阴影效果
7. 显示历史最佳成绩

（等待AI生成）

师： AI给我写好了。我先看看它的说明——它告诉我代码做了什么。没问题的话，我点 Accept All。

（接受代码，在浏览器中打开）

师： 来，谁来玩一下？

（邀请一个学生试玩，全班看效果）

师： 注意我刚才的提示词——我没说"帮我做个游戏"，我说了7条具体要求。越具体，AI做出来的东西越接近你想要的。 这就是你们之前学的提示词技巧，现在用在真正的编程上。

师： 但如果AI做的不完美怎么办？很简单——继续跟它说。关键是你要说清楚哪里不对、你要什么效果。比如：

• 觉得字太小？→ 跟AI说："把标题文字调大一倍，圆形区域也调大"
• 颜色不好看？→ 跟AI说："背景换成深蓝色渐变，按钮换成橙色"
• 功能没做对？→ 跟AI说："点击按钮后没有反应，我要的是点击后显示一段文字"

师： 注意——不要只说"不好看"或者"有问题"，要说清楚哪里不好、你想要什么样的。越具体，AI改得越准。这就是迭代——一遍遍优化直到满意。

学生实践 (18分钟):

师： 现在轮到你们了！你要在 Trae 里做一个自己的小作品。

三个方向选一个：

方向	说明
小游戏	有规则、有输赢、能玩起来的游戏
小工具	解决一个小问题的实用工具
创意页面	好看的、有动画效果的展示页面

师： 选好方向后，按这个框架写提示词：

帮我创建一个 index.html 网页文件，做一个[你选的东西]：
1. [最核心的功能是什么]
2. [用户怎么操作——点什么、输入什么]
3. [操作之后会发生什么]
4. [界面风格——什么颜色、什么感觉]

师： 比如你选"小游戏"方向，你可以写："做一个猜数字游戏：1. 电脑随机一个1-100的数字；2. 玩家输入数字点猜按钮；3. 显示猜大了还是猜小了，猜对了显示恭喜；4. 界面用蓝色主题。"

师： 操作流程跟刚才一样：Builder说话 → Accept代码 → 浏览器预览。

关键提醒：

1. 提示词写到4条以上——越具体，AI做出来的东西越接近你想要的
2. 做完后如果不满意，继续在Builder里跟AI说要改什么
3. 做完的同学可以叫旁边的同学来试用你的作品

师： 时间18分钟。开始！

（教师走动观察和协助）

（教师走动观察，重点关注：）

• 提示词质量：是否足够具体？太模糊的学生引导他们加细节
• AI生成结果：是否能正常运行？不能的话帮助学生跟AI说"这里有问题"
• 迭代意识：做完第一版的学生是否在继续优化？
• 情绪状态：有没有学生因为AI翻车感到挫败？

快学生应对： 做完基础版后，试着跟AI说"加一个XX新功能"——比如加排行榜、加音效、加难度选择。体验"迭代"的感觉。

慢学生应对： 如果10分钟还没有产出，教师提供保底提示词：

帮我做一个猜数字游戏：
1. 电脑随机一个1-100的数字
2. 玩家输入猜的数字，点"猜"按钮
3. 如果猜大了显示"太大了"，猜小了显示"太小了"
4. 猜对了显示"恭喜你！用了X次猜对了"
5. 有"重新开始"按钮
6. 界面好看，有颜色

进度同步 (2分钟):

师： 时间到！做出作品的同学举手！

（统计）

师： 你们用不到20分钟，做出了一个扣子里根本做不出来的东西。你现在回忆一下整个过程——你写代码了吗？

生： （预期：没有）

师： 你做了什么？

生： （预期：跟AI说了我想要什么）

师： 对！你做的是想清楚要什么 → 告诉AI → 验收结果 → 不满意就迭代。这就是 Vibe Coding 的核心循环。你是"产品经理"，AI是"程序员"。

---

【分段四：回顾操作 + 掀开盖子看一眼】(10分钟)

本段重点：巩固操作流程，对代码建立初步感知

讲解与演示 (5分钟):

师： 我们来回顾一下，今天你学会了 Trae 的核心操作流程：

① 新建项目文件夹（文件 → 打开文件夹）
② 在 Builder 模式跟AI说你要什么
③ 点 Accept 接受AI写的代码
④ 在浏览器中预览效果
⑤ 不满意？回到 Builder 继续说要改什么（迭代）

师： 这五步就是你以后每节课都会用到的基本流程。记住了吗？

师： 最后我们"掀开盖子看一眼"。点开你的 index.html 文件——这个文件就是你作品的源代码。什么是源代码？就是你做的这个网页的"配方"。浏览器拿到这个配方，就能做出你看到的页面。

师： 看看这些五颜六色的文字——这就是代码。你不需要看懂它。但我教你们一个以后永远用得上的方法——不懂就问AI。

（教师演示）

师： 比如我在代码里看到一个 <style> 标签，我不知道它是什么意思。怎么办？我不去百度，不去翻书——我直接复制这个标签，切换到 Chat 模式，粘贴进去，问AI：

（教师在Chat里输入）

<style> 这个标签是什么意思？用一句话解释。

（展示AI的回答）

师： 看到了吗？AI一句话就告诉你了。你在代码里看到任何不懂的东西，都可以这样做——复制、粘贴、问AI。万事不懂问AI，这是你们以后最重要的习惯。

学生实践 (5分钟):

师： 两个小任务，做完一个做下一个：

任务一：问AI一个问题

在代码里随便找一个你不认识的东西，复制它，切换到Chat模式，问AI它是什么意思。

任务二：手动改一个颜色

师： 接下来做一件更酷的事——你亲手改一下代码。

1. 在代码编辑器里按 Ctrl+F（搜索）
2. 输入 color，看看代码里有几个跟颜色相关的地方
3. 找到一个颜色值（比如 #3498db、blue、red 这样的词）
4. 把它改成你喜欢的颜色（比如改成 pink、gold、#ff6600）
5. 按 Ctrl+S 保存，然后去浏览器刷新页面

师： 看到变化了吗？你刚才做了一件事——手动改了一行代码。这证明代码不是黑盒子，你是可以碰它的。以后AI写的代码不满意，你甚至可以自己动手微调。

（教师走动协助，帮助找不到颜色值的学生）

进度同步 (2分钟 - 从分段一省出的时间):

师： 谁成功改了颜色？改成了什么颜色？

（让1-2个学生分享）

师： 记住两个方法——代码看不懂？问AI。代码想微调？Ctrl+F搜索，手动改，Ctrl+S保存，刷新看效果。【诊断点：检测学生是否掌握了"问AI"和"手动微调"两个习惯】【识别层】

---

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

本幕目标：展示成果，巩固 Trae 操作流程和核心认知

成果展示 (6分钟)

师： 请3位同学来前面展示你的作品。展示时说两件事：

1. 你做了什么，简单演示一下
2. 你跟AI说了什么（展示你的提示词）

（选3位学生展示，每人2分钟。尽量选不同方向——游戏、工具、创意页面各一个）

拍照发群： 学生展示时，教师用手机快速拍1-2张学生作品屏幕画面。课后选最佳的配上文字"第一节课，同学们用AI做出了自己的第一个网页作品！"发到家长群。这是家长感知课程价值的关键触点——第一课就有产出，比任何宣传都有说服力。

互评与讨论 (4分钟)

师： 看完了三位同学的作品。我们今天用了一个新工具——Trae，做出了扣子里做不到的东西。

师： 最后一个问题：你觉得 Trae 跟扣子最大的区别是什么？一句话说。【诊断点：检测学生是否抓住了核心区别】【理解层】

（收集3-4个回答）

师： 总结得很好。用一句话说：扣子让你做"对话"，Trae让你做"产品"。

---

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

本幕目标：总结核心操作流程，制造下节课期待

抽象总结 (3分钟)

师： 今天我们认识了 Trae 这个新工具，学会了核心操作流程：

（板书/投屏）

Trae 五步操作法：
① 打开文件夹 → ② Builder对话 → ③ Accept代码 → ④ 浏览器预览 → ⑤ 不满意就迭代

你的角色 = 产品经理（想清楚要什么、说清楚、验收）
AI的角色 = 程序员（根据你的描述写代码）

师： 今天你们已经从"扣子用户"升级成了"Trae用户"——从"配置者"变成了"创造者"。记住今天最重要的一件事：你不需要会写代码，你只需要能说清楚你想要什么。 能表达 = 能实现。这学期我们会做出越来越厉害的东西，而你的"编程能力"其实就是你的"表达能力"。

5分钟挑战发布 + 下节预告 (2分钟)

师： 本周课外小挑战：

5分钟AI挑战： 回家用 Trae 做一个"家庭小工具"——给你的家人用。 比如：家务分配转盘、做作业倒计时器、每日心情记录器。 拍个截图或录个屏，下节课分享。

评价标准：

• 基础：做出一个能运行的网页
• 进阶：网页有交互功能（能点击、能输入）
• 挑战：给家人实际用了，并收到他们的反馈

师： 下节课我们学"提示词工程进阶"——今天你们可能发现，有时候AI做的不是你想要的。下节课我们就来解决这个问题，让你成为更厉害的"产品经理"。

---

5. AI助教使用指南

教师提示词模板（课前准备演示用）：

你是一个前端开发专家。请帮我创建一个 index.html 文件，包含一个简单的交互式网页游戏。
要求：
1. 所有代码在一个 index.html 文件中（内联CSS和JS）
2. 界面简洁美观，有渐变背景
3. 适合在浏览器中直接双击打开运行
4. 不使用任何外部库或CDN
5. [具体游戏描述]

学生提示词模板（参考）：

帮我创建一个 index.html 文件，做一个[什么东西]：
1. [功能1]
2. [功能2]
3. [功能3]
4. 界面要好看，用[你喜欢的风格]

---

6. 教师指南

技术备注（教师备课知识补充）：

1. Trae 的 Builder vs Chat 区别：Builder 模式可以直接创建/修改文件，代码变更需要点 Accept 确认；Chat 模式只是聊天，不会直接改文件。本课统一用 Builder。
2. Accept 机制：AI 在 Builder 中生成代码后，会高亮显示变更的部分（绿色=新增，红色=删除）。学生需要点"Accept All"或逐个文件Accept。如果不满意可以点"Reject"拒绝。
3. 文件预览方式：最简单的方式是在文件资源管理器（Windows资源管理器，不是Trae内的）中找到 index.html 双击打开。也可以在Trae内右键文件选择"在浏览器中打开"。
4. "一个文件"策略：本阶段所有代码都放在单个 index.html 中（内联CSS和JS），避免多文件管理增加复杂度。
5. 网络依赖：Trae 的AI功能需要联网。如果课堂网络不稳定，提前准备好离线备用的 index.html 文件。

常见问题 FAQ：

学生问题	建议回答
"Builder 和 Chat 到底有什么区别？"	Builder 是干活的——它会帮你创建和修改文件。Chat 是聊天的——你问它问题，它回答，但不直接改文件。今天我们用 Builder
"为什么AI做的和我说的不一样？"	因为描述还不够具体。下节课我们专门学怎么说得更准确。现在你可以继续跟AI说"这里不对，我要的是XX"
"代码看不懂怎么办？"	完全正常！你是产品经理，不需要看懂每一行代码。就像你去餐厅点菜，不需要知道厨师怎么炒的
"Accept 了之后不满意怎么办？"	在 Builder 里继续说你要改什么。AI会帮你修改。也可以用 Ctrl+Z 撤销
"我能在家里用Trae吗？"	可以！Trae 是免费的，你回家可以下载安装继续用
"这个和ChatGPT有什么区别？"	ChatGPT 帮你写文字、回答问题。Trae 帮你写可以运行的程序——有界面、能点击、能互动的那种

备课体验任务清单：

• 在 Trae 中完整走一遍：新建文件夹 → Builder对话 → Accept → 预览
• 做一个"反应力测试游戏"（课堂演示用）
• 准备3个保底提示词（猜数字/倒计时器/个人介绍页）并验证可用
• 准备1个预制 index.html（AI翻车时的备用）
• 在校区每台电脑上确认 Trae 可正常启动、Builder可用
• 测试校区网络环境下 Trae AI 的响应速度（如果超过30秒需要考虑备用方案）

---

7. 5分钟日常AI挑战

本周任务：

"我的家庭小工具"

操作步骤：

1. 打开 Trae，创建一个新文件夹叫"家庭小工具"
2. 在 Builder 里描述你想做的工具（倒计时器、分配转盘、心情日记等）
3. 点 Accept 接受代码，在浏览器中打开看效果
4. 不满意的地方跟AI说要改什么
5. 给家人看你的作品

评价标准：

• 基础：做出一个能在浏览器中打开的网页
• 进阶：网页有交互功能（能点击、能输入、能显示结果）
• 挑战：给家人实际使用并获得反馈，截图分享

---

8. 拓展任务

进阶挑战（适合学有余力的学生）：

挑战一：迭代升级

回到你课堂上做的作品，在 Builder 里跟AI说"帮我加一个XX功能"。比如加排行榜、加音效、加深色/浅色模式切换。体验"迭代"的感觉。

挑战二：换一个方向

如果课上做的是游戏，试着做一个工具；如果做的是工具，试着做一个创意页面。用同样的 Trae 五步操作法，感受不同类型项目的提示词差异。

挑战三：代码考古

打开你的 index.html，在 <style> 区域找到控制背景颜色的代码，手动改成你喜欢的颜色，Ctrl+S 保存后刷新浏览器看效果。恭喜你完成了一次"手动编程"。