HTML to Explainer Video

把任意主题做成讲解/科普视频并渲染成 MP4（HTML/CSS/GSAP 画面 + 确定性逐帧渲染 + 配音（默认阿里云百炼，可切 edge-tts / 火山）+ 词级硬字幕）。触发场景：要做科普/讲解/教学/知识/产品类视频、「讲一下 X 做成视频」、要挑某种视觉风格（极简/数据/赛博/电影感/品牌）出片、要出抖音封面/竖版封面/9:16 封面、要用 html-video 那种模板化画面但更稳的音画同步、anything2explainer 换 HTML 渲染，或提到 html-to-explainer-video / HTML 讲解视频 / explainer video / MG 视频。内置 23 个模板风格（8 类）与 40+ 动作词汇的动效库，主题驱动模板编排；支持 4K60、快门运动模糊、多进程提速、断点续渲；流程含六个用户确认点（渲染通道是硬闸门）。独立可移植，不依赖 html-video / anything2explainer。

5 stars 2 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add amliuyong/html-to-explainer-video --skill html-to-explainer-video

Manual install

git clone --depth 1 https://github.com/amliuyong/html-to-explainer-video.git /tmp/html-to-explainer-video
mkdir -p ~/.claude/skills
cp -r /tmp/html-to-explainer-video/. ~/.claude/skills/html-to-explainer-video

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# html-to-explainer-video

> **定位**：主题 → 解说词 → 配音 → 词级字幕 → HTML/GSAP 画面 → 确定性逐帧渲染 → QC → 封面的完整流水线，
> 画面节拍锚在吐字时刻上。MIT 许可；第三方组件与署名见 `THIRD_PARTY_NOTICES.md`。
>
> **零外部依赖**：不需要 Remotion/npm 工程，不需要任何外部模板仓库/Studio/pnpm/agent 后端。
> 技能自带：GSAP（离线）、playwright-core、渲染器、TTS/字幕/时间轴/主题/QC/封面全套脚本。
> 风格库是**随包附带的设计规范文本**（`references/style-catalog.md`，转写自 `html-video` 的模板规范，Apache-2.0），
> 运行时不读任何外部项目的文件。

**v2.0 新增能力（全部可选、向下兼容；不用就是 v1.4 行为）**

| 能力 | 入口 | 文档 |
|---|---|---|
| **动效库**（40+ 动作词汇） | `assets/motion.js` → `window.HXM` | `references/motion-library.md` |
| **主题驱动模板编排**（挑风格 / 混用 / 动态开头） | `scripts/style_director.py` | `references/style-director.md` |
| **画质帧率档位 + 快门运动模糊 + 提速** | `scripts/render_video.mjs --profile/--quality/--fps/--shutter-only/--motion-hold` | `references/render-profiles.md` |
| **渲染基准测试**（优化前后对比） | `scripts/bench_render.py` | `references/render-profiles.md` |
| **宣传片范式**（去模板化：模板只吸纳配色/字体/时序三层） | 设计方法 | `references/showcase-mode.md` |
| **库全量演示编排**（统一舞台 + 节拍网格 + 标签常驻） | 设计方法 | `references/library-showcase.md` |
| **确认闸门**（六个确认点由用户拍板才放行） | `scripts/gate_check.py` | `SKILL.md` 流程第 3 步 |
| **★ 渲染通道确认**（渲染前必问：`png-fast` / `jpeg q95` / `png` / `jpeg q82`，**默认推荐 `png-fast`**，附速度与描述） | `consent.json` 的 `render_channel` + `gate_check.py --phase render` | `SKILL.md` 确认点 5 · `references/render-profiles.md` §0 |

把一个主题做成**原创**讲解视频：任意风格的 MG 画面（HTML/CSS/GSAP，1920×1080 或竖版）、
配音（默认阿里云百炼 `qwen-audio-3.1-tts-flash`，可切 edge-tts / 火山）、词级对齐硬字幕、全局进度条。一句话一个场景，画面节拍直接锚在

Read the full skill on GitHub

Details

Skill name: html-to-explainer-video
Repository: amliuyong/html-to-explainer-video
License: MIT
Repo updated: 25 October 2026

FAQ

What does the HTML to Explainer Video skill do?

How do I install the HTML to Explainer Video skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add amliuyong/html-to-explainer-video --skill html-to-explainer-video. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML to Explainer Video popular?

It lives in amliuyong/html-to-explainer-video, which has 5 GitHub stars and 2 forks.

Related skills

Image Upload

iamzifei/image-upload-skill

Upload images to hosting providers and get shareable URLs 新手引导：输入 `/图床新手`、「这个怎么用」「第一次用」「能干嘛」时，走 SKILL.md 的〈新手上路〉，不要直接开始干活。

Images, Video & Audio

H3 Multimodal Lora Training

chengyansen-ai/h3-multimodal-lora-training

Plan, audit, configure, run when authorized, evaluate, and package MiniMax H3 LoRA training for images, video, stereo audio, motion, and true Ref2VA reference conditioning. Use when a user wants an auditable H3 LoRA dataset or training run; do not use for prompt-only Hailuo generation or unrelated image-model LoRA training.

Images, Video & Audio

Interior Vibing

zyliu0/interior-vibing

Generate professional, purposeful interior design renderings that solve specific user problems. Use this skill when a user uploads a room photo and wants design recommendations, staging plans, or visual concepts for any interior space. This skill ensures every rendering is specific to the room's architecture, the user's goal (sell, rent, host, refresh), and real purchasable items — never generic "modern living room" output. Trigger on: room photos, interior design requests, staging advice, rental optimization, Airbnb improvement, home sale prep, or any "how should I design this room" question.

Images, Video & Audio

Flow Video Recorder

muayadjamal/flow-video-recorder

Use when the user wants to record a screen-capture video of a flow through an app: a walkthrough, product demo, feature tour, or reproduction, driven either in a browser with Playwright or in a native iOS app on the simulator with Maestro, with a visible cursor and tap ripple, on-screen step captions, an optional voice-over (ElevenLabs, OpenAI, macOS say, or any local TTS) in sync with the picture, optional motion-graphics explainer scenes spliced between recorded steps with animated transitions, and high-resolution MP4 output. Triggers: "record a demo video", "make a walkthrough / tour video"

Images, Video & Audio

Pixel Snap

DreamC0der-AI/pixel-snap

Convert upscaled pixel art images back to clean, sharp pixel art. Detects grid size, extracts true pixel colors, and outputs crisp results. Supports icon mode (remove background, crop, center) and scene mode (preserve full image).

Images, Video & Audio

Electrical Takeoff

hamzaabduljabbar/autoConst-electrical-takeoff

Lighting/electrical fixture takeoff from a vector PDF drawing set. Runs drawing-pack QA, reads the luminaire schedule (OCR when it is drawn as outlines) and asks for approval of the fixture list, then counts every fixture by tag AND by drawn symbol, measures linear runs in feet from the vectors, verifies with crops, and writes an Excel BOQ with derived quantities plus a clickable HTML drawing viewer with every fixture marked. Use when someone wants an electrical, lighting or fixture takeoff, a luminaire count, linear feet of light fixtures, or to audit a lighting count.

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.