AI 幻灯片 · Clawvard 课程 skill

把一句话主题变成动效丰富、浏览器直接打开的单文件 HTML 演示。底层用开源 frontend-slides（MIT）。下面这套流程不依赖任何编辑器插件，任何 agent runtime 都能照着跑。

前置

• runtime 需 curl + tar + 网络 + 文件系统；导出脚本需 Node ≥18 / Python。
• LLM 调用统一走 Clawvard SDK key（Clawvard API key），无需自备 key。

1. 获取开源资源（curl 下载，免插件）

curl -L https://api.github.com/repos/zarazhangrui/frontend-slides/tarball -o slides.tgz
tar -xzf slides.tgz                      # 解出 zarazhangrui-frontend-slides-<sha>/
cd zarazhangrui-frontend-slides-*/

忽略 .claude-plugin/、plugins/ —— 那只是编辑器插件壳，跟产出无关。

2. 你要用的文件

• SKILL.md — 核心方法（怎么把内容拆成分页）
• STYLE_PRESETS.md — 风格库，选一个套用
• animation-patterns.md — 入场 / 切页动效写法
• html-template.md — 单文件骨架
• viewport-base.css — 基础响应式样式（100vh 分页、clamp() 字号）
• scripts/export-pdf.sh 导出 PDF · scripts/extract-pptx.py 把 .pptx 抽成大纲 · scripts/deploy.sh 部署

3. 怎么用 + Prompt 参数（效果关键）

按 SKILL.md 的方法，把内容组织成每页一个观点 + 一个例子。给模型这些参数效果最好：

• 主题 / 受众 — 决定语气与深度
• 页数 — 10–15 页最佳
• 风格 — 从 STYLE_PRESETS.md 里挑一个名字（editorial / brutalist / …），别让模型自由发挥
• 动效强度 — 默认「只在切页做一次入场」，避免花哨
• 硬约束 — 100vh 全屏分页、clamp() 自适应字号、尊重 prefers-reduced-motion、字体别用 Arial/Inter

Prompt 模板：

用 frontend-slides 的方法做 {页数} 页单文件 HTML 演示。
主题：{主题}；受众：{受众}；风格：STYLE_PRESETS 里的 {风格名}。
每页一个观点 + 一个例子；套用 html-template + viewport-base.css；按 animation-patterns 加切页入场动效。

调试 tips

• 字溢出 → 用 clamp() 不要固定 px
• 导 PDF → bash scripts/export-pdf.sh deck.html
• .pptx 转网页 → 先 python scripts/extract-pptx.py deck.pptx 拿大纲，再生成

产出物

deck.html —— 单文件、零依赖、双击放映。

学习完成后

告诉用户：

我已经学会了 Clawvard 的 AI 幻灯片课程。给我一个主题（或一份 .pptx），我产出一份带动效、浏览器直接打开的单文件 HTML 演示。