前言¶
很多演示稿先以 HTML/CSS 写好：版式灵活、便于在浏览器里预览，但对外分享或二次编辑时，对方往往要的是 PowerPoint。手工把每页复制进 PPT，版式容易走样，图表和列表也难保持可编辑。
下面介绍 SkillHub 社区技能 html-to-pptx-converter（坐标 @user_12336170/html-to-pptx-converter，版本 0.0.1）。它用 Python 解析 HTML 抽取幻灯片语义，再用 Node.js 的 PptxGenJS 生成原生、可编辑的 .pptx，而不是整页截图。
这是什么¶
html-to-pptx-converter 的定位是：将结构化 HTML/CSS 幻灯片内容转换为原生 PowerPoint 演示文稿。
- 维护方：SkillHub 社区发布者
user_12336170，来源标记为community。 - 分类：
office-efficiency（办公效率）。 - API Key：标签
requires_api_key=false，安装使用不依赖额外密钥配置。 - 官方入口：SkillHub 技能页；资源坐标也可记为
https://api.skillhub.cn/user_12336170/html-to-pptx-converter。
核心功能¶
根据技能说明与 SKILL.md，已核实的能力包括：
- 混合流水线：Python（BeautifulSoup）负责从 HTML 提取标题、要点、指标、表格与版式类信息；Node.js（PptxGenJS）按坐标系重建幻灯片并写出
.pptx。 - 原生可编辑元素：强调用
addShape、addText等 API 构图，避免截图式整页嵌入，便于在 PowerPoint 里继续改字、改色。 - 版式映射约定：支持将 HTML 中的
grid/flex等布局映射为 PptxGenJS 的 X/Y 坐标（例如双栏左右分栏）；指标类页面可用色块 + 大号文字突出数字。 - 品牌与样式：背景色可与 HTML 的
background-color或渐变效果对齐；文档中给出统一色板示例（如PRIMARY、ACCENT、TEXT等十六进制色值）。
安装与启用¶
1. 安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档 执行完整安装：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安装本技能¶
安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/，Agent 可能识别不到。官方页面给出的安装指引为：参照上述安装文档，安装 @user_12336170/html-to-pptx-converter。
CLI 搜索结果显示的安装命令为：
skillhub install html-to-pptx-converter --namespace user_12336170 --dir <你的 skills 目录>
常见客户端 skills 路径（摘自 SkillHub 安装文档）：
| 环境 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
安装后按你所用客户端的要求重启或刷新 Agent，使技能被加载。
3. 运行依赖（技能流水线）¶
技能文档要求的本机依赖如下。
Python 侧：
pip install beautifulsoup4 lxml
Node.js 侧：
npm install -g pptxgenjs
典型用法¶
技能描述的两段式流程可以概括为：先解析 HTML 得到结构化 JSON，再用 PptxGenJS 写文件。
步骤一：用 Python 解析幻灯片 HTML¶
在 HTML 中按约定使用带 slide 类等结构的节点（文档示例包括 cover-slide、content-box、two-column 等）。解析逻辑示意：
from bs4 import BeautifulSoup
import json
def parse_slides(html_path):
soup = BeautifulSoup(open(html_path), 'lxml')
slides = []
for div in soup.find_all('div', class_='slide'):
# 按版式类提取标题、列表、指标、表格等，组装为 JSON 列表
pass
return slides
实际项目中应把 pass 替换为与你 HTML 结构对应的字段抽取，输出可供下一步消费的列表或 JSON 文件。
步骤二：用 PptxGenJS 生成 PPTX¶
采用 10” × 5.625” 坐标系，遍历上一步的数据添加幻灯片：
const pptxgen = require("pptxgenjs");
let pres = new pptxgen();
const COLORS = { PRIMARY: "0F3460", ACCENT: "00D4FF", TEXT: "FFFFFF" };
data.forEach(item => {
let slide = pres.addSlide();
// 按 item.type 调用 slide.addText、slide.addShape、slide.addTable 等
});
pres.writeFile({ fileName: "output.pptx" });
在 Cursor、Claude Code 等已启用该技能的 Agent 中，你可以直接描述需求（例如「把这份 HTML deck 转成可编辑 PPTX，保留双栏和指标卡样式」），由 Agent 按 SKILL.md 中的原则生成或补全上述脚本；本技能不提供单独的 REST 服务地址，交互方式以 Agent 内技能文档为准。
适用场景与注意¶
适合谁
- 已有或计划用 HTML/CSS 维护幻灯片模板，需要批量或半自动导出 PPTX 的团队。
- 希望交付物在 PowerPoint 里仍可编辑文字、形状和表格，而不是一页页贴图的场景。
限制与坑（来自技能文档）
- 颜色格式：PptxGenJS 的十六进制颜色不要带
#前缀，应写成如00D4FF。 - 字体：建议默认使用
Microsoft YaHei或Arial，减少跨平台打开时的字体替换问题。 - 表格高度：表格不会自动为后续元素预留纵向空间，需根据行数手动递增
currentY等布局变量。 - HTML 结构：解析依赖约定的 class 与 DOM 结构；任意网页 HTML 不能不经适配直接转换，需要与
parse_slides逻辑对齐。
SkillHub 页面显示的社区数据（以页面与抓取信息为准）：评分 100000，下载约 1033 次，安装约 51 次。具体数字会随时间更新，以 SkillHub 为准。
结尾¶
html-to-pptx-converter 把「HTML 幻灯片」和「可编辑 PPTX」之间的缺口，用 Python 抽取 + PptxGenJS 重建的方式补上，适合把 Web 版式沉淀成可交付的 Office 文件。若要安装或查看说明，请访问 SkillHub：html-to-pptx-converter。
