e860485ec8
svg2pptx.py: - 修复image opacity不生效（通过OOXML alphaModFix） - 修复环形图stroke渐变url(#id)引用不支持（fallback第一个stop颜色） - 修复viewBox内缩放不传递（g组scale累积到所有子元素） - 修复text baseline偏移（区分text-after-edge和auto） - 修复text-anchor:middle/end的x坐标偏移 - 添加--html-dir参数支持 html2svg.py: - 修复图片相对路径解析（以HTML文件所在目录为基准） - 新增3种CSS兜底预处理（background-clip:text、text-fill-color、mask-image） 新增 references/pipeline-compat.md: - HTML->SVG->PPTX管线兼容性规则文档 - CSS禁止清单、防偏移写法指南、防偏移checklist - 已整合到SKILL.md和prompts.md中引用 prompts.md: - 新增内联SVG防偏移约束（禁SVG text、用HTML叠加） 示例产物: - ppt-output/ 包含SU7示例的完整HTML/SVG/PPTX产物
PPT Agent Skill
A professional AI-powered presentation generation assistant that simulates the complete workflow of a top-tier PPT design company (quoted at $1,000+/page), outputting high-quality HTML presentations + editable vector PPTX files.
Workflow
Requirements Interview → Research → Outline → Planning Draft → Style + Images + HTML Design → Post-processing (SVG + PPTX)
Key Features
| Feature | Description |
|---|---|
| 6-Step Pipeline | Requirements → Research → Outline → Planning → Design → Post-processing |
| 8 Preset Styles | Dark Tech / Xiaomi Orange / Blue White / Royal Red / Fresh Green / Luxury Purple / Minimal Gray / Vibrant Rainbow |
| Bento Grid Layout | 7 flexible card-based layouts driven by content, not templates |
| Smart Illustrations | AI-generated images with 5 visual fusion techniques (fade blend, tinted overlay, ambient background, etc.) |
| Typography System | 7-level font scale + spacing hierarchy + CJK mixed typesetting rules |
| Color Proportion | 60-30-10 rule enforcement + accent color constraints |
| Data Visualization | 8 pure CSS/SVG chart types (progress bars, ring charts, sparklines, waffle charts, KPI cards, etc.) |
| Cross-page Narrative | Density alternation, chapter color progression, cover-ending visual echo |
| Footer System | Unified footer with chapter info + page numbers across all slides |
| PPTX Compatible | HTML → SVG → PPTX pipeline, right-click "Convert to Shape" in PPT 365 for full editing |
Output
| File | Description |
|---|---|
preview.html |
Browser-based paginated preview (auto-generated) |
presentation.pptx |
PPTX file, right-click "Convert to Shape" in PPT 365 for editing |
svg/*.svg |
Per-page vector SVG, drag into PPT directly |
slides/*.html |
Per-page HTML source files |
Requirements
Required:
- Node.js >= 18 (Puppeteer + dom-to-svg)
- Python >= 3.8
- python-pptx (PPTX generation)
Quick Install:
pip install python-pptx lxml Pillow
npm install puppeteer dom-to-svg
Directory Structure
ppt-agent-skill/
SKILL.md # Main workflow instructions (Agent entry point)
README.md # Chinese documentation (default)
README_EN.md # This file
references/
prompts.md # 5 Prompt templates
style-system.md # 8 preset styles + CSS variables
bento-grid.md # 7 layout specs + card types
method.md # Core methodology
scripts/
html_packager.py # Merge multi-page HTML into paginated preview
html2svg.py # HTML → SVG (dom-to-svg, preserves editable text)
svg2pptx.py # SVG → PPTX (OOXML native SVG embedding)
Script Usage
# Merge preview
python3 scripts/html_packager.py <slides_dir> -o preview.html
# HTML to SVG
python3 scripts/html2svg.py <slides_dir> -o <svg_dir>
# SVG to PPTX
python3 scripts/svg2pptx.py <svg_dir> -o output.pptx --html-dir <slides_dir>
Technical Architecture
HTML slides
→ [Puppeteer] → [dom-to-svg] → SVG (editable <text>)
→ [python-pptx + lxml] → PPTX (OOXML svgBlip + PNG fallback)