前言¶

很多演示稿先以 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，已核实的能力包括：

1. 混合流水线：Python（BeautifulSoup）负责从 HTML 提取标题、要点、指标、表格与版式类信息；Node.js（PptxGenJS）按坐标系重建幻灯片并写出 .pptx。
2. 原生可编辑元素：强调用 addShape、addText 等 API 构图，避免截图式整页嵌入，便于在 PowerPoint 里继续改字、改色。
3. 版式映射约定：支持将 HTML 中的 grid / flex 等布局映射为 PptxGenJS 的 X/Y 坐标（例如双栏左右分栏）；指标类页面可用色块 + 大号文字突出数字。
4. 品牌与样式：背景色可与 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 安装文档）：

安装后按你所用客户端的要求重启或刷新 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 里仍可编辑文字、形状和表格，而不是一页页贴图的场景。

限制与坑（来自技能文档）

1. 颜色格式：PptxGenJS 的十六进制颜色不要带 # 前缀，应写成如 00D4FF。
2. 字体：建议默认使用 Microsoft YaHei 或 Arial，减少跨平台打开时的字体替换问题。
3. 表格高度：表格不会自动为后续元素预留纵向空间，需根据行数手动递增 currentY 等布局变量。
4. 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。