pptx-builder

A Claude Code skill that turns an HTML slide design into a real, fully-editable PowerPoint (.pptx) — native autoshapes, text boxes, tables, pictures and connector lines at pixel-accurate positions, not a screenshot pasted into a deck.

Both slides above are the actual PowerPoint output (rendered back to PNG for this README) from templates/slide-template.html, included in this repo — every rectangle, gradient, and text run is a real, independently selectable PowerPoint object once opened in PowerPoint/Keynote/LibreOffice.

Why this one

Several HTML→PPTX skills for Claude Code exist already, including an official one from Anthropic. What this one adds on top of the core HTML→PPTX conversion:

• A style gallery, not a blank page. templates/style-gallery.html (screenshot below) offers 12 named palette + shape-language presets an agent can show before designing, so a deck starts from a deliberate visual identity instead of improvised colors.
• A 55-icon library (reference/icons.md), one consistent stroke style, organized by theme — so icons stop being reinvented, and mismatched, on every deck.
• Verification is mandatory, not optional. verify_pptx.py catches structural/XML corruption; render_preview.py forces an actual look at every rendered slide before the pipeline is allowed to call a deck done — both catch real, previously-shipped bugs that "no errors printed" missed.

How it works

Two stages:

1. Design in HTML. Each slide is a 1280x720 <section class="slide">. Elements that should become real PowerPoint objects carry a data-pptx="rect|text|image|icon|line|table|background" attribute; the design is iterated on and approved as a live preview before anything is converted.
2. Compile to native .pptx.
   • scripts/extract.py opens the HTML in headless Chromium (Playwright), measures every [data-pptx] element's exact position/size/computed style, and rasterizes icon elements to transparent PNGs.
   • scripts/build_pptx.py reads that JSON and builds a real python-pptx presentation from it.
   • scripts/verify_pptx.py checks the output file for structural/XML corruption that PowerPoint would otherwise silently "repair" by dropping content.
   • scripts/render_preview.py renders every slide to PNG (via LibreOffice + PyMuPDF) so the result can actually be looked at, not just assumed correct because the scripts didn't error.

See SKILL.md for the full workflow this skill makes an agent follow, reference/conventions.md for the exact HTML→PPTX contract, and reference/style-presets.md + templates/style-gallery.html for a set of 12 ready-made palette/shape presets an agent can offer before designing a deck. reference/icons.md ships a ~55-icon line-icon library so decks don't each improvise their own icon style.

Requirements

• Python 3.9+
• LibreOffice (soffice on PATH, or the default Windows install path) — used only by render_preview.py

pip install -r requirements.txt
playwright install chromium

Using it as a Claude Code skill

Drop this folder into a skills directory so Claude Code (or any agent runtime that supports the same skill format) can discover and use it:

# project-level (this repo/project only)
cp -r pptx-builder-skill /path/to/your/project/.claude/skills/pptx-builder

# or user-level (every project)
cp -r pptx-builder-skill ~/.claude/skills/pptx-builder

Then ask the agent to build a deck (e.g. "make me a powerpoint about ..."). It will design the slides as HTML, show you a preview, and only run the conversion pipeline once you approve the design.

Using the scripts directly

The pipeline is plain Python and works outside of any agent, too:

python scripts/extract.py slides.html work/slides.json work/images
python scripts/build_pptx.py work/slides.json output.pptx
python scripts/verify_pptx.py output.pptx
python scripts/render_preview.py output.pptx work/preview

templates/slide-template.html is a working example (title slide, KPI cards, bullet/icon list, image slide, table slide) to start from.

Known limits

• Borders are read from border-top only — use uniform 4-side borders.
• Gradients: 2-stop linear-gradient only (angle + first/last color).
• box-shadow is presence-only — any value maps to one fixed soft shadow.
• Fonts must be installed on the machine that later opens the .pptx, or PowerPoint substitutes — stick to common fonts unless you've confirmed otherwise.
• Stacking order follows DOM order, not z-index.
• data-pptx="icon" elements are rasterized (a picture, not an editable shape) — use only for actual icons/logos/SVG art.

License

MIT — see LICENSE.