1. 1

   Animations explain how things work

   Why a car can hang upside down: 5 seconds of animation beats three lines of text.

2. 2

   Readers can try it themselves

   Drag the thrust and see the moment the car lifts off. People remember what they've played with.

3. 3

   One file opens anywhere

   A single .html file. Double-click and it opens in the browser, nothing to install.

The cost: you can't drag text boxes around like in PowerPoint, so prepare a bit more up front.

Ask for a deck straight away and the AI thinks about content and layout at once. Every page gets stuffed with text, like a Word document with a new background.

Keep content and layout apart, and changing one sentence won't break a page.

• Each animation answers one "why"
• 3 to 6 seconds, plays once and stops, with a replay button
• Where numbers are related (angle, distance, speed), use a slider

Avoid: titles flying in, cards popping up one by one. They only distract.

• A reference"an Apple keynote", "a Neo-Brutalist indie product site"
• Exact colour codesbackground, body text, accent colours
• Fontsfor headings and for body text
• A list of what to avoidblue-purple gradients, three equal cards, emoji as icons…

The avoid list is the easiest to forget and the most effective. Rule out the AI's usual elements one by one, and what remains is your style.

I want to make a web lesson of about 7 pages called "How the Tesla Roadster flies, and how it hangs upside down on a wall", for adults who never studied physics.
Only write the script for now, in Markdown, one point per section. Don't build any pages yet.
Keep a clear line between what was actually shown at the event and numbers that Tesla has only announced.

What the AI remembers may be out of date or made up. Go by official announcements and reliable reporting; fixing numbers after they're animated is a pain.

Turn the script into a storyboard table, one row per page: page | the page's point in one sentence | picture | what the animation explains ("none" if there isn't one)

Ask only one thing: does each page have exactly one point? If a page says two things, split it.

• Browse VibeHub (vibe-hub.org): 24 styles, each with a description and examples
• For explaining concepts: a style with lots of space and one sentence per page
• For something eye-catching: a strong style like Neo-Brutalist
• Then put the reference, colour codes, fonts and avoid list in the prompt

Reference: Neo-Brutalist indie product sites and event pages
Canvas: off-white like #FFF8E7; thick 3px black outlines; hard solid black shadows with no blur (6px offset)
Accent colours: 2–3 bright blocks of colour (e.g. #FFD23F, #3BCEAC, #EE4266), each with one fixed meaning
Fonts: extra-bold headlines (weight 800+), regular weight for body text so it stays readable
Layout: colour-block cards, sticker-style labels, slightly tilted highlights; the information hierarchy must stay clear
Animation: crisp moves and press-down effects; no soft fades
Avoid: as above; decoration must never outshine the content; no more than 3 loud colours overall

Replace the <direction> part of the template with it.

Paste a screenshot of the page into the chat and say which page, which element, and what it should look like:

"On page 5, the 'Outside: normal air pressure' label covers the car body. Move it above the roof."

With an agent that can run code (such as Claude Code), add this line at the end of the prompt:

When you're done, screenshot every page, and take three shots of each animated page (start, middle, end). Check for overlapping or overflowing text yourself and fix it before handing it to me.