html-presentation-beautifier

HTML 演示文稿美化工具

将文档和数据转换为专业的麦肯锡风格 HTML 演示文稿，借助 AI 实现内容结构化、智能可视化和自动质量审核。

核心原则：在应用专业的麦肯锡风格设计时，保留原始内容的 100%。

演示文稿设计理念

创建演示文稿前，请考虑：

• 受众：谁会观看？（决定复杂程度和正式程度）
• 核心信息：最重要的单一结论是什么？
• 故事脉络：幻灯片如何逐步引出结论？
• 视觉层次：哪些数据和洞见值得重点呈现？

关键原则：20 张清晰的幻灯片胜过 10 张内容拥挤的幻灯片。必须完整保留内容。

何时使用此技能

触发场景：

• “根据这份文档／报告创建演示文稿”
• “将这份分析转换为幻灯片”
• “生成麦肯锡风格的演示文稿”
• “以专业方式可视化这些数据”
• “根据这些内容制作 HTML 幻灯片”

流程概述

使用子 Agent 的 6 阶段 AI 工作流：

阶段	操作	时长	输出
1	解析文档	~1 分钟	结构化内容地图
2	规划幻灯片	~2 分钟	包含可视化方案的幻灯片计划
3	应用设计	~1 分钟	麦肯锡风格的结构
3.5	内容可视化	~2 分钟	添加图表／图形后的内容
4	生成 HTML	~3 分钟	单文件 HTML 演示文稿
5	审核与验证	~2 分钟	附带评分的质量报告

总计：典型演示文稿约需 10-12 分钟

阶段 1：解析文档

目标：提取结构、数据和结论，不做修改。

步骤：

1. 完整阅读源文档
2. 确定文档类型（报告、分析、研究）
3. 提取结构元素：
   • 标题和副标题
   • 项目符号和列表
   • 数据表格和数值数据
   • 关键结论和建议
4. 梳理内容层级：主题 → 子主题 → 细节
5. 找出适合制作图表的定量数据

完成标准：完整解析文档并梳理出内容结构。

---

阶段 2：内容结构化（使用子 Agent）

目标：将解析后的内容转换为适合幻灯片展示的结构。

方法：使用 Task 工具和 general-purpose 子 Agent。

必须完整阅读文件：调用子 Agent 前，阅读 subagent-prompts.md，了解阶段 2 的提示词模板。

子 Agent 任务：

• 输入：解析后的文档内容
• 输出：JSON 幻灯片计划，包含幻灯片类型、标题、内容和可视化分配
• 关键要求：保留 100% 的内容，为所有洞见／结论分配可视化方案

幻灯片类型：

• TITLE：封面幻灯片
• TOC：目录（幻灯片数量达到 10 张或以上时）
• DATA_VISUALIZATION：包含数值数据的幻灯片
• CONCEPTUAL：框架类幻灯片（SWOT、时间线等）
• CONTENT：常规内容幻灯片
• CONCLUSIONS：配有可视化内容的关键发现
• INSIGHTS：配有可视化内容的建议
• END：致谢幻灯片

完成标准：幻灯片计划结构完整，已定义全部幻灯片，内容零遗漏。

阶段 3：设计与布局

目标：应用 McKinsey 风格设计系统。

强制要求——阅读整个文件：阅读 mckinsey-design-system.md，了解完整的设计规范。

其他参考资料：

• assets/LAYOUTS_INDEX.md——布局类型索引，包含结构示例和配置参数
• assets/layouts/*.html——供参考的实际布局示例文件

本阶段不要加载其他参考文件。

关键操作：

1. 为每种幻灯片类型选择合适的布局
2. 应用 McKinsey 调色板（#F85d42、#556EE6、#34c38f 等）
3. 设置字体层级（标题 48-64px，副标题 28-36px，正文 16-20px）
4. 优化间距（内边距 40-60px，元素间距 20-30px）
5. 确保响应式设计（1200px、768px、移动端断点）

退出标准：所有幻灯片均采用一致的 McKinsey 风格品牌设计。

---

阶段 3.5：内容可视化美化（使用子 Agent）

目标：使用合适的图表和图形美化内容，避免使用纯文本列表。

方法：使用 Task 工具和 general-purpose 子 Agent。

强制要求——阅读整个文件：阅读 chart-selection-guide.md，了解完整的可视化决策树。

其他参考资料：

• assets/COMPONENTS_INDEX.md——完整的组件索引，包含 CSS 类、Chart.js 配置和组件选择决策树
• assets/components/*.html——供参考的实际组件示例文件

本阶段不要加载其他参考文件。

子 Agent 任务：

• 输入：阶段 2 中的结构化幻灯片方案
• 输出：指定了具体可视化类型的增强版幻灯片方案
• 流程：分析内容结构 → 匹配可视化类型 → 参考示例文件

9 种内容结构类型：

1. 渐进型（递进型）→ 渐进图、时间线、流程图
2. 时间序列型 → 时间线、战略路线图
3. 并列型 → 强调框、思维导图、矩阵
4. 层级型 → 金字塔、倒金字塔
5. 对比型 → 对比图、优缺点图、维恩图
6. 分析框架型 → SWOT、安索夫矩阵、5W1H、竞争分析四象限图
7. 转化流程型 → 漏斗图、价值流图
8. 循环型 → 循环图、循环流程图
9. 因果型 → 问题—解决方案图、帕累托图、仪表盘图

示例文件位置：assets/components/*.html 和 assets/layouts/*.html（例如 flowchart-example.html、pyramid-chart-example.html）

退出标准：所有内容幻灯片均使用合适的可视化方式进行增强；洞见不得仅以纯文本项目符号列表呈现。

---

阶段 4：HTML 生成（使用子 Agent）

目标：生成单文件、自包含的 HTML 演示文稿。

方法：使用 Task 工具，由 general-purpose 子 Agent 执行 4 个子步骤。

强制要求——阅读整个文件：阅读 template-guide.md，了解完整的模板使用说明。

其他参考资料：

• assets/INDEX.md——主索引，包含目录结构和快速入门指南
• assets/LAYOUTS_INDEX.md——布局类型索引，包含结构示例和配置参数
• assets/layout-template.html——布局模板，包含单列、双列、三列和卡片网格示例
• assets/component-template.html——组件模板，包含图表和示意图示例

强制要求——阅读整个文件：阅读 subagent-prompts.md，了解阶段 4 的提示词模板。

本阶段不要加载其他参考文件。

4 步流程：

步骤 4.1：选择模板

• 幻灯片 #1 → templates/cover-slide-template.html
• 幻灯片 #2 → templates/toc-slide-template.html（如果幻灯片数量不少于 10 张）
• 幻灯片 #3 至 #N-1 → templates/content-slide-template.html
• 幻灯片 #N → templates/end-slide-template.html

注意：另请参考 assets/layouts/ 中的其他布局示例，以及 assets/LAYOUTS_INDEX.md 中的布局选择指南。

第 4.2 步：内容分析与图表选择

• 对于 DATA_VISUALIZATION 幻灯片：使用 chart_type 字段（bar、line、pie、doughnut、radar、polarArea、bubble、scatter）
• 对于其他幻灯片：使用 visualization_type 字段（pyramid、timeline、flowchart、mindmap 等）
• 从对应的 assets/components/*.html 和 assets/layouts/*.html 示例文件中复制 CSS 和 HTML
• 重要：图表组件详情请参阅 assets/COMPONENTS_INDEX.md，布局配置请参阅 assets/LAYOUTS_INDEX.md

其他优化提示：

• 使用 assets/layout-template.html 作为布局结构参考
• 使用 assets/component-template.html 作为组件结构参考
• 所有图表在其容器中的宽度必须为 100%
• 图表页面中的图表必须使用 2 列或 3 列布局（绝不能使用单列布局）

第 4.3 步：应用优化

• 将模板结构与内容整合
• 应用 McKinsey 设计系统（精确的颜色、字体、布局）
• 插入幻灯片计划中的原文（保持数据精度：1723.498，而不是 1723.5）
• 使用 McKinsey 颜色初始化 Chart.js 图表
• 使用 assets/ 中的概念可视化

第 4.4 步：输出 HTML 文件

• 组装完整的单文件 HTML
• 所有 CSS 内联到 <style> 标签中
• 所有 JavaScript 内联到 <script> 标签中
• 包含 Chart.js CDN：https://cdn.jsdelivr.net/npm/chart.js
• 保存为：{original_filename}_beautified.html

退出标准：生成完整的 HTML 演示文稿文件，可在浏览器中打开。

---

第 5 阶段：审查与验证（使用子 Agent）

目标：自动审查生成的 HTML，确保其质量、完整性和合规性。

方法：使用 Task 工具，调用 ./agents/html-presentation-reviewer.md 中的 html-presentation-reviewer Agent。

调用：

Use Task tool to call html-presentation-reviewer agent with:
- Generated HTML file path
- Source document path
- Request comprehensive review report

审查维度：

1. 内容完整性（关键）——验证内容是否 100% 保留
2. 代码质量——HTML/CSS/JS 有效性
3. McKinsey 风格合规性——检查设计标准
4. 图表有效性——检查可视化是否正确
5. 交互性——测试功能

分数说明：

• 分数 ≥85：通过，可选择进行改进
• 分数 75-84：可接受，需解决主要问题
• 分数 <75：需要重新生成

退出标准：HTML 演示文稿已完成审查并获批准，附有详细报告。

---

交互功能

生成的演示文稿包含：

• 导航：上一页/下一页按钮、幻灯片计数器、方向键（←/→）、空格键（下一页）
• 全屏：切换按钮，按 Escape 退出
• 键盘快捷键：Home（第一页）、End（最后一页）
• 响应式设计：桌面、平板、移动设备布局
• 图表交互：悬停提示、切换图例

---

绝对不要做以下事情

内容完整性：

• 绝不要修改原始内容或结论——100% 保留
• 绝不要删除、跳过或省略任何内容
• 绝不要总结或压缩内容——完整展示所有细节
• 绝不要截断列表——如果源内容有 15 项，就展示全部 15 项
• 绝不要改述——使用源内容中的原文
• 绝不要添加编造的数据——只使用源数据

设计标准：

• 绝不要偏离 McKinsey 配色方案（#F85d42、#556EE6、#34c38f、#50a5f1、#f1b44c、#74788d）
• 绝不要使用不一致的字体排版——保持层级结构
• 绝不要将结论/见解以纯文本项目符号列表的形式呈现——务必使用可视化
• 绝不要使用通用的 AI 美学风格（紫色渐变、Inter 字体、默认圆角）

质量：

• 绝不要为了美观牺牲内容——20 张内容详实的幻灯片胜过 10 张内容不完整的幻灯片
• 绝不要跳过第 5 阶段审查——质量验证是强制要求

---

快速入门示例

用户请求：“根据这份报告制作一份麦肯锡风格的演示文稿”

工作流：

1. 解析（阶段 1）：阅读报告，提取结构
2. 规划（阶段 2）：调用子 Agent → 获取幻灯片计划
3. 设计（阶段 3）：加载设计系统 → 应用麦肯锡风格
4. 可视化（阶段 3.5）：调用子 Agent → 使用图表和图形增强内容
5. 生成（阶段 4）：调用子 Agent → 创建 HTML 文件
6. 审阅（阶段 5）：调用审阅 Agent → 获取质量报告

输出：report_beautified.html，包含专业可视化内容、质量评分和建议。

---

资源

所有详细指南都位于 references/ 中：

• 设计系统：mckinsey-design-system.md - 颜色、字体排版、布局
• 模板：template-guide.md - 4 种模板的使用说明
• 图表选择：chart-selection-guide.md - 可视化图表的决策树
• 子 Agent 提示词：subagent-prompts.md - 各阶段的优化提示词

索引文件（v2.0 新增）：

• assets/COMPONENTS_INDEX.md - 完整的图表和图示组件索引，包含 CSS 类、Chart.js 配置和选择决策树
• assets/LAYOUTS_INDEX.md - 完整的布局类型索引，包含结构示例、配置参数和布局选择决策树
• assets/INDEX.md - 主索引，包含目录结构和快速入门指南

assets/ 中的可视化示例：

组件（assets/components/*.html）：

• 图表示例：chart-examples.html、mckinsey-label-bar-example.html、pareto-chart-example.html
• 特殊图表：pyramid-chart-example.html、funnel-chart-example.html、gauge-chart-example.html
• 图示：swot-analysis.html、ansoff-matrix.html、5w1h.html、competitive-4box.html
• 流程图：flowchart.html、mindmap.html、timeline.html、swimlane.html

布局（assets/layouts/*.html）：

• 封面布局：01-cover-page.html、NEW_01-cover-page.html
• 内容布局：05-chart-text.html、NEW_02-content-page-chart-insights.html
• 特殊布局：07-radar-card-layout.html、08-table-of-contents.html
• NEW 布局：NEW_03-content-page-text-only.html、NEW_04-content-page-three-charts.html

指南（assets/guides/）：

• 完整组件列表请参阅 assets/guides/CHART_EXAMPLES_INDEX.md
• 详细可视化指南请参阅 assets/guides/INSIGHT_VISUALIZATION_GUIDE.md
• 模板使用示例请参阅 assets/guides/TEMPLATE_USAGE_GUIDE.md
• 优化技巧请参阅 assets/guides/HTML_OPTIMIZATION_GUIDE.md

---

内容完整性验证（必须）

完成演示文稿前，验证内容是否 100% 保留：

检查清单：

• 章节数量一致（源文档与演示文稿）
• 项目符号数量一致
• 数据点数量一致
• 结论数量一致
• 精确保留原文措辞（不得改写）

如果任一数量不一致，请重新生成。

警示信号：

• 用“要点”代替完整列表
• 图表仅显示“前 N 项”
• 项目符号数量与源文档不一致
• 表述与源文档不完全一致