HTML examples win through systems
The design-system examples use consistent surfaces, typography roles, KPI cards, badges, tables, callouts, status spines, and repeatable warm-dark page structure. They feel built, not decorated.
Research brief · requested by Adam Kane
The answer is not “better bullets.” It is a pipeline change: design slides as real visual systems, use browser-grade layout as the source of truth, then export to PowerPoint with a deliberate fidelity/editability strategy.
The Waymo draft is readable and mostly on-palette, but it looks like an AI-generated PowerPoint because it lacks the visual systems that make the HTML examples feel designed.
Public evidence agrees on the same tradeoff: native PowerPoint is editable but limited; browser rendering is beautiful but not automatically editable. The winning approach chooses the right layer for each job.
| Finding | Evidence | Implication for ForgeFX |
|---|---|---|
| 01 PptxGenJS is the practical native generator. | PptxGenJS supports TypeScript/JavaScript generation, text, images, charts, tables, custom layouts, themes, metadata, slide masters, placeholders, and image cropping/cover behavior. | Keep it as the core PPTX writer, but raise our abstraction above raw text boxes. Build ForgeFX slide components and masters on top of it. |
| 02 HTML-to-PPT is a workflow problem, not one converter. | Deckary’s 2026 comparison says there is no universal one-click winner; structured tables, browser slide decks, arbitrary pages, and AI HTML decks need different handoff paths. | Classify each slide before export: native, hybrid, or flattened. Do not force every visual into editable PowerPoint objects. |
| 03 DOM measurement is the promising bridge. | dom-to-pptx 2.0.2 is an MIT package claiming coordinate scraping, computed-style capture, gradients, shadows, rounded corners, SVG export, font embedding, animations, and PptxGenJS output. | Run a ForgeFX POC. If it holds up, use it for HTML-first slide conversion. If not, copy the architecture: Playwright measures, PptxGenJS writes. |
| 04 SVG support is useful but not magic. | PptxGenJS docs say SVG works in newest PowerPoint/Microsoft 365; PowerPoint experts still warn SVG support has limitations, especially around deeper editability and effects. | Use SVG for logos/icons when compatible, but rasterize complex SVG/HTML effects to high-resolution PNG plates when client compatibility matters. |
| 05 Accessibility forces good design discipline. | Microsoft recommends unique slide titles, readable sans-serif fonts, 18 pt or larger text, sufficient white space, alt text, Accessibility Checker, and correct reading order. UAMS ties this to WCAG guidance and contrast thresholds. | Our QA gate should include visual render, title/read-order structure, contrast, body-size floor, alt text, and placeholder scan—not just file validity. |
The local ForgeFX examples show what “good” means here: not just nicer colors, but a complete visual language.
The design-system examples use consistent surfaces, typography roles, KPI cards, badges, tables, callouts, status spines, and repeatable warm-dark page structure. They feel built, not decorated.
The internship strawman deck includes large slide background images and a cinematic cover. That single choice immediately outclasses flat text-only decks.
The Waymo deck has the right colors in places, but the system is shallow: Arial only, small repeated logo images, few strong visual anchors, and too many card/bullet patterns that read as template output.
Use a quality-first pipeline that mirrors how the HTML artifacts are made, then exports into PowerPoint deliberately.
Create a 16:9 slide deck as HTML using ForgeFX tokens, official logo assets, real/AI-generated imagery, and browser layout. This becomes the visual source of truth.
Per slide, choose native, hybrid, or flattened. Use full native for simple tables/charts, hybrid for proposal slides, and flattened only for cinematic covers or complex effects.
Generate PPTX through PptxGenJS or dom-to-pptx, enforce master slides, consistent margins, font roles, image cover/crop rules, alt text, and high-resolution visual plates.
Do not trust the file. Render thumbnails/screenshots, run brand compliance, inspect typography, verify placeholder cleanup, and fix at least one concrete issue before handoff.
Include metadata, version/date, hidden accessible slide titles, speaker notes where useful, and a source HTML preview so reviewers can compare intended design against PowerPoint output.
Keep titles, body copy, tables, charts, prices, dates, and next steps native/editable. Let atmospheric backgrounds, complex shadows, glows, and screenshots be image plates.
This is the working rule set I would apply before generating another ForgeFX proposal deck.
| Area | Standard |
|---|---|
| Cover slides | Full-bleed cinematic/topic-specific image, dark overlay, official ForgeFX logo, large thumbnail-readable title, controlled metadata footer, no generic blank title pages. |
| Typography | Use Oswald/Open Sans/JetBrains Mono when embedded or controlled; for broad editable handoff, use Source Sans Pro or safe system alternatives from the PowerPoint-safe font reference. |
| Color | Forge-black or Linen foundations, Gold primary accent, Copper secondary only, Warm White on dark, no pure black/white surfaces unless specifically allowed. |
| Layouts | Use a component library: cover, thesis, 2-column narrative, scorecard, matrix, timeline, scenario table, scope map, assumptions table, close. No slide-by-slide improvisation. |
| Visual assets | Generate or source relevant hero imagery. Use browser-rendered high-resolution PNG plates for complex scenes, app mockups, and layered effects. Keep logos/icons as SVG or official PNGs. |
| QA | Text extraction, placeholder scan, slide count, file integrity, rendered thumbnail review, brand-compliance score, contrast/readability pass, and visual comparison to source HTML. |
Build a short ForgeFX “deck export bake-off” using the attached Waymo content: same story, three pipelines, scored side-by-side.
PptxGenJS only. Editable, durable, likely least beautiful. Use it as the baseline.
HTML-rendered backgrounds and app mockups, native editable text/cards/charts over the top. This is my recommended production path.
Use dom-to-pptx on the same HTML slides. Measure fidelity, editability, file size, and PowerPoint compatibility.
External sources were used for tool capability and compatibility; internal sources were used to compare ForgeFX’s actual good and weak artifacts.
forgefx-design-system/examples HTML gallery and ForgeFX internship PPTX reference.