29 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 1 | 从扣子到代码 |
|
|
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个经过验证的"保底提示词"（学生想不出来时用）
- 学生资源：无需提前准备
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 在 Trae IDE 中完整走一遍：打开 → 新建项目 → Builder 对话 → 接受代码 → 预览网页
- 用 Trae 做一个"反应力测试游戏"，记录全过程和遇到的问题
- 故意给 Trae 一个模糊指令（如"帮我做个游戏"），观察生成质量，准备对比演示
- 确认校区每台电脑的 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分钟):
师： 现在跟我做三步，确认你找到了这些地方：
- 点左边的AI图标 ——看到AI对话面板了吗？
- 在AI面板上方找到 Builder 和 Chat 两个标签——点 Builder，确认切换到了 Builder 模式
- 再点左边的文件图标 ——看到文件管理器了吗？
（教师走动检查，重点关注找不到AI图标或分不清Builder/Chat的学生）
师： 有人找不到的举手，我来帮你。
进度同步 (2分钟):
师： Builder模式打开的同学举手？好。记住：最重要的是右边的AI面板，用Builder模式。其他的先不管。【诊断点：检测学生是否记住了核心区域】【识别层】
【分段二：新建项目 + 第一次AI对话】(15分钟)
本段重点：走完"新建项目 → AI生成代码 → 预览网页"的完整流程
讲解与演示 (5分钟):
预设误概念：
- M2: 写代码很难
师： 好，在我们动手之前，先搞清楚一个非常重要的概念——"项目"。
师： 你们平时在电脑上用文件夹存东西对吧？一个文件夹里放几张图片、几个文档。你也经常用浏览器上网，打开各种网页。那 Trae 里的"项目"和这些有什么区别？
（停顿，让学生思考）
师： 这样理解——文件夹就是一个抽屉，你把东西往里面一放就行。浏览器是一个窗户，你通过它看别人做的东西。但项目不一样，项目是一个工作间——你在里面创造东西。
师： 打个比方：你做手工的时候，需要一张工作台，把材料、工具都放在台上，然后在这上面做出你的作品。Trae 的"项目"就是这张工作台。你不在里面开一个项目，AI就不知道把代码往哪里放，你也没法预览你做的东西。
师： 所以记住：每次做新东西，第一步永远是开一个新项目。 不开项目就跟AI说话，就像站在空地上跟装修工人说"帮我装修"——装修哪里？没有房子你装修什么？
师： 好，现在我们来走一遍完整的流程。从零开始，做出一个网页。跟我一步一步来。
第一步：新建项目文件夹
师： 在 Trae 里，我们需要先给项目建一个"工作台"——就是在桌面上新建一个文件夹，然后让 Trae 打开它。
操作步骤：
- 点击菜单 文件 → 打开文件夹（或者用快捷键 Ctrl+K Ctrl+O）
- 在弹出的窗口里，导航到桌面
- 点右键 → 新建文件夹，命名为
我的第一个网页 - 选中这个文件夹，点确认/打开
师： 看左边的文件管理器——现在应该显示了你的文件夹名字，里面还是空的。这就是你的"工作台"准备好了，等着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代码 → 浏览器预览。
关键提醒：
- 提示词写到4条以上——越具体，AI做出来的东西越接近你想要的
- 做完后如果不满意，继续在Builder里跟AI说要改什么
- 做完的同学可以叫旁边的同学来试用你的作品
师： 时间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它是什么意思。
任务二：手动改一个颜色
师： 接下来做一件更酷的事——你亲手改一下代码。
- 在代码编辑器里按 Ctrl+F（搜索）
- 输入
color，看看代码里有几个跟颜色相关的地方 - 找到一个颜色值（比如
#3498db、blue、red这样的词） - 把它改成你喜欢的颜色（比如改成
pink、gold、#ff6600） - 按 Ctrl+S 保存，然后去浏览器刷新页面
师： 看到变化了吗？你刚才做了一件事——手动改了一行代码。这证明代码不是黑盒子，你是可以碰它的。以后AI写的代码不满意，你甚至可以自己动手微调。
（教师走动协助，帮助找不到颜色值的学生）
进度同步 (2分钟 - 从分段一省出的时间):
师： 谁成功改了颜色？改成了什么颜色？
（让1-2个学生分享）
师： 记住两个方法——代码看不懂？问AI。代码想微调？Ctrl+F搜索，手动改，Ctrl+S保存，刷新看效果。【诊断点：检测学生是否掌握了"问AI"和"手动微调"两个习惯】【识别层】
第三幕：反思 (Contemplate) — 10分钟
本幕目标：展示成果，巩固 Trae 操作流程和核心认知
成果展示 (6分钟)
师： 请3位同学来前面展示你的作品。展示时说两件事：
- 你做了什么，简单演示一下
- 你跟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. 教师指南
技术备注（教师备课知识补充）：
- Trae 的 Builder vs Chat 区别：Builder 模式可以直接创建/修改文件，代码变更需要点 Accept 确认；Chat 模式只是聊天，不会直接改文件。本课统一用 Builder。
- Accept 机制：AI 在 Builder 中生成代码后，会高亮显示变更的部分（绿色=新增，红色=删除）。学生需要点"Accept All"或逐个文件Accept。如果不满意可以点"Reject"拒绝。
- 文件预览方式：最简单的方式是在文件资源管理器（Windows资源管理器，不是Trae内的）中找到 index.html 双击打开。也可以在Trae内右键文件选择"在浏览器中打开"。
- "一个文件"策略：本阶段所有代码都放在单个 index.html 中（内联CSS和JS），避免多文件管理增加复杂度。
- 网络依赖：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挑战
本周任务：
"我的家庭小工具"
操作步骤：
- 打开 Trae，创建一个新文件夹叫"家庭小工具"
- 在 Builder 里描述你想做的工具（倒计时器、分配转盘、心情日记等）
- 点 Accept 接受代码，在浏览器中打开看效果
- 不满意的地方跟AI说要改什么
- 给家人看你的作品
评价标准：
- 基础：做出一个能在浏览器中打开的网页
- 进阶：网页有交互功能（能点击、能输入、能显示结果）
- 挑战：给家人实际使用并获得反馈，截图分享
8. 拓展任务
进阶挑战（适合学有余力的学生）：
挑战一：迭代升级
回到你课堂上做的作品，在 Builder 里跟AI说"帮我加一个XX功能"。比如加排行榜、加音效、加深色/浅色模式切换。体验"迭代"的感觉。
挑战二：换一个方向
如果课上做的是游戏，试着做一个工具；如果做的是工具，试着做一个创意页面。用同样的 Trae 五步操作法，感受不同类型项目的提示词差异。
挑战三：代码考古
打开你的 index.html，在
<style>区域找到控制背景颜色的代码，手动改成你喜欢的颜色，Ctrl+S 保存后刷新浏览器看效果。恭喜你完成了一次"手动编程"。