HTML Slides

用户响应： 回复编号（1,4）、名称（Pitch, Cyberpunk）或 all。确认后直接进入内容收集。

• 用户描述风格但不指定名称 → 根据描述推荐最接近的风格编号
• 用户回复 all → 告知共24种风格，每次最多生成2种，确认批次顺序后开始
• 若用户未指定风格 → 先询问演示用途，按用途推荐最接近的3种风格供选择

第二步：内容收集

确认风格后，询问：

• 演示用途是什么？
• 有没有现成内容（文字/大纲/文档），还是需要 AI 帮助撰写？
• 需要几页？（默认 5 页标准结构）

用户无现成内容：主动询问主题、目标受众、核心卖点，基于信息撰写内容大纲，用户确认后再生成。

默认 5 页标准结构（用户未指定时）：

1. 封面 — 标题 + 副标题 + 作者
2. 文字页 — 标题 + 3 段正文
3. 图文分栏 — 图片占位区使用该风格标志性配色
4. 数据页 — 柱状图 + 折线图并排（Chart.js）
5. 结语页 — 一句大型陈述句配视觉锚点

扩展页面类型参考： 议程页、引言金句页、团队介绍页、时间轴页、对比页、致谢/问答页。

每批最多输出 2 种风格。

第三步：生成 HTML

交付物： 单个 .html 文件（无外部依赖，内联 CSS/JS）。文件命名：<主题>-<风格名>.html，例如 ai-education-Pitch.html

生成后自检： 每张幻灯片有视觉锚点、正文字号≥1.4vw、无居中对齐（封面除外）、CSS变量已定义、Chart.js图例为自定义。

动画效果： 可参考 animation-patterns.md，使用 CSS animation 或 transition，不依赖外部库。

必须遵循的规则：

字体规则（白名单）

展示字体（h1/h2）二选一：

• 衬线组：Playfair Display、Fraunces、DM Serif Display、Cormorant Garamond
• 无衬线组：Syne、Bebas Neue

正文字体（四选一，均为无衬线）： DM Sans、Outfit、Figtree、Epilogue

中文叠加： 衬线展示字体 → Noto Serif SC；无衬线 → Noto Sans SC

禁止使用白名单外任何字体（Inter、Roboto、Arial、Space Grotesk、Plus Jakarta Sans 等一律禁止）

配色规则

每种风格取 3 色，用 CSS 变量管理：

--color-primary: #xxx;
--color-secondary: #xxx;
--color-accent: #xxx;

容器比例规则

.slide {
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  overflow: hidden;
}

禁止单独使用 100vw / 56.25vw 替代以上写法。

美学规则

• 每张幻灯片必须有一个最抢眼的视觉锚点（超大数字、粗体关键词、大色块或图表）
• 标题至少是正文字号的 10 倍，不超过 30 倍
• 正文（p）字号在 1.4vw 至 2.5vw 之间，禁止被色块遮挡
• 正文必须在 flexbox 或 grid 正常文档流中排列（不得脱离文档流定位）。h1/h2 标题不受此限
• 同一文件内每张幻灯片使用不同布局
• 每张幻灯片视觉重心明显偏向一侧；封面页的标题居中不在此限
• 装饰性色块面积占幻灯片的 30% 以上
• 元素可出血超出幻灯片边缘（overflow: hidden 确保容器外内容被裁剪）
• 标题（h1/h2）允许且鼓励压在色块之上
• 创意排版仅用于纯装饰性元素（opacity < 0.1 的背景字）；h1/h2 禁止 transform: rotate
• 每张幻灯片内所有主要内容（标题+正文+图表）总高度不超过幻灯片容器的 90%

图表规则

• 图表库：Chart.js（cdnjs CDN，优先使用 v4 稳定版）
  • CDN 失效时使用 jsdelivr 镜像：https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js
  • 若所有 CDN 均失效，在 HTML 注释中标注图表数据，提示用户手动插入
• 禁止使用 Chart.js 默认图例，必须用自定义 HTML 图例替代
• 自定义图例：用 <div> + CSS 实现，不得使用 Chart.js 默认图例选项
• 图表外层容器必须同时满足：明确的 vw 高度 + overflow: hidden + position: relative
• canvas 元素必须用内联 style 设置高度（style="height: 18vw; width: 100%"），禁止用全局 CSS 或 Chart.js 默认设置
• 图表配色必须匹配该风格配色方案

导航规则

• 仅支持键盘左右箭头切换幻灯片
• 禁止在幻灯片上显示任何导航按钮、箭头或提示文字
• 触摸设备：支持左右滑动切换幻灯片（touch 事件）

代码质量规则

所有引号、尖括号、符号保持原始字符；严禁 HTML 实体转义。每个 HTML 文件以 markdown 代码块标记 ```html 开头，第一行注释写 <!-- 风格 N：[名称] -->。代码块外不添加任何解释文字。

内容约束

生成的幻灯片内容不得包含违法信息、虚假广告、侵犯版权的内容。

第四步：询问 PPTX 格式

HTML slides 输出完毕后，询问：

是否需要 .pptx 格式文件（便于在 PowerPoint 中调整）？

• 是：用户确认需要 PPTX → 若用户未指定保存路径，使用 <html文件名>.pptx 作为默认路径 → 运行 python3 ~/.claude/skills/cjl-slides/scripts/html-to-pptx.py <html文件路径> <输出路径> → 若 python-pptx 未安装，提示用户先运行：pip3 install python-pptx → 若文件保存失败（权限问题），提示用户指定其他保存路径 → 告知保存位置（绝对路径）
• 否：直接进入下一步
• 用户未明确回答时，默认为否

第五步：等待修改指令

每次最多输出 2 种风格。输出完毕后等待用户修改指令。

是否继续生成下一批，或需要对已生成的文件进行修改？

支持以下修改指令（准确识别意图）：

批量生成（all）：共24种风格，每次最多2种，按场景分组顺序分批生成： 批次1: 商业(1-3) → 批次2: 产品(4-7) → 批次3: 创意(8-11) → 批次4: 文化(12-15) → 批次5: 品牌(16-18) → 批次6: 学术(19-21) → 批次7: 娱乐(22-24) 每批完成后询问"是否继续下一批"。预计生成时间：24种约需12批次。

中断处理：若用户在任何步骤中断对话，重新激活时从最近未完成步骤继续，无需从头开始。

文件路径告知：生成完成后告知用户 HTML 文件的绝对路径，方便后续查找。

模式 B：PPTX 转换

当用户提供 .pptx 文件时：

1. 确认 PPTX 文件路径（支持拖拽路径或 Browse）
   • 文件损坏时（python-pptx 解析失败），提示用户检查文件完整性，询问是否尝试其他文件
   • 文件路径含中文或空格时：先检查 python-pptx 是否能正确解析，若失败提示用户重命名文件
2. 调用 scripts/extract-pptx.py 提取内容：
   • 输出 JSON 文件（extracted-slides.json）
   • 包含每页标题、正文、图片路径、备注
   • 用户确认 JSON 内容 → 生成 HTML → 再进入下一步
3. 按提取结果生成 HTML，设计风格以用户选定风格为准
4. 正常进入模式 A 第三步
   • 视频/音频：extract-pptx.py 暂不支持提取，生成 HTML 时用占位符替代，标注"[此处有视频]"
   • 转换多页 PPTX 时，确认需要转换全部页面还是指定范围
   • PPT 页数超过 20 页时：询问用户是否需要筛选重点页面，或按章节分段生成多个 HTML 文件

模式 B 转换完成后，用户可以像模式 A 一样请求修改（换配色/换字体/换布局等）。

多语言支持

可生成中英双语幻灯片，中英文内容分页或分栏排版。

在线部署

生成后可询问用户是否需要部署到 Vercel（运行 ~/.claude/skills/cjl-slides/scripts/deploy.sh）。

24 种风格配色参考

实际生成时可根据语义适当调整配色，但需保持风格辨识度。