Ship a website, not a deck
TL;DR (too long; didn't read)
A deck is stale the moment you send it; a page lives at one link, is always current, and search can find it.
The how is at the end: five steps and two copy-paste prompts — the plain-English instructions you give the AI — one for when you already have the content, one for when you don't.
Body (the lore)
Those two lines at the top are the whole problem. The boss asks for interactive because a PowerPoint can't be — it's a stack of frozen pictures. Nobody can click into a number, filter a table, or check a claim. And the apology happens because a deck is a file: it goes out as v1, then v2, then v3-final, then v3-final-USE-THIS (real file names — “v3” just means the third version), and by meeting day no two people in the room are looking at the same one.
A page fixes both at the root. I stopped sending decks; I ship a small website instead — same content, but it lives at one URL (a web address: the link you click). When something changes, I change the page, and every link anyone ever received now shows it — the wrong-version moment can't happen, because there's only one version in existence. And “make it interactive” stops being a special request, because a page already is. It compounds, too: search engines index it, so months later a stranger finds your thinking while googling the exact problem you solved, and an AI assistant reads a link cleanly where a PowerPoint arrives as a jumble of text boxes. I've gone all in on this: PowerPoint and Keynote are deleted from my machine.
My cousin Purvi, teaching at a design institute for the first time, sent me her lecture slides asking “does this look okay?” The content was fine; the format was the ceiling. So instead of comments, the same content came back the same day as a scroll story (a web page you read by scrolling) at one link, her words untouched. Her reaction arrived as three messages in seven seconds: “OMG!” — “This is crazzzzzzy” — “How amazing this is!!!” She stopped asking how the slides looked and started presenting straight from the page, and then took it to a second class, improved, at the same link.
The objection is always effort: nobody can build a website for every proposal. Two years ago, fair. Today, AI tools like Claude Code and Cursor (assistants that write the code while you describe what you want in plain English) build the page while you focus on the argument. One example: McKinsey, the consulting firm companies hire for advice, ran a webinar, “Life as a Business Analyst, Greater China”, where a Business Analyst on the panel said her team now builds client deliverables as HTML (the language web pages are written in), with AI doing the tedious assembly. If you can write the deck's outline, you can ship the page. The honest caveat is habit: plenty of organizations still run reviews on PowerPoint, and that won't change overnight. The claim isn't that decks are banned — it's that the deliverable no longer defaults to one.
The skill that matters didn't change: knowing exactly what you want to show, and saying it clearly. The tool just stopped being PowerPoint. Decks answer “what did you prepare?” Pages answer “what did you build?” Only one of those is the job.
Process (the speedrun)
You don't need to know how to code. You need to know what you want to show — and you already do. The AI writes the code. Every page on this site — including this one — came out of this flow: a one-time setup, one prompt, five steps.
- 01Do the one-time setup: GitHub, Claude, VS Code, Vercel, a domain. Never heard of them? That's fine — the mentorship page walks through the five one at a time, in plain words, with a button under each. About 15 minutes, and everything except the domain is free. Start the setup
- 02Create a new project on GitHub (it keeps your files and every version of them) and open it in Visual Studio Code (the free editor from the setup).
- 03Already have the content — a PDF, a deck, a document? Attach it and use the first prompt below.
- 04Want the AI to research the topic and draft it for you? Use the second prompt below.
- 05Let the AI do the magic. Ask it to deploy to Vercel (the hosting from the setup — it turns your page into a link), open the link, and refine it by telling the AI what to fix and where.
Prompt — you have the content (a PDF, a deck, a doc)
This is Purvi's prompt, word for word — the one that turned the lecture deck above into a page. Read it as a shape, not a form: swap her role, her file name, her project and the lecture she styles it after for your own. Keep the structure, the design rules and the finish instructions — that part is why the output is usable.
Show the promptHide the prompt
I'm an Assistant Professor of PD/SDM at ISDI Mumbai. I have a lecture deck,
[DECK-FILENAME].pdf, and slides are too boring. Rebuild it as an interactive
scroll-story web page for my design students (Gen Z), inside this purvi-slides
project, exactly in the style of the existing /trends-and-forecasting lecture.
Review the deck first and follow its teaching flow. The slide order IS the
lesson plan; translate each teaching beat into a scroll moment instead of
reorganizing it into a generic template.
STRUCTURE
- New kebab-case folder named after the lecture (e.g. /design-research) with a
single self-contained index.html (vanilla HTML/CSS/JS, no build step, no
frameworks) and an assets/ folder.
- Extract the photographic slides from the PDF with pdftoppm into assets/ as
JPEGs. Every asset path must be root-absolute (/lecture-slug/assets/...)
because Vercel cleanUrls serves pages without trailing slashes.
- Add a lecture card for it on the home page (root index.html), with a cover
image cropped so no embedded slide text is cut mid-word.
DESIGN SYSTEM (reuse the site's, don't invent a new one)
- Navy backgrounds (#0A102E / #0F1740 / #152470 / #1C2F8F), paper text
#EFF1FA, exactly one accent: yellow #FFC01E, 14px radius.
- Oswald condensed uppercase for display type, system-ui for body copy.
- No em-dashes in copy, at most one eyebrow label per few sections, no
scroll-down cues, no hand-rolled SVG icons (draw chevrons in CSS).
INTERACTIONS (keep my classroom pattern)
- Wherever I'd ask the class a question before showing the answer, build
guess-and-reveal cards or vote buttons. The answer stays hidden until
clicked so I can ask the room first.
- Reveal-on-scroll with IntersectionObserver only (no scroll listeners).
Micro-animations in a few places, all gated by prefers-reduced-motion.
- Floating Next/Prev buttons bottom-right that step through data-stop section
markers, plus ArrowRight/ArrowLeft and PageUp/PageDown so my presentation
clicker drives it like a deck. Dim the buttons at both ends.
FINISH
- Anything the deck leaves unsaid because I say it aloud in class
(definitions, unlabeled examples): write a sensible version and flag it to
me as editable.
- Verify in a real browser over http (file:// won't load), confirm every
image returns 200, then commit and push. Vercel auto-deploys from main.Prompt — the AI researches and drafts it
The same job when the content was never a deck. Fill in the brackets, delete any section you don't need, and rearrange the order to match how you actually teach or present it. In any blank, write RESEARCH: your topic instead of content — the AI finds current examples, drafts that part, and flags it for you to review.
Show the promptHide the prompt
Build a new interactive scroll-story lecture page at /[LECTURE-SLUG] in my
purvi-slides project. Match the site's existing system: single-file vanilla
HTML/CSS/JS, navy #0A102E family with yellow #FFC01E accent, Oswald uppercase
display type, IntersectionObserver reveals gated by prefers-reduced-motion,
floating Next/Prev section nav with clicker keys (ArrowRight/Left, PageUp/
PageDown), root-absolute asset paths (/[LECTURE-SLUG]/assets/...). Add its
card to the home page Lecture Library when done.
Here is the lecture, section by section. Where a blank says RESEARCH, find
strong current examples yourself and flag them so I can swap them out.
1. HERO
Title: [LECTURE TITLE]
Course line: A PD/SDM Lecture · ISDI Mumbai
One-line promise: [WHAT STUDENTS WILL SEE OR BE ABLE TO DO BY THE END]
2. HOOK — full-bleed opening images that make the room react
[2-3 EXAMPLES/IMAGES, ONE PUNCHY LINE EACH — or RESEARCH: ...]
3. BRIDGE — the turn from hook to topic
[1-2 SENTENCES THAT REFRAME WHAT THEY JUST SAW]
4. CORE CONCEPT — the main definition
Term: [TERM]
Definition: [DEFINITION AS I TEACH IT]
Guess-and-reveal examples (answer hidden until I click):
[3 EXAMPLES + THE REVEAL LINE FOR EACH — or RESEARCH: ...]
5. CONTRAST — the concept it's confused with
Term B: [TERM] + definition: [DEFINITION]
Vote cards ("Is this A or B?"): [3 EXAMPLES + CORRECT ANSWERS]
Versus strip: [3-4 SHORT A-VS-B CONTRASTS]
6. BIG VISUAL MOMENT — a collage or full-bleed image with a question
[IMAGE + THE QUESTION I ASK THE ROOM]
7. FRAMEWORK — the model that organizes the topic
[NAME + ITS LEVELS/PARTS WITH ONE LINE EACH. If it's a hierarchy of
3 levels, use stacking cards; if it's parallel parts, use a grid]
8. APPLICATION LENS — where this lands in the real world / India
[CONTEXT, THEMES, OR CASES + THE QUESTION EACH ONE RAISES]
9. IN-CLASS ACTIVITY — the yellow section
[INSTRUCTIONS, GROUP SIZE, TIME, WHAT THEY PRODUCE]
10. ASSIGNMENT BRIEF (CIA)
[PART A / PART B, INDIVIDUAL OR GROUP, DELIVERABLES, DUE DATES]
Anything you write on my behalf (definitions, example labels, reveal lines),
flag at the end so I can review and edit before class. Verify in a real
browser over http, then commit and push; Vercel auto-deploys from main.You are ready.
Facts (receipts)
- McKinsey webinar “Life as a Business Analyst, Greater China”: client deliverables are built as live HTML pages (web pages), not PowerPoint, with AI doing the assembly — “aligning the boxes, making sure the numbers are right — all of those things should take much, much, much less time now.”
- Sally Slater (InnovAItion Partners): “AI is 10x better at creating HTML files than it is PowerPoint.” She gives the format five years; her firm already ships HTML decks as shareable websites with a PDF-export button.
- Michael Richardson (Professor, Macquarie University): rebuilt a 13-week, 350-slide course as AI-assisted HTML slides — a full day of deck work per week became under an hour.
- The lecture-deck rebuild was set up and live the same day the PDF arrived; the answer-quality dashboard took about two hours to set up, then each of four releases was a re-run, not a rebuild. Both build records are public.
ankit.bhangar.net/seam/ship-a-website-not-a-deck
IRL (in real life)