What is html-ppt-skill
html-ppt-skill is an HTML-based AI presentation Skill. The tool supports outputting HTML files natively supported by browsers, with 36 built-in themes, 31 layouts, 47 animations, and 15 complete templates. The Agent can compose and generate polished presentations through natural language, supports one-click installation, and works across Claude Code、OpenClaw、Hermes Agent、Cursor/Codex and other platforms.
Main features of html-ppt-skill
-
36 themes: Covers scenarios such as minimalist academic, cyberpunk, and Xiaohongshu soft style, with real-time switching by pressing the T key.
-
31 layouts: Includes cover, table of contents, code display, timeline, architecture diagram, flowchart, etc., with real example data.
-
47 animations: 27 CSS animations + 20 Canvas FX (particle bursts, neural network pulses, and other cinematic effects).
-
15 complete templates: Distilled from real projects, such as tech-sharing, pitch-deck, xhs-post, presenter-mode-reveal, etc.
-
Presenter mode: Press the S key to open a separate window, including current page/next page preview, verbatim script, and timer, achieving pixel-perfect synchronization through iframe + BroadcastChannel.
-
Cross-platform Skill: Follows the AgentSkill protocol, installs with one command, and can be invoked by Claude Code, OpenClaw, Hermes, Cursor/Codex.
Follow on WeChat and reply "open source" to join theAI open-source project exchange group
How to use html-ppt-skill
-
Install the Skill: Run
npx skills add https://github.com/lewislulu/html-ppt-skillto add the Skill to the Agent. -
Natural language trigger: Enter a request in the Agent, such as "make a 10-page microservices architecture sharing deck, dark theme, with architecture diagram and code examples".
-
Open in browser: The Agent generates a complete HTML file, which can be viewed by double-clicking, with keyboard page navigation.
-
Switch themes in real time: During the presentation, press the T key to quickly switch among 36 themes.
-
Enable presenter mode: Press the S key to open a separate presenter window, including preview, verbatim script, and timer.
-
Manual creation (optional): Directly
git clonethe repository, run./scripts/new-deck.sh my-talkto generate the basic structure.
Core advantages of html-ppt-skill
-
HTML replaces PPTX: Plain text format, which LLMs are naturally good at generating, zero dependencies, opens by double-clicking, and avoids PPTX layout misalignment and font loss issues.
-
Prefabricated components + AI composition: Humans provide well-constrained prefabricated themes/layouts/animations, and AI handles the composition, avoiding aesthetic loss of control from creating from scratch.
-
Pixel-perfect presenter synchronization: The preview and audience screen share the same HTML + CSS, completely eliminating the embarrassment of inconsistent fonts, spacing, and colors during screen mirroring.
-
Install once, use everywhere: Follows the agentskills.io open standard, is not tied to a single platform, and capability assets can be migrated across Agent frameworks.
-
Cinematic visual effects: Hand-written Canvas modules implement effects such as particles, starfields, and neural networks, far exceeding the expressiveness of traditional PPT animations.
Project address of html-ppt-skill
- GitHub repository：https://github.com/lewislulu/html-ppt-skill
Comparison of html-ppt-skill with similar competing products
| Comparison dimension | html-ppt-skill | guizang-ppt-skill |
|---|---|---|
| Author | lewislulu | 歸藏 (op7418) |
| Star count | 3600+ (20 days) | 16,000+ |
| Output format | Single-file HTML | Single-file HTML |
| Visual system | 36 themes (minimal/cyber/Xiaohongshu, etc.) | 2 style sets: A electronic magazine x e-ink, B Swiss International Style |
| Number of layouts | 31 general-purpose layouts | 10 for style A + 22 locked layouts for style B |
| Motion capability | 47 (27 CSS + 20 Canvas FX cinematic effects) | WebGL background + low-performance static mode (toggle with B key) |
| Presenter mode | Separate window, iframe + BroadcastChannel pixel-level sync, includes speaker notes | No clearly built-in presenter mode |
| Content generation | Agent composes from 101 Skills, with the constraint "do not invent new layouts" | 7-question checklist upfront alignment -> outline confirmation -> choose skeleton and fill in content |
| Image support | Basic image insertion | Supports generating documentary photos, infographics, flowcharts, and system relationship diagrams |
| Cover ecosystem | 15 complete deck templates (including xhs-post vertical format) | WeChat Official Account 21:9 header image, 1:1 share card, Xiaohongshu 3:4, WeChat Channels horizontal format |
| Constraint validation | Relies on SKILL.md rule constraints | checklist.md self-check + validation script intercepts centered titles, out-of-slot images, etc. |
Application scenarios of html-ppt-skill
-
Technical sharing and developer presentations: Call the tech-sharing template, pair it with dark themes such as tokyo-night and terminal-green, and quickly generate slides containing architecture diagrams and code examples.
-
Fundraising roadshows and product pitches: Use the pitch-deck-vc template to produce a YC-style business plan in one click, with support for data charts and team introduction layouts.
-
Xiaohongshu and social media image-text posts: Generate 3:4 vertical content through the xhs-post template, pair it with soft-pastel and xiaohongshu-white themes, and directly adapt to social platform ratios.
-
Academic reports and paper presentations: Use minimal-white, editorial-serif, and academic-paper themes, suitable for journal defenses and academic conferences, with a rigorous and restrained style.
-
Corporate business and news broadcasts: corporate-clean and news-broadcast themes meet formal reporting scenarios such as business analysis, sales reviews, and monthly project reports.