Presentation Maker 技能规范
技能描述
将文档大纲转换为专业演示幻灯片的自动化技能。输入结构化文档，输出符合演示标准的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，无需服务器
- 完整演示功能（翻页+全屏）
- 专业级视觉设计
- 数据准确性保证
- 跨浏览器兼容性