Agent skill

Hand-Drawn Explainer Video Maker

by hi-nikola in hi-nikola/hand-drawn-explainer-video-nikola

Produces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation.

Apache-2.0Auto-check passedMedia & Creative

SKILL.md written in Chinese; this summary is our English description.

Install Hand-Drawn Explainer Video Maker

skills CLI
$ npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a claude-code

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

GitHub CLI
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --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
hand-drawn-explainer-video-nikola
GitHub stars
374
Token cost
~904 tokens
SKILL.md length
126 words
Files
102 (incl. scripts, references)
Skills in repo
1
Repo updated
First seen
Licence
Apache-2.0

At a glance

Produces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation.

  • Works in 8 steps: 保留内容:分别保存原稿、合成读音稿和字幕;未经授权不删观点、数字和限定词。 → 声音先行:优先复用内容一致的完整音轨;新音轨尽量整段或按自然章节合成。 → 时间来自真实音频:使用有效时间戳、强制对齐或复核后的句级停顿;不能把平均分配说成逐… → …
  • Turning a script or SRT file into a hand-drawn whiteboard-style explainer video
  • SKILL.md covers 先选择交付范围, 先选两条制作路线之一, 可选视觉风格 and 公开默认与本地配置, plus 2 more sections
  • Making a video where the picture is drawn stroke by stroke while narration plays

What it does

The agent first decides which of two routes the user actually wants and never passes one off as the other: a stroke-by-stroke story animation where the picture is drawn onto one canvas as the narration plays, or a programmatic animation that arranges flow cards, relationship diagrams and knowledge graphics with SVG, HTML and GSAP. For the stroke route you choose a look (natural-skin chibi characters, the Xiaohei line style or another hand-drawn style) and a layout such as single scene, multi-act story or left-right semantic islands.

Delivery scope can be prompts only with no paid calls, a short sample of ten to fifteen seconds, a full video, or edits to an existing one that touch only the affected stages. Prompt mode has no local dependencies; the stroke renderer ships with the repository but needs an isolated Python environment, and programmatic mode needs Node.js, HyperFrames, a browser and FFmpeg. Narration defaults to a Volcano Engine voice that needs your own authorized account or an existing audio track, image and video models are optional and may cost money, and a setup_check script runs first.

When your agent uses it

  • Turning a script or SRT file into a hand-drawn whiteboard-style explainer video
  • Making a video where the picture is drawn stroke by stroke while narration plays
  • Animating flow cards and concept diagrams with programmatic motion
  • Producing only the image and video prompts for a hand-drawn explainer

Example prompts

  • “Turn this script into a hand-drawn explainer video where the picture is drawn as I narrate.”
  • “Make a ten-second sample in the Xiaohei style before the full video.”
  • “Give me only the image prompts for a whiteboard animation about this topic.”

Requirements

  • Python for the stroke renderer
  • Node.js, HyperFrames, a browser and FFmpeg for programmatic animation
  • An authorized Volcano Engine account or an existing narration track

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. 保留内容:分别保存原稿、合成读音稿和字幕;未经授权不删观点、数字和限定词。
  2. 声音先行:优先复用内容一致的完整音轨;新音轨尽量整段或按自然章节合成。
  3. 时间来自真实音频:使用有效时间戳、强制对齐或复核后的句级停顿;不能把平均分配说成逐字对齐。
  4. 动画服务于解释:逐笔路线按语义区域持续落墨;程序路线拆成可控元素。整图平移、缩放或淡入淡出只能辅助。
  5. 控制可画性:真实笔迹速度取决于区域时间和源图复杂度;hand-follow 只平滑手部,不能让线条真正减速。
  6. 精确文字后期生成:日期、专名、Logo、长中文和关键数字使用字幕或确定性文字层,不交给图片模型猜写。
  7. 先验证代表镜头:检查人物一致性、抬笔、补色、遮挡、关键词和字幕,再批量渲染。
  8. 成片必须真实验收:完整解码 MP4,检查全部场景、语义边界、切点、音轨和最后 0.3–0.5 秒。

What it can do on your machine

Read from SKILL.md and the folder at commit 3ee5d1c. 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/, which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

Hand-Drawn Explainer Video Maker loads about 904 tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 126 words of instructions outside code blocks.

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

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.

SKILL.md

The full file from hi-nikola/hand-drawn-explainer-video-nikola at commit 3ee5d1c, republished under its Apache-2.0 licence (© hi-nikola). 126 words, ~904 tokens.

Download SKILL.mdSave it as .claude/skills/hand-drawn-explainer-video-nikola/SKILL.md (or your agent's skills folder). This skill also uses 101 other files; get the full folder from GitHub.
name
hand-drawn-explainer-video-nikola
description
制作、修改和验收中文手绘知识讲解视频,交付配音、字幕、时间轴、可编辑工程和真实 MP4。支持两条不可混淆的制作路线:同一画布持续落墨的逐笔故事动画,以及用 SVG/HTML/GSAP 编排流程卡片、关系图和知识图形的程序动画。逐笔路线可选择自然肤色 Q 版人物、小黑风格或其他手绘风格,并可采用单场景、多幕故事、左右双语义岛等画面结构。用户说“边讲边画”“一笔一笔画出来”“白板手绘”“先画左边再画右边”“知识讲解动画”或希望把文稿、SRT、人物故事做成手绘视频时使用。也支持只输出生图/图生视频提示词。不用于写实数字人或假装已经完成无法验证的成片。

Nikola 手绘讲解视频

把中文主题、文稿或 SRT 变成真正可播放、可检查、可继续编辑的手绘讲解视频。先识别用户要的是“画面被逐笔画出来”,还是“手绘风独立元素运动”;不能为了方便把一种效果冒充另一种效果。

提示词模式无本地依赖;逐笔渲染器已随仓库打包,首次使用需创建隔离 Python 环境;程序动画模式需 Node.js、HyperFrames、浏览器和 FFmpeg。成片配音默认使用火山引擎刘飞音色,需用户自己的已授权账号或复用已有音轨;图像生成和视频模型为可选能力,可能产生费用。

先选择交付范围

  • 只要提示词:读 prompt-workflow.md,输出自包含提示词,不调用收费接口。
  • 样片:制作用户指定片段;未指定时用 10–15 秒代表镜头验证人物、笔迹、字幕和节奏。
  • 完整视频:先读 安装与预检 和 完整流程。先内部验证代表镜头,再继续全片;只有用户要求逐步确认或存在关键选择时才暂停。
  • 修改已有视频:保留未被要求修改的音轨、时间轴和素材,只重做受影响阶段。

先选两条制作路线之一

用户真正想要的效果制作路线必读
“画面被画出来”“边讲边画”“逐笔落墨”“笔尖跟着线走”逐笔故事动画stroke-story-workflow.md
流程卡片、概念关系、独立元素组合、确定性文字程序动画HyperFrames + SVG/HTML + GSAP,读 automation-workflow.md

逐笔故事动画选定后,再分别选择画面结构与视觉风格:

  • 画面结构:单场景、多幕连续故事,或“先左后右并保留前文”的左右双语义岛。双语义岛只是逐笔故事的一种画面组织方法,参考 semantic-island-storytelling.md。
  • 视觉风格:自然肤色 Q 版人物、小黑风格,或用户指定的其他手绘风格。Q 版适合人物传记与历史;小黑适合抽象观点、方法论和隐喻。两种风格都能采用双语义岛,也都能采用其他画面结构。

场景视频与“只输出 Flow/Nano Banana 提示词”是可选交付方式,不是本 Skill 的第三条手绘制作路线。自然连续人物动作或复杂运镜需要先核实视频模型、成本和一致性限制;只要提示词时读 prompt-workflow.md。

逐笔路线使用 vendor/srt-whiteboard-animation/ 中随仓库发布的 MIT 后端快照。它不包含第二份 SKILL.md,不会单独触发或要求重复确认;主 Skill 统一负责路由、配音、字幕、渲染和验收。运行环境不可用时保存已完成资产并报告缺口;除非用户明确同意,不以 SVG 动画冒充真实逐笔绘制。

可选视觉风格

  • Q 版人物故事:自然肤色、人物身体、年龄和服装锚点清楚,适合传记、历史和人物观点。参考 q-human-story-style.md 与 乔布斯案例。
  • 小黑风格:纯白、稀疏黑线、少量红橙蓝、留白和冷幽默动作主体,适合方法、系统、状态和隐喻。它是本仓库内置、可直接点选的公开预设;使用时必须读取 完整视觉 DNA、来源说明与提示词骨架。该风格借鉴 Ian 的开源项目,应始终称为“小黑风格”。

程序化知识图形是制作路线,不是视觉风格。参考 “什么是 Skill”程序动画案例。逐笔案例见 《约法三章》 与 《乔布斯的一生》。

参考图只影响当前项目,除非用户明确要求保存为新预设。人物、画风、动效和声音分别记录,不把换画风等同于换音色或重做旁白。

公开默认与本地配置

仓库中的 preferences.json 只含无密钥默认值。用户指令和项目 DESIGN.md 优先。成片默认使用火山引擎 seed-tts-2.0 的刘飞音色 zh_male_liufei_uranus_bigtts;用户明确要求时可选择火山引擎其他已授权音色,已有与文稿一致的合格音轨优先复用。不要自动改用电脑系统朗读、edge-tts 或其他低质量本地 TTS;缺少授权音轨时可以继续提示词、画面和无配音阶段,但必须把配音列为未完成项。

首次使用先读 安装说明 和 配置说明,再运行:

text
python scripts/setup_check.py

完整视频在首次配音或长渲染前还要运行路线对应的预检。预检失败只阻止依赖该能力的阶段,不重做已经通过的音频、插画或字幕。

核心制作规则

  1. 保留内容:分别保存原稿、合成读音稿和字幕;未经授权不删观点、数字和限定词。
  2. 声音先行:优先复用内容一致的完整音轨;新音轨尽量整段或按自然章节合成。
  3. 时间来自真实音频:使用有效时间戳、强制对齐或复核后的句级停顿;不能把平均分配说成逐字对齐。
  4. 动画服务于解释:逐笔路线按语义区域持续落墨;程序路线拆成可控元素。整图平移、缩放或淡入淡出只能辅助。
  5. 控制可画性:真实笔迹速度取决于区域时间和源图复杂度;hand-follow 只平滑手部,不能让线条真正减速。
  6. 精确文字后期生成:日期、专名、Logo、长中文和关键数字使用字幕或确定性文字层,不交给图片模型猜写。
  7. 先验证代表镜头:检查人物一致性、抬笔、补色、遮挡、关键词和字幕,再批量渲染。
  8. 成片必须真实验收:完整解码 MP4,检查全部场景、语义边界、切点、音轨和最后 0.3–0.5 秒。

安全、费用和准确性

  • 不把 API Key、Token、Cookie、请求头、本机绝对路径或私有模型目录写入仓库、命令参数、报告或工程 ZIP。
  • 账号型配音、生图和视频服务可能收费;先复用缓存,不盲目重试状态不明的请求。
  • 真实人物、公司、Logo、日期和数字需要可靠来源或确定性资产。风格参考不能保证实体准确。
  • 用户要求完整视频时,最少交付真实 MP4;工具支持时同时保留 SRT、旁白、时间轴、源图、标注和可编辑工程。

质量与交付细节见 quality-and-delivery.md。仓库结构、贡献和许可见 README。

© hi-nikola, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 101 other files (scripts, references) in the repository root of hi-nikola/hand-drawn-explainer-video-nikola.

  • SKILL.md
  • .env.example
  • .gitattributes
  • .gitignore
  • CONTRIBUTING.md
  • LICENSE
  • LICENSE-MEDIA.md
  • README.md
  • SECURITY.md
  • SKILL.zh-CN.md
  • THIRD_PARTY_NOTICES.md
  • agents/openai.yaml
  • config/runtime.example.json
  • docs/ARCHITECTURE.md
  • docs/CONFIGURATION.md
  • docs/INSTALL.md
  • docs/STYLES.md
  • docs/TROUBLESHOOTING.md
  • … and 84 more

Open the folder on GitHubat commit 3ee5d1c

Compare with similar skills

Hand-Drawn Explainer Video Maker 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.

Hand-Drawn Explainer Video Maker compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Hand-Drawn Explainer Video Maker this skillhi-nikola/hand-drawn-explainer-video-nikola374—~904Automated safety check: PassApache-2.0
Manim Video Productionbrowser-use/video-use29k6 repos~3kAutomated safety check: PassMIT
Embedded Video Captionsheygen-com/hyperframes60k3 repos~8.6kAutomated safety check: PassApache-2.0
HyperFrames Video Compositionsspinabot/brigade11k—~1.6kAutomated safety check: PassMIT
Qiaomu Cutjoeseesun/qiaomu-cut-skill372—~6.8kAutomated safety check: NotesMIT
Bang Motionbangtutorial/bang-motion587—~9.7kAutomated safety check: PassMIT

Similar skills

  • Manim Video Production

    browser-use/video-use

    Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.

    29k GitHub starsUsed in 6 repos~3k tokens
    Media & CreativeAuto-check passed
  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    60k GitHub starsUsed in 3 repos~8.6k tokens
    Media & CreativeAuto-check passed
  • Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.

    11k GitHub stars~1.6k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Qiaomu Cut

    joeseesun/qiaomu-cut-skill

    把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video—including one-line requests such as “制作一个科普视频:介绍…

    372 GitHub stars~6.8k tokensUpdated 13 days ago
    Media & CreativeAuto-check: notes
  • Bang Motion

    bangtutorial/bang-motion

    Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila…

    587 GitHub stars~9.7k tokensUpdated 26 days ago
    Media & CreativeAuto-check passed
  • Day in My Life Agent Film

    heygen-com/hyperframes-community-skills

    Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.

    187 GitHub stars~1.7k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

Questions about Hand-Drawn Explainer Video Maker

What does Hand-Drawn Explainer Video Maker do?

Produces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation. The agent first decides which of two routes the user actually wants and never passes one off as the other: a stroke-by-stroke story animation where the picture is drawn onto one canvas as the narration plays, or a programmatic animation that arranges flow cards, relationship diagrams and knowledge graphics with SVG, HTML and GSAP. For the stroke route you choose a look (natural-skin chibi characters, the Xiaohei line style or another hand-drawn style) and a layout such as single scene, multi-act story or left-right semantic islands.

When should I use Hand-Drawn Explainer Video Maker?

Hand-Drawn Explainer Video Maker fits situations like: turning a script or SRT file into a hand-drawn whiteboard-style explainer video; making a video where the picture is drawn stroke by stroke while narration plays; animating flow cards and concept diagrams with programmatic motion; producing only the image and video prompts for a hand-drawn explainer.

How do I install Hand-Drawn Explainer Video Maker in Claude Code?

Run `npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a claude-code`. Or copy the skill folder (the hi-nikola/hand-drawn-explainer-video-nikola repository) into .claude/skills/hand-drawn-explainer-video-nikola in your project. Claude Code loads it when a task matches its description.

How do I install Hand-Drawn Explainer Video Maker in Codex?

Run `npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a codex`. Or copy the skill folder (the hi-nikola/hand-drawn-explainer-video-nikola repository) into .agents/skills/hand-drawn-explainer-video-nikola in your project. Codex loads it when a task matches its description.

Can I use Hand-Drawn Explainer Video Maker 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 hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hand-drawn-explainer-video-nikola, .gemini/skills/hand-drawn-explainer-video-nikola, .github/skills/hand-drawn-explainer-video-nikola and .opencode/skills/hand-drawn-explainer-video-nikola in your project.

What does Hand-Drawn Explainer Video Maker need to run?

SKILL.md names no scripts, command-line tools or credentials: Hand-Drawn Explainer Video Maker is instructions for the agent only. Our summary lists: Python for the stroke renderer; Node.js, HyperFrames, a browser and FFmpeg for programmatic animation; An authorized Volcano Engine account or an existing narration track.

Does Hand-Drawn Explainer Video Maker access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Hand-Drawn Explainer Video Maker 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 Hand-Drawn Explainer Video Maker use?

Hand-Drawn Explainer Video Maker is published under the Apache-2.0 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 Hand-Drawn Explainer Video Maker use?

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

What are the alternatives to Hand-Drawn Explainer Video Maker?

Skills that share tags, products or a category with Hand-Drawn Explainer Video Maker: Manim Video Production (browser-use/video-use, 29k stars), Embedded Video Captions (heygen-com/hyperframes, 60k stars), HyperFrames Video Compositions (spinabot/brigade, 11k stars) and Qiaomu Cut (joeseesun/qiaomu-cut-skill, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hand-Drawn Explainer Video Maker?

hi-nikola (a GitHub user) maintains it in hi-nikola/hand-drawn-explainer-video-nikola, which has 374 GitHub stars. The repository was last updated on September 3, 2026.

Source: hi-nikola/hand-drawn-explainer-video-nikola on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.