How to build animated, code-based presentations with AI

Executive overview

Most presentation time is wasted on design, not thinking. AI can write HTML, CSS, and JavaScript better than most people, making it the right tool to handle slide visuals entirely.

Write the substance yourself first. Then hand the code generation to AI, iterate in new conversations, and deploy the result as a public URL — no PowerPoint required.

The shift: stop using AI to improve old slide tools; use AI's coding ability to replace them.

Why code-based slides beat traditional tools

• Tools like Gamma and Storydot apply AI to the old template model — they don't use AI's core strength
• HTML/CSS/JavaScript gives unlimited control: animations, interactive charts, live chart progressions
• Anyone with a browser URL can view the result — no PowerPoint, PDF reader, or Google account needed
• Animations can be subtle (moving dots, star backgrounds) or functional (charts that grow on click)

Step 1: Write the substance yourself

• Writing is thinking — skipping it means you haven't worked out what you actually want to say
• Draft all talking points yourself before involving AI
• Add bracket-style visual cues inline (e.g. [image: astronaut on unicorn in space]) so AI knows where to place placeholders
• AI can help bolster points, challenge credibility, and restructure a draft — but you drive the ideas

Step 2: Build a base prompt with constraints

• Include brand colors so the AI applies them throughout
• Set a word-count limit per slide to keep audiences listening, not reading
• Specify a style if desired (Pixar, Studio Ghibli, retro 90s, etc.)
• Set a slide count ceiling if time is fixed (e.g. max 5 slides for a 10-minute talk)

Step 3: Generate multiple variations

• Paste your script + base prompt into three separate ChatGPT tabs and three separate Claude tabs
• Each conversation produces a distinct visual interpretation
• Compare outputs: pick the strongest base, then identify elements to carry over from the others
• Feed those selections into a new prompt for the next iteration

Step 4: Iterate in a fresh conversation

• Copy all generated code and open a new chat — avoids context drift from long threads
• Paste the code, then describe specific changes (static vs animated elements, color adjustments, layout tweaks)
• For deeper control, paste the HTML into a local file (index.html) and use Cursor to make refinements via AI prompting

Step 5: Insert media

• Add images, videos, or charts into the same folder as index.html
• Tell the AI which files you've added and ask it to reference them in the code
• The bracket placeholders from Step 1 guide where each asset lands

Step 6: Deploy via GitHub Pages

• Create a GitHub account and repository
• Upload index.html and all media files
• Enable GitHub Pages in repository settings (two or three clicks)
• The result is a public URL anyone can open in a browser — shareable like a link, not a file attachment

Time allocation

• ~80% of total time: writing, research, structuring the substance
• Remaining time: AI generation, iteration, polish, and deployment
• Design work — the part that used to consume 20% of work hours — drops to minutes