Html2pptx Shape

HTML 转 PPTX 形状转换器 — 将 HTML 幻灯片转换为完全可编辑的 PPTX，自动内嵌外部 CSS，保留 CSS 样式、布局，映射为 PPTX 原生形状（矩形/文本框/图片等）

Security Scan

The skill appears to do what it says (HTML→PPTX conversion) and its dependencies match the stated purpose, but there are minor inconsistencies — several debug scripts contain hard-coded absolute paths to local user files and the package includes heavier tooling (Playwright) and network-capable libraries that could access local files or the network if run; review before running.

Purpose & Capability

Name/description match the code and declared dependencies: python-pptx, BeautifulSoup, cssutils, premailer, pillow, requests and Playwright are reasonable for parsing HTML/CSS, creating PPTX, handling images and optional screenshot/rendering. The skill's features (embed CSS, map elements to PPTX shapes, inline CSS) line up with the code and SKILL.md.

Instruction Scope

SKILL.md instructions are narrowly scoped (install deps, run index.py <input.html> [output.pptx], optional embed-css script). However, several included debug scripts (scripts/check-inline.py, scripts/debug-vars.py, scripts/debug-convert.py) reference absolute filesystem paths under /Users/panda/.openclaw/... and other workspace assets and will attempt to read local files if executed. index.py imports network-capable libraries (requests, Playwright) and supports images by URL/base64 which means it may fetch remote resources when converting — this is plausible for the stated purpose but worth noting.

Install Mechanism

There is no automatic install spec; SKILL.md recommends pip install -r requirements.txt and playwright install chromium. Using Playwright pulls in a browser binary (heavy, but expected for rendering/screenshot features). No unusual download URLs or archive extraction in the manifest; install is standard pip/browser-install guidance.

Credentials

The skill declares no required environment variables or credentials, which is proportional. Concern: debug scripts include hard-coded absolute paths to other skills' assets and user workspace files (e.g., /Users/panda/.openclaw/workspace/...), which suggests the codebase was developed in a specific user environment and could, if those scripts are run, read arbitrary local files. While not required for normal conversion, these scripts present a risk if executed without inspection.

Persistence & Privilege

The skill does not request persistent or elevated platform privileges (always:false). It does not declare modifying other skills or global configuration. Autonomous invocation is allowed by default, which is normal; combine this with the debug-scripts/local-file exposure if you allow the agent to run code autonomously.

What to consider before installing

This package is largely coherent with its stated purpose (HTML→PPTX conversion). Before installing or running it: 1) Inspect index.py for any unexpected network calls or file reads (it legitimately may fetch remote images and uses Playwright for rendering). 2) Do NOT run the debug scripts without review — they contain hard-coded absolute paths that will try to read files from a specific user workspace and could leak local data if modified. 3) Run in an isolated environment (container or VM) because Playwright installs a browser and conversion may fetch remote resources. 4) If you only need CSS embedding, consider using scripts/embed-css.py (read it first) rather than running all debug tools. 5) If you will allow autonomous agent invocation, be aware that the skill's code could read local files (if asked to run debug utilities) and access the network; restrict or review agent permissions accordingly.

html2pptx-shape — HTML 转 PPTX 形状转换器

将 HTML 幻灯片转换为 完全可编辑的 PPTX，核心特性：

• 自动内嵌外部 CSS — 将 <link> 引用的 CSS 文件嵌入到 <style> 标签
• CSS 样式完整保留 — 颜色、字体、渐变、阴影、边框、圆角
• 布局精确还原 — 元素位置、尺寸、层级关系
• PPTX 原生形状映射 — div→矩形，p/h→文本框，img→图片，svg→形状
• 16:9 标准比例 — 宽屏演示文稿 (13.333" × 7.5")

快速开始

安装依赖

cd /Users/panda/.openclaw/workspace/skills/html2pptx-shape
pip3 install -r requirements.txt
playwright install chromium

基本使用

# 转换 HTML 文件（自动内嵌外部 CSS）
python3 index.py <input.html> [output.pptx]

# 示例
python3 index.py examples/demo.html
python3 index.py my-presentation.html my-output.pptx

输出

项目	说明
文件名	<input>_converted.pptx（默认）或指定名称
格式	PPTX (Office Open XML)
比例	16:9 widescreen
可编辑性	✅ 所有文字/形状可编辑

---

功能特性

✅ 自动 CSS 内嵌

自动将外部 CSS 文件嵌入到 HTML 的 <style> 标签中：

<!-- 转换前 -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="theme.css">

<!-- 转换后 -->
<style>
/* styles.css 内容 */
/* theme.css 内容 */
</style>

支持：

• ✅ 多个 <link> 标签
• ✅ 相对路径 CSS 文件
• ✅ CSS 变量（:root 和任何选择器中的定义）
• ⚠️ 自动跳过远程 CSS（http/https 开头）

✅ CSS 样式支持

CSS 属性	PPTX 映射	支持度
color	文字颜色	✅
background-color	填充颜色	✅
background (gradient)	渐变填充	⚠️ 转为纯色
font-family	字体	✅
font-size	字号	✅
font-weight	字重	✅
text-align	对齐方式	✅
border	边框	✅
border-radius	圆角矩形	✅
box-shadow	阴影	✅
opacity	透明度	✅
width/height	尺寸	✅
position: absolute	绝对定位	✅

✅ 元素映射

HTML 元素	PPTX 形状	说明
<div>	Rectangle	矩形背景/容器
<p>, <h1>-<h6>	TextBox	文本框，保留字体/颜色/对齐
<img>	Picture	图片，支持 base64/URL/本地文件
<svg>	Freeform	SVG 路径转 PPTX 自由形状（简化）
<span>	(内联)	文本格式化，不创建独立形状
<ul>, <ol>	TextBox	列表文本框，保留项目符号

---

技术实现

1. CSS 嵌入 — 自动将外部 CSS 文件嵌入到 HTML <style> 标签
2. CSS 变量解析 — 收集所有 CSS 变量定义（支持任何选择器）
3. CSS 内联 — 使用 cssutils 解析并应用样式到每个元素
4. HTML 解析 — BeautifulSoup4 解析 DOM 结构
5. 布局计算 — 遍历 DOM 树，计算每个元素的绝对位置
6. 形状创建 — python-pptx 创建对应形状
7. 样式应用 — 将 CSS 属性映射到 PPTX 形状属性
8. 分页处理 — 遍历 section.slide，每页创建一张幻灯片

---

使用场景

• 将 html-ppt 生成的 HTML 演示文稿转为可编辑 PPTX
• 网页内容存档为 PPTX 格式
• 需要后期编辑的 HTML→PPTX 转换
• 自包含 HTML 文件（无外部依赖）的 PPTX 转换

---

示例

示例 1：转换 html-ppt 生成的 HTML

python3 index.py examples/demo.html
# 输出：examples/demo_converted.pptx

示例 2：转换带有外部 CSS 的 HTML

python3 index.py my-presentation.html
# 自动嵌入 style.css, theme.css 等外部文件
# 输出：my-presentation_converted.pptx

示例 3：指定输出文件名

python3 index.py input.html output.pptx

示例 4：在 Python 中调用

from index import run
result = run(["./examples/demo.html"])
print(f"Generated: {result['output_file']}")
print(f"Slides: {result['slides_count']}")

---

文件结构

html2pptx-shape/
├── SKILL.md                 (本文档)
├── README.md                (快速入门)
├── index.py                 (核心转换逻辑)
├── requirements.txt         (Python 依赖)
├── scripts/
│   ├── embed-css.py         (独立 CSS 嵌入工具)
│   ├── debug-convert.py     (调试脚本)
│   ├── check-inline.py      (样式检查脚本)
│   └── debug-vars.py        (变量调试脚本)
└── examples/
    ├── demo.html            (示例 HTML - 4 页)
    ├── demo_converted.pptx  (生成的 PPTX)
    ├── external-css.html    (外部 CSS 测试)
    ├── external-css_converted.pptx
    ├── styles.css
    └── theme.css

---

完整工作流

从 html-ppt 到 PPTX

# 1. 用 html-ppt 生成 HTML 演示文稿
# (使用 html-ppt skill 创建 HTML)

# 2. 转换为可编辑 PPTX
python3 index.py my-deck/index.html

# 3. 在 PowerPoint 中打开并编辑
open my-deck/index_converted.pptx

处理外部 CSS

# 情况 A: HTML 引用外部 CSS
# index.html 中有：<link rel="stylesheet" href="style.css">

# 直接转换，自动嵌入 CSS
python3 index.py index.html

# 情况 B: 想先内嵌 CSS 再转换
python3 scripts/embed-css.py index.html
python3 index.py index_embedded.html

---

限制与已知问题

限制	说明	建议
CSS 动画	不支持（转换为静态）	使用截图版保留视觉效果
CSS Grid/Flex	简化为绝对定位	检查布局是否正确
外部字体	回退到系统字体	确保系统有相应字体
::before/::after	PPTX 不支持伪元素	忽略警告
background-clip: text	渐变文字转纯色	手动在 PPTX 中添加渐变
复杂 SVG	降级为占位符	简化 SVG 或转为图片

---

依赖安装

# Python 依赖
pip3 install python-pptx beautifulsoup4 pillow requests cssutils premailer

# Playwright 浏览器（用于截图功能）
playwright install chromium

---

故障排除

问题：CSS 文件未找到

⚠️  CSS file not found: xxx.css

原因： 相对路径无法解析

解决：

1. 将 CSS 文件移动到正确位置
2. 或使用 scripts/embed-css.py 先内嵌 CSS
3. 或直接将 CSS 内容复制到 <style> 标签中

问题：样式未应用

原因： CSS 选择器太复杂或使用了不支持的属性

解决：

1. 检查 HTML 元素的 class 是否正确
2. 使用内联样式 style="..." 替代
3. 查看转换日志中的 selector error 警告

问题：布局错乱

原因： CSS Grid/Flex 布局被简化

解决：

1. 使用绝对定位 position: absolute 替代
2. 或在 PPTX 中手动调整位置

---

与 html-to-pptx 的对比

特性	html2pptx-shape	html-to-pptx
CSS 内嵌	✅ 自动	⚠️ 需要预处理器
CSS 变量解析	✅ 完整支持	⚠️ 部分支持
形状映射	✅ 原生 PPTX 形状	⚠️ 简化文本框
可编辑性	✅ 完全可编辑	✅ 完全可编辑
文件大小	小 (30-50KB)	小 (30-50KB)
截图高保真	❌	✅ 支持

---

更新日志

v1.0.0 (2026-04-17)

• ✅ 初始版本
• ✅ 自动内嵌外部 CSS
• ✅ CSS 变量完整解析（支持任何选择器）
• ✅ CSS 样式手动内联（使用 cssutils）
• ✅ PPTX 原生形状映射
• ✅ 16:9 标准比例

---

License

MIT

Author

老 6 🎯