1. 想做科普动画？这 9 个 Skill 项目，先看用途再选

讲一个技术原理，文字写清楚以后，往往还差一段能让人看懂的演示。
机械怎样运转，公式里的参数怎样变化，一条请求经过哪些节点，都适合用动画展开。

GitHub 上已经有人把这些做法整理成 Skill。
选之前，先看它交付什么。
讲解图片和交互网页适合补充视觉素材，能渲染 MP4 的项目则更接近视频制作；还有一些 Skill 主要负责安排脚本、分镜和配音流程。

这次逐个核对了 9 个仓库的 README，并查看了关键功能文档和部分源码。

[!abstract] 速览

• 9 个项目都是 Agent Skill 或技能包，安装后由 Agent 生成画面、代码或成片。
• 交付物分三类：静态图片、可交互网页（HTML/SVG/React）、MP4 视频。
• 渲染或合成写进主流程的只有少数：Knowledge Explainer（Remotion）、Vox Explainer（ffmpeg 合成）、Whiteboard Explainer（HyperFrames）和 iart 的 explainer-video（Remotion）。
• 多数项目仍需自备 API Key、ffmpeg 或渲染环境，费用与模型可用性要自行核对。
• 选型顺序：先定交付物，再看技术栈，最后算依赖成本。

[!note] 这里的 Skill 是什么
指 Agent Skill：一份 SKILL.md 加上脚本、模板与参考资料，安装到 Claude Code、Codex 等 Agent 的 skills 目录后，由 Agent 按说明调用。
它通常不等于独立 App，运行时仍要自己准备 Node.js、Python、ffmpeg 等环境。

[!tip] 核心判断
先看最终交付物，再看技术栈：需要静态图选 Visual Explainer；需要可交互网页选 Anatomy 或 Animated Explainer Skills；需要 MP4 成片，优先选渲染链已内置的 Knowledge Explainer、Vox Explainer、Whiteboard Explainer，或 iart 的 explainer-video。

1.1. 个项目一览

1.2. Anatomy：让结构和工作原理看得见

https://github.com/wheresryan22/anatomy

Anatomy 擅长制作精细的等距结构插画和交互演示。
它可以拆开一个装置，也可以把抽象机制设计成可操作的模型。
仓库里有火箭发动机、波纹水槽和仪表等示例。

适合做工程原理、硬件结构、软件机制的可视化，尤其是希望读者能拖动、悬停、观察变化的内容。

入门可以先打开 examples 里的 HTML 示例，再按 README 为自己的 Agent 安装。
给它任务时，说明要解释的机制、真实参数，以及希望交付独立 HTML、SVG 还是网页组件。

它需要 Node.js，浏览器检查需要 Chrome 或 Chromium。
3D 模式仍是 beta，主要交付物是可视化页面或组件；要放进视频，还得另行完成录制或渲染，并配上配音和字幕。

1.3. Visual Explainer：先把内容整理成一张讲解图

https://github.com/ericblue/visual-explainer-skill

这个项目把主题、文档和 Mermaid 图转换成白板草图、信息图、技术图解或思维导图，也能生成逐步展开的一组图片。

如果你已经有文章和口播稿，只缺一张解释关系的图，可以从它开始。
软件架构、概念对比、知识点梳理，都在它的用途范围内。

按 README 配好图像生成服务和命令后，可用这样的请求起步。

/visual-explainer --style diagram 解释一次 DNS 查询经过哪些节点

它依赖 OpenAI 或 Gemini 图像 API，以及 curl、jq 等命令行工具。
主要输出是静态图片，多帧模式生成的也是一组图片，后续仍需编排成视频。
README 与 Skill 中的 Gemini 型号名称存在出入，接入前要核对当前可用接口。
费用和额度以服务商规则为准，生成结果中的中文与技术细节也要逐项检查。

1.4. Knowledge Explainer：用结构化 Markdown 渲染动画

https://github.com/znyupup/knowledge-explainer-skill

这个项目自带可用的 CLI。
把文稿按规定的分页结构写好，命令会解析场景、生成 React 组合，再调用 Remotion 渲染 MP4。

内置版式包括标题、内容卡片、双栏和三角形等。
更复杂的动画放在 custom 目录，仓库提供了双摆、纸张对折和推荐算法演示的组件示例。

它适合愿意写一点结构化文稿，或者能让 Agent 帮忙修改 React 组件的创作者。
先照 examples/script.md 做短样片，再考虑增加自定义画面。

依照 README 准备 Node.js、项目依赖和 FFmpeg 后，示例命令是这样。

node cli.js examples/script.md out/example.mp4

输入需要遵守项目格式，普通文章不能直接当作现成的分镜。
当前 CLI 主流程负责解析、组合与渲染，配音和字幕需要另行安排；自定义场景也要先实现对应组件。

1.5. Vox Explainer：制作纸张拼贴感的讲解短片

https://github.com/CK42BB/vox-explainer-skill

这个项目围绕 Vox 风格的编辑拼贴设计流程。
纸张剪贴、纹理背景、网点和醒目标题是它的主要视觉语言，适合有叙事线的历史、社会与科技题材。

它覆盖脚本、配音、关键帧、动画、音乐和本地合成。
流程先生成并测量旁白，再按声音长度安排画面，同时用风格锚定图保持视觉一致。

开始时给一个具体主题和目标时长，先检查脚本与风格，再进入生成阶段。
README 的克隆命令还留有 YOURUSER 占位，使用时应改为上文中的实际仓库地址。

它依赖 Atlas Cloud 账号和 API Key，图像、视频、语音与音乐生成都通过该平台，还需要 Python、FFmpeg 等本地工具。
文档里的费用估算有时间前提，不能当成当前报价；模型是否仍可调用，也要在付费生成前核对。

1.6. AI-Animation-Skill：把技术文本做成 HTML 演示

https://github.com/Unclecheng-li/AI-Animation-Skill

它把科普文本整理成仿 PPT 轮播的单个 HTML 文件，再按内置模板调整呈现方式。
已有演示还可以转成流程图风格。

适合课堂讲解、技术分享和录屏素材。
网络分层、神经网络结构、计算流程这类需要逐步展示的内容，可以参考它的模板。

按 README 放入所用 Agent 的 Skill 目录，先提供一小段文本，让它生成演示网页。
确定内容和页面顺序后，再选合适的模板。

这里的“PPT”指网页里的演示效果，主要交付文件是 HTML。
需要发布视频时，还要完成录屏或渲染，并处理配音与字幕。
README 与 Skill 对部分模板数量的描述存在出入，实际使用以目录文件为准。

1.7. Manim Skill：辅助编写数学与科学动画

https://github.com/adithya-s-k/manim_skill

这个仓库整理了两套最佳实践，分别面向 Manim Community Edition 和 ManimGL，帮助 Agent 编写场景、公式、图形变换和镜头代码。

适合数学老师、理工科普作者，以及愿意用 Python 控制动画的人。
函数变化、几何推导、向量关系，都能按代码精确编排。

入门先选定一个 Manim 版本，再读取对应 Skill，从 README 的基础场景开始渲染。
两套框架的导入方式和 API 不同，代码不能直接混用。

Skill 提供写法和规则，运行时仍要准备 Python、所选 Manim 引擎及视频编码工具；涉及公式排版时还需要 LaTeX。
想做出清楚的推导过程，仍然要自己决定每一步为什么出现、停留多久。

1.8. iart Explainer Video Skills：按任务选择制作模块

https://github.com/iart-ai/explainer-video-skills

这是一个包含 5 个 Skill 的技能包，覆盖通用讲解短片、年度回顾、图表动画、白板动画和等距场景。

它适合已经知道要做哪类内容，希望 Agent 按脚本、分镜、画面、配音、字幕与检查步骤推进的人。
产品原理介绍可以选 explainer-video，架构图逐步展开可以选 diagram-animation。

README 提供了 npx skills add 的安装入口。
开始前先读对应模块的 SKILL.md，再提交主题、观众、时长和交付格式。

这些模块包含制作规则、代码示例和检查脚本。
MP4 仍需接上 Remotion 等渲染工具，并准备旁白素材；安装技能包后，配音账号和渲染环境仍需自行配置。
iart.ai 在线服务与 GitHub 技能包的使用条件也应分别核对。

1.9. Animated Explainer Skills：制作扁平插画科普动画

https://github.com/BusyBee3333/animated-explainer-skills

它参考 Kurzgesagt 的视觉表达，提供多层视差、角色动作、图形变换和可拖动进度条的播放器。
仓库还整理了编排方法、文字重叠检查和逐场景配音流程。

适合喜欢扁平插画，希望用网页代码控制节奏的创作者。
可以从 explainer-studio 引导流程开始，也可以先看 scaffold.html 的五场景示例。

它的主要交付物是自包含 HTML，得到 MP4 还要录屏或另接渲染。
GSAP 内联脚本会从公共 CDN 下载依赖，附带的配音流程使用 ElevenLabs，需要相应账号和 API Key。
项目所说的“频道级质量”属于目标描述，不能当作生成效果保证。

1.10. Whiteboard Explainer：让手绘过程跟着旁白走

https://github.com/brandonvant/claude-skill-whiteboard-explainer

这套 Skill 用真实手部照片配合遮罩，让完整插画逐步显现，再用 Whisper 提取的词级时间戳安排绘制、标签和镜头动作。

适合做白板讲解、培训内容和流程说明，尤其是需要画面跟着旁白逐步出现的段落。

按 README 配置 Skill 后，先用一句短旁白和少量插画做单场景测试，检查笔尖位置、显现范围和声音节奏，再扩成完整视频。

它需要 HyperFrames、Python、openai-whisper 和 Pillow，还要另外准备图像生成工具与 TTS。
供应商可以自行选择，费用取决于实际服务。
仓库里“VideoScribe 级别”的表述，同样不能代替成片验收。

1.11. 第一次做，先完成一个短片段

如果目标是把数学推导讲清楚，先看 Manim Skill；希望拆开装置、操作模型，先看 Anatomy。
已经有稿件、缺少配图，可以先用 Visual Explainer。
需要白板讲解，则重点比较 iart 的白板模块与 Whiteboard Explainer 的依赖。

第一次别把题目铺得太大。
挑一个能在短时间讲完的机制，只做一段，再决定是否扩成整片。
下面这段可作为向 Agent 提需求的起点。

[!warning] 三个常见误区

• 把“能生成画面”当成“能直接出片”：静态图与 HTML 项目还要补录屏、渲染、配音和字幕。
• 忽略隐藏依赖：API Key、付费模型、图像与 TTS 服务，往往比安装 Skill 更花时间。
• 把 README 的效果描述当成质量保证：“频道级”“VideoScribe 级别”都是目标表述，需用自己的素材验收。

[!tip] 起步方式
先用一段约 20 秒的样片验证原理、文字和旁白节奏，再决定是否扩成整片。

我要给【目标观众】解释【一个具体概念】。
请依据我提供的资料，先做约 20 秒的演示片段。

观众看完应该能回答【一个问题】。
交付格式是【HTML 交互页 / 无声动画 MP4 / 配音字幕 MP4】。

先列分镜、依赖和预计费用。
标出需要我确认的事实与缺少的素材。
涉及付费生成时，等我确认后再执行。

截至 2026 年 11 月 1 日，这 9 个仓库均可访问，未标记归档或禁用，仓库本身均标示 MIT 许可。
选定项目后，先用自己的资料跑一段短样片，重点检查原理是否正确、文字是否清晰可读，以及旁白和画面有没有错位。