前言¶

做原理讲解视频常见的问题是音画不同步：先把动画做好，再照着画面写解说词，录完音才发现语速和镜头长度对不上，改一处台词就要重排后面的画面。另一个问题是术语读散——配音把公式和符号逐字念出来，听的人跟不上。

下面介绍的 Skill 是 @user_2761353a/principle-flow-animation-explained（原理流程动画+讲解视频），它把顺序反过来：先定配音，再由配音时长反推画面时间轴。

这是什么¶

一句话定位：为一个知识点制作「讲解词与画面逐词同步」的配音原理/流程动画，交付字幕版 HTML 和含配音音轨的 MP4。

基本属性如下：

SkillHub 页面显示评分 100000、下载 3011、安装 0（以页面抓取时的数值为准）。

定位上它明确划了一条线：只做原理/流程类讲解动画，不适用于「场景类」视频。

核心功能¶

以音定时的时间轴推导¶

这是整套方法的核心，顺序是先做配音、再做画面：

1、用 Edge TTS 逐句合成解说词，并实测每句的真实时长，而不是按字数估算。
2、由每字的起音时刻反推整条时间轴，字幕和画面事件都挂在这条轴上。
3、画面事件领先配音 500ms，给观众留出先看画面、再听解释的提前量。

这样做的直接好处是，改了台词之后重算时长即可，不必重新排画面。

两种交付物¶

• 字幕版 HTML：讲解词逐句上屏，可直接在浏览器里审阅，不需要渲染就能检查对齐情况。
• 含配音音轨的 1280×720 MP4：正式交付用的视频文件。

学科正确性检查表¶

用于渲染前的自查，共三条硬规则：

• 受力图六条
• 公式不脱场景
• 符号不上屏

第三条对应前言里提到的「术语读散」问题：符号留在画面上，配音只读需要读的部分。

渲染前全时间轴回归脚本¶

渲染之前跑一遍，检查整条时间轴是否错位，避免改完词之后只有局部对齐、全局错位的情况被带到成片里。

触发词¶

原理动画、流程动画、配音动画、讲解动画、教学动画、音画同步、动画与讲解词对不上、术语读散、字幕版动画。

安装与启用¶

官方页面在写作时无法抓取（api.skillhub.cn 与 www.skillhub.cn 两个地址均请求失败），因此本文不给出未经核实的安装命令。

可以确认的是：该 Skill 基于通用 SKILL.md 格式，标签 requires_api_key=false 表示运行时不需要 API Key。启用时按坐标 @user_2761353a/principle-flow-animation-explained 引用即可，具体命令请以官方地址页面为准。

Cursor、Codex CLI、Claude Code 之间的差异，资料中没有给出，这里不做说明。

典型用法¶

官方简介没有提供可复现的示例命令，下面按其描述的方法论整理步骤，仅作流程参考。

1、先写解说词。把知识点拆成逐句的讲解词，这一步决定后面时间轴的精度。

讲解词按句拆分，每句独立成段，供后续逐句合成

2、逐句合成并测时长。用 Edge TTS 合成每句，记录真实时长和每字起音时刻。

edge-tts 逐句合成 -> 实测时长 -> 每字起音时刻

3、生成时间轴。由起音时刻反推整条轴，画面事件落在配音对应时刻前 500ms。

画面事件时间 = 该句起音时刻 - 500ms

4、按时间轴排画面。所有图形、箭头、高亮都挂在时间轴上，不单独定位置。

5、跑全时间轴回归脚本。确认没有错位后再进入渲染。

6、导出交付物。字幕版 HTML 用于审阅，1280×720 MP4 含配音音轨用于交付。

适用场景与注意¶

适合：物理受力分析、机理演示、流程复盘等需要边看边听的知识讲解。

不适合：场景类视频。这类内容的画面逻辑不是由解说词驱动的，套用这套以音定时的流程并不合适。

使用上需要注意两点：一是解说词质量决定了成品上限，时间轴只是保证对齐，不替内容的学科正确性负责，因此渲染前的检查表要照做；二是音画同步依赖 TTS 的实测时长，如果后续替换了配音音色或语速，需要重新生成时间轴。

结尾¶

这个 Skill 的价值在于把「对齐」变成可计算的步骤：配音时长先实测出来，时间轴就有了依据；字幕版 HTML 让审阅发生在渲染之前，回归脚本再兜住一次全局错位。对需要边看边听的知识讲解，这套流程比先做画面再补配音要省返工。

官方地址：https://api.skillhub.cn/user_2761353a/principle-flow-animation-explained