Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .claude/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
skills CLI
$ npx skills add nexu-io/open-design --skill html-ppt -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .agents/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add nexu-io/open-design --skill html-ppt -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .cursor/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add nexu-io/open-design --skill html-ppt -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .gemini/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
GitHub CLI
$ gh skill install nexu-io/open-design html-ppt
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add nexu-io/open-design --skill html-ppt -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .github/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add nexu-io/open-design --skill html-ppt -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "html-ppt" agent skill from https://github.com/nexu-io/open-design/tree/main/design-templates/html-ppt into .opencode/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
html-ppt
GitHub stars
100k
Token cost
~3.8k tokens
SKILL.md length
1,225 words
Files
253 (incl. scripts, references, assets)
Skills in repo
245
Repo updated
First seen
Licence
MIT
At a glance
Builds slide decks as static HTML files from a token-based design system, with themes, layouts, animations and a presenter mode.
Works in 3 steps: 不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段 → 每页 150–300 字 — 2–3 分钟/页的节奏 → 用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"
Producing a presentation as static HTML instead of a PPTX file
SKILL.md covers Install, What the skill gives you, When to use and Before you author anything —…, plus 8 more sections
Runs JavaScript scripts from its folder; calls npx; reaches github.com
What it does
The skill authors presentations as plain HTML, CSS and JavaScript with no build step. A shared design system lives in `assets/base.css`; one theme file sets the look, one layout file sets a page type, and a `data-anim` class adds an entry effect. The excerpt counts 36 themes, 15 full-deck templates, 31 single-page layouts, 27 CSS animations and 20 canvas effects switched on with `data-fx`.
A keyboard runtime handles slide navigation, theme and animation switching, a presenter mode that shows the current slide, the next slide, the script and a timer, and a notes drawer. A managed Chromium render script exports pages to PNG, and the only external assets are CDN web fonts. The description frames the skill around consulting final decks that close with an action plan, while the files shown describe the presentation toolkit itself.
When your agent uses it
Producing a presentation as static HTML instead of a PPTX file
Building a pitch deck, weekly report or product-launch deck from a template
Presenting from the browser with a speaker view, notes and timer
Exporting slides to PNG images through Chromium
Example prompts
“Make a ten-slide pitch deck from the pitch-deck template with the tokyo-night theme.”
“Build a weekly report deck for the platform team and turn on presenter mode.”
“Turn these diagnosis findings into a consulting final deck that ends with owners and a roadmap.”
“Render the slides in ./deck/index.html to PNG images.”
Requirements
A web browser to present the HTML files
Network access for CDN web fonts
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
1不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
2每页 150–300 字 — 2–3 分钟/页的节奏
3用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"
What it can do on your machine
Read from SKILL.md and the folder at commit 3449fa6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML PPT Studio loads about 3.8k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 1,225 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~76
When it runs· the whole SKILL.md, loaded when a task matches
~3.8k
With references· SKILL.md plus every file in references/, read only if the agent opens them
~14k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
Download SKILL.mdSave it as .claude/skills/html-ppt/SKILL.md (or your agent's skills folder). This skill also uses 252 other files; get the full folder from GitHub.
name
html-ppt
description
For consulting delivery work: turn diagnosis, frameworks, and project work into a client-adoptable action plan. Built around the core query "consulting-final-deck", with engagement manager judgment, buyer-ready proof, and this outcome: accept the recommendation and commit owners to the roadmap.
en_name
Brief AI in Your Industry like a Tier-1 Consulting AI Vertical Lead
zh_name
像一线咨询 AI 行业负责人一样讲清行业 AI
en_description
For consulting delivery work: turn diagnosis, frameworks, and project work into a client-adoptable action plan. Built around the core query…
zh_description
咨询/客户交付场景：围绕 core query「consulting-final-deck」把粗糙材料整理成“像一线咨询 AI 行业负责人一样讲清行业 AI”这类可购买、可复用的专业 Deck；突出受众、决策目标、证据链、风险取舍和评审标准。
consulting-final-deck, consulting, Brief AI in Your Industry like a Tier-1 Consulting AI Vertical Lead, 像一线咨询 AI 行业负责人一样讲清行业 AI, consulting-deliverable…
od.mode
deck
od.upstream
https://github.com/lewislulu/html-ppt-skill
od.speaker_notes
true
od.animations
true
html-ppt — HTML PPT Studio
Author professional HTML presentations as static files. One theme file = one
look. One layout file = one page type. One animation class = one entry effect.
All pages share a token-based design system in assets/base.css.
Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
Use when the user asks for any kind of slide-based output or wants to turn
text/notes into a presentable deck. Prefer this over building from scratch.
🎤 Presenter Mode (演讲者模式 + 逐字稿)
If the user mentions any of: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use the presenter-mode-reveal full-deck template and write 150–300 words of 逐字稿 in each slide's <aside class="notes">.
Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.
Why the previews are pixel-perfect: each preview is an <iframe> that loads the actual deck HTML with a ?preview=N query param; runtime.js detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.
Smooth navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker. The two windows also stay in sync via BroadcastChannel.
Only presenter-mode-reveal is designed from the ground up around the feature with proper example 逐字稿 on every slide.
Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup.
Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.
Before you author anything — infer first, ask only when blocked
Before writing slides, resolve the three decisions below from the user's brief,
project metadata, supplied content, and conversation. If they are sufficiently
clear, choose a tasteful default and proceed without waiting for confirmation;
state the choices briefly in the plan. Ask one consolidated clarification only
when a missing answer would materially change the deck.
Content & audience. What's the deck about, how many slides, who's
watching (engineers / execs / 小红书读者 / 学生 / VC)?
Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3
candidates based on tone:
Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
Starting point. One of the 14 full-deck templates, or scratch? Choose
the closest templates/full-decks/<name>/. If the
user's content suggests something obvious (e.g. "我要做产品发布会" →
product-launch), use it confidently instead of asking blindly.
A good clarification, when one is actually needed, follows the active
discovery-question-form protocol and contains only unresolved fields. For
example, if content and audience are known but the requested tone spans
incompatible themes, ask one theme question with 2–3 recommended options. Do
not repeat the form as a markdown checklist.
If the known context already resolves them, scaffold the deck and start writing
immediately.
Show full SKILL.md (477 more words)Show less
Quick start
Scaffold a new deck. From the repo root:bash
./scripts/new-deck.sh my-talk
open examples/my-talk/index.html
Pick a theme. Open the deck and press T to cycle. Or hard-code it:html
Pick layouts. Copy <section class="slide">...</section> blocks out of
files in templates/single-page/ into your deck. Replace the demo data.
Catalog in references/layouts.md.
Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on
any element. On <ul>/grids, use anim-stagger-list for sequenced reveals.
For canvas FX, use <div data-fx="knowledge-graph">...</div> and include
<script src="../assets/animations/fx-runtime.js"></script>.
Catalog in references/animations.md.
Use a full-deck template. Copy templates/full-decks/<name>/ into
examples/my-talk/ as a starting point. Each folder is self-contained with
scoped CSS. Catalog in references/full-decks.md
and gallery at templates/full-decks-index.html.
Always start from a template. Don't author slides from scratch — copy the
closest layout from templates/single-page/ first, then replace content.
Use tokens, not literal colors. Every color, radius, shadow should come
from CSS variables defined in assets/base.css and overridden by a theme.
Good: color: var(--text-1). Bad: color: #111.
Don't invent new layout files. Prefer composing existing ones. Only add
a new templates/single-page/*.html if none of the 30 fit.
Respect chrome slots..deck-header, .deck-footer, .slide-number
and the progress bar are provided by assets/base.css + runtime.js.
Keyboard-first. Always include <script src="../assets/runtime.js"></script>
so the deck supports ← → / T / A / F / S / O / hash deep-links.
One .slide per logical page.runtime.js makes .slide.is-active
visible; all others are hidden.
Supply notes. Wrap speaker notes in <div class="notes">…</div> inside
each slide. Press S to open the overlay.
NEVER put presenter-only text on the slide itself. Descriptive text like
"这一页展示了……" or "Speaker: 这里可以补充……" or small explanatory captions
aimed at the presenter MUST go inside <div class="notes">, NOT as visible
<p> / <span> elements on the slide. The .notes class is display:none
by default — it only appears in the S overlay. Slides should contain ONLY
audience-facing content (titles, bullet points, data, charts, images).
Writing guide
See references/authoring-guide.md for a
step-by-step walkthrough: file structure, naming, how to transform an outline
into a deck, how to choose layouts and themes per audience, how to do a
Chinese + English deck, and how to export.
html-ppt/
├── SKILL.md (this file)
├── references/ (detailed catalogs, load as needed)
├── assets/
│ ├── base.css (tokens + primitives — do not edit per deck)
│ ├── fonts.css (webfont imports)
│ ├── runtime.js (keyboard + presenter + overview + theme cycle)
│ ├── themes/*.css (36 token overrides, one per theme)
│ └── animations/
│ ├── animations.css (27 named CSS entry animations)
│ ├── fx-runtime.js (auto-init [data-fx] on slide enter)
│ └── fx/*.js (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│ ├── deck.html (minimal 6-slide starter)
│ ├── theme-showcase.html (36 slides, iframe-isolated per theme)
│ ├── layout-showcase.html (iframe tour of all 31 layouts)
│ ├── animation-showcase.html (20 FX + 27 CSS animation slides)
│ ├── full-decks-index.html (gallery of all 14 full-deck templates)
│ ├── full-decks/<name>/ (14 scoped multi-slide deck templates)
│ └── single-page/*.html (31 layout files with demo data)
├── scripts/
│ ├── new-deck.sh (scaffold a deck from deck.html)
│ └── render.sh (managed Chromium → PNG)
└── examples/demo-deck/ (complete working deck)
Rendering to PNG
scripts/render.sh uses Playwright's managed Chromium renderer. Do not call the
user's installed Google Chrome directly for PNG export, especially on macOS
desktop builds where Crashpad/profile permissions can abort Chrome before a
screenshot is written. If the managed renderer fails once, surface that error
and stop instead of retrying alternate Chrome launch commands.
For multi-slide capture, runtime.js exposes #/N deep-links, and render.sh
iterates 1..N.
bash
./scripts/render.sh templates/single-page/kpi-grid.html # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 slides, custom dir
Keyboard cheat sheet
← → Space PgUp PgDn Home End navigate
F fullscreen
S open presenter window (magnetic cards: current/next/script/timer)
N quick notes drawer (bottom overlay)
R reset timer (in presenter window)
?preview=N URL param — force preview-only mode (single slide, no chrome)
O slide overview grid
T cycle themes (reads data-themes attr)
A cycle demo animation on current slide
#/N in URL deep-link to slide N
Esc close all overlays
HTML PPT Studio next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
Generates single-file HTML slide decks with horizontal paging, WebGL backgrounds and a presenter view, in an editorial-magazine style or a Swiss-style layout.
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references.
Builds slide decks as static HTML files from a token-based design system, with themes, layouts, animations and a presenter mode. The skill authors presentations as plain HTML, CSS and JavaScript with no build step.css`; one theme file sets the look, one layout file sets a page type, and a `data-anim` class adds an entry effect.
When should I use HTML PPT Studio?
HTML PPT Studio fits situations like: producing a presentation as static HTML instead of a PPTX file; building a pitch deck, weekly report or product-launch deck from a template; presenting from the browser with a speaker view, notes and timer; exporting slides to PNG images through Chromium.
How do I install HTML PPT Studio in Claude Code?
Run `npx skills add nexu-io/open-design --skill html-ppt -a claude-code`. Or copy the skill folder (design-templates/html-ppt in nexu-io/open-design) into .claude/skills/html-ppt in your project. Claude Code loads it when a task matches its description.
How do I install HTML PPT Studio in Codex?
Run `npx skills add nexu-io/open-design --skill html-ppt -a codex`. Or copy the skill folder (design-templates/html-ppt in nexu-io/open-design) into .agents/skills/html-ppt in your project. Codex loads it when a task matches its description.
Can I use HTML PPT Studio in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nexu-io/open-design --skill html-ppt -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-ppt, .gemini/skills/html-ppt, .github/skills/html-ppt and .opencode/skills/html-ppt in your project.
What does HTML PPT Studio need to run?
Going by SKILL.md and its folder, HTML PPT Studio needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: A web browser to present the HTML files; Network access for CDN web fonts.
Does HTML PPT Studio access the network?
SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is HTML PPT Studio safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does HTML PPT Studio use?
HTML PPT Studio is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HTML PPT Studio use?
About 3.8k tokens (SKILL.md is roughly 15k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 10k tokens, read only when the agent opens those files.
What are the alternatives to HTML PPT Studio?
Skills that share tags, products or a category with HTML PPT Studio: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), HTML PPT Studio (lewislulu/html-ppt-skill, 8.6k stars), Single-File HTML Slide Decks (op7418/guizang-ppt-skill, 27k stars) and HTML Presentation Structure Guide (shanraisshan/claude-code-best-practice, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML PPT Studio?
nexu-io (a GitHub organization) maintains it in nexu-io/open-design, which has 99,905 GitHub stars. The repository holds 245 skills in this directory. The repository was last updated on October 8, 2026.
Source: nexu-io/open-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
