Why HTML Is the Future of PPTs in the AI Era – A Handy Skill Review

Background

Generating AI‑driven PPTs previously required either clean‑structured Markdown tools (e.g., Marp, Slidev) that produced visually plain slides, or direct generation of full reveal.js HTML pages where each slide needed a rebuilt theme, animation, and layout. Long prompts caused the model to forget earlier style decisions.

html-ppt-skill

The open‑source html-ppt-skill (GitHub: https://github.com/lewislulu/html-ppt-skill) supplies Claude Code, Cursor and similar agents with a pre‑packed asset library: 36 CSS themes, 15 complete decks, 31 single‑page layouts, and 47 animations (27 CSS, 20 Canvas FX). The output is pure static HTML/CSS/JS that opens with a double‑click in any browser.

Installation

npx skills add https://github.com/lewislulu/html-ppt-skill

After execution the agent’s working directory contains a templates/ folder with subfolders themes/, full-decks/, single-page-layouts/ and animations/. The agent selects a theme, layout and animation from this index instead of writing CSS from scratch.

Theme library

Each of the 36 themes is a standalone CSS file defining fonts, color palettes, shadows, spacing, card radii, accent colors and citation styles. Switching a theme requires changing a single <link> line. Scoped CSS isolates each theme, allowing multiple themes to coexist in the same HTML without style leakage.

Full decks for rapid prototyping

The full-decks/ folder holds 15 ready‑made decks (e.g., pitch‑deck, weekly report, Xiaohongshu 9‑image layout, product launch, technical‑sharing). Each deck includes pre‑filled text, animations and navigation. In a test generating a 12‑page technical‑sharing PPT, the time dropped from roughly 8 minutes (with frequent layout failures) to 3 minutes after adding the skill.

Single‑page layouts for long‑tail needs

The 31 single‑page layouts cover cover pages, table of contents, comparison tables, timelines, KPI dashboards, citation pages, code snippets, Q&A and thank‑you slides. Each layout ships with example data. For example, a three‑column comparison slide is created by copying templates/single-page-layouts/comparison-3col.html and inserting the desired text.

Animation collection

The 47 animations are split between 27 CSS effects (text entrance, card lift, gradient background) and 20 Canvas FX (particles, fireworks, matrix rain, fluid ripples). Canvas effects are encapsulated in a <canvas> element with an initialization script. All animations listen to reveal.js’s slidechanged event, starting when their slide becomes active and stopping when it leaves, preserving performance.

Presenter mode

Pressing S activates presenter mode, displaying a main deck preview, next‑slide thumbnail, speaker notes and a timer in four magnetic cards, similar to Keynote’s presenter view. The implementation uses the ?preview=N query parameter to render the same HTML for both main and preview windows without re‑rendering, and synchronizes slide indices across windows via BroadcastChannel and postMessage.

Zero‑build deployment

No bundlers, npm installs or external dependencies are required. A single index.html referencing relative CSS and JS files can be hosted on GitHub Pages, Vercel, any object storage, or served locally with python -m http.server. This eliminates the need for PowerPoint or Node environments and reduces distribution cost to zero.

Practical workflow

In practice the agent receives three fixed prompt sections: audience and scenario, theme preference with reference decks, and the raw material. The agent replies with a proposed theme, deck template and animation, waits for confirmation, then generates the final slides. This turns the agent from a random‑style designer into a reliable PPT assembler.