Building AI Presentations: Comparing Claude, GPT, Gemini, and Grok

Executive overview

The creator tests four major AI models — Claude, ChatGPT, Gemini 2.5 Pro, and Grok — by feeding each the same raw presentation notes and asking them to generate a complete HTML/CSS/JavaScript slide deck. Models vary significantly in visual quality, animation capability, and instruction-following. Claude Sonnet 4.5 with high-contrast styling produces the best base, which is then refined using Claude Code for targeted slide-level edits. The final deck is hosted publicly via GitHub Pages with no extra tooling required.

Prompt strategy and model setup

• Start from raw notes, not a polished outline; embed bracket-delimited visual cues (e.g., [line chart showing X]) to guide AI visuals.
• Request output as a single HTML/CSS/JS file with keyboard navigation, chapter indicators, and minimal text for live annotation on screen.
• Specify high-contrast foreground/background explicitly — omitting this produces muted, hard-to-read visuals.
• Run multiple models in parallel; treat outputs as a pool of components to cherry-pick, not finished products.
• Enable Canvas in ChatGPT and Gemini so code can be previewed in-browser without copy-paste.

Model comparison results

• Grok produced the weakest visuals and was discarded immediately.
• Claude Opus 4.1 underperformed expectations — heavy emoji use, faded number styling, poor contrast.
• Gemini 2.5 Pro had promising animations but content ran off-screen vertically; nothing was ultimately kept.
• ChatGPT (GPT-5 heavy thinking) offered two standout slides: a compelling animation for the advanced voice mode screen and a speed-comparison animation using a moving ball.
• Claude Sonnet 4.5 with high contrast won on overall aesthetics — dark background, turquoise accent, clean layout — and became the base deck.

Iterative refinement workflow

• Make only a small number of edits inside the chat canvas; context windows fill fast and model output quality degrades with accumulated edits.
• Export the HTML file early and open it in a real browser to see true rendering — canvas preview clips content that appears complete.
• Move further editing to Claude Code (or Cursor/Codex) to keep the context clean and enable file-aware, targeted changes.
• Pass screenshots of problem slides directly to Claude Code alongside written instructions for precise visual fixes.
• Common fixes needed: remove stray artefacts (random characters), ensure slide animations re-trigger on every navigation, resize charts that overflow the viewport.

Using Claude Code for slide merging

• Organise files as index.html (base), viz1.html, viz2.html before starting Claude Code.
• Reference files by name in the prompt so the model knows exactly which slide to pull from which source.
• Use the --ultra-think flag (extended thinking) for complex merge tasks involving layout-matching across different stylesheets.
• Instruct the model to match the base deck's styling when importing a component — prevents visual inconsistency.
• Iterate with screenshots: take a screenshot, drop it into Claude Code, describe what is wrong, repeat.

Publishing via GitHub Pages

• Create a public GitHub repository and upload the finished HTML as index.html (the filename is required for Pages to serve it as the root).
• Go to Settings → Pages → set branch to main, root path; the live URL appears within 2–5 minutes.
• Anyone with the URL can view the presentation in a browser — no login, no install, no PDF conversion.
• The same approach works for sharing prototypes, demos, or interactive reports built entirely with AI-generated HTML.