html-ppt-skill – Open-Source AI PPT Skill with HTML Output

1. What Is html-ppt-skill?

html-ppt-skill is an open-source AI presentation generator built on HTML. Natural-language instructions produce browser-native HTML files. It ships with 36 themes, 31 layouts, 47 animations, and 15 full templates, follows the AgentSkill protocol, and works across Agent frameworks including Claude Code, Cursor, and OpenClaw. Its core innovation replaces traditional PPTX with plain HTML, eliminating layout drift, missing fonts, and other long-standing presentation pain points.

Image source: Official article

Technical positioning and domain: AI-assisted presentation generation with HTML output—not PPTX or PDF. Its “prefabricated components + AI composition” architecture combines designer-polished visuals with LLM orchestration, avoiding aesthetic drift from zero-to-one AI design. Target users: developers, technical evangelists, and content creators who want programmable, version-controlled, cross-platform decks.

Research background: Open sourced on GitHub by lewislulu; 3,600+ stars in 20 days reflect strong community interest in HTML-first decks. Motivation: PPTX is binary and LLM-unfriendly—layouts break, fonts vanish, animations fail. html-ppt-skill marks a shift from “simulating PPTX” to native HTML presentations.

Core value: Solves three problems: uncontrollable AI PPTX quality, inconsistent fonts/styles when casting across platforms, and lack of version control for decks in CI/CD. Pure HTML means zero dependencies, double-click to open, pixel-accurate rendering, keyboard navigation, live theme switching, and presenter mode.

Technical characteristics: Constrained prefabs (themes, layouts, effects) plus AI composition. 47 effects (27 CSS animations + 20 Canvas FX cinematic effects). Follows agentskills.io for one install across multiple Agent platforms.

2. Key Features

• 36-theme system: Minimal academic, cyberpunk, Xiaohongshu soft pastel, Tokyo Night, terminal green, and more. Press T during presentation to switch live without regenerating. Each theme is color-tuned for readability and consistency.

• 31 professional layouts: Cover, TOC, code showcase, timeline, architecture diagram, flowchart, and more—with sample data AI can fill. Information hierarchy reduces crowded slides common in traditional PPT.

• 47-effect engine: 27 CSS animations (fade, slide, scale) and 20 Canvas FX effects (particle bursts, neural pulses, star trails). Hand-written WebGL modules target 60fps for cinematic impact beyond typical PPT animation.

• 15 full templates: Real-project cases—tech-sharing, pitch-deck, xhs-post, presenter-mode-reveal, etc.—with complete structure; AI replaces core content only.

• Presenter mode: Press S for a separate window with current/next preview, speaker notes, and timer. iframe + BroadcastChannel keeps presenter and audience views pixel-synced from the same HTML/CSS—no font/spacing/color drift on cast displays.

• Cross-platform Skill protocol: agentskills.io standard; one-line install for Claude Code, OpenClaw, Hermes Agent, Cursor/Codex. Portable capability assets across ecosystems.

3. How to Use

1. Environment: Node.js 18+ and npm. Windows, macOS, Linux. Modern browsers (Chrome/Edge 110+, Firefox 120+) for best Canvas FX.

2. Install Skill:

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

   Downloads Skill definitions into the Agent environment (~10–30 seconds).

3. Natural-language trigger: e.g., “Create a 10-slide microservices architecture talk, dark theme, with architecture diagrams and code examples.” The Agent composes from themes, layouts, and effects per SKILL.md. Specify page count, theme, and core content.

4. Open and present: Double-click the HTML file; arrow keys or space to advance. T switches themes; S opens presenter mode.

5. Manual creation (optional): Clone the repo, run ./scripts/new-deck.sh my-talk, edit HTML/CSS for deep customization.

Best practices: Target 5–15 slides and a clear theme. For complex diagrams, request the “architecture diagram” layout. Test Canvas FX on target hardware; press B for low-performance static mode if needed.

4. Pros and Cons

5. Comparison with Similar Tools

Selection advice: For AI-native HTML decks, html-ppt-skill and guizang-ppt-skill lead. html-ppt-skill wins on theme count (36 vs 2), effects (47 vs WebGL backgrounds), and AgentSkill portability. guizang-ppt-skill’s checklist.md self-check may appeal if you want stricter content alignment.

For manual editing and version control, Marp and Slidev are mature. Marp converts Markdown to multiple formats; Slidev fits Vue-heavy customization. Neither has native AI—you write content or use external tools.

6. Editor’s Take

html-ppt-skill is a meaningful innovation: HTML over PPTX improves LLM controllability and adds Git, cross-platform rendering, and pixel accuracy. “Prefabs + AI composition” respects AI limits—humans curate design libraries; AI composes—a strong human–AI pattern.

Best for technical teams: Git-friendly decks, CI/CD, presenter sync for frequent tech talks. 36 themes and 31 layouts cover tech sharing through social formats. Non-technical users face CLI/Agent friction; one technical teammate can unblock the rest.

Future upside: AI-generated visuals/charts and community theme/layout contributions.

— Strong innovation (HTML + AgentSkill), real pain-point value, active community.

7. Use Cases

• Tech talks: tech-sharing template + tokyo-night / terminal-green for architecture and code slides; keyboard nav and live themes.

• Fundraising / pitch: pitch-deck-vc template, YC-style decks, data charts, team slides, corporate-clean theme.

• Social / Xiaohongshu: xhs-post 3:4 vertical + soft-pastel / xiaohongshu-white themes; Canvas FX for visual pop.

• Academic: minimal-white, editorial-serif, academic-paper themes; code and timeline layouts for defenses and conferences.

• Enterprise / news: corporate-clean, news-broadcast for formal reporting; presenter notes and timer for pacing.

8. FAQ

Q: Do I need programming skills?
A: Basic use: one install command + natural language in an Agent. Custom themes/layouts/effects need HTML/CSS/JS.

Q: Export to PPTX or PDF?
A: HTML only today. Print to PDF via browser (Ctrl+P) or third-party HTML→PPTX converters. Export may come later.

Q: Custom themes?
A: CSS files under themes/; copy and edit or create new; register in SKILL.md so AI can select them.

Q: Chinese content?
A: Fully supported; typography tuned for Chinese (fonts, line height, spacing). Canvas FX is language-agnostic.

Q: Which Agent frameworks?
A: AgentSkill-compatible: Claude Code, OpenClaw, Hermes Agent, Cursor/Codex; any AgentSkill implementer. See agentskills.io.

Q: Contribute themes/layouts?
A: Match existing style in repo folders; register in SKILL.md; open an Issue first to avoid duplication. Frontend skills required.

9. Project Links

• GitHub: https://github.com/lewislulu/html-ppt-skill
• AgentSkill spec: https://agentskills.io