An AI-native design system for the LLM-assisted deck workflow.
The design vocabulary ships as AGENTS.md instruction files — not a runtime library.
Your LLM reads the instructions, references the example decks, and writes
raw HTML directly. Works with Claude, GPT-4o, Gemini, or any capable model.
Each case has its own visual theme, its own component discipline, its own
AGENTS.md — and its own example deck you can open right now.
A tight loop between human judgment and AI execution. You supply the story; the agent writes the HTML. Any capable frontier model can drive it.
AGENTS.md into any capable LLM). Tell it your audience,
your recommendation, and which case you're in —
enterprise, investor, or portfolio.
deck.html. Raw HTML — no intermediate format,
no hallucinated props. Run npm run dev and watch
the browser refresh on every save.
npm run csv -- data.csv to auto-generate chart slides.
Run npm run brand-check before hand-off to catch any
style drift. Hit P or npm run pdf:enterprise
for production PDF output via Playwright.
Every component is pure CSS and HTML — no external libraries beyond
Chart.js for charts. Same class names across all three cases; only the
theme tokens change. Copy any <section> block from a showcase deck — it works immediately.
The decks above work in your browser with no install. Clone the repo for local development, hot-reload, and production PDF export.
Consultants and PMs live in spreadsheets. Drop a .csv into the repo,
run one command, and get a fully formatted chart slide ready to paste directly
into your deck. No JSON to write, no chart config to figure out.
csv-to-chart.js reads your file, infers the right chart type from
column names and value shapes, and emits a complete
<section class="slide"> block to stdout. Review it,
update the action title placeholder, then paste it in — or pipe directly
to append. Detection info prints to stderr so it doesn't contaminate the output.
Eight chart types are supported, covering the full range of consulting and
pitch-deck data scenarios. The type is auto-detected from column headers:
words like down / up / pessim / optim trigger tornado;
cumul triggers cumulative; mixed-sign values with bridge words
trigger waterfall. Pass --chart TYPE to override.
--stacked.
Excel files: export to CSV first — File → Save As → CSV in Excel,
or File → Download → CSV in Google Sheets. Column header names drive
auto-detection; see AGENTS.md for the full detection rules.
deck.html. Or pipe to append directly.
The --title, --eyebrow, --note,
and --source flags add the standard slide furniture.
Every case ships with an AGENTS.md — the primary artifact. ~3,500 lines of
prose telling an LLM how to think about deck-making, which components to
use, and which mistakes to avoid. The HTML decks are worked examples it reads
alongside them. Designed for Claude Code — runs on any capable LLM.
In Claude Code, the AGENTS.md files are picked up automatically
when you open a session in the repo directory. In Cursor and
Windsurf, mirror the content into their respective rules files.
In any chat-based LLM, paste the relevant file into the conversation.
The key discipline: always tell the agent the case (enterprise / investor / portfolio), the audience, and the recommendation or conclusion you want the deck to argue. The agent then picks the storyline, selects components, and writes the HTML directly — using the example decks as reference.
The output is raw HTML — not a DSL, not a template abstraction, not generated JSON for a renderer to interpret. Every frontier model has been trained on billions of HTML pages and reasons about it natively. There is no component API to hallucinate, no prop types to get wrong, no build step that can fail. What the model writes is exactly what renders in the browser.
What matters most is context length. The root AGENTS.md is ~1,500 lines; each case overlay adds 300–500 more. Any modern frontier model handles it comfortably.
Read AGENTS.md →
Each deck is a different mix of components — demonstrating that the storyline
shapes the spine. Not templates: copy a <section> you need,
discard what you don't.
| Deck | Description | Links |
|---|---|---|
| Business case (generic) | 11-slide business case — the minimal structure for any investment approval. | Open deck ↗ |
| Warehousing analytics | 13-slide worked example for an analytics team in a 3PL. Stat grid, Harvey Balls, tornado, financial tiles, workstreams, scored risks. | Open deck ↗ |
| Seed pitch — Sundial Health | 11-slide seed pitch for a primary-care AI scheduling startup. Dark big-stat opener, early-signal traction, dark team grid. | Open deck ↗ |
| Case study — Marfa Bookshop | 10-slide single-project case study for a brand redesign. Image-heavy, 2×2 detail grid, two-col reflection. | Open deck ↗ |
| Enterprise showcase | -slide library — every component, every chart type, latest additions. The reference deck for enterprise work. | Open deck ↗ |
| Investor showcase — Loop | 17-slide Series A pitch for Loop, a B2B SaaS annotation layer. SaaS metrics, pricing tiers, mockup frames, ask-full. | Open deck ↗ |
| Portfolio showcase — Ana Rivera | 10-slide designer portfolio. Multi-project overview with image gallery, project hero, and case study deep-dives. | Open deck ↗ |