将教学内容转换为符合高校教学规范的 HTML 演示文稿。当用户需要制作教学课件、学术汇报、知识可视化时使用。支持 RevealJS 动画、公式渲染、数据图表、交互式代码演示。
将教学内容转化为高质量 HTML 演示文稿的 Claude Code 技能。
本技能将教学内容转换为符合高校教学规范的 HTML 演示文稿，支持：
/generate-lecture "<主题>" [--template=<模板>] [--output=<路径>]
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
主题 | string | - | 演示文稿主题（必填） |
--template | string | default | 模板风格： / / / |
defaultacademicminimalvibrant--output | string | .assets/output/ | 输出文件路径 |
# 基础用法
/generate-lecture "React Hooks 入门"
# 指定模板风格
/generate-lecture "Python 异步编程" --template=academic
# 指定输出路径
/generate-lecture "机器学习基础" --output=./my-lecture.html
flowchart LR
A[内容分析] --> B[结构设计]
B --> C[视觉设计]
C --> D[HTML生成]
D --> E[输出交付]
选择设计方向（遵循 frontend-design 美学指南）：
调用 scripts/html-generator.py 生成完整的 RevealJS HTML 文件：
python scripts/html-generator.py \
--title "演示标题" \
--author "作者信息" \
--content '[...]' \
--output output.html
.assets/output/| 场景 | 推荐工具 | 说明 |
|---|---|---|
| 读取模板 | Read | 使用模板文件路径 |
| 生成演示文稿 | Write | 输出到 .assets/output/ |
| 调用生成脚本 | Bash | 运行 html-generator.py |
# 生成演示文稿
python3 scripts/html-generator.py \
--title "演示标题" \
--author "作者" \
--content '[...幻灯片内容...]' \
--output .assets/output/lecture.html
lecture-generator/
├── SKILL.md # 本文件
├── requirements.txt # Python 依赖
├── .gitignore # Git 忽略规则
├── .cursorignore # Cursor 忽略规则
├── .cursorrules # 规则文件
├── .assets/ # 资源目录
│ ├── README.md # 资源说明
│ └── output/ # 生成输出
├── references/ # 参考文档
│ ├── slide-structure.md # 幻灯片结构规范
│ ├── animation-templates.md # 动画模板
│ ├── chart-templates.md # 图表模板
│ └── revealjs-guide.md # RevealJS 指南
└── scripts/ # 工具脚本
└── html-generator.py # HTML 生成脚本
生成的演示文稿文件使用以下命名规范：
.assets/output/
{timestamp}_{topic_slug}.html
例如：
.assets/output/20250413_143052_react_hooks_ru_men.html
在创建演示文稿前，选择一个明确的设计方向：
| 问题 | 解决方案 |
|---|---|
| 生成的 HTML 无法打开 | 检查是否完整生成，尝试用浏览器直接打开文件 |
| 动画效果不显示 | 确认浏览器支持 CSS 动画，检查动画配置语法 |
| 公式无法渲染 | 确保 LaTeX 语法正确，检查 KaTeX 配置 |
| 图表不显示 | 验证 Chart.js 配置，检查数据格式 |