TaoHtml - HTML演示文稿制作

技能文档

---
name: taohtml
title: TaoHtml - HTML演示文稿制作
category: 办公效率
description: 把 Word、PDF 或 PPT 制作成可在浏览器中汇报、带分步动效、支持全屏展示与离线交付的 16:9 HTML 演示文稿。支持从想法出发梳理报告结构、参考风格重构、企业模板保真和四套内置视觉系统。当用户需要制作汇报演示、将文档转为演示文稿、设计报告页面、制作路演或培训材料时触发。触发词：HTML演示、PPT转换、报告设计、演示文稿制作、汇报材料、幻灯片设计
---

# TaoHtml - HTML演示文稿制作

把已有的 Word、PDF 或 PPT，直接制作成可在浏览器中汇报、带分步动效、支持全屏展示与离线交付的 16:9 HTML 演示文稿。它不只是转换文件格式，还会重新设计页面、视觉层级和讲解节奏，让成品可以直接用于项目汇报、客户提案、产品路演或培训。

如果你准备写报告、做汇报或制作提案，但目前只有一个主题、还没有完整思路，也可以通过少量关键问题，帮助你梳理目标、受众、核心观点、证据和报告结构，再完成内容与演示设计。

如果你有喜欢的 PPT、网页或图片风格，可以把参考图发过来。它会拆解配色、字体层级、构图、组件和品牌元素，先生成一张 VI 设计标准图供你确认，再按照这套标准制作完整报告。企业模板还可以保留 Logo、页眉、页脚等固定品牌元素。

如果你没有明确的参考风格，可以直接选择四套内置视觉系统：黑白荧光卡片、严谨咨询报告、稳重企业年报、杂志图文拼贴，根据报告内容完成重构与设计。

## 核心能力

- 支持只有想法、Word / PDF、已有 PPT / HTML 三类入口
- 每次新调用先建立本次入口，没有明确主题或绑定材料时只显示三个入口
- 在正式制作前确认《报告设计简报》，记录受众、目标、结构、证据、视觉来源和必要边界
- 按业务目标路由到九条按需加载的生产路径，覆盖规范报送、研究分析、周期经营、方案决策、现场演讲、教学培训、项目全过程、品牌编辑和规则响应
- 内置四套可执行视觉系统，不只更换配色，还会改变构图、层级、组件、图片、图表、证据和动效语法
- 支持"参考风格重构"和"企业模板保真"：先生成可查看的 VI 设计标准图，确认后再编译项目专用主题
- 企业模板保真结果可保存到版本化企业档案，同一企业后续项目自动沿用
- 共享 HTML Runtime 支持阅读/演讲模式、分步呈现、整页导航、页状态保存、全屏和页码
- 采用"报告产出优先"合同：先交付可用报告，再附结构化《待核实内容清单》
- 使用本地资产和相对路径，执行离线资源检查、浏览器 QA、截图总览和 zip 打包
- 按实际能力运行环境预检，失败时在读取素材前停止

## 技能工作流

### 步骤1：入口路由握手

每次新建或实质性修改报告时，先确定入口类型。如果用户已提供具体主题、选择了入口或绑定了素材，直接进入对应路线。否则展示三个入口并等待选择：

1. **只有想法**：从对话中构建报告定义，设计就绪后生成简报
2. **Word / PDF**：上传源文件或提供完整可解析路径
3. **已有 PPT / HTML**：上传源文件或提供完整可解析路径

对于路线2和3，收到素材前不进行材料理解、设计简报或 HTML 制作。

### 步骤2：材料理解与环境预检

- 运行 `scripts/preflight.py` 执行最小必要的能力预检
- 对于绑定的 Word/PDF/PPT/HTML 源，读取 `references/material-understanding.md`，检查素材并展示材料理解摘要
- 对于"只有想法"入口，不生成虚假的材料确认
- 记录每份使用素材的来源绑定、角色、可用状态和证据验证情况

### 步骤3：需求澄清与工作流路由

- 读取 `references/intake-workflow.md`，按提问纪律逐步澄清
- 根据用户业务目标路由到九条生产路径之一（规范报送、研究分析、周期经营、方案决策、现场演讲、教学培训、项目全过程、品牌编辑、规则响应）
- 每轮只问一个最可能改变报告设计的决策问题
- 普通需求通常 3-5 个问题完成澄清，最多不超过 6 个
- 当项目设计就绪时停止提问

### 步骤4：视觉来源确认

内容结构确定后，解决视觉来源。按优先级判断：

1. **企业档案匹配**：检查是否有匹配的企业模板档案，唯一匹配时自动沿用
2. **参考风格重构**：接受 1 张静态参考图，提取颜色、字体层级、构图和组件
3. **企业模板保真**：接受 1-3 张同模板族截图，锁定 Logo、页眉、页脚等品牌元素
4. **内置视觉系统**：无参考时展示四套系统完整目录供选择

| 视觉系统 | 适合的画面语言 |
|---|---|
| **黑白荧光卡片** | 高反差、模块卡片和大标题，适合路演与强表达 |
| **严谨咨询报告** | 白底、结论式标题、高信息密度和严谨图表 |
| **稳重企业年报** | 稳重配色、图文平衡、品牌化版面和适度留白 |
| **杂志图文拼贴** | 图片切片、错位排版、大字标题和编辑杂志感 |

### 步骤5：报告设计简报

视觉来源确认后，生成《报告设计简报》，记录：
- 受众、目标、结构、证据和视觉来源
- 选定的生产路径与能力叠加
- 企业档案绑定或参考模式状态
- 主题适用性与动效密度选择

等待用户明确确认简报后进入正式制作。之前的"同意"或"继续"不算制作授权。

### 步骤6：正式制作

确认简报后，执行制作授权检查，然后直接生产 HTML：
- 锁定简洁的页面规划
- 保存完整可运行的 `index.html`
- 在有界迭代中 refinement 和 QA
- 参考风格或企业模板路线加载已验证的项目主题

### 步骤7：QA 与交付

- 运行资产检查和浏览器 QA
- 修复客观失败项，报告文件、检查和制作阶段判断
- 验证阅读和演讲模式、分步导航、整页导航和全屏
- 交付可用报告及《待核实内容清单》
- 优先单文件自包含 HTML；不适合时交付 `index.html + assets` 的 zip 包

## 四套内置视觉系统

四套系统的对比使用完全相同的合成内容，各展示 5 页、共 20 页，便于直接比较完整的版式语言。

## 使用客户参考图

两条路线共享"静态参考 → VI 设计标准图 → 确认 → 项目专用主题"的确认链，但保真目标不同：

- **参考风格重构**：接受 1 张静态参考图，提取可观察的颜色、字体层级、构图、组件和证据语言；允许为报告内容重新组织页面
- **企业模板保真**：接受同一模板族 1-3 张静态截图，锁定截图中可见的 Logo、页眉、页脚、品牌条和固定装饰

企业模板保真只承诺截图中可见的像素与页面角色，不宣称恢复原始 PPT 母版、矢量 Logo、字体源文件或截图外资产。

## 企业模板档案与跨项目复用

系统会从当前材料和对话解析企业身份，与显式档案做精确匹配。唯一匹配时自动沿用，不重复询问。

- "这次不用/换一个"只写入临时覆盖，不修改正式版本
- "以后改用/更新公司模板"重新走企业 VI 确认，创建新版本并原子切换
- "这是另一家公司/客户"创建独立档案，不覆盖原企业
- 档案保存在 `~/.taohtml`（可通过 `TAOHTML_HOME` 自定义），不写入技能安装目录

## 依赖声明与环境预检

技能根目录的 `requirements.txt` 需要手动安装。企业模板保真和参考风格重构使用 Pillow / Playwright / Chromium 链：

```bash
python -m pip install -r requirements.txt
python -m playwright install chromium
python scripts/preflight.py --profile static-reference --workspace /path/to/workspace
```

预检失败后，修复环境重试，或放弃客户参考路线改用四套内置视觉系统。

## 参考资料

- 执行工作流详细规则 → `references/agent-workflow.md`
- 材料理解规则 → `references/material-understanding.md`
- 澄清提问规则 → `references/intake-workflow.md`
- 生产路径定义 → `references/workflow-profiles.md`
- 视觉系统选择 → `references/visual-systems.md`
- 参考风格与 VI 标准 → `references/static-reference-vi.md`
- 项目主题编译 → `references/project-theme-compiler.md`
- 制作授权门禁 → `references/production-authorization.md`
- 制作手册 → `references/process-playbook.md`
- 运行时合同 → `references/runtime-contract.md`
- 内容编辑器 → `references/content-editor.md`
- 环境预检 → `references/environment-preflight.md`
- 设计质量评审 → `references/design-quality-rubric.md`
- 企业档案记忆 → `references/profile-memory.md`
- 项目交接 → `references/project-handoff.md`

使用说明

# TaoHtml - HTML演示文稿制作

把 Word、PDF 或 PPT 制作成可在浏览器中汇报、带分步动效、支持全屏展示与离线交付的 16:9 HTML 演示文稿。

## 使用

直接告诉 AI 你的需求即可触发：

```
帮我把这份 Word 做成 HTML 汇报演示文稿
把这个 PPT 转成可以在浏览器里全屏展示的 HTML
我只有一个想法，帮我梳理并制作成演示报告
```

## 支持的入口

- **只有想法**：从对话梳理结构，生成完整报告
- **Word / PDF**：上传文档，自动理解内容并设计演示
- **已有 PPT / HTML**：上传现有文件，重新设计与制作

## 四套内置视觉系统

| 视觉系统 | 适用场景 |
|---|---|
| 黑白荧光卡片 | 路演与强表达 |
| 严谨咨询报告 | 高信息密度严谨报告 |
| 稳重企业年报 | 品牌化稳重版面 |
| 杂志图文拼贴 | 编辑杂志感图文报告 |

## 工作原理

1. 确定入口类型与素材绑定
2. 理解材料内容，澄清需求
3. 确认视觉来源（参考图/企业模板/内置系统）
4. 生成并确认《报告设计简报》
5. 正式制作 HTML 演示文稿
6. 浏览器 QA 与交付

## 依赖安装

```bash
pip install -r requirements.txt
playwright install chromium
```

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。