Why HTML Slides?

Traditional slide tools (PowerPoint, Google Slides, Keynote) are great for presenting but painful for creating. You spend more time fighting with layout and formatting than thinking about your content.

HTML slides flip the script. You describe what you want in plain English, an AI agent generates a polished single-file presentation, and you open it in any browser. No design skills needed.

With HTMLSlides, you also get a professional presenter experience — dual-display mode, speaker notes, timer, and laser pointer — that rivals PowerPoint.

What You Need

  • An AI coding agent — Claude Code, GitHub Copilot, Gemini CLI, Cursor, or Windsurf
  • The html-slides skill — free, open source, install in 30 seconds
  • Optional: HTMLSlides app — for the dual-display presenter mode

Step 1: Install the Skill

The fastest way:

Bash 
curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

This detects your installed AI agents and sets up the skill automatically. You can also install manually for specific agents — see the documentation.

Step 2: Describe Your Presentation

Open your AI agent and invoke the skill. Describe what you need in plain English:

Prompt 
/html-slides
Create a 10-slide pitch deck for a developer tools startup.
Include stats cards for key metrics, a timeline showing our journey
from founding to Series A, and a comparison table vs competitors.
Use the Bold Signal theme.

The skill will ask clarifying questions about your content, audience, and preferred visual style. In creative mode, you'll see 3 style previews to choose from before the full deck is generated.

Step 3: Choose Your Mode

HTMLSlides offers two modes:

Advanced Mode (Default) — Structured interactive components like flip cards, charts, architecture diagrams, stats cards, and more. Best for technical talks, product demos, and data-rich presentations.

Simple Mode — Creative themes with AI-driven layout. Say "create a simple presentation" to use this mode. Best for pitch decks, keynotes, and non-technical presentations.

You can also specify a theme:

Prompt 
Create a presentation about our API using the Excalidraw theme

Step 4: Review Your Output

The skill generates two files:

  • my-deck.html — the presentation (single file, all CSS/JS inline)
  • my-deck.notes.json — speaker notes for the presenter app

Double-click the HTML file to open it in your browser. You'll see a polished presentation with keyboard navigation (arrow keys, Space, Home, End).

Step 5: Present with the HTMLSlides App

For the full presenter experience, open the HTML file in the HTMLSlides desktop app:

  1. Launch HTMLSlides and open your file
  2. Click Present — the app starts a local WebSocket server
  3. Your laptop shows the presenter dashboard: current slide, next slide preview, speaker notes, and timer
  4. A browser tab opens with the clean audience view
  5. Share that browser tab on Zoom, Teams, or Meet

The audience view stays perfectly synced with your navigation. You can even use the laser pointer — your cursor position is synced in real-time.

Tips for Better Slides

  1. Be specific about slide count — "Create a 10-slide presentation" gives better results than "create a presentation"
  2. Name the components you want — "Include stats cards, a timeline, and flip cards" tells the skill exactly what to build
  3. Describe your audience — "For a technical audience" vs "for executives" changes the tone and complexity
  4. Include your actual content — Don't just describe topics, provide the real data and talking points
  5. Try different themes — Each visual preset has a distinct personality. Bold Signal is dramatic, Terminal Green is techy, Notebook Tabs is friendly.

Converting Existing Presentations

Already have a PowerPoint? Convert it:

Prompt 
Convert my presentation.pptx to HTML slides

The skill extracts content and images from your .pptx file and rebuilds it as a web presentation. You can also convert any HTML file — reveal.js, Marp, Google Slides exports, articles, and more.

What's Next