--- 课时: 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**。 （教师演示） **师：** 比如我在代码里看到一个 `