切换上机材料（4 篇）
本页目录
开始之前先看上机导航“开始之前”一节：在终端里用 Claude Code；要交什么见导航页“做完要交什么”。
🎬 讲解录播
时长 6 分 00 秒，带讲解和字幕。播放器右下角可以全屏。
分段导览
点击时间会打开视频对应位置，不是同页播放器内跳转。导言之外，左侧节点对应六步操作。
| 时间 | 步骤 | 看什么 |
|---|---|---|
| 0:00 | 导言 | 场景、材料、要回答的问题，六步流程和两个观看重点 |
| 0:56 | 建项目 | 新建任务，选择工作空间“网页演示练习”；看一眼默认权限 |
| 1:24 | 装入技能 | 让 WorkBuddy 克隆课程仓库，把整个 html-slides 文件夹复制到项目的 .workbuddy/skills/ |
| 2:13 | 确认看得到 | 新建任务、重选工作空间，输入 /html 在弹出的技能列表里看到 html-slides |
| 2:55 | 自然说话 | 不提技能名，只说要做什么；展开过程，找到“查看 SKILL.md”这一步 |
| 4:18 | 点名调用 | 用 /html-slides 点名，加一页“三条找实习建议”；核对出处 |
| 5:15 | 读 SKILL.md | 查看工作空间，打开 SKILL.md，认出 name、description 和正文 |
录播说明
- 视频使用 WorkBuddy 图形界面，默认权限下写文件、跑命令没有逐次弹出批准。安装这一步让 WorkBuddy 代为克隆和复制；手动下载 ZIP、解压、拖文件夹的做法见上机材料第 2–4 步。
- 等待画面已加速（安装 5 倍、自然说话生成 22 倍、点名修改 18 倍），操作间停顿已压缩。本次自然说话这一轮，WorkBuddy 先写了一版，发现项目里装着
html-slides，读了SKILL.md后按 Skill 的版式重做；每次的过程不一定相同。
准备
材料包 01_网页演示/素材/ 里有两份背景资料：背景_经济金融类实习市场_教学模拟.md、背景_岗位类别与技能说明.md（教学模拟材料）。
第 0 步：建项目文件夹
做什么
- 在你平时放作业的位置（桌面、文档，或之前建的
agent-lab都可以）新建一个文件夹，起名网页演示练习。 - 在
网页演示练习里面再建一个文件夹素材，把材料包里那两份背景资料拷进去。 - 打开 VS Code，菜单“文件 → 打开文件夹”，选
网页演示练习，点“打开”。弹出“是否信任此文件夹的作者”时选“是，我信任此作者”。 - 菜单“终端 → 新建终端”，在下方终端里输入
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 步：打开课程仓库页
做什么：浏览器打开 https://github.com/ai-lingnan/sysu-awesome-cc。页面中间是文件列表，点进 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 里，先退出它，或另开一个终端）：
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。三种做法任选：
- 在 VS Code 里（推荐）：鼠标移到左侧文件栏标题
网页演示练习那一行，点出现的“新建文件夹”图标，输入.claude回车；右键.claude→ “新建文件夹”，输入skills回车。然后从访达或资源管理器里，把html-slides文件夹拖到 VS Code 文件栏的skills上，松手后 VS Code 会复制一份进去。VS Code 文件栏里以点开头的文件夹是看得见的。 - 让 Claude Code 建文件夹：对它说“在当前项目里新建
.claude/skills文件夹”，它会请你批准，批准后，再用访达或资源管理器把html-slides拖进去。 - 全在访达或资源管理器里做：先让隐藏文件夹显示出来（见下面的常识框），再新建、拖动。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 启动之后才建的，要退出再启动一次，它才会去读这个文件夹。
做什么
- 在运行 Claude Code 的终端里按一次
Ctrl + C，最下面出现Press Ctrl-C again to exit；紧接着再按一次Ctrl + C，Claude Code 退出，回到命令行提示符（一行以%、$或>结尾、光标在后面闪的文字）。 - 输入
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 步；还不行看常见问题。也可以直接问它“你有哪些技能可用”，让它列出来。
用 WorkBuddy 的：没有 /skills 命令。在输入框里打 /html，上方弹出“技能”列表，其中一行是 html-slides，后面是它的描述（“制作与修改可在浏览器放映的 HTML 课件……”）。看到后把输入框清空，不要发送。
第 7 步：自然说话，让它自己来一次
做什么：在输入框里粘贴下面这段话，回车。
把 素材/ 里的两份背景资料做成一份 6 页左右的网页演示文稿，给同学介绍经济金融类实习市场。
不要配图，不做截图审阅，不导出 PDF，只做 HTML。
它开始干活前，屏幕上会出现这样两行：
⏺ 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 步：点名，再让它来一次
做什么：输入下面这段话，回车。
/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）。已经跟老师带做过的那一份，直接交那一份。