How to build AI-generated HTML presentations with Claude in five steps

Executive overview

Most people default to PowerPoint or Google Slides when building presentations, but those tools constrain visual creativity to what the software supports. This tutorial shows how to use Claude to generate a single self-contained HTML file that can include animated diagrams, custom visuals, and high-contrast design — none of which are achievable in standard slide tools. The workflow is repeatable: a Claude Project with a saved system prompt means any future script drop-in produces a consistent, high-quality deck. Edits are handled in one or two chat iterations, then handed off to a local code editor (Cursor or Claude Code) before publishing via GitHub Pages.

AI's coding superpower makes it the right tool for presentations — lean into it rather than fighting the constraints of slide software.

Why code beats PowerPoint for AI-generated slides

• HTML presentations are not limited by slide software constraints — animated charts, custom diagrams, and unique layouts are all possible.
• AI models generate code far more reliably than they format structured PowerPoint files; code is the model's strongest skill.
• A single HTML file is portable, shareable via URL, and editable with any code tool or AI chat.
• For teams locked into company formats, a separate Claude Skills workflow covers pixel-perfect PowerPoint/Google Slides output.

Step 1: Write the script or outline first

• The AI needs a text foundation before it can create visuals — either a word-for-word script or a structured bullet outline works.
• More structure in the notes means fewer correction rounds later.
• Optional dictation notes above a dividing line can reinforce personal style preferences (minimal text, high contrast, single accent color per slide).

Step 2: Set up a Claude Project with a system prompt

• Claude Projects store a system prompt that persists across every future conversation, making the workflow fully repeatable.
• Create a new project at claude.ai, then add a system prompt via the instructions panel.
• Do not write the system prompt from scratch — paste a rough version into the Anthropic Console prompt improver (console.anthropic.com) and let it inject prompt engineering best practices automatically.
• Enable the "thinking models" checkbox in the prompt improver to ensure compatibility with extended-thinking mode.
• Key prompt directives: output a single HTML file, minimal text per slide, maximum visual impact, dark background with high-contrast foreground, single accent color per slide, animated charts and diagrams preferred over bullet lists.

Step 3: Generate and refine inside Claude chat

• Use Opus 4.5 with Extended Thinking turned on — it outperforms Gemini and GPT models for this task as of late 2025.
• Paste the script or notes into the project chat and send; the model thinks for two to five minutes and returns a complete HTML deck.
• Make one or two rounds of edits inside the same chat — no more, because a long context degrades model output quality.
• Batch all requested changes into a single message rather than sending them one at a time; dictation into a notepad app works well for compiling the list.

Step 4: Download and edit locally in Cursor or Claude Code

• After chat iterations, download the HTML file and open it in Cursor (cursor.com) or Claude Code for further refinements.
• Cursor is recommended for non-technical users; the $20/month plan unlocks higher-end models for complex edits.
• Use Cursor's built-in browser tab to render the presentation live, then use the "Select Element" feature to point the AI at the exact DOM element to change — this dramatically improves first-attempt accuracy.
• Match model to task: use the fast Composer model for minor tweaks (font size, colors, rounding); use Opus 4.5 for structural redesigns or large batches of changes.
• To embed images, place them in the same folder as index.html and reference them with the @ symbol in the Cursor chat.

Step 5: Share via GitHub Pages

• Create a free GitHub account, make a new public repository, and upload the HTML file plus any assets.
• Files must sit at the repository root (no subfolders) and the main file must be named index.html.
• In repository Settings > Pages, set the branch to "main" and save; the public URL is ready within two to five minutes.
• The URL can be shared with anyone — no login required to view the presentation.

Model and tool selection at a glance

• Claude Opus 4.5 + Extended Thinking: initial generation and large structural edits.
• Cursor Composer (fast model): minor visual tweaks — colors, spacing, font sizes.
• Cursor with Select Element: targeted edits to a specific slide component.
• GitHub Pages: zero-cost public hosting with a stable shareable URL.