consulting-html-ppt

---
name: consulting-html-ppt
description: 用国际顶级咨询公司（McKinsey / BCG / Bain / Deloitte / IBM）的汇报风格，把一段文字/报告/文章提炼成 16:9 高清 HTML 演示页（1920×1080，纯白 + Flat Design）。四类页面各有专属做法——有数值出 ECharts 真实图表、软件/IT 系统方案出 SVG 架构图、有通用结构关系出 SVG 模型、只有并列类目用「线 + 框」文本分类版式；所有图形/图型都必须从内置的三个模板库中选取（不许自创）。当用户要"做一份咨询风格的 PPT / 演示文稿 / 汇报 deck / 经营分析报告 / 技术方案汇报 / 数字化平台方案 / 讲演稿"，或提到"MBB 风格 / 麦肯锡风格 / 咨询公司风格 / HTML PPT / SVG 图表 / 架构图 / 数据可视化汇报 / 用 HTML 做 PPT"时使用。Triggers include consulting ppt, mckinsey/bcg/bain deck, consulting-style slides, html ppt, svg deck, business review deck, technology architecture deck, solution architecture, 咨询风格PPT, 技术方案汇报, 数字化平台方案, 架构图, 经营分析, 汇报材料, 演示文稿, 幻灯片, 做个deck, 做份PPT, 咨询风格汇报.
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
---

# 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. **列页面大纲**：一页只讲一件事；给每页写一句**动作式结论标题**（不是图名）。
3. **逐页做「四形态判定」**（见第 2 节）→ 定版式 → **定模板编号**。
4. **取模板**：从 `assets/` 打开对应模板库，**照抄** SVG 骨架 / ECharts option。常规模板只替换文字与数值；数据结构型图表和 UML 类图 / 序列图 / 状态图 / 活动图须随实际内容重建元素与关系。骨架、配色语义、线宽**不得随意改动**。
5. **拼 deck**：套用第 4 节的硬骨架，写进单文件 HTML，加上居中缩放 + 键盘翻页 + 圆点跳转 + 页码。
6. **配图与配文**：左栏论点用「图标 + 小标题 + ≤2 行说明」；图形页/数据页/架构图页按投放规格放入容器并**居中**。
7. **过质检**：逐项对照第 8 节与 `references/spec.md` 第十一节清单，**不达标即返工**。

---

## 2. 第一决策：四形态判定（本技能的灵魂 · 优先级 数据页 ＞ 架构图页 ＞ 图形页 ＞ 文本分类页）

**每一页动手前，必须按以下顺序判断，不得跳步或跳着挑图。**

| 页面类型 | 什么时候用 | 从哪儿取 | 判据 |
|---|---|---|---|
| **数据页**（真实图表） | 内容带**数值序列 / 对比基准 / 占比 / 归因 / 达成率 / 分布** | **模板库 B · 01–28** | 有数字 → 必须出图 |
| **架构图页**（软件 / IT 系统） | 内容讲的是系统的构成与运行：分层、应用、数据流、服务拆分、集成、安全、部署、演进或 UML 行为 / 关系 | **模板库 C · 00–14** | 无数字且讲软件 / IT 系统 → 必须出架构图 |
| **图形页**（示意 / 结构） | 有**层级 / 流程 / 因果 / 对比 / 矩阵 / 时间 / 闭环 / 转化 / 角色×阶段**关系，但**没有数值**，且**不属于软件 / IT 系统方案** | 模板库 A · 01–22 | 有结构 → 出模型 |
| **文本分类页** | 既无结构关系、又无数值，只是「几个并列类目 + 各自说明」 | 模板库 A · 23–27 | 都没有 → 「线 + 框」 |

**四步判定铁律：**

- ① **有数字要对齐比较吗？** 有 → 数据页（B·01–28）。用一段文字说「营收同比增长 15%」是本页的失职；用手绘示意 SVG 假装成图表，是更严重的失职。
- ② 没有数字，**讲的是软件 / IT 系统的构成、运行或演进吗？** 是 → 架构图页（C·01–14）。技术方案中的系统构成页不得用金字塔、四象限或中心辐射凑数。
- ③ 也不是，**有可画的通用结构关系吗？** 有 → 图形页（A·01–22）。没有数值时不要硬造图表。
- ④ 都不成立，只有并列类目 → 文本分类页（A·23–27）。它也必须由「**线 + 框**」构成骨架（色块标题栏 + 描边内容框 + 类目色标记线 + 条间细线），**禁止纯段落堆叠、禁止圆点 bullet**。

四种形态可**同页混排**：左栏文字论点 + 右栏图，或通栏一张大图 + 顶部总结条。页面存在数值时仍须使用真实图表；页面主旨为系统构成或运行时仍须使用架构图。

### 2.1 数据页：先问「这一页要回答什么问题」，再查模板（28 选 1）

| 问题信号 | 用哪个模板 |
|---|---|
| 在涨还是跌？拐点？ | 01 趋势折线 |
| 总量在涨但结构变了吗？ | 02 堆叠面积 |
| 今年能不能完成？ | 03 实际 vs 预测 |
| 规模上去，增速稳得住吗？ | 04 双轴折柱 |
| 今年比去年好多少？我好还是对手好？ | 06 分组柱状 |
| 谁第一？谁在拖后腿？ | 09 横向条形排名 |
| 钱从哪来？谁占大头？ | 11 饼图 / 12 环形 + KPI |
| **为什么没达成？每个因素各占多少？** | **16 瀑布图** |
| 哪些是「关键少数」（80/20）？ | 17 帕累托图 |
| 卡在哪一环？哪一跳掉得最狠？ | 24 转化漏斗 |
| 离目标还差多少？ | 25 仪表盘 |
| 综合来看我比对手强在哪？ | 27 雷达对比 |

（**完整 28 行对照表见 `references/spec.md` §2.7 第二步**；易混图型取舍见 §2.7 第四步。）

### 2.2 架构图页：先判定适用范围，再查模板（14 选 1）

**只有这一页讲的是软件 / IT 系统的构成、运行或演进时，才打开 `assets/架构图模板.html`。** 经营分析、战略汇报、行业研究、读书笔记等非技术方案内容，不能为了“看起来专业”套用架构图；反过来，软件建设方案、系统选型和数字化平台方案的系统构成页必须用架构图页。

| 这一页要回答什么问题？ | 用哪个模板 |
|---|---|
| 系统分成几层、每层有什么？ | 01 五层分层技术架构 / 02 六层通栏架构 |
| 有哪些应用、归属哪个业务域、由哪些公共能力支撑？ | 03 应用架构 |
| 数据从哪里来、如何存算、交付给谁？ | 04 数据架构 |
| 功能范围、模块和功能清单如何划分？ | 05 功能架构 |
| 服务如何拆分、依赖哪些中间件和治理能力？ | 06 微服务架构 |
| 与哪些系统集成、采用什么方式？ | 07 集成关系图 |
| 安全能力如何分层防护？ | 08 安全架构 |
| 如何从现状过渡到目标架构？ | 09 架构演进图 |
| 部署在哪里、集群与跨区协议是什么？ | 10 部署视图 |
| 跨角色业务流程或审批链路如何流转？ | 11 活动图 / 泳道 |
| 接口调用的时序和交互是什么？ | 12 序列图 |
| 领域实体及其关系、多重性是什么？ | 13 类关系图 |
| 单据或对象的状态和异常分支是什么？ | 14 状态转化图 |

先阅读 **00 图元与连线规范**，再复制对应模板的完整 SVG。01 / 03 / 06 / 08 / 12 / 13 / 14 使用分栏尺寸 **1120×700**；02 / 04 / 05 / 07 / 09 / 10 / 11 使用通栏尺寸 **1880×700**，零折算放入容器。

### 2.3 图形页：按结构关系选构图

| 结构关系 | 构图 |
|---|---|
| 层级 / 归属 / MECE 拆解 | 03 金字塔、06 分解图 |
| 顺序 / 阶段 / 时间 | 05 发展阶段流程、11 横向时间轴、12 Chevron、15 阶梯递进 |
| 因果推导 | 20 因果箭头链 |
| 维度对比 / 现状→目标 | 01 四象限、02 矩阵、04 雷达、16 对比双栏、19 天平 |
| 循环 / 闭环 | 07 PDCA、09 闭环 |
| 转化 / 收敛 | 08 漏斗 |
| 角色 × 阶段 | 22 泳道 |
| 核心 + 发散 | 14 中心辐射 |

### 2.4 文本分类页：横向分类 还是 纵向分列

只按两把尺子：**每类子条目数量 × 单条字数**。口诀：**条目少、话多 → 横着摊（23）；条目多、话少 → 竖着排（24）。**

| | 每类条目 | 单条字数 | 用哪个 |
|---|---|---|---|
| 横向分类 | 少（1–3 条） | 多（2–4 行 / ≥30 字） | **23**（要落点 → 27） |
| 纵向分列 | 多（4–8 条） | 少（≤14 字 / 单行） | **24**（要边界感 → 25） |
| 中间地带 | 3–5 条 | ≤20 字 | **25 分组框聚合** |
| 扁而多、省竖向空间 | — | 每框 2 行 | **26 类目行式**（右侧**只有 1 列**，禁止分列） |
| 分类后要给落点 | — | — | **27 分类 + 底部结论带** |

**类目数一律 2–4 个（3 个最稳）**；全页**只允许一个类目走红色**，且必须落在「结论 / 落点」那一类。

---

## 3. 版式选择速判

| 内容形态 | 版式 |
|---|---|
| 有论点 + 有框架 / 评估 / 对标 | **左右分栏**（左文 700 + 间距 60 + 右图 1120） |
| 线性推进 / 阶段 / 时间 / 因果链 | **通栏**（图区 1880×700，左右拉满、垂直居中） |
| 单一模型、无文字论据 | 通栏居中放大 |
| 一句核心结论 | 金句聚焦页（21） |
| 软件 / IT 系统构成、运行或演进 | 架构图页（模板库 C，按 2.2 反查） |
| 并列类目、无结构关系 | 通栏文本分类（23–27） |

---

## 4. 硬骨架速查（不得违反 · 完整版见 spec §一）

```text
画布：1920 × 1080        背景：#FFFFFF（纯白，不允许底色/渐变）
页面边距：四边各 20px     安全区：x 20–1900 / y 20–1060
标题区：y 20–170（高150）  标题：48px / 700 / 左对齐 / 区域内垂直居中
kicker（可选）：标题区右侧右对齐 x=1900，18px/600/#A3A3A3，letter-spacing 4px，大写
分隔线：y=170，高 5px，纯黑 #000000，横向拉通 x 0–1920（左右顶到画布边缘）
内容区：y 175–1060（1880 × 885）
总结条（可选）：内容区顶部，≤2 行，仅纵向竖线式；下沿与主内容留 44px
左栏（分栏时）：宽 700px；右栏（分栏时）：1120×700，图形上下左右居中
通栏：1880×700，左右拉满、垂直居中；页脚（可选）：y ≤ 1040
```

**居中缩放方案（多页 deck 必须照此实现）：**

```js
// stage 固定 1920×1080，transform-origin: top left
function fit(){
  const s = Math.min(innerWidth/1920, innerHeight/1080);
  const x = (innerWidth  - 1920*s)/2;
  const y = (innerHeight - 1080*s)/2;
  stage.style.transform = `translate(${x}px,${y}px) scale(${s})`;
}
addEventListener('resize', fit); fit();
```

> 不要用 `flex 居中 + transform: scale(center)`——1920px 元素在窄视口下会溢出导致左偏黑边。

**对齐与居中规则：** 总结条竖线 / 左栏文字 / 图形最左元素**一律对齐 x=20**；分栏图形在 1120×700 内**上下左右居中**；通栏图形**左右拉满 + 垂直居中**；图标与序号**二选一**（有图标就删 01/02/03）。

---

## 5. 配色 & 字体速查

| 角色 | 色值 | 占比 |
|---|---|---|
| 主色（红：结论 / 高亮 / 主责） | `#CC0000` | 20% |
| 深蓝（中层 / 机制） | `#006393` | 15% |
| 深青（文字主色） | `#333333` | 20% |
| 辅助灰（次要文字 / 轴 / 连线） | `#A3A3A3` | 45% |
| 浅灰背景 / 描边 / 主场填充 | `#F5F5F5` / `#CCCCCC` / `#FFF2F2`+`#CC0000` | — |

**禁止**：渐变、阴影、发光、3D、高饱和荧光色、彩色 emoji。**全页红色只有一处。**

```css
/* 标题 */ font-size:48px; font-weight:700; color:#333333; line-height:1.2;
/* 总结条 */ 26px/600/#333   +   24px/400/#777
/* 小标题 */ 25–28px/700/#333（卡片内可 19–22px）
/* 正文 */ 20–22px/400; line-height:1.65   —— 下限 20px，禁止低于 20
/* 关键数字 */ 56–72px/700; color:#CC0000
/* kicker */ 18px/600/#A3A3A3; letter-spacing:4px; text-transform:uppercase
/* 页脚/注释/图内辅助 */ 13–16px/#A3A3A3   —— SVG 内文字 ≥13px
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
```

---

## 6. 七条铁律（牢记）

1. **少而精**：宁可少，不要杂；宁可框架化，不要摘要化。
2. **骨架是硬约束**：20px 边距 / y=170 处 5px 黑线拉通 / 标题 48px 加粗 / 内容区 175–1060。
3. **左边界只允许一条竖线**；**图形必须居中**；**有图标就不要序号**。
4. **四种形态各有主导视觉**：数据页 = 真实图表 · 架构图页 = 系统架构图 · 图形页 = 通用结构模型 · 文本分类页 = 框线系统；一页只讲一件事，标题是**动作式结论**。
5. **取模板、不自创**：数据页取 B·01–28、架构图页取 C·01–14、图形页取 A·01–22、文本分类页取 A·23–27；高亮只一处（`#FFF2F2` + `#CC0000`）。
6. **反单调**：相邻两页骨架不同；等宽卡片网格全篇 ≤2 次；文本分类页全篇 ≤1/3 且**连续不超过 2 页**；数据页也不宜连排（15 页经营分析 data 页 6–9 页为宜）。
7. **有数字就上真图表，讲系统就上真架构图，有通用结构就上真模型；三样都没有，才用「线 + 框」把文字分类 —— 永远不许把一页堆成纯文字。**

---

## 7. 模板取用要点

- **模板库 A**（`assets/图表模板库.html`）：每个模板是一段**独立可复制的内联 SVG**。复制后**只替换文字与数值**，不得改坐标骨架 / 配色语义 / 线宽。投放按「上下左右居中」放入容器。
  - 图形页按 1120×700（分栏）或 1880×700（通栏）绘制。
  - **文本分类图按 1200 宽绘制**（23–26 高 380；27 含结论带高 404）；通栏等比 **1.567** 投放（1200→1880）；2 类目时可投右栏 1120×700（等比 0.933）。**投放时删掉模板自带的「图底说明」行并把 viewBox 收至内容下沿**，否则图形整体偏上。
- **模板库 B**（`assets/echarts图表模板.html`）：每个编号一个函数 `c01()` … `c28()`，**照抄 option 后整体替换数据**，包括数字、分组、系列数、类目名、流向关系与单位；桑基 / 树图 / 箱线 / 气泡 / 力导向等结构随数据变化的图型必须连关系结构一起重建。
  - 引库（公网 CDN，需离线时换 `assets/echarts.min.js`）：
    ```html
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script>window.echarts||document.write('<scr'+'ipt src="https://unpkg.com/echarts@5.5.1/dist/echarts.min.js"><\/scr'+'ipt>');</script>
    ```
  - 初始化：`echarts.init(el, null, { renderer:'canvas', devicePixelRatio:2 })`（deck 有居中缩放，dpr=2 才清晰）。
  - 容器尺寸 = 图表尺寸：右栏 `1120×700`、通栏 `1880×700`（高度都是 700，字号不用跟着改）。
  - **已知坑**：treemap `levels` 内不能混写颜色；无头截图 / 打印 PDF 图表全空白 → URL 加 `?all` 或改同步初始化；value 型 X 轴轴名要设 `nameLocation:'middle'` + `nameGap:34`。（详见 spec §十条末）
- **模板库 C**（`assets/架构图模板.html`）：只用于软件 / IT 系统的构成、运行或演进。先读 **00 图元与连线规范**，再按 2.2 选择 01–14，复制完整内联 SVG；分栏图按 `1120×700`、通栏图按 `1880×700` 原尺寸投放，**不做缩放折算**。
  - 常规模板只替换组件、层级、分类、状态、消息、注释和图例文字；坐标骨架、线宽和配色语义不改。红色仅保留一处，并落在最需要被看见的组件或关键交互上。
  - 类图（13）、序列图（12）、状态图（14）、活动图（11）的元素数量与关系结构必须随内容重建；分层数、分区数或列数变化时，按原模板的内边距和间距规则重算坐标。
  - 连线接在元素边的中点，优先使用直角走线，交叉不超过 2 处；同层同底色；不画穿层竖向箭头。灰底 `#A3A3A3` 标签必须使用 `#333333` 文字；聚合 / 组合菱形在“整体”端，泛化为空心三角。

---

## 8. 出图前质检（逐项自检，不达标即返工）

- [ ] 画布 1920×1080 纯白；四边 20px；标题 48px/700 左对齐；y=170 处 5px 黑线**拉通 x 0–1920**
- [ ] 内容区 175–1060 被充分使用，主导视觉**居中**、上下留白均衡
- [ ] 总结条（若有）≤2 行、**仅竖线式**（无大括号、无 bullet）
- [ ] 分栏 = 左文 700 + 间距 60 + 右图 1120；通栏图区 1880 拉满
- [ ] 每个论点 = 图标 + 小标题 + ≤2 行说明；**有图标就没有 01/02/03**
- [ ] **已按顺序做过四形态判定**：有数值 → 真实图表；无数值且讲软件 / IT 系统 → 架构图；非 IT 且有结构 → SVG 模型；都没有 → 框线分类
- [ ] 文本分类页：类目 2–4；色块标题栏 + 描边内容框 + 类目色标记线 + 条间细线；**无圆点 bullet**；22px 线稿图标；**只有一个类目走红**且落在「结论」类；已删图底说明行并收 viewBox
- [ ] 数据页：图型编号**有出处**（B·01–28）未自创；已答清「这页要回答什么」；补齐轴名 + 单位 + 数据来源；**全页只剩一处红**；标题是动作式结论不是图名；每页图 ≤2 张
- [ ] 架构图页：仅用于软件 / IT 系统构成、运行或演进；图号有出处（C·01–14），先读过 00 图元与连线规范；分栏 `1120×700` / 通栏 `1880×700` 原尺寸投放；全页仅一处红、同层同底、连线接边中点
- [ ] 架构图页：类 / 序列 / 状态 / 活动图已按实际内容重建关系结构；聚合 / 组合菱形在整体端；灰底标签为深色字；已确认全部元素坐标都在 viewBox 内；连续两页以上架构图之间插入非架构页调节节奏
- [ ] 配色比例符合（红20/蓝15/青20/灰45）；无渐变/阴影/发光/3D；SVG 内文字 ≥13px、正文 ≥20px、关键数字 ≥56px
- [ ] 相邻两页骨架不同；等宽卡片网格 ≤2 次；多页居中缩放正确无黑边
- [ ] 浅色块 / 浅色柱上的文字已改深色（白字只用在深色底上）

> **完整质检清单（含坐标与骨架、文本分类页、数据页、架构图页、图形与配色、整体）见 `references/spec.md` 第十一节。**

---

## 9. 最终输出要求

- **单一多页 HTML deck**（封面 + 每小标题一页 + 结语页），可直接用浏览器打开；提供键盘翻页、圆点跳转、页码、居中缩放。
- 示意类图形与软件 / IT 架构图 = **内联 SVG 矢量**；数据类图表 = **ECharts**（公网 CDN 是唯一允许的外部依赖）。
- 纯白背景、Flat Design、国际咨询公司风格；严格套用硬骨架，按页面类型从三个模板库取素材。
- 一页只讲一件事，标题为动作式结论；全页红色只有一处。
- 节奏：起（现状/矛盾）→ 承（框架/论证）→ 转（对比/权衡）→ 合（结论/金句）。

---

> **动手前请先读 `references/spec.md`。** 本手册给出的是决策骨架，`spec.md` 提供完整的模板目录、投放口径、ECharts 与架构图取用规则、已知坑和质检清单。