Paper-to-Course Skill
将任意学术论文转换成交互式 HTML 课程 + Markdown 文档 + PPTX 演示文稿，一次调用自动生成全部三种输出。
使用方法
用户调用 skill 时传入 PDF 路径，skill 自动完成以下全部工作：
paper-to-course: /path/to/paper.pdf
无需额外指令，HTML + Markdown + PPTX 全部自动生成。
自动输出（三种同时生成）
| 输出 | 文件 | 说明 |
|---|
| HTML 课程 | index.html | 交互式单页，含时间线、对比表、公式拆解、对话动画、测验 |
| Markdown 文档 | README.md | 纯文本版，保留表格/公式/代码 |
| PPTX 演示文稿 | slides.pptx | 16 页组会汇报幻灯片 |
完整工作流（每次调用自动执行）
Step 0 — 验证论文内容（必须！）
在生成任何内容前，必须先读取 PDF 并验证论文主题。
这一步至关重要——如果论文主题与预期不符（如把自动驾驶安全论文误读成 CNN 架构论文），后续所有内容都会错误。
读取 PDF 后，必须提取并确认：
- 标题：论文原标题
- 作者/机构：论文作者和所属机构（可判断领域）
- Abstract：摘要内容（核心发现一句话）
- 关键词/CCS Concepts：论文的关键词（可判断研究领域）
然后向用户确认：
📄 论文主题确认
标题：<论文原标题>
作者：<作者>
摘要：<摘要前2-3句>
领域：<判断领域，如 CV/NLP/RL/安全等>
以上信息是否正确？如果论文主题不符，请告知我。
只有在用户确认或未提出异议后，才继续生成内容。
Step 1 — 读取论文
读取用户提供的 PDF 文件，提取论文内容：
- Abstract / Introduction / Related Work / Method / Experiments / Conclusion
- 核心贡献、方法细节、实验数据、对比方法
Step 2 — 生成课程目录结构
在课程目录（paper-to-course/[论文名]/）创建以下结构：
course-name/
├── _base.html ← HTML 模板头部（从 references/ 复制）
├── _footer.html ← HTML 模板尾部（从 references/ 复制）
├── build.sh ← 打包脚本
├── slides-config.json ← PPTX 幻灯片配置（必须同时生成！）
├── modules/
│ ├── module-01.html ← 问题与动机
│ ├── module-02.html ← 发展脉络
│ ├── module-03.html ← 主流方法对比
│ ├── module-04.html ← 本文方法详解
│ ├── module-05.html ← 实验与验证
│ └── module-06.html ← 局限与展望
├── styles.css ← 从 references/ 复制
└── main.js ← 从 references/ 复制
Step 3 — 生成 HTML 模块
为每个模块生成 HTML 文件，使用设计系统 CSS class（禁止内联样式）。
6 个模块内容要点：
Module 1: 问题与动机
- 背景问题与重要性
- 现有方法的瓶颈（3-4 个具体问题）
- 核心研究问题
- 为什么这个问题值得研究
Module 2: 发展脉络
- Literature Timeline 时间线（领域关键节点，含年份、方法、突破）
- 与其他方法的关键区别
Module 3: 主流方法对比
- Comparison Table（可交互，悬停显示详情）
- 各方法优缺点卡片
- 方法"对话"动画（Method Chat）
Module 4: 本文方法详解
- Architecture Diagram（可点击组件查看描述）
- 核心公式 Formula Breakdown（逐行通俗解释）
- 关键组件协作对话
Module 5: 实验与验证
- 主实验结果表格（数字精确到个位）
- Ablation Diagram（消融实验可视化）
- 分类型性能数据
Module 6: 局限与展望
- 当前局限性（3-4 条）
- 未来研究方向（3-5 条）
- 核心贡献总结
- 最终理解测验
Step 4 — 生成 PPTX 配置（必须！）
在课程目录生成 slides-config.json，内容为 16 页幻灯片配置：
{
"title": "论文标题",
"subtitle": "副标题 / 会议 / 年份",
"slides": [
{ "type": "title", "title": "...", "subtitle": "...", "note": "" },
{ "type": "outline", "title": "汇报提纲", "items": ["...", "..."] },
{ "type": "content", "title": "研究背景", "layout": "cards-3", "cards": [...] },
{ "type": "timeline", "title": "发展脉络", "items": [...] },
{ "type": "table", "title": "Benchmark 对比", "headers": [...], "rows": [...], "highlightRows": [3] },
{ "type": "flow", "title": "方法流程", "steps": [...] },
{ "type": "bars", "title": "消融实验", "items": [...] },
{ "type": "stats", "title": "核心结果", "stats": [...] },
{ "type": "limitations", "title": "局限与展望", "limitations": [...], "futureWork": [...] },
{ "type": "summary", "title": "总结", "items": [...] }
]
}
slides-config.json 支持的 slide type：
| type | 说明 | 关键字段 |
|---|
title | 标题页 | title, subtitle, note |
outline | 提纲 | items[] |
content | 内容页 | title, layout (bullets/cards-2/cards-3/cards-4/steps/grid-2x2), cards[] 或 items[] |
flow | 流程页 | steps[] (含 num, title, subtitle, desc) |
table | 表格页 | headers[], rows[][], highlightRows[] |
bars | 柱状图页 | items[] (含 label, value, drop) |
stats | 大数字统计 | stats[] (含 value, label, color, big) |
formula | 公式页 | formula, lines[] (含 symbol, english) |
timeline | 时间线 | items[] (含 year, title, desc) |
summary | 总结页 | items[] (含 text, color) |
limitations | 双栏布局 | limitations[], futureWork[] |
Step 5 — 运行构建脚本
复制 CSS/JS 后执行：
cd paper-to-course/course-name
bash build.sh # 生成 index.html
node scripts/build-all.js . # 自动生成 HTML + README.md + slides.pptx
设计规范
- 暖色调"开发者笔记本"美学：米白背景 (#FAF7F2) + 珊瑚红强调色 (#D94F30)
- 字体：Bricolage Grotesque (标题) + DM Sans (正文) + JetBrains Mono (公式/代码)
- 所有样式通过 CSS class 引用，禁止内联 style 属性
- 所有交互逻辑由
main.js 处理，模块 HTML 只写结构
文件结构
paper-to-course/
├── SKILL.md ← 本技能说明（本文档）
├── scripts/
│ ├── build-all.js ← 统一流水线（HTML + MD + PPTX）
│ ├── generate-pptx.js ← PPTX CLI 入口（通用，数据驱动）
│ ├── slides-builder.js ← PPTX 核心构建器（支持所有 slide type）
│ └── html-to-md.js ← HTML → Markdown 转换器
└── references/
├── styles.css ← 完整设计系统
├── main.js ← 交互引擎
├── _base.html ← HTML 模板头部
├── _footer.html ← HTML 模板尾部
└── paper-elements.md ← 7 种交互元素实现模式
交互元素参考
详见 references/paper-elements.md：
| 元素 | HTML class | 说明 |
|---|
| Formula Breakdown | formula-block | 公式逐行通俗解释 |
| Literature Timeline | timeline-container | 领域发展时间线动画 |
| Method Chat | chat-window / group-chat | 组件间"对话"动画 |
| Comparison Table | comparison-table | 可交互对比表格 |
| Ablation Diagram | ablation-container | 消融实验可视化 |
| Quiz | quiz-container | 选择题理解测验 |
| Glossary Tooltips | term | 术语悬停通俗解释 |
PPTX 风格
- 背景：纯白 (#FFFFFF)
- 标题栏：深炭灰 (#36454F)
- 强调色：珊瑚红 (#D94F30)
- 卡片背景：浅灰 (#F0F0F0)
- 字体：Arial Black（标题）+ Calibri（正文）
- 布局：16:9 宽屏