Presentation Kit

Give this folder to ChatGPT or Claude, tell it what you're presenting, and get back a scrolling presentation in your own brand. No build step, no dependencies, no account. Open the file and present.

It replaces PowerPoint, Slides, and Canva for one specific job: teaching something live, in a way that doesn't look like a template.

The same deck, the same HTML, the same deck.css. The only difference between these four is one token file and one font link.

---

Quickstart

1. Get the files. Download the ZIP (green Code button, Download ZIP) and unzip it.

2. Open a chat. ChatGPT or Claude, either works. Upload these five:

AGENTS.md            the instructions. this one does the work
SECTIONS.md          the section catalog
reference-deck.html  the 20 section types
theme.css            the design tokens
themes/neutral.css   the theme it starts from

Say "read AGENTS.md and follow it." Leave out deck.css and deck.js: they're 1,500 lines the model never needs, and uploading them just eats the context you want spent on your content.

Add your DESIGN.md or brand guide if you have one. If you don't, there's a blank one at DESIGN-TEMPLATE.md, or you can skip it and answer five questions instead.

3. Say what you're presenting. For example: "A 30-minute workshop for freelance designers on pricing by value instead of by hour. I want them leaving with a rate card they've actually filled in."

It will ask about your brand, then propose a section-by-section outline. Change the outline before it builds. That's the part that decides whether the deck is any good.

4. Save what it gives you. Drop index.html and theme.css into the unzipped folder, replacing what's there.

5. Double-click index.html.

For a second deck, duplicate the whole folder.

---

What you get

A single page you scroll through, with twenty section types to build from: covers, animated counters, before-and-after toggles, click-to-open accordions, screenshot galleries, checklists people tick off on screen, a live frame you can embed a real tool inside, and more.

Two things it does that a slide deck can't.

Edit while you present. Press E and click any text on the page. Fix a typo mid-call, change a number, restructure a sentence. Changes save as you type and survive a reload. Press Export HTML when you're done and it downloads the file with your edits baked in.

Drag screenshots straight on. Every image slot takes a drag-and-drop. No file paths, no uploading, no re-export. Drop it and it's there, including the next time you open the file.

Keys

Key	Does
→ ↓ Space	Next section
← ↑	Previous
G	Jump to any section
N	Presenter notes
E	Edit any text on the page
F	Focus mode, hides all chrome for a screen share
L	Light / dark
T / R	Timer / reset
Home End	First / last

---

How the branding works

Every colour, typeface, and spacing value in the system is a CSS variable, and they all live in one file: theme.css, about 85 lines. The 630 lines of section styling underneath never name a colour, they only read those variables.

So changing the entire look of a deck is changing one small file. That's the whole trick, and it's why an AI can reliably rebrand this when it can't reliably rebrand a slide template.

Four worked examples ship in themes/:

• neutral.css is the default. Architectural greyscale, restrained accents, Lora.
• justyn-ai.css is warm cream and deep green in EB Garamond. Use it as-is if you like it, or as a reference for what a fully committed palette looks like.
• signal.css is near-black with one electric accent and no serif anywhere. It exists to show that the headline slot is a role, not a classification.
• system-7.css is an early-nineties desktop. Bitmap type, a bevelled grey title bar with traffic lights, hard black rules, CRT scanlines, and a dithered peach sky on the closing panel. It opens light.

To use one, copy it over theme.css and update the font <link> at the top of your HTML to match. Each theme file has the exact link it needs in a comment at the top.

The first three are pure token files: colours, type, radii, nothing else. system-7.css goes further and overrides structure too, in one marked block at the bottom of the file. That's the ceiling of what a theme can do, and it's there to show that "completely different" is reachable without touching deck.css.

---

Files

index.html            your deck. the AI overwrites this
theme.css             design tokens. the AI writes this
reference-deck.html   all 20 section types, live. open it to see what's available
deck.css              section styles. don't edit
deck.js               navigation, edit mode, export. don't edit
assets/               screenshots you want kept with the file

AGENTS.md             instructions for the AI
CLAUDE.md             points at AGENTS.md
SECTIONS.md           which section type to use when
DESIGN-TEMPLATE.md    blank brand brief, if you don't have one
themes/               four example palettes
docs/                 the screenshots in this README

Open reference-deck.html before you start. It's a working deck that demonstrates all twenty sections and explains what each one is for.

---

Using it in Claude Code

Clone the repo instead of downloading it, cd into it, and run /presentation. The command is in .claude/commands/. Claude reads AGENTS.md automatically.

---

Notes

Decks open dark by default. For a daylight brand, put <body data-theme="light"> on the deck. Once a viewer presses L their own preference wins, and it's remembered across every deck they open in that browser.

Decks are local files. There's no deploy step and no hosting. To share one, zip the folder or print to PDF from the browser.

If you want to add a section type, add it to reference-deck.html and SECTIONS.md at the same time. A one-off block in a single deck is what eventually breaks the system.

MIT licensed. Built by Justyn Berkovits.