Agent skill

HTML Ppt Designer

by andyhuo520 in andyhuo520/html-ppt-designer

HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面,LLM 智能设计优先,支持多种视觉风格、动效设计、色彩认知系统。触发词:PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。

No licenceAuto-check: notesDocuments & Office

Install HTML Ppt Designer

skills CLI
$ npx skills add andyhuo520/html-ppt-designer --skill html-ppt-designer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install andyhuo520/html-ppt-designer html-ppt-designer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-ppt-designer
GitHub stars
121
Token cost
~14k tokens
SKILL.md length
1,827 words
Files
36 (incl. scripts, references)
Skills in repo
1
Repo updated
First seen
Licence
None found

At a glance

HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面,LLM 智能设计优先,支持多种视觉风格、动效设计、色彩认知系统。触发词:PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。

  • Works in 10 steps: 色彩方案 → 字体系统 → 布局参数 → …
  • Tasks that involve Slides and decks
  • SKILL.md covers 🔧 环境变量配置(首次使用必读), 🆕 v4.0 核心架构升级, 🎨 LLM 智能设计系统 and 📋 完整工作流程, plus 2 more sections
  • Calls python3, brew and pip; reaches youtu.be and fonts.googleapis.com; needs UNSPLASH_ACCESS_KEY and ZENMUX_API_KEY

What it does

HTML Ppt Designer is an agent skill from andyhuo520/html-ppt-designer. HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面,LLM 智能设计优先,支持多种视觉风格、动效设计、色彩认知系统。触发词:PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。

Its SKILL.md is about 14k tokens, which your agent loads only when the skill is triggered. The skill folder holds 38 other files, including scripts and reference files (for example `README.md`, `SKILL-TEMPLATE-GUIDE.md` and `STYLES.md`).

It sits in Documents & Office, covering Slides and decks. The repository describes itself as: HTML PPT Designer v5.2 - 智能演示文稿设计器,将任何内容转化为精致的 HTML 演示文稿.

When your agent uses it

  • Tasks that involve Slides and decks

Example prompts

  • “/html-ppt-designer”

Requirements

  • A credential in UNSPLASH_ACCESS_KEY
  • A credential in ZENMUX_API_KEY
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. 色彩方案
  2. 字体系统
  3. 布局参数
  4. 页面类型设计
  5. Fade(淡入淡出)
  6. Slide(水平滑动)
  7. Cinematic(电影感:缩放+模糊+透明度)
  8. Cut(瞬间切换)
  9. Flip(3D 翻转)
  10. Zoom(中心缩放聚焦)

What it can do on your machine

Read from SKILL.md and the folder at commit 17b6610. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Edit
    • Glob
    • Grep
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • brew
    • pip
    • playwright
    • claude

    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:

    • youtu.be
    • fonts.googleapis.com
    • xiaoyuzhoufm.com
    • code.iconify.design
    • cdn.jsdelivr.net

    Also links to:

    • unsplash.com
    • zenmux.ai
    • platform.openai.com
    • console.volcengine.com
    • open.bigmodel.cn
    • aistudio.google.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • UNSPLASH_ACCESS_KEY
    • ZENMUX_API_KEY
    • OPENAI_API_KEY
    • ZHIPUAI_API_KEY
    • GEMINI_API_KEY
    • VOLCENGINE_ACCESS_KEY
    • VOLCENGINE_SECRET_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Ppt Designer loads about 14k tokens when it runs, and up to ~34k if it reads all its reference files. Until then it costs about 36 tokens; SKILL.md has 1,827 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~14k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~34k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion

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.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 1,827 words (~14,460 tokens).

“版本: 5.2 架构: LLM 智能设计优先 + 本地模板 fallback + 原文配图提取 + Unsplash 配图 + 真翻页引擎 + 6 种动画 + 视频播客模式 + 内嵌字幕 + 国产 TTS + 纯色设计 + 默认图标装饰 + 控制面板自动隐藏 更新日期: 2026-02-13”

— opening of SKILL.md by andyhuo520
name
html-ppt-designer
allowed-tools
Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion

Read the full SKILL.md on GitHub

Files

SKILL.md and 35 other files (scripts, references) in the repository root of andyhuo520/html-ppt-designer.

  • SKILL.md
  • .gitignore
  • README.md
  • SKILL-TEMPLATE-GUIDE.md
  • STYLES.md
  • examples/agent_era_slides.json
  • examples/agent_images/slide_001.png
  • examples/agent_images/slide_002.png
  • examples/agent_images/slide_006.png
  • examples/agent_images/slide_007.png
  • examples/agent_images/slide_008.png
  • examples/agent_images/slide_009.png
  • examples/agent_images/slide_010.png
  • examples/slides_example.json
  • references/accessibility-guide.md
  • references/animation-library.md
  • references/color-system.md
  • references/design-philosophy.md
  • … and 18 more

Open the folder on GitHubat commit 17b6610

Compare with similar skills

HTML Ppt Designer 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.

HTML Ppt Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Ppt Designer this skillandyhuo520/html-ppt-designer121—~14kAutomated safety check: NotesNone
Frontend Slideszarazhangrui/frontend-slides30k16 repos~7kAutomated safety check: PassMIT
Single-File HTML Slide Decksop7418/guizang-ppt-skill27k1 repos~6.3kAutomated safety check: PassAGPL-3.0
Openkb Deck EditorialVectifyAI/OpenKB4.8k1 repos~2.1kAutomated safety check: PassApache-2.0
Build iPolloWork TemplatesDevin-AXIS/iPolloWork6.8k—~925Automated safety check: PassCustom licence
Openkb HTML CriticVectifyAI/OpenKB4.8k1 repos~1.4kAutomated safety check: PassApache-2.0

Similar skills

  • Frontend Slides

    zarazhangrui/frontend-slides

    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.

    30k GitHub starsUsed in 16 repos~7k tokens
    Documents & OfficeAuto-check passed
  • Single-File HTML Slide Decks

    op7418/guizang-ppt-skill

    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.

    27k GitHub starsUsed in 1 repo~6.3k tokens
    Documents & OfficeAuto-check passed
  • Openkb Deck Editorial

    VectifyAI/OpenKB

    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.

    4.8k GitHub starsUsed in 1 repo~2.1k tokens
    Documents & OfficeAuto-check passed
  • Build iPolloWork Templates

    Devin-AXIS/iPolloWork

    Builds a reusable iPolloWork template for Design, Slides or PPT, or HyperFrames Video through conversation, keeping a manifest, reusable variables and a validated package current.

    6.8k GitHub stars~925 tokensUpdated yesterday
    Documents & OfficeAuto-check passed
  • Openkb HTML Critic

    VectifyAI/OpenKB

    A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness.

    4.8k GitHub starsUsed in 1 repo~1.4k tokens
    Documents & OfficeAuto-check passed
  • Human Review

    petergyang/human-review

    Open an HTML file, Markdown file, or localhost page in the browser so the user can edit text directly and leave comments on specific parts, then send all edits and comments back to you.

    1.4k GitHub stars~2.1k tokensUpdated 22 days ago
    Documents & OfficeAuto-check passed

Questions about HTML Ppt Designer

What does HTML Ppt Designer do?

HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面,LLM 智能设计优先,支持多种视觉风格、动效设计、色彩认知系统。触发词:PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。. HTML Ppt Designer is an agent skill from andyhuo520/html-ppt-designer.

When should I use HTML Ppt Designer?

HTML Ppt Designer fits situations like: tasks that involve Slides and decks.

How do I install HTML Ppt Designer in Claude Code?

Run `npx skills add andyhuo520/html-ppt-designer --skill html-ppt-designer -a claude-code`. Or copy the skill folder (the andyhuo520/html-ppt-designer repository) into .claude/skills/html-ppt-designer in your project. Claude Code loads it when a task matches its description.

How do I install HTML Ppt Designer in Codex?

Run `npx skills add andyhuo520/html-ppt-designer --skill html-ppt-designer -a codex`. Or copy the skill folder (the andyhuo520/html-ppt-designer repository) into .agents/skills/html-ppt-designer in your project. Codex loads it when a task matches its description.

Can I use HTML Ppt Designer 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 andyhuo520/html-ppt-designer --skill html-ppt-designer -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-designer, .gemini/skills/html-ppt-designer, .github/skills/html-ppt-designer and .opencode/skills/html-ppt-designer in your project.

What does HTML Ppt Designer need to run?

Going by SKILL.md and its folder, HTML Ppt Designer needs the command-line tools its instructions call (python3, brew, pip, playwright and claude) and credentials named UNSPLASH_ACCESS_KEY, ZENMUX_API_KEY, OPENAI_API_KEY and ZHIPUAI_API_KEY. Our summary lists: A credential in UNSPLASH_ACCESS_KEY; A credential in ZENMUX_API_KEY. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion.

Does HTML Ppt Designer access the network?

SKILL.md names 11 domains. In commands or code: youtu.be, fonts.googleapis.com, xiaoyuzhoufm.com, code.iconify.design and cdn.jsdelivr.net; the agent is likely to contact these when it follows the instructions. As links in the text: unsplash.com, zenmux.ai, platform.openai.com, console.volcengine.com, open.bigmodel.cn and aistudio.google.com. This is read from the text; nothing was executed.

Is HTML Ppt Designer safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. 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 Designer use?

No licence was found for HTML Ppt Designer or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does HTML Ppt Designer use?

About 14k tokens (SKILL.md is roughly 58k 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 19k tokens, read only when the agent opens those files.

What are the alternatives to HTML Ppt Designer?

Skills that share tags, products or a category with HTML Ppt Designer: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), Single-File HTML Slide Decks (op7418/guizang-ppt-skill, 27k stars), Openkb Deck Editorial (VectifyAI/OpenKB, 4.8k stars) and Build iPolloWork Templates (Devin-AXIS/iPolloWork, 6.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Ppt Designer?

andyhuo520 (a GitHub user) maintains it in andyhuo520/html-ppt-designer, which has 121 GitHub stars. The repository was last updated on February 14, 2026.

Source: andyhuo520/html-ppt-designer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.