An Agent Skill that generates richly styled, fully editable PowerPoint presentations — by designing slides in HTML first, then converting every element into native PPTX objects.
Most AI-generated PowerPoints are either visually boring or locked into rigid templates. This skill takes a different approach:
- Design in HTML/CSS — full creative freedom, any layout, any color scheme
- Convert to native PPTX — every text box, shape, table, and chart becomes a real PowerPoint object you can click and edit
No screenshots. No images of slides. Everything stays editable.
| Agent | Install location |
|---|---|
| Claude Code | ~/.claude/skills/ or .claude/skills/ |
| OpenAI Codex CLI | ~/.codex/skills/ |
| Cursor | .cursor/skills/ |
| Any agent supporting the Agent Skills standard | Per agent docs |
Via npx (recommended):
npx skills add Ajarchua/html-to-pptxManual:
# Claude Code (global)
git clone https://github.com/Ajarchua/html-to-pptx ~/.claude/skills/html-to-pptx
# Claude Code (project)
git clone https://github.com/Ajarchua/html-to-pptx .claude/skills/html-to-pptxOnce installed, just describe what you want:
Make me a 5-slide pitch deck for a SaaS product focused on supply chain automation.
Create a quarterly business review presentation with charts and KPI data.
Build a presentation using my company template (attach your .pptx file).
The agent will:
- Design slides as HTML with a style tailored to your topic
- Show you a preview for confirmation
- Convert to a fully editable
.pptxfile
- 🎨 Topic-driven design — colors, fonts, and layouts chosen for your specific content, not from a generic template
- ✏️ Fully editable output — text, shapes, tables, and charts are all native PowerPoint objects
- 📊 Chart support — bar, line, pie, area, and horizontal bar charts with real data
- 📋 Table support — styled tables with header rows and alternating colors
- 🖼️ Image support — local files or URLs
- 📐 Overflow detection — warns if any element exceeds slide boundaries before converting
- 🎭 Template matching — upload your own
.pptxtemplate and the skill extracts its color scheme and fonts to match your brand
| Element | HTML Convention |
|---|---|
| Text box | <div class="text-box" data-type="text"> |
| Rectangle | <div class="shape" data-type="rect"> |
| Ellipse | <div class="shape" data-type="ellipse"> |
| Arrow | <div class="shape" data-type="arrow"> |
| Image | <img src="..."> |
| Table | <table class="pptx-table"> |
| Chart | <div class="placeholder" data-chart-type="bar" data-chart='{...}'> |
All positioned elements use position: absolute with px coordinates on a 1280 × 720px canvas.
Upload a .pptx file to have the skill extract and apply its visual style:
Here's our company template (attach file). Create a 6-slide product update presentation.
The skill reads the first slide of your template to extract:
- Background and primary colors
- Accent colors and text colors
- Title and body font names and sizes
- Layout patterns (left sidebar, top bar, decorative shapes)
Your brand colors and fonts are applied to freshly designed slides — preserving the brand feel without copying the layout mechanically.
Each slide is a <section class="slide"> inside a single HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
section.slide { width: 1280px; height: 720px; position: relative; overflow: hidden; }
</style>
</head>
<body>
<section class="slide" id="slide-1" data-layout="title"
style="background-color:#1a1a2e;">
<!-- Color block -->
<div class="shape" data-type="rect"
style="position:absolute; left:0; top:0; width:400px; height:720px;
background:#e94560;"></div>
<!-- Title -->
<div class="text-box" data-type="text"
style="position:absolute; left:460px; top:200px; width:720px; height:100px;
font-size:52px; font-weight:bold; color:#ffffff; font-family:'Microsoft YaHei';">
Presentation Title
</div>
<!-- Chart placeholder -->
<div class="placeholder" data-chart-type="bar"
style="position:absolute; left:460px; top:320px; width:720px; height:360px;"
data-chart='{
"title": "Quarterly Revenue",
"categories": ["Q1","Q2","Q3","Q4"],
"series": [{"name":"2024","values":[1500,1780,1920,2100]}]
}'>
</div>
</section>
</body>
</html>html-to-pptx/
├── SKILL.md # Agent instructions (loaded on trigger)
├── README.md # This file
├── design-guide.md # Design principles and layout reference
└── scripts/
├── convert.py # HTML → PPTX converter
└── extract_style.py # Template style extractor
- Python 3.8+
- Packages installed automatically on first run:
pip install python-pptx beautifulsoup4 lxml requests Pillow
- 新增 KPI 卡片容器包裹写法规范，彻底解决数字/文字与背景色块错位问题
- convert.py 支持识别并正确渲染容器包裹写法中的嵌套文字
- SKILL.md 增加错误写法 vs 正确写法对比示例
- Initial release
- Full element mapping: text, shapes, images, tables, charts
- Placeholder-based chart mechanism for accurate positioning
- Overflow detection with per-element warnings
- Template style extraction from uploaded
.pptxfiles - Topic-driven design system (no fixed color palettes)
- Compatible with Claude Code, Codex CLI, Cursor, and all Agent Skills-compatible tools
MIT License — free to use, modify, and distribute.