paper-to-course

name	paper-to-course
description	将学术论文转换为交互式 HTML 课程 + Markdown 文档 + PPTX 演示文稿，一键生成全部三种输出

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 宽屏