HTML PPT 生成器
Overview
根据用户提供的主题、大纲或素材，生成一份单文件、自包含的 HTML 演示文稿：所有 CSS/JS 内联，无需网络与依赖，双击即可在浏览器中全屏翻页播放。默认采用中文商务汇报风格（简洁、专业、克制）。
核心原则
- 单文件交付：产出物是一个
.html文件，内联全部样式与脚本，不引用外部 CDN、字体或图片（除非用户明确要求）。 - 16:9 幻灯片：每页为 1280×720 逻辑画布，居中缩放适配任意窗口。
- 键盘/点击翻页：← → / PgUp / PgDn / 空格翻页，Home/End 跳首尾页，右下角显示页码与进度。
- 先大纲后制作：页数超过 5 页时，先向用户确认大纲（每页标题 + 要点），再生成完整文件。
- 打印友好：附带打印样式，浏览器"打印为 PDF"时每页幻灯片占一页。
工作流
第 1 步：明确内容
从用户请求中提取：主题、受众、页数、风格要求、必须包含的内容（数据、图表、图片）。
信息不足时按商务汇报惯例补全（封面 → 目录 → 3~8 页内容 → 总结/致谢），不要因细节追问而阻塞。
第 2 步：读取模板与规范
- 读取
assets/slide-template.html—— 这是母版，包含全部 CSS 框架、翻页 JS 和 5 种页面版式示例。 - 需要排版细节（字号阶梯、配色、留白、图表配色顺序、各类版式用法）时，读取
references/design-guide.md。
第 3 步：生成幻灯片
基于模板改造，替换为用户内容：
- 复制模板为输出文件（建议文件名：
<主题>-slides.html，放在当前工作区或用户指定目录）。 - 保留
<style>与<script>主体不变，只改 CSS 变量（--accent主题色等）和<section class="slide">内容。 - 每个
<section class="slide">是一页；按设计规范选用版式：封面 / 目录 / 章节页 / 内容页 / 结尾页。 - 每页内容要"舍得留白"：一页只讲一个观点，正文要点不超过 5 条，每条尽量一行内。
- 需要图表时，优先用纯 HTML/CSS 实现（条形图、进度条、表格、卡片）；复杂图表可用内联 SVG。不引入 Chart.js 等外部库。
- 需要配图但没有素材时，用 CSS 色块/渐变/内联 SVG 占位，并在交付说明中提示用户替换。
第 4 步：自检与交付
生成后逐项自检（重要，逐项过一遍）：
- [ ] 只有一个 HTML 文件，无外部引用（无 http/https 的 link/script/img，用户指定的图片除外）
- [ ] 每页都是
<section class="slide">，页数与大纲一致 - [ ] 翻页脚本中
total与实际页数一致（模板脚本会自动统计，若改动过 JS 需核对） - [ ] 中文引号使用「」或“”，代码与标签内使用 ASCII 引号
- [ ] 无溢出风险：标题不超过两行，表格列数 ≤ 6
- [ ] 文件首尾完整（以
<!DOCTYPE html>开头、</html>结尾）
完成后调用 present_files 呈现该 HTML 文件（会自动打开预览面板），并简要说明页数、结构和使用方式（键盘翻页、打印为 PDF）。
修改既有 HTML PPT
当用户要求修改已生成的 HTML PPT（改配色、增删页、替换内容）时：
- 先 Read 该文件，定位相关
<section>或 CSS 变量。 - 用 Edit 做最小改动；增删页后检查页码/进度逻辑（模板为自动统计，一般无需改 JS）。
- 再次 present_files 让用户预览效果。
Resources
assets/slide-template.html— 单文件幻灯片母版：内联 CSS 框架 + 翻页 JS + 5 种版式示例页，生成时以此为基础改造。references/design-guide.md— 中文商务排版规范：配色方案、字号阶梯、各版式使用场景、CSS 图表做法、常见错误清单。
