炼丹炉 🔥

学习材料丢进去，炼出一份能打的分享。

---

材料类型与提炼策略

不同材料类型，提炼策略不同。AI 在 Phase 0 判断材料类型，Phase 1 选用对应策略。

类型 A：课程录音/文字记录（有完整逻辑）

特征：有目录结构、讲者逻辑清晰、信息密度中等

策略：

1. 先还原课程大纲（通常有 3-7 个主章节）
2. 每个章节提炼：核心观点 + 案例 + 工具方法
3. 保留讲者的"金句"（原话，不改写）
4. 输出结构：引言 → 章节 1~N → 总结 + 行动建议

注意：如果录音转写质量差（大量 [听不清]/[杂音]），先提醒用户补充材料，不要硬炼。

类型 B：书籍/长文（信息密度高）

特征：章节多、信息密度大、需要筛选重点

策略：

1. 先让用户标出"最想分享的 2-3 个核心观点"
2. 围绕这 2-3 个观点，从书中摘取支撑材料
3. 不要试图覆盖全书，分享不是读书报告
4. 输出结构：问题背景 → 核心观点（2-3个） → 每个观点的支撑 + 案例 → 如何落地

类型 C：零散笔记/想法（碎片化）

特征：用户自己的思考碎片，没有完整结构

策略：

1. 先把碎片分类（用用户自己的话，不要帮ta"升华"）
2. 找出碎片之间的关联，问用户"这几个是不是在说同一件事？"
3. 帮用户搭建骨架，但每一个观点都要用户确认再往下走
4. 输出结构：从碎片中长出来的框架，不是AI 强加的模板

类型 D：会议记录/工作文档（实用导向）

特征：信息杂、有结论、需要提炼行动项

策略：

1. 先提取：结论是什么？行动项是什么？谁负责？
2. 去掉讨论过程，只留结果和下一步
3. 输出结构：背景（1句话） → 结论 → 行动项 → Q&A 预判

---

提炼方法论（多种可选，按场景选）

组合使用多种方法论。AI 在 Phase 1 根据用户场景推荐 1-2 种，让用户选。

方法 1：金字塔原理（适合正式汇报/领导汇报）

核心：结论先行，以上统下。

操作步骤：

1. 先写出最核心的结论（1 句话）
2. 这个结论由哪几个论点支撑？（3-5 个）
3. 每个论点由什么数据/案例支撑？

输出结构：

结论（1句话）
├── 论点1 + 支撑
├── 论点2 + 支撑
└── 论点3 + 支撑

适合：汇报类分享、领导 audience、时间紧的场景

---

方法 2：SCQA 故事框架（适合培训/公开分享）

核心：用故事把观众带进去，再给答案。

操作步骤：

1. S（Situation）：描述一个大家都能共鸣的场景
2. C（Complication）：这个场景出了什么问题/挑战？
3. Q（Question）：那么我们该怎么办？
4. A（Answer）：给出你的方法/观点

输出结构：

开场故事（S+C）
    ↓
提出问题（Q）
    ↓
逐个给出答案（A1, A2, A3...）
    ↓
总结 + 行动建议

适合：培训分享、公开演讲、需要"抓人"的场景

---

方法 3：第一性原理拆解（适合方法论/工具类分享）

核心：回到本质，重新推理，不直接给结论。

操作步骤：

1. 这个问题/领域最底层的要素是什么？
2. 这些要素之间是什么关系？
3. 从这个关系推导出什么结论？

输出结构：

本质要素（3-5个）
    ↓
要素之间的关系
    ↓
推导出的结论/方法
    ↓
如何应用（案例）

适合：讲方法论、工具、思维模型的分享

---

方法 4：问题树（适合实战/案例类分享）

核心：从真实问题出发，带着问题去找答案。

操作步骤：

1. 列出 audience 最关心的 3-5 个问题
2. 每个问题给答案 + 案例 + 可操作的方法
3. 问题之间要有逻辑递进（从浅到深，从小到大地）

输出结构：

问题1：xxx？
  → 答案 + 案例 + 方法
问题2：xxx？
  → 答案 + 案例 + 方法
问题3：xxx？
  → 答案 + 案例 + 方法

适合：实战分享、案例教学、Q&A 多的场景

---

方法 5：5W1H 全景框架（适合项目复盘/综合介绍）

核心：把一件事说全，不留死角。

操作步骤：

1. Why（为什么做）
2. What（做了什么）
3. Who（谁参与/谁受益）
4. When（时间线）
5. Where（应用场景）
6. How（怎么做的，关键方法）

输出结构：每个 W/H 一页幻灯片，共 6 页，适合快速介绍一个项目/事件。

适合：项目汇报、事件复盘、综合介绍类分享

---

如何选方法论（AI 决策树）

问：分享的主要目的是什么？
│
├── 传递结论/说服 → 金字塔原理
├── 讲故事/打动人 → SCQA 故事框架
├── 教方法/给工具 → 第一性原理拆解
├── 解决实际问题 → 问题树
└── 全面介绍一件事 → 5W1H 全景框架

可以组合使用，例如：开场用 SCQA 抓人，中间用第一性原理讲方法，结尾用金字塔原理总结结论。

---

时间控制（根据时长倒推内容量）

在 Phase 0 确认分享时长后，Phase 1 按以下标准控制内容量：

时长	建议幻灯片数	每页bullet点数	总字数（含标题）
5 分钟	5-7 页	不超过 3 个	~500 字
10 分钟	8-12 页	不超过 4 个	~1000 字
20 分钟	15-18 页	不超过 5 个	~2000 字
30 分钟	20-25 页	不超过 5 个	~3000 字

重要：

• 互动环节（投票/讨论）不占内容页数，但要预留时间
• 用户说"10 分钟"但材料很多 → 提醒：要么压缩内容，要么延长时间
• 检查点：Phase 1 产出 Markdown 后，AI 自行估算演讲时长，超出则提醒用户

---

输出风格模板（可选，Phase 2 让用户选）

5 种成熟风格模板及决策树见 references/styles.md。Phase 2 展示 2-3 个风格描述让用户挑选。

---

中文排版规范（内置，必须严格遵守）

遵守以下规范。适用于所有中文 PPT 输出，不区分风格——是底线要求。

文字规范

规范	标准	原因
标题长度	不超过 12 个汉字（或 24 个英文字符）	超出会折行，视觉破碎
正文 bullet 点	每页不超过 3-4 个	多了观众不看
每 bullet 字数	不超过 1 行（约 28-32 个汉字）	长了念不完，观众也读不完
字体混用	中文用无衬线，英文/数字用同字体族	不要用宋体/衬线做正文
强调方式	用颜色或加粗，不用下划线、不用全大写	中文没有"全大写"概念

排版规范

规范	标准
对齐	整份 PPT 只用一种对齐方式（左对齐或居中），不混用
留白	每页四周留白不少于 10%，不要把内容推到边缘
行距	标题行距 1.2x，正文行距 1.5-1.8x
图标	每页图标风格统一（线性 OR 面性，不混用）

视觉层级规范

标题：最大、最粗、强调色
副标题/小节标题：中等、常规色
正文：最小、常规色
标注/注释：最小、灰色

检查点：Phase 3 生成 PPT 后，AI 自行检查以上规范是否全部满足。

---

图片使用规范与主题节奏规划

图片来源优先级、比例标准、命名规则，以及三种页面类型交替节奏规则，见 references/image-rhythm.md。Phase 3.1 选骨架后按节奏规则检查页面类型交替。

---

跨设备自适应规范（内置，必须严格遵守）

确保 HTML PPT 在所有设备上内容完整可见。遵守以下规范：

三层防御体系

第 1 层：固定画布 + 深色背景填充

核心方案：幻灯片内容固定为 960×540（16:9），四周深色背景填充空白，模拟 PPT 放映效果。

.slide {
  width: min(96vw, 960px);
  height: min(90vh, 540px);
  max-height: calc(100vh - 60px); /* 减去底部导航栏 */
}
.slides-wrap {
  background: #1a1a2e; /* 深色背景填充空白区域 */
}

第 2 层：响应式字号 clamp()

核心原则：全部使用 clamp() 三档缩放，覆盖手机到大屏。

.slide h1 { font-size: clamp(1.8em, 4.5vw, 2.6em); }
.slide h2 { font-size: clamp(1.35em, 3vw, 1.9em); }
.slide h3 { font-size: clamp(1em, 2.2vw, 1.25em); }
.slide p  { font-size: clamp(.88em, 1.85vw, .98em); }
.slide li { font-size: clamp(.82em, 1.7vw, .92em); }

clamp(MIN, PREFERRED, MAX) 含义：

• MIN：最小字号，手机端也能看清
• PREFERRED：理想字号，基于视口宽度百分比
• MAX：最大字号，大屏不会过大

第 3 层：交互容器滚动容错

所有可交互组件必须内置滚动容错：

.flip-card-back { max-height: 60vh; overflow-y: auto; }
.bar-detail { max-height: 40vh; overflow-y: auto; }
.poll-result { max-height: 35vh; overflow-y: auto; }

微信浏览器适配（强制）

html, body {
  -webkit-tap-highlight-color: transparent;  /* 去掉触摸高亮 */
  -webkit-text-size-adjust: 100%;            /* 禁止 iOS 自动调整字号 */
}
.nav-bar {
  padding-bottom: max(8px, env(safe-area-inset-bottom));  /* iPhone X 底部安全区 */
}

跨设备自适应检查点（Phase 3 生成后自检）

• 所有 font-size 使用 clamp() 或相对单位，没有裸 px
• 固定画布比例正确（min(96vw, 960px) × min(90vh, 540px)）
• 翻转卡背面有 max-height: 60vh; overflow-y: auto
• 所有交互组件的结果容器有滚动容错
• 微信适配样式已包含（tap-highlight / text-size-adjust / safe-area）
• 深色背景 .slides-wrap { background: #1a1a2e } 已设置

---

打印与 PDF 导出规范（内置，必须严格遵守）

自写 JS 翻页系统下，幻灯片用 position: absolute + transform 排列。打印时必须将它们展开为纵向排列。

核心方案：@media print CSS

完整 CSS 见 references/layouts.md 离线版模板（@media print 块）。此处仅保留工作流与检查点。

打印工作流

📄 打印 / 导出 PDF：
方式 1（推荐）：Chrome 浏览器 → 打印 → 目标设备：另存为 PDF → 布局：横向 → 边距：无 → 勾选"背景图形"
方式 2：Edge 浏览器 → 打印 → Microsoft Print to PDF → 横向

打印检查点（Phase 3 生成后自检）

• @media print CSS 块已包含
• 打印模式下所有隐藏内容（flip-card-back / step-reveal-item 等）全部展开
• 每页有 page-break-after: always
• @page { size: A4 landscape } 已设置
• 导航栏在打印时隐藏

---

材料质量检查（Phase 0 追加检查点）

在 Phase 0 收完材料后，AI 自行评估材料质量，不合格要提醒用户补充，不要硬炼。

质量评估标准

问题	判定标准	处理方式
录音转写质量差	[听不清]/[杂音] 占全文 > 20%	停止，提醒用户补充材料或换来源
材料过于碎片	没有完整句子，只有关键词	先帮用户结构化，每加一个观点都要确认
材料与分享主题无关	用户丢了一堆材料但不说要炼哪个	先问清楚："你想炼哪一袋？"
材料语言非中文	英文材料 → 先翻译再提炼	提醒用户：翻译可能损失精度，确认是否接受

检查点（追加到 Phase 0）

材料质量过关吗？ 不过关 → 提醒用户，不要硬炼。

---

交付物清单（每次必填）

交付时，AI 明确告诉用户拿到了什么、每个文件的用途。

标准交付物（PPT/HTML 形态）

文件	路径	用途
分享稿 Markdown	同一目录下 .md 文件	内容底稿，用户可二次修改
PPT（HTML）	C:/Users/admin/WorkBuddy/Claw/deploy-ppt/index.html	可离线打开，可直接分享
预览链接（可选）	用户确认公开部署后才生成	在线预览，方便分享

交付话术模板

交付啦 🎉

你拿到了：
1. 📄 分享稿（Markdown）：`[文件路径]`，内容是咱们确认过的底稿
2. 🎬 PPT（HTML）：`[文件路径]`，用浏览器打开就能讲
3. 🔗 预览链接（可选）：[链接 or "你确认公开后我再来生成"]

下次修改直接把文件丢给我，说"改一改"就行~

---

Skill 维护规范

将本 Skill 视为活文档，用得越多越精准。以下情况必须更新 SKILL.md：

什么时候更新

触发条件	更新内容
用户反馈某步不好用	在对应 Phase 追加"用户反馈"注释，调整流程
发现了新坑（新的 bug/新问题）	追加到"避坑规范"表格
某种材料类型没覆盖到	追加到"材料类型与提炼策略"
某种风格需求没覆盖到	追加到"输出风格模板"

版本记录规范

每次更新，在"版本记录"表格追加一行，格式：

版本	日期	变更摘要
v0.x.0	YYYY-MM-DD	做了什么（1 句话）

---

用户反馈入口

用完这个 Skill，有任何不好用、不准确、流程卡壳的地方，直接告诉我。

我会把你的反馈沉淀到这个 SKILL.md 里，下次就不会再犯。

反馈格式随便，说清楚"哪里不好用 + 你希望怎么改"就行。

---

触发词

以下任意一句触发本 Skill：

• "帮我炼一炉"
• "把这门课/这份材料做成分享"
• "帮我做分享材料"
• "做成 PPT"
• "整理成分享"

---

工作流

Phase 0：取材 📥

目标：搞清楚用户有什么、要什么。

1. 让用户把所有材料丢进来：
   • 课程录音文字记录（支持 .txt、飞书文字记录等）
   • 用户的笔记/标注（支持截图、.md、.txt、直接粘贴文字）
   • 参考 PDF / PPT 图片（如有）
2. 确认分享场景：
   • 受众是谁（同事/领导/客户/公开分享）？
   • 时长多少（5分钟/10分钟/30分钟）？
   • 希望什么风格（活泼/正式/极简）？
3. 确认输出形态（本 Skill 先聚焦 PPT，后续扩展）：
   • 离线 HTML PPT（自写 JS，零外部依赖）：微信可直接打开，无需网络 ← 默认
   • 瀑布流网页（后续支持）
   • 多层网页（后续支持）
4. ⚠️ 强制 确认部署需求（不主动默认公开部署，必须问用户）：
   • 不需要在线预览：交付本地 HTML 文件即可
   • 需要在线预览但不能公开：用密码保护或私有部署方案（用户自行决定）
   • 可以公开：询问用户是否接受公开部署，确认后再执行

   ⚠️ 本步骤不可跳过。即使看起来是"快速测试"，也必须确认部署方式后再进 Phase 1。

检查点：材料齐了？场景清楚了？部署方式确认了？没齐就问，不要硬炼。

---

Phase 1：初炼 🔥

目标：消化材料，产出结构化 Markdown 分享稿。

1. 仔细阅读材料，提取核心框架（通常 5-7 个章节）
2. 每个章节提炼：
   • 核心观点（1-2 句话）
   • 支撑案例/数据（如有）
   • 可操作的方法/工具（如有）
3. 生成 Markdown 格式的分享稿，包含：
   • 标题 + 副标题
   • 5-7 个主章节（每节 1-2 张幻灯片的内容量）
   • 结尾：总结 + Call to Action
4. 把 Markdown 完整展示给用户确认，不要直接跳去做 PPT

叙事弧辅助规划（讲故事的五段式节奏）

使用以下叙事弧结构组织分享稿，让分享有起伏、不枯燥：

阶段	作用	典型用时占比	对应页面
Hook（勾子）	开头抓眼球，制造"我想听下去"的感觉	5%	封面页 + 数据大字报/金句
定调（Setup）	告诉观众今天要讲什么，设预期	10%	目录页 + 背景介绍
主体（Body）	铺干货，逐章展开核心内容	65%	观点+案例+流程图
转折（Twist）	制造意外或认知反转，避免平铺直叙	10%	对比页/金句/"但真相是……"
收束（Closing）	总结要点，给行动建议，有力结尾	10%	总结+行动 + 结尾致谢

不是每场分享都需要"转折"。如果是正式汇报，可以跳过转折；如果是培训/激励型分享，转折能大幅提升感染力。AI 在 Phase 1 根据分享场景建议是否需要。

输出格式示例：

# 标题

## 章节1：xxx
- 核心观点：xxx
- 案例：xxx

## 章节2：xxx
...

检查点：用户确认内容 OK 了吗？没确认就别进下一阶段。

---

Phase 2：凝练 ⚗️

目标：根据用户反馈迭代，把内容磨到位。

1. 用户提出修改意见（增删章节、调整语气、融合新内容等）
2. 每次只改 1-2 处，改完展示差异，确认后再继续
3. 如果有新材料（用户补充的笔记/其他课程），融合时注意：
   • 不同来源的材料要分开处理，不要混淆（⚠️ 踩坑经验：曾把李家贵和倪云华的内容混在一起）
   • 如果用户明确说"这是 XX 老师的课程"，要单独分析，不要和其他材料合并
4. ⚠️ 强制 内容定稿后，逐项和用户确认视觉要求：
   • 配色（有品牌色用品牌色，没有默认橙色系）
   • 字体（默认阿里普惠体，需用户确认是否可用）
   • 视觉风格（配色、字体、整体调性）
   • 是否需要交互效果（不默认添加，根据内容需要逐项询问用户是否选用）

   ⚠️ 以上四项必须逐一询问用户，不可跳过任何一项。 即使用户说"随便"或"默认就行"，也要列出默认值让用户确认。

检查点：内容定稿了？视觉要求逐项确认了？确认了再进下一阶段。

---

Phase 3：出炉 🏆

目标：生成离线自包含 HTML PPT（自写 JS 翻页系统，零外部依赖）。

3.1 生成 PPT

前置步骤：选骨架 + 类名预检

1. 回顾 Phase 1 确认的分享内容，为每一页匹配最合适的布局骨架（参考 references/layouts.md），以表格形式列出页码→内容→骨架→CSS类的映射，供用户确认
2. ⚠️ 强制 交互组件选型：在匹配骨架的同时，判断每一页内容是否适合加交互组件（见「交互元素武器库 🔧」匹配表）。将交互组件选型追加到映射表中，形成 页码→内容→骨架→交互 四列表格。
3. ⚠️ 强制 类名预检：选定骨架和交互组件后，列出所有必需的 CSS 类名（含排版组件类 + 交互组件类 + 动画 keyframes），逐一检查是否已写入 <style> 块。没定义的类名必须在 <style> 中补上，不要假设它们"等会儿再加"。
4. 类名预检通过后，再开始填入内容生成 HTML。

   ⚠️ 本步骤不可跳过。类名预检未通过就生成的 PPT 必然出现显示问题。交互组件选型未确认就生成，会导致交互缺失或滥用。

3.1b 内容密度上限约束（强制，不可违反）

参考 frontend-slides 的实践：超出限制必须拆分，绝不滚动堆砌。以下上限表直接约束每页内容的"天花板"，AI 在 Phase 1 规划页面时就必须遵守。

页面级密度上限：

页面类型	最大元素数	每条元素最大字数	超出处理
封面页	1 标题 + 1 副标题 + 1 作者行	标题 ≤20 字，副标题 ≤30 字	—
章节幕封	1 章节编号 + 1 标题 + ≤1 行副标题	标题 ≤12 字	—
普通内容页	1 标题 + ≤4 个要点 + ≤1 个图表/组件	标题 ≤15 字，每要点 ≤30 字	拆分
数据/图表页	1 标题 + 1 图表 + ≤2 行注释	标题 ≤12 字，注释 ≤20 字	—
案例页	1 标题 + 1 案例描述（≤80 字） + ≤1 个启示	标题 ≤12 字	拆分
结尾致谢	1 句话 + ≤1 个联系方式	主文案 ≤15 字	—

全局规则（任何页面都必须遵守）：

规则	说明
禁止内容滚动	每页内容必须完全显示在固定画布内（960×540），不得依赖 overflow-y: auto 让用户滚屏阅读正文——这是 PPT，不是网页。只有交互组件内部（flip-card-back / bar-detail / poll-result）允许滚动
拆分优先	当一页内容超出上限 → 优先拆分为多页，而非压缩字号或堆砌。拆页时保持标题一致，加"(1/2)"标注
标题 ≠ 段落	标题是观点，不是概括句。≤15 字，可以带问号/感叹号
bullet ≠ 文章	每条 bullet 是核心要点，≤30 字。需要详细解释 → 放到演讲者口述，不要写在幻灯片上
图表 + 文字不同时出现	一页要么是"观点+bullet"模式，要么是"图表+注释"模式，不要混叠导致视觉拥挤

密度检查点（Phase 1 规划后、Phase 3.1 生成前各检查一次）：

• 每页标题 ≤15 字
• 每页 bullet ≤4 个，每个 ≤30 字
• 没有任何页面靠滚动才能看完正文
• 图表页没有额外的大量文字说明
• 超出限制的页面已拆分，未压缩字号

生成规范：使用自写 JS 翻页系统生成单文件 HTML，零外部依赖。

• HTML 骨架：严格使用 references/layouts.md 中「离线版 HTML 输出模板」的完整骨架
• 翻页系统：内联 ~50 行原生 JS（触摸滑动 + 鼠标滚轮 + 键盘方向键，400ms 滚轮防抖）
• 画布：固定 960×540（16:9），深色背景 #1a1a2e 填充空白，模拟 PPT 放映
• 字体：系统字体栈 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif，不使用 Google Fonts 或任何外部字体
• 配色：主色 #FF6D00（橙色），背景 #fff（幻灯片内），画布背景 #1a1a2e
• 响应式：全部文字使用 clamp() 三档缩放
• 微信适配：-webkit-tap-highlight-color: transparent + -webkit-text-size-adjust: 100% + env(safe-area-inset-bottom)
• 底部导航栏：固定底部，毛玻璃效果，显示页码（1 / N），安全区适配
• 页面结构：封面页（.slide.cover）→ 目录页 → 章节幕封（.slide.section-header）→ 内容页（.slide）→ 结尾致谢（.slide.closing）
• 每页底部：.slide-tag 显示页码
• 交互效果（非默认，按需询问用户）：
  • 只有内容本身适合交互时才建议（翻转卡 / 点击揭示 / 逐条揭示 / 投票）
  • 交互组件的点击事件用 event.stopPropagation() 与翻页系统解耦
  • 不要每炉都放交互效果，滥用会分散注意力
• 选骨架：从 references/layouts.md 中为每页挑选最匹配的布局骨架，填空即可
• 主题节奏：检查页面类型（Light/Dark/Hero）交替节奏，遵守「主题节奏规划」硬规则
• 必须包含的全局 CSS/JS（按 references/layouts.md 逐项检查，遗漏一项整个 PPT 都会出问题）：
  • 固定画布 + 深色背景（.slides-wrap + .slide 核心 CSS）
  • 响应式字号（全部 clamp()，参见「跨设备自适应规范」第 2 层）
  • 排版组件 CSS：根据选用的骨架，包含对应 .card / .step-list / .trend-grid / .bar-262 / .reason-cards / .metric / .tag / .quote-box 等类的完整定义
  • 交互组件 CSS：根据选用的交互，包含对应 .flip-card / .reveal-box / .step-reveal-item / .poll 等类的完整定义
  • 交互容器滚动容错（max-height: 60vh; overflow-y: auto 等）
  • 动画系统 keyframes（7 个：floatBubble, pulseGlow, pulse, shimmer, fadeInStagger, countUp, closingFadeIn）— 完整代码见 references/layouts.md 动画系统章节
  • 自动交错入场 stagger 规则（3 组：.card / .trend-card / .reason-card）— 选择器已适配 .slide.active
  • @media print 打印专用 CSS（简化版，见「打印与 PDF 导出规范」）
  • 微信适配样式（tap-highlight / text-size-adjust / safe-area）
  • 自写翻页引擎 JS（触摸+滚轮+键盘，400ms 防抖，见 references/layouts.md 离线版 HTML 输出模板）
  • 底部导航栏 HTML + CSS

3.2 避坑规范（内置经验，必须严格遵守）

坑	现象	解决方案
翻转卡文字截断	翻转后背面文字只显示一部分	.flip-card-back 必须加 overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column;；.flip-card-inner 高度不能用 100%（父元素只有 min-height），需明确设置 height: 70px 等固定值
262 条状图不显示	点击后条状图无反应	容器不能有 overflow: hidden；revealBarNext() 要绑在容器级，不能绑在内部元素上（宽度为 0 时点不到）
交互组件误触发翻页	点击卡片/投票时跳到了下一页	所有交互组件的 onclick 中必须加 event.stopPropagation()
编码损坏（U+FFFD）	批量替换后中文变成乱码	Node.js 读写文件必须用 { encoding: 'utf8' }，不能用默认编码
微信中无法打开	收到 HTML 文件后微信内置浏览器白屏	必须零外部依赖（无 CDN、无 Google Fonts）；系统字体栈自动适配
跨设备显示不一致	不同分辨率下内容超出或过小	① 固定画布 960×540 + 深色背景填充；② 全部 font-size 使用 clamp()；③ 交互组件加 max-height + overflow-y: auto
打印/PDF 导出内容丢失	Ctrl+P 只能看到当前一页	① 必须包含 @media print CSS；② 每 slide 加 page-break-after: always；③ 展开所有隐藏内容
🎨 AI感配色	幻灯片像"模板生成"的，缺乏个性	❌ 禁止：大面积紫色渐变、粉色+蓝色搭配、过饱和霓虹色、千篇一律的蓝白。✅ 要求：配色必须由内容决定（技术→冷色系，人文→暖色系，数据→克制灰+单一强调色），拒绝"AI 默认审美"
🎨 过度装饰	每页都有图标、动画、装饰线，视觉噪音大	❌ 禁止：无意义的装饰元素（即使布局骨架支持）。✅ 规则：装饰只在"需要引导注意力"时使用（封面/章节页/大字报），普通内容页不堆装饰
🎨 千篇一律布局	连续多页完全相同的结构，观众审美疲劳	❌ 禁止：连续 3 页以上使用同一种布局骨架。✅ 规则：主题节奏强制检查（Light/Dark/Hero 交替），至少每 3 页变一次骨架
🎨 无灵魂图表	数据不分主次，表格/列表缺乏叙事焦点	❌ 禁止：直接把数据 dump 到表格或 bullet。✅ 规则：每张图表页必须有"一句话结论"（`` 标注），数据为结论服务，不是展示数据本身
🎨 AI感字体	默认使用系统自带字体导致中文字形不统一	❌ 禁止：使用 Arial/Helvetica 等西文字体渲染中文（字形退化）。✅ 中文必须使用系统字体栈 PingFang SC / Microsoft YaHei，确保每个平台的中文渲染都正确

3.3 部署（按需，默认不出预览链接）

交付分两个层次，询问用户需要哪一层：

1. 本地文件（默认）：

   • 保存到用户指定目录（默认 C:/Users/admin/WorkBuddy/Claw/deploy-ppt/index.html）
   • 用户可自行通过企微/微信/邮件等私有渠道发送，无需网络即可打开
   • 交付时提醒：这是单文件，微信转发后对方直接用浏览器打开就能看

2. 在线预览（需用户确认接受公开性）：

   • 先问清楚：这份材料是否可以放在公开互联网上？
   • 可以公开 → 询问用户接受的部署方式
   • 不能公开 → 建议用户自行用公司内网部署，AI 只交付本地文件

原则：不经过用户明确同意，不把任何材料传到公开互联网。

3.4 多平台封面输出（可选，Phase 3.3 后询问用户）

PPT 内容生成完成后，AI 应主动询问用户："需要顺便生成公众号头图和小红书封面吗？"（参考 guizang-ppt-skill 的多平台输出能力）

封面规格：

平台	尺寸	内容要求	设计要点
公众号头图	900×383 px（2.35:1）	PPT 标题 + 副标题 + 讲者名	大字居中，品牌色背景/渐变，留出顶部状态栏和底部标题区
小红书封面	1080×1440 px（3:4）	PPT 标题 + 1 句钩子文案 + 讲者名	字体更大，对比度更强，下方留出标题文字区

生成方式：

1. AI 询问："需要生成公众号头图和小红书封面吗？（会基于 PPT 封面风格自动生成）"
2. 用户确认 → AI 生成两个独立的 HTML 文件（封面-公众号.html / 封面-小红书.html），使用与 PPT 相同的配色和字体
3. 交付时提醒用户："用浏览器打开 HTML → 截图（或 Ctrl+Shift+S 区域截图）→ 即为封面图"
4. 如果用户需要 PNG 文件 → 用 @media screen 固定尺寸 + window.print() 导出 PDF → 用户自行转换

不生成的情况：

• 用户说"不要" → 跳过
• 该 PPT 只是内部使用/不会公开发布 → AI 判断后提醒"看起来不需要封面，要跳过吗？"

---

Phase 4：迭代 🔄

目标：根据用户反馈修改，直到满意。

1. 用户提修改意见（"翻转卡文字没显示全""配色不对""加一个动画"等）
2. 每次只改一个问题，改完立即预览，确认修复后再继续
3. 如果修改涉及编码操作（批量替换），先用 Node.js 小范围测试，确认无误再全量执行
4. 修改完成后重新部署，更新预览链接

⚠️ 强制 AI 自主目视检查（交到用户手上之前，AI 必须先自己看一遍）

在交还给用户之前，AI 必须在浏览器中打开 HTML 文件，逐页检查：

1. 第一遍：翻页检查 — 每页内容完整显示，没有文字溢出/截断/重叠
2. 第二遍：交互检查 — 点一遍所有翻转卡/条状图/投票/fragment动画，确认交互后内容正常
3. 第三遍：打印检查 — Ctrl+P 预览，确认所有页面都能看到，内容展开完整

发现任何问题，记下来，逐条修。修完后重新跑一遍三遍检查。

⚠️ 本步骤不可跳过。未经过目视检查的 PPT 不得交给用户。如果 AI 无法直接打开浏览器，则用 preview_url 工具预览，并在回复中明确列出检查结果。

4a. ⚠️ 强制自动校验（目视检查后、交付前必须运行）

在完成三遍目视检查后，运行自动校验脚本 scripts/validate-lian-dan-lu.mjs，检查所有 P0 项是否达标：

node ~/.workbuddy/skills/lian-dan-lu/scripts/validate-lian-dan-lu.mjs <path/to/ppt.html>

校验脚本覆盖 8 组共 25+ 检查项：零外部依赖、字体栈、固定画布、翻页引擎、导航栏、微信适配、打印 CSS、交互组件 CSS 完整性、动画 keyframes 完整性。

• 全部通过（exit 0）→ 可以交付
• 有失败项（exit 1）→ 逐条修复后重新运行脚本，直到全部通过
• 脚本自动跳过未使用的组件检查（如 PPT 没用到 flip-card，则不检查 flip-card CSS）

⚠️ 本步骤不可跳过。目视检查 + 自动校验缺一不可。自动校验能发现目视检查容易遗漏的技术问题（CDN 残留、字体缺失、clamp 遗漏等）。

经验：不要一次改多个问题，容易引入新 bug（踩过坑）。

---

交互元素武器库 🔧

以下效果不是每次必放，只在内容本身适合时才建议。AI 在 Phase 2 确认视觉要求时，根据内容结构主动询问用户是否选用，不要默认全加。

⚠️ 自写 JS 翻页系统下所有交互组件完全可用。交互组件的点击事件通过 event.stopPropagation() 与翻页系统解耦，互不干扰。

什么时候建议什么效果

内容结构	推荐效果	原因
"问题→答案"或"概念→解释"	翻转卡 / 点击揭示	引导观众先思考再揭晓
关键数据/震撼结果	点击揭示（Reveal Box）	制造悬念，揭晓时冲击力更强
人机分工/比例分配	262 条状图 / 比例条	可视化比例比文字更直观
现场互动/征求意见	投票组件（Poll Box）	拉参与感，收集真实反馈
多步骤流程	逐条揭示（Step Reveal）	讲者控制节奏，一次一条
多张卡片并列	自动交错入场（Stagger）	进页面即自动逐张出现，比 fragment 更流畅

完整 HTML + CSS + JS 代码见 references/layouts.md 第二部分「交互组件」和「动画系统」。
以下为各组件的最小可行版本（MVP）供快速参考。

翻转卡（Flip Card）

适用：问题→答案、概念→解释、工具→用法。每张幻灯片最多放 3 个，避免拥挤。

<div class="flip-card" onclick="this.classList.toggle('flipped')">
  <div class="flip-card-inner">
    <div class="flip-card-front">问题/概念</div>
    <div class="flip-card-back">答案/解释</div>
  </div>
</div>

必要 CSS（不能省略）：

.flip-card-inner {
  height: 70px; /* 不能用 100%，父元素只有 min-height */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card-back {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

262 协作法条状图

适用：讲解人机分工比例。revealBarNext() 必须绑在容器上，不能绑在内部 seg 元素上（初始宽度为 0 时点不到）。

⚠️ 强制 初始状态规范：条状图的"逐段揭示"依赖 CSS 动画从 0% 展开到目标宽度，因此初始 HTML 必须满足：

• 所有 .bar-seg 初始 style="width: 0%"，实际比例存在 data-width 属性中
• placeholder 初始必须显示（👆 点击此处揭示），不能设 display:none
• 第一个 detail 项设 class="step-reveal-item visible"，其余 detail 项不设 visible（初始 opacity:0 隐藏）
• 被锁定的 detail 项的 hint 文字为 🔒，颜色为 var(--gray-500)
• revealBarNext() 每解锁一步，必须对被解锁的 detail 项执行 classList.add('visible') 触发入场动画

<div class="bar-262" onclick="revealBarNext()">
  <div class="bar-seg seg-2">20% 需求澄清</div>
  <div class="bar-seg seg-6">60% AI 执行</div>
  <div class="bar-seg seg-2b">20% 结果验证</div>
</div>

投票组件

适用：现场互动，收集观众意见。

<div class="poll" id="poll1">
  <button onclick="vote(1, 'A')">A. 选项A</button>
  <button onclick="vote(1, 'B')">B. 选项B</button>
  <div class="poll-result" id="result1"></div>
</div>

---

输出检查清单（三级分级）

P0 = 必须过，否则 PPT 没法用 | P1 = 应该过，否则掉档次 | P2 = 锦上添花，有余力做

🔴 P0 — 必须过（不过关不能交付）

• Markdown 分享稿已给用户确认，内容无误
• PPT 配色符合用户要求（品牌色/指定色）
• 字体使用系统字体栈（PingFang SC / Microsoft YaHei / Helvetica Neue / sans-serif），零外部字体
• 零外部依赖：无 CDN（jsdelivr）、无 Google Fonts、无外部 CSS/JS 引用
• 固定画布比例正确（min(96vw, 960px) × min(90vh, 540px)），深色背景填充
• 翻页系统正常（键盘方向键 + 触摸滑动 + 鼠标滚轮）
• 底部导航栏正常显示（页码正确，按钮可用）
• 内容超出时可滚动，不会截断
• 所有 font-size 使用 clamp() 或相对单位
• 布局骨架中的所有 CSS 类名已在 <style> 中定义（类名预检通过）
• 交互组件（reveal-box/flip-card/step-reveal/bar-262）所用 CSS 类全部已定义
• 动画系统 keyframes（7个以上）和 stagger 规则已写入
• @media print CSS 块已包含
• 微信适配样式已包含（tap-highlight / text-size-adjust / safe-area）
• ⚠️ scripts/validate-lian-dan-lu.mjs 自动校验通过（0 失败项）

🟡 P1 — 应该过（不过降档次）

• 内容密集型页面使用了结构化组件（card/step-item/trend-grid/reason-card），不是纯 p 标签堆砌
• 如使用了翻转卡：背面文字完整显示，内容超出时可滚动
• 如使用了点击揭示：正面 shimmer 动画正常，点击后背面内容完整
• 如使用了 262 条状图/比例条：功能正常，标签对齐
• 交互组件下方有 .interactive-hint 或 .interact-instruction 提示用户
• 中文排版规范已检查（标题≤12字、每页bullet≤3-4个、对齐统一、行距合规）
• 跨设备自适应已检查（固定画布、clamp()、交互容器滚动）
• 打印/PDF导出完整（分页、内容展开）
• 部署方式经用户确认（本地文件/在线预览/不部署）

🟢 P2 — 锦上添花

• 移动端友好（手机竖屏也能看）
• 页面配色有节奏变化（不是所有页一个色）
• 卡片进入页面时有自动交错入场动画（stagger）
• 封面/章节幕封/结尾有装饰动画（floatBubble/pulseGlow/closingFadeIn）
• 目视检查通过（Phase 4 在浏览器中过了一遍）

---

参考资料

• 布局骨架库：references/layouts.md — 完整组件库（10 种排版骨架 + 4 种交互组件 + 7 个动画 keyframes + 3 组 stagger 规则 + 离线版 HTML 输出模板），Phase 3.1 选骨架时使用
• 输出风格模板：references/styles.md — 5 种成熟风格（TED/McKinsey/Google/极简/活泼）+ 决策树，Phase 2 选风格时使用
• 图片与节奏规范：references/image-rhythm.md — 图片来源优先级 + 比例标准 + 三种页面类型交替节奏规则，Phase 3.1 选骨架后检查
• 校验脚本：scripts/validate-lian-dan-lu.mjs — 自动校验 P0 清单（零外部依赖/字体/画布/翻页/微信适配/打印/交互/动画 8 组 25+ 项），Phase 4 目视检查后运行
• 女娲 Skill（C:/Users/admin/nuwa-skill/SKILL.md）：人物蒸馏的分阶段结构参考
• guizang-ppt-skill（~/.workbuddy/skills-marketplace/skills/guizang-ppt-skill/）：布局骨架、检查分级、叙事弧等工程化方法论参考
• frontend-slides（17.5k Star）：内容密度上限约束、反AI审美策略、mood-based风格选择等实践参考
• TED 演讲视觉规范：https://blog.ted.com/（公开演讲风格参考）
• McKinsey 幻灯片规范：《McKinsey Presentation Principles》（专业汇报风格参考）

---