技能描述

将文档大纲转换为专业演示幻灯片的自动化技能。输入结构化文档，输出符合演示标准的HTML幻灯片套件，包含封面、目录、内容页和总结页。

核心流程

1. 输入分析阶段

• 文档解析：读取输入的Markdown格式大纲文档
• 内容结构化：识别章节标题、关键数据、核心要点
• 幻灯片规划：根据内容复杂度和逻辑关系规划幻灯片数量（通常6-8页）

2. 幻灯片分页设计阶段

• 页面类型分配：

- 封面页（1页）：主标题+副标题+日期 - 目录页（1页）：章节导航 - 内容页（4-6页）：按主题拆分核心内容 - 总结页（1页）：关键结论和展望

• 内容切分原则：

- 每页聚焦单一主题，避免信息过载 - 数据密集内容优先考虑可视化呈现 - 文字内容控制在6行以内，要点式展示

3. 可视化增强阶段

• 图表类型选择：

- 对比数据 → 柱状图/折线图 - 结构占比 → 饼图/环形图 - 时间序列 → 时间轴/甘特图 - 关系网络 → 四象限/矩阵图

• 数据强化：

- 关键数字突出显示（大号字体+品牌色） - 趋势数据用箭头/颜色编码 - 复杂表格简化为核心指标

4. HTML生成阶段

• 文件结构：

  project/
  ├── index.html          # 入口页面
  ├── css/style.css       # 统一样式
  ├── js/main.js          # 交互逻辑
  └── slides/
      ├── 01-cover.html   # 封面页
      ├── 02-toc.html     # 目录页
      └── ...             # 内容页
  

• 技术实现：

- 纯静态HTML/CSS/JS，无外部依赖 - SVG内嵌图表，保证离线可用性 - 响应式设计，适配不同屏幕

关键约束

页面布局约束

• 严格16:9比例：禁止上下滚动，自动计算宽高比
• 合理留白：边距≥40px，内容区域居中
• 字体层级：主标题≥32px，副标题≥24px，正文≥16px
• 色彩规范：主色≤3种，文字与背景对比度≥4.5:1

交互功能约束

• 键盘支持：← → 方向键翻页，空格键下一页
• 全屏模式：F键切换全屏，ESC退出全屏
• URL导航：支持hash跳转（#slide-0, #slide-1...）
• 触摸友好：点击区域≥44px，适合演示设备

性能约束

• 加载速度：单页加载时间≤1秒（本地文件）
• 文件大小：单HTML文件≤100KB
• 内存占用：无内存泄漏，支持长时间演示

注意事项

输入文档要求

• 必须为结构化Markdown格式
• 章节标题使用#、##、###层级
• 表格数据使用标准Markdown表格语法
• 关键数据需要明确标注（如"核心指标"、"重要发现"）

主题适配原则

• 科技/财报类：蓝绿配色，简洁专业
• 创意/设计类：暖色调，丰富动效
• 教育/培训类：高对比度，易读性强
• 商务/汇报类：深色背景，金色点缀

质量检查清单

• [ ] 所有幻灯片保持统一视觉风格
• [ ] 图表数据与原文档一致
• [ ] 键盘翻页功能正常工作
• [ ] 全屏模式显示完整
• [ ] 移动端基础可用性
• [ ] 无拼写错误和格式问题

常见问题处理

• 内容过多：优先保留核心数据，次要信息可省略
• 缺少图表：基于文本数据创建简化SVG图表
• 主题不明确：默认使用科技蓝+白色亮色调
• 交互失效：确保JavaScript正确加载和执行

使用示例

# 基本用法
presentation-maker --input "财报大纲.md" --output "slides"
# 指定主题
presentation-maker --input "营销方案.md" --theme "creative" --output "marketing-slides"
# 自定义配色
presentation-maker --input "技术文档.md" --primary-color "#ff6b35" --secondary-color "#00a2ff"

输出保证

• 100%静态HTML，无需服务器
• 完整演示功能（翻页+全屏）
• 专业级视觉设计
• 数据准确性保证
• 跨浏览器兼容性

  project/
  ├── index.html          # 入口页面
  ├── css/style.css       # 统一样式
  ├── js/main.js          # 交互逻辑
  └── slides/
      ├── 01-cover.html   # 封面页
      ├── 02-toc.html     # 目录页
      └── ...             # 内容页
  

# 基本用法
presentation-maker --input "财报大纲.md" --output "slides"
# 指定主题
presentation-maker --input "营销方案.md" --theme "creative" --output "marketing-slides"
# 自定义配色
presentation-maker --input "技术文档.md" --primary-color "#ff6b35" --secondary-color "#00a2ff"