任务一：用 WorkBuddy 打造学科主题网站

一句话结论：这不是「学软件」，是「做完一件事」——跟着 10 个步骤走，你会得到一个图文并茂、可发给家长学生的学科主题网站。

任务卡

材料清单

先看别人跑完的样子

WorkBuddy 跑真实任务的完整记录（搭建教师智能工作台，35 分钟、免费模型、0 积分）——你要经历的「拆步骤 → 调工具 → 交付文件」过程就是这样的：

步骤 1：领取模板，放进工作文件夹

目标：把素材包放到一个 WorkBuddy 能读到的文件夹里。

1. 在桌面新建文件夹，命名 my-class-site；
2. 从本站下载学科模板（语文版），把压缩包里的所有文件解压到 my-class-site 里；
3. 解压后文件夹里应有：index.html、css 文件夹、images 文件夹。

【截图位 S1】解压完成后的 my-class-site 文件夹内容（应能看到 index.html 和两个文件夹）

✓ 检查点：双击 index.html，浏览器里能看到模板页面（哪怕是占位内容）。

注意：常见坑：解压出两层文件夹（my-class-site/语文模板/index.html）——把内层文件全部拖到外层即可。

步骤 2：让 WorkBuddy「看见」这个文件夹

目标：把工作目录交给 WorkBuddy。

1. 打开 WorkBuddy，新建对话；
2. 把 my-class-site 文件夹直接拖进对话窗口（或用「添加文件/文件夹」按钮选中它）；
3. 输入第一句话确认它能读到：

读取这个文件夹，告诉我里面有什么文件，分别是什么用途。

【截图位 S2】WorkBuddy 回答文件清单的界面

✓ 检查点：它能准确说出 index.html 是首页、css 是样式、images 是图片。

注意：常见坑：如果它说「读取失败」，检查文件夹是否被 iCloud「仅云同步」占用了——右键文件夹选「立即下载」。

步骤 3：第一次改版——换标题和配色

目标：让模板变成「你的」。直接照抄这段话术（把引号里的内容换成你的）：

请修改 index.html：
1. 把网站标题改为「晓风语文角」
2. 主配色从蓝色换成暖金色（#FEB300）+ 深紫色（#750F6D）
3. 首页大标题下一行加一句副标题：「读经典，见众生」
改完后告诉我改了哪几个文件的哪几处。

【截图位 S3】你发送的话术（展示给老师看「话术长什么样」）

【截图位 S4】WorkBuddy 回复的修改清单

✓ 检查点：去浏览器刷新 index.html（⌘R），标题和配色已变。

注意：常见坑：没刷新浏览器就以为失败了——网页不会自己变，永远记得 ⌘R。

步骤 4：替换图文内容

目标：把占位文章换成你的真实内容。

1. 把你选好的 2-3 篇文章（文字 + 配图）放进 images 文件夹和对话里；
2. 发送话术：

请把首页「最新文章」栏目替换为我提供的 3 篇内容：
- 每篇显示：标题、一句话摘要、配图、阅读全文按钮
- 图片统一裁剪为 16:9 比例，宽度一致
- 手机上看也要排版整齐（Responsive Design）

【截图位 S5】替换内容后的首页效果（浏览器整页截图）

✓ 检查点：三篇文章都在，图片大小一致，把浏览器窗口拖窄版式不乱。

注意：常见坑：一次只给它一个栏目，全塞一句话术容易顾此失彼。

步骤 5：加入音视频

目标：让网站「会说话、会动」。

1. 音频（如课文朗诵）：把 mp3 放进 my-class-site/media 文件夹；
2. 发送话术：

请在「诵读亭」栏目加入音频播放器，播放 media 文件夹里的 mp3，
样式与网站一致，显示音频标题和时长。

3. 视频：B 站/腾讯视频的课件视频，不需要下载，直接用嵌入代码：

请在这一页嵌入这个 B 站视频：<粘贴视频分享链接里的嵌入代码>

【截图位 S6】带播放器的栏目页

✓ 检查点：在浏览器里点播放能出声。

注意：常见坑：音视频文件名别用中文和空格（shiting-01.mp3 ✓，课文朗读 1.mp3 ✗）。

步骤 6：手机端检查

目标：家长大多用手机看，必须过这一关。

1. 把浏览器窗口拖到手机宽度（约 400px），逐页检查；
2. 发现问题直接告诉它：

手机宽度下「最新文章」的图片把文字挤没了，请修复移动端排版，
保证 375px 宽度下图文上下排列、按钮可点。

【截图位 S7】浏览器手机宽度下的效果（开发者工具手机模式更好）

✓ 检查点：手机宽度下文字不被图片遮挡、按钮间距足够手指点击。

步骤 7：让 WorkBuddy 自己当质检员

目标：用 AI 检查 AI，省下你逐行看代码的时间。

请对整个网站做一次质量检查，逐项回答：
1. 每个链接都能打开吗？
2. 有没有错别字？
3. 图片是否全部正常显示？
4. 手机端还有哪些问题？
只报告问题，不用修改，等我确认。

【截图位 S8】它的质检报告

✓ 检查点：报告里列出的问题你都看得懂；有疑问的条目追问它。

步骤 8：保存你的「网站配方」

目标：这次对话里的好话术，固化成 Skill，下次换学科直接复用。

请把本次建站过程整理成一个 Skill，命名 subject-site-builder：
包含步骤流程、每步的话术模板、检查清单、常见坑。
下次我只需要给你学科名和内容，你按这个流程自动执行。

【截图位 S9】Skill 固化成功的回复

✓ 检查点：它确认 Skill 已保存（方法见 Prompt 与 Skill）。

步骤 9：发布给家长学生看

目标：让网站离开你的电脑也能访问。三选一：

【截图位 S10】发布后的网站地址在手机上打开的效果

步骤 10：领取「任务徽章」 ✓

完成标准（全部满足即可打勾）：

• 网站有你的标题、配色、副标题
• 至少 3 篇图文内容
• 至少 1 个音频或视频
• 手机端检查通过
• 固化了 subject-site-builder Skill

做完这个任务，你实际已经学会了：给 Agent 喂文件夹、分步下需求、验收产出、固化 Skill——换任何一个学科、任何一种网站，流程一模一样。

待补充（需要吴老师确认/补充）

• 模板文件上传（语文/数学/英语/科学 4 套，我可以先写出来给你过目）
• 界面截图 S1-S10（按上面编号截图，或授权我远程操作截取）
• WorkBuddy 实际按钮名称与我写的描述是否一致（不同版本界面可能有差异）
• 任务二「教师工作台」是否按同样格式开写？