Your website already knows what your deck should look like.
site2deck points one command at a company website and hands back a deck builder wearing that site's real design system — its colors, its fonts, its logo. Decks build to a single HTML file that opens anywhere, works offline, and prints straight to PDF.
$ git clone https://github.com/fritzhand/site2deck
Node ≥ 18 · no npm install · open the starter deck
Simulated output on fictional domains — the tokens swapping above are the real mechanism. Run it on your own site for the real thing.
Steal the design system. Legitimately. It's your company's own site.
Five steps, proven on real strategy engagements before it was open-sourced. The deck reads as "from the company" because every value is sampled, not styled from taste.
Scrape the real brand
extract.mjs mines the site's CSS for its true palette, downloads its webfonts, finds the logo, and identifies the icon set — with provenance for every choice.
Tokens are the brand
Everything lands in one tokens.css — about 40 custom properties. The engine ships zero brand values, so a new brand never touches shared code.
Compose, don't format
Slides are plain HTML built from a fixed vocabulary — stat tiles, cards, roadmaps, photo cards. Unknown numbers wear a loud .tbd marker until sourced.
One file, anywhere
build.mjs inlines fonts, images, and styles into a single standalone HTML that opens from a USB stick and prints to a pixel-exact PDF.
Spot-check by eye
Open the deck, look, edit, reload. Every judgment call the extractor made is flagged TODO(spot-check) so you know exactly where to look first.
A deck pipeline that respects both your brand and your audience.
Readiness scorecard
Every run ends with an honest [ok] / [partial] / [missing] report per signal, each miss pointing at the exact fix in the requirements doc.
Single-file standalone
Zero external references — fonts and images ride along as data URIs. The build fails loudly if anything would break offline. Email it, present it, archive it.
Internal vs. public cuts
Tag a slide data-internal and --public strips it for the external audience — refusing to ship if a tagged slide somehow survives.
TBD markers
Numbers you haven't sourced render in a loud amber dashed box. Drafts can't quietly pass as final — grep for .tbd before anything goes out.
Pixel-exact PDF
Browser Print produces one 1280×720 page per slide, colors intact. One headless-chromium line automates it for CI or batch export.
The judgment layer, promptable
A shipped CLAUDE.md and a paste-in prompt let an AI assistant resolve the taste calls: is that the real brand accent? Should the label face be the brand sans?
Extraction quality tracks how your site ships its brand.
Nothing exotic — a normally-built site scores well. Every signal degrades gracefully, and the worst case is filling in one 70-line file by hand.
| Signal | Best case | Fallback if missing |
|---|---|---|
| Stylesheets | Server-rendered CSS reachable via <link> or <style> | JS-rendered SPAs extract thin — run against production, or go manual |
| Colors | Consistent hex usage; custom properties with brand-ish names; theme-color meta | Extractor ranks by frequency + context; you confirm the primary by eye |
| Fonts | Google Fonts link or @font-face with woff2 | Hand-download the files; the tokens template shows where they go |
| Logo | An <img> with "logo" in its name, SVG preferred | apple-touch-icon and og:image are tried; worst case, drop a file in assets/ |
| Icons | A recognizable library (Bootstrap Icons, Font Awesome, Material, Lucide…) | Detection only — you self-host the set, or skip icon slides |
| Meta | og:site_name, og:image, favicon | Purely nice-to-have; the wordmark falls back to the domain |
The full story lives in docs/website-requirements.md — the same sections the scorecard points at.
Four commands from website to sendable deck.
# 1 · extract your site's design system into a deck skin $ node extract.mjs https://yourcompany.com [ok] stylesheets 6 collected [ok] colors primary #0E6B63 (from --brand-teal, button rules) [ok] fonts 2 families self-hosted to fonts/ [ok] logo assets/logo.svg (from header img) → decks/yourcompany/tokens.css · brand-report.json # 2 · look at it (file:// works — no server needed) $ open decks/yourcompany/index.html # 3 · resolve the TODO(spot-check) lines, write your slides # 4 · build the single-file deck (add --public for the external cut) $ node build.mjs yourcompany decks/yourcompany/yourcompany-standalone.html (single file, opens anywhere)
Point it at your site.
If the extraction nails your brand, you're five slides from a deck. If it doesn't, the scorecard tells you exactly why — and that's worth knowing about your website anyway.