---
title: "W04 上机练习一：从 GitHub 装 html-slides，做一份网页演示文稿"
---
# 🧪 练习一：从 GitHub 装 html-slides，做一份网页演示文稿
[上机导航](https://ai.lingnan.top/materials/2026-autumn/w04/lab-manual) · [常见问题](https://ai.lingnan.top/materials/2026-autumn/w04/faq)
开始之前先看[上机导航](https://ai.lingnan.top/materials/2026-autumn/w04/lab-manual)“开始之前”一节：在终端里用 Claude Code；要交什么见导航页“做完要交什么”。
## 🎬 讲解录播
时长 6 分 00 秒，带讲解和字幕。播放器右下角可以全屏。
### 分段导览
点击时间会打开视频对应位置，不是同页播放器内跳转。导言之外，左侧节点对应六步操作。
| 时间 | 步骤 | 看什么 |
| --- | --- | --- |
| [0:00](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=0.000000) | 导言 | 场景、材料、要回答的问题，六步流程和两个观看重点 |
| [0:56](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=56.267000) | 建项目 | 新建任务，选择工作空间“网页演示练习”；看一眼默认权限 |
| [1:24](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=84.067000) | 装入技能 | 让 WorkBuddy 克隆课程仓库，把整个 html-slides 文件夹复制到项目的 .workbuddy/skills/ |
| [2:13](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=133.067000) | 确认看得到 | 新建任务、重选工作空间，输入 /html 在弹出的技能列表里看到 html-slides |
| [2:55](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=175.567000) | 自然说话 | 不提技能名，只说要做什么；展开过程，找到“查看 SKILL.md”这一步 |
| [4:18](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=258.600000) | 点名调用 | 用 /html-slides 点名，加一页“三条找实习建议”；核对出处 |
| [5:15](/course-materials/2026-autumn/w04/media/ex1-demo.mp4#t=315.200000) | 读 SKILL.md | 查看工作空间，打开 SKILL.md，认出 name、description 和正文 |
### 录播说明
- 视频使用 WorkBuddy 图形界面，默认权限下写文件、跑命令没有逐次弹出批准。安装这一步让 WorkBuddy 代为克隆和复制；手动下载 ZIP、解压、拖文件夹的做法见上机材料第 2–4 步。
- 等待画面已加速（安装 5 倍、自然说话生成 22 倍、点名修改 18 倍），操作间停顿已压缩。本次自然说话这一轮，WorkBuddy 先写了一版，发现项目里装着 `html-slides`，读了 `SKILL.md` 后按 Skill 的版式重做；每次的过程不一定相同。
## 准备
材料包 `01_网页演示/素材/` 里有两份背景资料：`背景_经济金融类实习市场_教学模拟.md`、`背景_岗位类别与技能说明.md`（教学模拟材料）。
## 第 0 步：建项目文件夹
**做什么**
1. 在你平时放作业的位置（桌面、文档，或之前建的 `agent-lab` 都可以）新建一个文件夹，起名 `网页演示练习`。
2. 在 `网页演示练习` 里面再建一个文件夹 `素材`，把材料包里那两份背景资料拷进去。
3. 打开 VS Code，菜单“文件 → 打开文件夹”，选 `网页演示练习`，点“打开”。弹出“是否信任此文件夹的作者”时选“是，我信任此作者”。
4. 菜单“终端 → 新建终端”，在下方终端里输入 `claude` 回车。第一次在这个文件夹里启动时，它会问你是否信任这个文件夹里的文件，用方向键选“是”的那一项（通常是第一项），回车。
**做对了会看到**：VS Code 左侧文件栏最上面是 `网页演示练习`，下面有 `素材`，展开能看到两份 `.md` 文件；下方终端里出现 Claude Code 的欢迎界面，第三行是你这个文件夹的路径，路径最后一段是 `网页演示练习`。
> 💡 **常识：文件夹、路径和“建项目”**
>
> 路径是一个文件夹一层层的地址。同一个文件夹，两种系统写法不同：
>
> | | 路径长什么样 | 分隔符 |
> | --- | --- | --- |
> | Mac | `/Users/你的用户名/Documents/网页演示练习` | `/` |
> | Windows | `C:\Users\你的用户名\Documents\网页演示练习` | `\` |
>
> Mac 的“文稿”就是 `Documents`；Windows 的“文档”也是。终端里的 `~` 代表你的用户文件夹（Mac 是 `/Users/你的用户名`，Windows 是 `C:\Users\你的用户名`）。
>
> “建项目”就是建一个文件夹，把这件事要用的文件都放进去，再用 VS Code 打开它、在里面启动 `claude`。在哪个文件夹启动 `claude`，它就把哪个文件夹当成项目。
## 第 1 步：打开课程仓库页
**做什么**：浏览器打开 。页面中间是文件列表，点进 `skills` 文件夹，里面每个子文件夹就是一个 Skill。点开 `html-slides`，能看到 `SKILL.md` 和 `assets`、`references`、`scripts` 等几个子文件夹。
**做对了会看到**：`skills` 下有十几个以英文小写和连字符命名的文件夹，其中有 `html-slides`、`macro-data`、`skill-creator`：
点开 `html-slides`，里面是 `assets`、`evals`、`references`、`scripts` 四个子文件夹和一个 `SKILL.md`：
> 💡 **常识：GitHub 是什么**
>
> GitHub 是放代码和文件的公共网站，一个项目叫一个“仓库”（repository）。看和下载公开仓库不用注册账号。
## 第 2 步：下载
两条路，任选一条。没用过 Git 命令的走路一。
**路一：下载 ZIP（推荐）**
回到仓库首页（点页面左上方的 `sysu-awesome-cc` 仓库名即可回去），点文件列表右上方的绿色 **Code** 按钮，在弹出的菜单最下面点 **Download ZIP**。浏览器会下载一个 `sysu-awesome-cc-main.zip`（约 1 MB），一般在“下载”文件夹里。
**路二：用 Git 克隆（会用 Git 的）**
在终端里运行（不是在 Claude Code 里，先退出它，或另开一个终端）：
```bash
git clone https://github.com/ai-lingnan/sysu-awesome-cc.git
```
也可以直接对 Claude Code 说：“把 https://github.com/ai-lingnan/sysu-awesome-cc 克隆到我的‘下载’文件夹。”克隆得到的是普通文件夹，不用解压，跳到第 3 步最后一句去找 `html-slides`。以后仓库更新了，在这个文件夹里运行 `git pull` 就能拿到新版。
> 💡 **常识：下载与“下载”文件夹**
>
> 浏览器下载的文件默认放在“下载”文件夹：Mac 是访达左侧的“下载”（`/Users/你的用户名/Downloads`），Windows 是资源管理器左侧的“下载”（`C:\Users\你的用户名\Downloads`）。找不到时，点浏览器右上角的下载图标，再点文件旁的“在文件夹中显示”。
## 第 3 步：解压
> 💡 **常识：ZIP 与解压**
>
> ZIP 是把一堆文件和文件夹打成一个包，方便下载。用之前要“解压”，还原成普通文件夹。
**做什么**
| | 操作 | 解压后的样子 |
| --- | --- | --- |
| Mac | 在访达里双击 `sysu-awesome-cc-main.zip` | 旁边出现文件夹 `sysu-awesome-cc-main`，里面就是 `skills` 等。用 Safari 下载的，可能已经自动解压好了 |
| Windows | 右键 ZIP → “全部解压缩…”（Windows 11 右键菜单里直接有；没有就先点“显示更多选项”）→ “提取” | 出现文件夹 `sysu-awesome-cc-main`，**里面还有一层同名文件夹** `sysu-awesome-cc-main`，再往里才是 `skills` |
进 `skills`，找到 `html-slides` 文件夹，点进去确认里面有 `SKILL.md`。
**做对了会看到**：一个普通的 `html-slides` 文件夹，里面有 `SKILL.md` 和 `assets`、`evals`、`references`、`scripts` 四个子文件夹，和第 1 步在网页上看到的一样。文件夹图标上没有拉链标记，地址栏里没有 `.zip` 字样（有的话，你看到的还是压缩包里面）。
⚠️ Windows 上直接双击 ZIP，看到的是“预览”，不是解压。从预览窗口里拖出来的文件夹可能缺文件。一定先“全部解压缩”。
## 第 4 步：把技能文件夹拷到对的位置
Claude Code 在两个位置找 Skill：
| 位置 | 路径 | 效果 |
| --- | --- | --- |
| **项目级（本练习用）** | 项目文件夹里的 `.claude/skills/` | 只在这个项目里能用，跟着项目走，可以连同项目发给组员 |
| 个人级 | Mac：`/Users/你的用户名/.claude/skills/`；Windows：`C:\Users\你的用户名\.claude\skills\` | 这台电脑上所有项目都能用 |
用 Codex 的同学：项目级是 `.agents/skills/`，个人级是 `~/.agents/skills/`（`~` 见第 0 步常识框）。下文凡写 `.claude/skills/` 的，Codex 换成 `.agents/skills/`。
用 WorkBuddy 的同学：项目级是 `.workbuddy/skills/`，个人级是 `~/.workbuddy/skills/`；WorkBuddy 不读 `.claude/skills/`。下文凡写 `.claude/skills/` 的，WorkBuddy 换成 `.workbuddy/skills/`。也可以在 WorkBuddy 里选好 `网页演示练习` 作为工作空间，对它说：“把课程仓库 https://github.com/ai-lingnan/sysu-awesome-cc 克隆到我的‘下载’文件夹，再把里面 skills/html-slides 整个文件夹复制到当前项目的 .workbuddy/skills/ 下。只装这一个技能，不改其他文件。”WorkBuddy 默认权限下不会逐次请你批准，做完后按下面“做对了会看到”核对路径。
**做什么**：在 `网页演示练习` 里建出 `.claude/skills/` 两层文件夹，再把第 3 步找到的**整个** `html-slides` 文件夹放进 `skills`。三种做法任选：
1. **在 VS Code 里（推荐）**：鼠标移到左侧文件栏标题 `网页演示练习` 那一行，点出现的“新建文件夹”图标，输入 `.claude` 回车；右键 `.claude` → “新建文件夹”，输入 `skills` 回车。然后从访达或资源管理器里，把 `html-slides` 文件夹拖到 VS Code 文件栏的 `skills` 上，松手后 VS Code 会复制一份进去。VS Code 文件栏里以点开头的文件夹是看得见的。
2. **让 Claude Code 建文件夹**：对它说“在当前项目里新建 `.claude/skills` 文件夹”，它会请你批准，批准后，再用访达或资源管理器把 `html-slides` 拖进去。
3. **全在访达或资源管理器里做**：先让隐藏文件夹显示出来（见下面的常识框），再新建、拖动。Mac 访达不让直接把新文件夹命名成以点开头的名字，这种情况用做法 1 或 2 建。
**做对了会看到**：VS Code 文件栏里一层层展开是 `网页演示练习/.claude/skills/html-slides/SKILL.md`，`html-slides` 下面还有 `assets`、`references` 等子文件夹；`.claude` 和 `素材` 并排，都在 `网页演示练习` 下面一层。
两种常见的放错：
- 多了一层：`.claude/skills/sysu-awesome-cc-main/skills/html-slides/…`，把整个仓库拷了进去。
- 少了一层：`.claude/skills/SKILL.md`，只拷了文件，外面没有 `html-slides` 文件夹。
> 💡 **常识：隐藏文件夹**
>
> 名字以 `.` 开头的文件夹（如 `.claude`、`.git`）是放配置的，系统默认不显示，不是没有。要显示出来：
>
> - Mac 访达：按 `Command + Shift + .`（句点），再按一次恢复隐藏。
> - Windows 11 资源管理器：顶部“查看 → 显示 → 隐藏的项目”；Windows 10：顶部“查看”选项卡，勾选“隐藏的项目”。
> - VS Code 文件栏默认就显示。
## 第 5 步：退出，重新打开 Claude Code
`.claude/skills/` 是 Claude Code 启动之后才建的，要退出再启动一次，它才会去读这个文件夹。
**做什么**
1. 在运行 Claude Code 的终端里按一次 `Ctrl + C`，最下面出现 `Press Ctrl-C again to exit`；紧接着再按一次 `Ctrl + C`，Claude Code 退出，回到命令行提示符（一行以 `%`、`$` 或 `>` 结尾、光标在后面闪的文字）。
2. 输入 `claude` 回车，重新启动。
**做对了会看到**：按第一次后屏幕最下面出现 `Press Ctrl-C again to exit`；按第二次后 Claude Code 的界面消失，回到命令行提示符；再输入 `claude`，重新出现欢迎界面，输入框是空的，上一段对话不在屏幕上。
> 💡 **常识：按一次 Ctrl + C 和按两次；什么是“新会话”**
>
> - 按一次：它正在干活时是打断；输入框里有字时是清空；什么都没做时，屏幕提示“再按一次退出”。
> - 紧接着按第二次：退出 Claude Code。**按两次 Ctrl + C 只是退出**，还要再输入 `claude` 才算重新打开。
> - 退出后再输入 `claude` 启动，就是一个**新会话**：屏幕上没有上一次的对话，它重新读取项目规则和技能清单。旧对话没有丢，存在你电脑上，想接着上次聊，启动时输入 `claude --continue`（接最近一次）或 `claude --resume`（从列表里选），本练习不需要。
> - 用 VS Code 图形面板的：关掉面板，重新打开，点“新对话”。
> - 用 WorkBuddy 的：点左上角“新建任务”，在输入框下方重新选 `网页演示练习` 作为工作空间（新任务不会沿用上一次的工作空间），就是新会话。
## 第 6 步：确认它看得到
**做什么**：在 Claude Code 里输入 `/skills` 回车。
**做对了会看到**：弹出一个技能列表，其中一行是 `html-slides`，后面标着 `project`（项目级）和一个很小的 token 数（例如 `~40 tok`，这就是它平时常驻的那一行描述的大小）。按 `Esc` 关掉列表。
列表里没有 `html-slides`：回第 4 步核对那一串路径，确认做过第 5 步；还不行看[常见问题](/materials/2026-autumn/w04/faq)。也可以直接问它“你有哪些技能可用”，让它列出来。
用 WorkBuddy 的：没有 `/skills` 命令。在输入框里打 `/html`，上方弹出“技能”列表，其中一行是 `html-slides`，后面是它的描述（“制作与修改可在浏览器放映的 HTML 课件……”）。看到后把输入框清空，不要发送。
## 第 7 步：自然说话，让它自己来一次
**做什么**：在输入框里粘贴下面这段话，回车。
```txt
把 素材/ 里的两份背景资料做成一份 6 页左右的网页演示文稿，给同学介绍经济金融类实习市场。
不要配图，不做截图审阅，不导出 PDF，只做 HTML。
```
它开始干活前，屏幕上会出现这样两行：
```txt
⏺ Skill(html-slides)
⎿ Successfully loaded skill
```
这说明它读了你的话，自己判断这件事归 `html-slides` 管，打开了这个技能。之后它会写文件，每次写文件前可能请你批准（选 Yes 回车）。等它说做完了，在 VS Code 文件栏里找它生成的文件夹（一般叫 `html_deck_…`），里面有 `index.html`。
用 WorkBuddy 的：屏幕上不会出现 `Skill(html-slides)`，看过程里有没有它提到 `html-slides`、有没有一行“查看 SKILL.md”（点开“已完成”可以展开全部过程）。它可能先自己写一版，再发现项目里装了 `html-slides`，读完 `SKILL.md` 后按技能的版式重做；也可能先弹出几个确认问题，按你的要求选。生成的 HTML 文件名不固定，可能直接放在项目根目录。做完后右侧会自动打开预览，点一下预览再按方向键翻页。
**做对了会看到**：屏幕上出现过上面那两行；在访达或资源管理器里双击 `index.html`，浏览器打开一份暖纸色底、深红强调色、宋体标题的网页演示文稿；按键盘方向键 → ← 翻页，封面和目录能点。每个人做出来的标题、版式会不一样，下面是一次实测的封面：
> 💡 **常识：用浏览器打开 HTML**
>
> `.html` 文件就是网页，双击会用默认浏览器打开。没反应：右键 → “打开方式” → 选 Chrome 或 Edge。在 VS Code 里不能直接预览网页，要到访达或资源管理器里双击；VS Code 文件栏里右键文件，选“在访达中显示”（Windows 是“在文件资源管理器中显示”）可以跳过去。
它问要不要装 Playwright、要不要生成配图、要不要导出 PDF：回答“不要，只做 HTML”。这几步要另装程序，本练习不需要。
## 第 8 步：点名，再让它来一次
**做什么**：输入下面这段话，回车。
```txt
/html-slides 在最后加一页“给大二同学的三条找实习建议”，建议只能来自素材里写到的内容。
```
`/html-slides` 要写在最前面，后面空一格再写要求。输入 `/html` 时屏幕上会弹出候选，按 `Tab` 或回车可以补全。
用 WorkBuddy 的：在同一个任务里接着输入这段话，点发送。改完右侧预览会刷新，点一下预览，按 `End` 跳到最后一页。
**做对了会看到**：它不再自己判断，直接按 `html-slides` 干活。改完后回到浏览器，按 `F5`（Mac 按 `Command + R`）刷新，翻到最后一页，多了“三条找实习建议”，每条建议旁边能看出出自哪份素材：
两种用法的区别：第 7 步是**它自己想起来**，靠的是技能的描述和你的话对得上；第 8 步是**你点名**，不管你的话里有没有它认得的词，都用这个技能。它想不起来时，就点名。
## 第 9 步：打开 SKILL.md 读一遍
**做什么**：在 VS Code 文件栏点开 `.claude/skills/html-slides/SKILL.md`。用 WorkBuddy 的：右侧标签栏点“+”→“查看工作空间”，依次展开 `.workbuddy`、`skills`、`html-slides`，点开 `SKILL.md`；WorkBuddy 会把文件排版显示，两道 `---` 之间仍能看到 `name` 和 `description`，行号以 VS Code 为准。
**找出三样东西**
- 文件最上面两道 `---` 之间：`name: html-slides` 是技能的名字，和文件夹同名；`description:` 后面那段是描述。平时它常驻的就是这一段，靠它判断什么时候用这个技能。
- 第二道 `---` 以下是正文：它决定用这个技能以后才读。
- 正文里提到的 `references/…`、`scripts/…`、`assets/…` 文件，做到那一步才打开。
然后用自己的话写一句：这个技能在什么时候会被用上？
**做对了会看到**：文件第 1 行和第 4 行各是一道 `---`；第 2 行是 `name: html-slides`；第 3 行以 `description:` 开头，是一段中文，讲它做浏览器里放映的 HTML 课件、适用于网页演示文稿；第 4 行以下是正文。
到这里，练习一的操作做完了。
额外尝试（不交）：用你自己以前做过的一份简报素材，再用 `html-slides` 做一份，和当时不用 Skill 做的成品放在一起比一比。
## ✅ 练习一自查
- [ ] 路径对得上：`网页演示练习/.claude/skills/html-slides/SKILL.md`（Codex：`.agents/skills/html-slides/SKILL.md`；WorkBuddy：`.workbuddy/skills/html-slides/SKILL.md`）
- [ ] `/skills` 列表里有 `html-slides`（WorkBuddy：输入 `/html` 弹出的技能列表里有）
- [ ] 自然说话那次，屏幕上出现过 `Skill(html-slides)`（WorkBuddy：过程里提到 `html-slides` 并“查看 SKILL.md”）
- [ ] `/html-slides` 点名那次，最后一页加上了，内容能在素材里找到出处
- [ ] 双击 `index.html`，浏览器里能翻页
- [ ] 说得出 `name`、`description`、正文各在哪里，用一句话说出这个技能什么时候会被用上
**本练习要交**：交互记录（`/export` 导出的 `.txt` 或 `.md`，可多份）；网页演示文稿 HTML（有外部文件就把整个 `html_deck_…` 文件夹打成 ZIP）。已经跟老师带做过的那一份，直接交那一份。