Skip to content

README.md

Latest commit

 

History

History
63 lines (47 loc) · 2.76 KB

README.md

File metadata and controls

63 lines (47 loc) · 2.76 KB

Example: Q2 Project Progress Report — 4 Styles

Same content, four completely different visual styles, all generated with the pptx-from-html skill.

What's here

content.md                    <- The shared content (5-slide Q2 report)
style-exploration.html        <- 20 styles on one page for comparison
html/                         <- Full 5-slide HTML decks (the design spec)
pptx/                         <- Compiled PPTX files (the deliverable)
assets/                       <- Background pattern images for PPTX compilation

The four styles

Style Character
Neobrutalism Candy colors, thick black borders, offset shadows. Current web design trend.
Chinese Ink Rice paper, ink wash, red seal stamps. Classical Chinese aesthetic.
Pitch Deck Bold Black/white alternation, enormous numbers, minimal text. YC Demo Day energy.
Soviet Constructivism Red/black/cream only, diagonal compositions, propaganda poster power.

How it was made

  1. Wrote content.md — the 5-slide content script
  2. Generated style-exploration.html — 20 styles as thumbnails on one page
  3. Iterated with user — kill/keep/add cycles over 3 rounds until 4 finalists
  4. Generated complete HTML decks in html/
  5. Compiled to PPTX using the /pptx skill with the HTML as pixel-level spec
  6. QA — rendered PPTX to images, compared against HTML screenshots, fixed issues

Why HTML, not SVG?

We tested SVG as an alternative intermediate format (see ppt-master for a good SVG-based approach). We stayed with HTML for our use case:

  1. AI understands HTML better. HTML's layout model (flexbox, grid, CSS) is richer and more natural for the AI. The resulting designs have fewer missing details and better match the user's intent.

  2. No custom converter needed. SVG-to-PowerPoint requires a mechanical converter to handle gradients, shadows, text, groups, etc. With HTML, the AI does the translation via the /pptx skill — making judgment calls about what to render natively vs. what to pre-render as images. No rigid pipeline needed.

Key technique: SVG-to-PNG for complex visual effects

Some CSS effects (hard offset shadows, repeating gradients, rotated shapes with borders) can't be reproduced faithfully by PptxGenJS. The workaround:

  1. Design the element as SVG or HTML/CSS
  2. Render to transparent PNG at 2x resolution via Playwright
  3. Place the PNG as an image element in the slide
  4. Add native text boxes on top for editable text

This is done per element, not per slide — each card or shape gets its own PNG, keeping everything individually adjustable in PowerPoint.

See assets/hatching-pattern.html for a CSS pattern source and assets/*.png for the rendered tiles.