HTML PPT Studio — AI-Powered Presentation Skill for Claude Code

HTML PPT Studio is an AgentSkill that turns Claude Code into a full presentation design tool. One install command gives you 36 themes, 31 page layouts, 47 animations (27 CSS + 20 canvas FX), 15 full-deck templates, and a presenter mode with speaker scripts and timer — all pure static HTML/CSS/JS with zero build step. It sits in the same family as Guizang PPT Skill: agent-native, text-editable HTML decks instead of proprietary slide files.

Why This Matters

Most AI slide tools produce either bland PPTX files or require complex toolchains. HTML PPT Studio takes a different approach: every presentation is a self-contained HTML file you can open in any browser, host on any server, or print to PDF. The design system is token-driven (CSS custom properties), so swapping a single <link> tag reskins the entire deck. No PowerPoint, no Google Slides, no Keynote dependency.

Installation

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

After install, any Claude Code session can generate presentations from natural language:

> "做一份 8 页的技术分享 slides，用 cyberpunk 主题"
> "turn this outline into a pitch deck"
> "create a 12-slide lecture on memory hierarchies, academic-paper theme"

Guizang PPT Skill: Cross-Agent Decks and Covers

Guizang PPT Skill is the better reference when you want the same slide workflow to travel across Claude Code, Codex, Cursor, and similar local coding agents. It generates single-file horizontal HTML decks, deck visuals, and social cover images. Its current README centers two design systems:

Install:

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Why keep it in this page instead of as a separate wiki entry: Guizang and HTML PPT Studio solve the same core problem — agent-generated HTML presentations. The real distinction is workflow emphasis. HTML PPT Studio is stronger as a Claude Code presentation studio with many themes, layouts, animations, and presenter mode. Guizang is stronger when cross-agent portability, visual system discipline, image prompts, screenshot framing, and social-cover output matter.

What’s in the Box

Key Themes (Selected)

Themes span professional, academic, creative, and playful styles:

• Professional: corporate-clean, pitch-deck-vc, swiss-grid, editorial-serif
• Academic: academic-paper, engineering-whiteprint, blueprint
• Dev-friendly: dracula, tokyo-night, nord, terminal-green, catppuccin-mocha
• Creative: cyberpunk-neon, vaporwave, neo-brutalism, glassmorphism, memphis-pop
• Chinese social: xiaohongshu-white (小红书白底杂志风)

Each theme is a pure CSS token file — colors, fonts, shadows, radii. Change one <link>, the whole deck reflows.

Presenter Mode

Press S on any deck to open a separate presenter window with four draggable, resizable cards:

1. Current slide — pixel-perfect iframe of what the audience sees
2. Next slide preview — same rendering engine, guaranteed color match
3. Speaker script — prompt-style notes, not full paragraphs to read
4. Timer — reset with R

The two windows sync via BroadcastChannel. Navigation sends postMessage to iframes — no reload, no flicker.

Speaker script golden rules (from the docs):

• Bold keywords, not full sentences — these are prompts, not scripts
• 150-300 words per slide (roughly 2-3 minutes of speaking)
• Write conversationally, not formally

Full-Deck Templates

The 15 templates cover real scenarios out of the box:

Example Prompts by Use Case

Lecture (professor preparing a class):

Create a 15-slide lecture on "Introduction to Formal Verification"
using the academic-paper theme. Include: cover, learning objectives,
3 concept explanation slides with code examples, a comparison slide
(model checking vs theorem proving), a timeline of key milestones,
and a summary. Add speaker scripts for presenter mode.

Conference talk:

Turn this abstract into a 10-slide conference presentation using
the swiss-grid theme with rise-in animations. Include an arch-diagram
slide for system architecture and a chart-bar slide for benchmark results.
Generate speaker scripts at 200 words per slide.

Startup pitch:

Build a 12-slide pitch deck using the pitch-deck-vc template.
Slides: problem, solution, market size (stat-highlight layout),
product demo (image-hero), business model, traction (chart-line),
team, competitive landscape (comparison), financials (kpi-grid),
ask, and thanks.

Keyboard Shortcuts

← → Space PgUp PgDn    Navigate slides
F                       Fullscreen
S                       Open presenter window
N                       Notes drawer
O                       Slide overview grid
T                       Cycle themes live
A                       Demo animation on current slide

How LearnAI Team Could Use This

• Lecture prep — Q can generate full lecture decks from an outline in seconds. The course-module template and academic-paper theme are purpose-built for this. Presenter mode with speaker scripts means the deck doubles as lecture notes.
• Student presentations — Students install the skill and generate presentations for class projects. The constraint of 31 structured layouts prevents the “wall of text on every slide” problem.
• Conference talks — Generate a first draft of research presentation slides from a paper abstract. Iterate on individual slides without regenerating the whole deck (each slide is a standalone HTML section).
• Teaching HTML/CSS — The codebase itself is a teaching artifact. Each theme is a pure CSS token file, each layout is a self-contained HTML template. Students can learn design systems by reading how themes work.
• Xiaohongshu content — The xhs-post template (9 slides, 3:4 ratio) and xiaohongshu-white theme are ready-made for LearnAI social media posts.

Real-World Use Cases

1. University lectures — Professors generate structured slide decks with speaker notes, then customize individual slides. The presenter-mode-reveal template ships with full speaker scripts as a reference.
2. Developer meetups and tech talks — The tech-sharing template with terminal-green or dracula theme produces developer-native slides with syntax-highlighted code blocks and architecture diagrams.
3. Startup pitch decks — VC-ready templates with KPI grids, traction charts, and competitive comparison layouts. The pitch-deck-vc theme uses the visual language investors expect.
4. Internal reports — Weekly reports and project updates with corporate-clean theme. Timeline and Gantt layouts visualize project progress without external tools.
5. Social media carousels — The xhs-post template generates 9-slide 3:4 ratio image sets for Xiaohongshu, Instagram, or LinkedIn carousels.
6. Workshop materials — Combine course-module template with interactive code slides and step-by-step process layouts for hands-on training sessions.

Technical Details

• Zero dependencies — Pure HTML/CSS/JS. Optional CDN loads for webfonts (Noto Sans SC, Noto Serif SC), highlight.js, and chart.js.
• Chinese + English first-class — CJK fonts pre-imported. All templates render correctly in both languages.
• Token-driven design — All visual decisions (color, spacing, typography, shadows) live in CSS custom properties. Themes override tokens, not components.
• Iframe isolation — Showcase pages use <iframe> per slide so multiple themes render side-by-side without CSS collisions.
• PNG export — ./scripts/render.sh uses headless Chrome to render any slide or deck to PNG.

HTML PPT Studio vs Make Slides

If you’re a teacher, you should also know about Make Slides — a Claude Code skill built specifically for interactive teaching. Here’s how they compare:

When to use which:

• Need a themed pitch deck or conference talk → HTML PPT Studio
• Need step-through algorithm animation or interactive playground → Make Slides
• Need presenter mode with speaker scripts → HTML PPT Studio
• Need pedagogically structured lecture with Canvas walkthroughs → Make Slides

Compared to Other Alternatives

HTML PPT Studio’s advantage is the combination of breadth (36 themes, 31 layouts, 47 animations) with zero-config AgentSkill installation. Guizang’s advantage is cross-agent portability and stricter visual-system guidance. Make Slides’ advantage is deep interactivity and pedagogical rigor.

Sources:

• GitHub — lewislulu/html-ppt-skill
• GitHub — op7418/guizang-ppt-skill
• Claude Agent Skills Documentation