web-slide · 网页演讲稿生成

概述

将用户的演讲主题/大纲生成为完整的单文件 HTML 演讲稿。 所有交互能力（翻页、备注、代码高亮、流程图、PDF 导出）自动继承自框架，用户只需关注内容。

框架源文件：skill 内置 assets/skills-deck.html（随 skill 分发，自包含，无需依赖外部项目）

输入收集

启动后先确认以下信息（用户已提供的直接使用，未提供的询问）：

工作流程

Step 1：读取框架

框架源文件 assets/skills-deck.html（skill 内置）分三段，只使用前段和后段：

用 Read 工具读取 skill 内置 assets/skills-deck.html：
  offset=0, limit=4936    → 存为 PRE_CONTENT
  offset=7521, limit=1136 → 存为 POST_CONTENT

提示：边界以「第一张 <section class="slide"> 之前」和「最后一张 </section> 之后的 </div><!-- /#deck -->」为准。若日后框架行数变化，按此规则重新定位即可。

后段包含 PDF 导出按钮和全部交互 JS，生成文件必须包含它，否则翻页/PDF/备注全部失效。

Step 2：读取幻灯片模板

读取 slide-patterns.md（与本 SKILL.md 同目录）

这是所有幻灯片的 HTML 模板库，包含封面、章节幕、内容、代码、流程图、对比、结束、金句等 8 种模式，后续生成时按模式填充。

Step 3：规划幻灯片结构

根据用户大纲，确定幻灯片列表：

封面（cover）× 1
讲者介绍（可选）× 1
章节幕（chapter）× N（按大纲章节数）
内容页（content / code / mermaid / compare / quote）× M（每章 2–4 页）
结束页（end）× 1

每张幻灯片确定：

• id：s01、s02… 顺序递增
• type：封面选哪种、内容选哪种
• title / core / points：内容摘要
• notes：演讲者口播（自然语言，100–300 字）

Step 4：生成幻灯片 HTML

按 slide-patterns.md 中的模式逐页生成 <section> 块：

• 每页 id 唯一，从 s01 顺序递增
• data-notes 写入口播内容（单行，引号用 " 转义）
• 内容密度：要点 ≤ 5 条，每条 ≤ 20 字，核心句 ≤ 30 字
• 代码页用 Prism，流程图用 Mermaid（见 slide-patterns.md）
• 章节幕不加 .slide-core，只用 .ch-layout
• 封面无图时使用 slide-patterns.md 的「无封面图版」（含装饰右半区）

Step 5：组装输出文件

PRE_CONTENT（前段，行 1–4812）
  └─ 替换 <title>…</title> → <title>演讲标题 · 讲者姓名</title>
+ 生成的 <section> 块（所有幻灯片）
+ POST_CONTENT（后段，行 7334–8468）
  └─ 替换 pdf.save('skills-deck.pdf') → pdf.save('演讲主题slug.pdf')

slug 规则：演讲主题的英文或拼音短名，如 claude-code-intro、ai-skills。

Step 6：写入文件

用 Write 工具将完整 HTML 写入用户指定路径，写入后输出：

• 文件绝对路径
• 幻灯片总数
• 快捷键说明：← → 翻页 · N 备注 · ESC 索引 · 点击「PDF」导出

输出质量检查

生成前对照核验：

• 前段（行 1–4812）完整，包含所有 CSS
• 后段（行 7334–8468）完整，包含导航和 JS
• <title> 已替换为演讲标题
• pdf.save(...) 已替换为演讲主题 slug
• 封面有主题、副标题、讲者信息
• 每章有章节幕（chapter slide）
• 每页有 data-notes 口播内容（非空）
• 代码块使用正确的 language-* class
• 文件末尾有结束页
• HTML 结构完整，无未闭合标签（每个 <section> 对应一个 </section>）

交互能力（自动继承，无需配置）

注意事项

• 框架前段/后段（CSS/JS）只做两处字符串替换，其余不修改
• 后段（7334–8468）不可省略，省略则生成文件无翻页、无 PDF、无备注
• 品牌 logo（chanyanxueyuan_white.png）保留在框架层，用户可后续替换
• Mermaid 翻到该页时自动渲染，无需手动初始化
• 图片资源如无本地文件，省略 <img> 标签，使用「无封面图版」封面