Claude Code builds HTML decks; 15-deck test spans 22%–100%

The author's setup separates the deck body from a shared asset folder. Each deck is its own directory with an index.html that just lines up <section> elements inside a <deck-stage> tag, while colors, type, slide layouts and a deck-stage.js script live in a common _deck_assets folder. The JS and base CSS came from a Claude Design output; the author added only a print layout to the JS, plus product-intro CSS patterns and three scripts.

The "asset" idea is about patterns migrating. Three layouts first written inside two distribution decks — a logo cover, a Before/After comparison, and a screen capture with callout lines and notes — were moved into the shared CSS, and a closing "Thank you" page followed the same path to become a default. The author chose not to retrofit two already-distributed decks onto the shared CSS, since their details differed slightly and unifying them would change how they look.

Layout checking was handed to a script. Because slides clip anything outside their frame, a PDF can pass a page-count check while content is silently cut off; in one deck, 7 of 15 slides overflowed. The script renders slides at 1:1, measures how far child elements exceed the 1920x1080 frame, and ignores decorative blur circles that are meant to sit outside. Claude runs it after writing the HTML and fixes overflows before showing the deck.