Steve Haddad

05/32proof of conceptAI-Assisted HTML Presentations

Deck EngineAI-Assisted HTML Presentation Builder

Turns a source deck, Word file or brief into an animated HTML presentation in the brand.

What it solves

Rebuilding a deck in the brand means retyping it, and numbers get lost on the way. This reads the source, writes the layout each slide needs and checks every figure against the source.

How it runs

Seven steps, input to output

Goes inA source deck, Word file or brief

  1. 01

    Ingest

    The source is read into a content tree, with a report of what is on each slide.

  2. 02

    Argument

    The deck’s purpose is decided, along with the few slides that carry it.

  3. 03

    Write slides

    Claude writes one component per slide, laid out for the content on that slide.

  4. 04

    Choreograph

    Each slide gets one dominant motion moment.

  5. 05

    Assert

    Checks run on the rendered deck, including every number against the source.

  6. 06

    Contact sheet

    Every slide is reviewed at thumbnail size on one screen.

  7. 07

    Export

    The built deck exports as one self-contained HTML file.

Comes outOne animated HTML presentation in the brand, exported as a single file

What it does

A local tool that turns a source deck, Word file or brief into a finished HTML presentation in the brand.

Claude reads what is on each slide and writes the layout that content needs.

Colours, type and spacing come only from the brand file, and a figure check compares every number in the deck against the source so nothing is dropped or invented.

Each deck exports as a single animated HTML file.

Three decisions

What shaped the build

Built with

8 parts

Claude · axios
writes each slide
Figure check
numbers against the source
Brand files
locked colour + type
Ingest
pptx · docx · md
GSAP
slide motion
d3 · three.js
charts + 3D
Next.js · React
deck shell
Export
single-file HTML