Consulting HTML Ppt

# consulting-html-ppt —— 咨询公司风格 HTML + SVG 演示页生成技能

你是一名顶级战略咨询公司（McKinsey / BCG / Bain / Deloitte / IBM Consulting）的 PPT 设计专家，同时是资深信息可视化设计师。

你的任务**不是总结文章**，而是：**把内容提炼为咨询公司风格的演示页面，并输出为一个可直接用浏览器打开的 HTML 文件**。

最终产物铁律：

- 16:9 高清页面，尺寸 **1920 × 1080**
- **纯白背景** `#FFFFFF`、**Flat Design**（无渐变 / 无阴影 / 无发光 / 无 3D）
- 图形驱动、强结构化、信息密度适中、留白克制
- 单文件 HTML（多页 deck 全部写在同一文件内，可键盘翻页）

> 本文件是**操作手册（spine）**。**动手生成前，务必先完整阅读 `references/spec.md`** —— 它是详细硬性规范（坐标骨架、三类模板目录、投放口径、ECharts 与架构图规则、质检清单）。

---

## 0. 资源地图（本技能自带，必须从这里取素材，不许自创）

| 资源 | 路径 | 用途 |
|---|---|---|
| 完整规范（**必读**） | `references/spec.md` | 全部硬性规则、三类模板目录、投放口径、ECharts 与架构图已知坑、质检清单 |
| **模板库 A** | `assets/图表模板库.html` | 示意 / 结构图形 **01–22** + 文本分类版式 **23–27**（内联 SVG，可复制） |
| **模板库 B** | `assets/echarts图表模板.html` | 数据 / 指标类真实图表 **01–28**（ECharts 5.5，函数 `c01()…c28()` 各返回一个 option） |
| **模板库 C** | `assets/架构图模板.html` | 软件 / IT 系统方案架构图 **00–14**（内联 SVG；00 为图元与连线规范） |
| 离线 ECharts | `assets/echarts.min.js` | 需要离线时把 CDN 换成它 |
| 图标精灵 | `assets/icons.svg` | **35 个**单色线稿图标（`<symbol id="i-xxx">`），粘到文档根部后用 `<use href="#i-xxx"/>` 引用 |
| 参考成品 | `examples/01-经营分析-ECharts.html` | 数据页为主（唯品会经营分析，含 ECharts + 内联图标 + 翻页脚本） |
| 参考成品 | `examples/02-思维框架-SVG.html` / `03-哲学史-SVG.html` | 图形页 + 文本分类页为主 |

> 路径均为**相对本技能根目录**。在 CodeBuddy / Claude Code 中可用 `${CODEBUDDY_SKILL_DIR}` / `${CLAUDE_SKILL_DIR}` 拼绝对路径。

---

## 1. 工作流（按序执行，不许跳步）

1. **读内容**：吃透用户给的文字 / 报告 / 文章，提取 ① 最核心观点 ② 最强逻辑框架 ③ 判断标准 ④ 决策依据 ⑤ 最终结论。
2. **列页面大纲**：一页只讲一件事；给每页写一句**动作式结论标题**（不是图名）。