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 §一）

画布：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 必须照此实现）：

// 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。全页红色只有一处。

/* 标题 */ 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）：

    <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 与架构图取用规则、已知坑和质检清单。