Communitygithub.com

知识动画视频生成

根据口播稿(或音频)和风格参考图,自动生成带背景音乐和音效的知识动画视频。支持多种视频类型(3D数据、手绘涂鸦、数学公式等)和比例,基于Remotion实现,可按镜头修改。

知识动画视频生成란 무엇인가요?

这是一个专业的知识动画视频生成AI技能,专为需要将文本或音频内容转化为视觉化视频的用户设计。用户只需提供一段口播(文稿或录音音频)和一张风格参考图,即可生成具有专业质感的知识动画视频。技能支持多种视频类型(3D数据可视化、手绘涂鸦、数学公式、信息图、复古档案、美术馆鉴赏),以及多种画面比例(16:9、9:16、1:1)。技术栈基于Remotion(React编写视频)、Python脚本(配音/对齐/混音)和ffmpeg。工作流程包括:开场选择(类型、比例、配音方式、字幕选项)、读取对应模板、分析参考图提取配色和质感、处理口播生成时间轴、输出分镜方案由用户确认、生成视频(每个镜头独立组件)、交付与修改。该技能尤其适合内容创作者、教育工作者、市场营销人员和开发者,能够大幅降低知识动画视频的制作门槛,且支持逐镜头修改,节省大量迭代时间。

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/newbaisays-aigc/knowledge-animation-video/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

知识动画视频生成은(는) 무엇을 하나요?

用户给一段口播(文稿或音频)+ 一张风格参考图,你负责选模板、设计分镜、写代码、渲染出片。

技术栈:Remotion(React 写视频)+ Python 脚本(配音/对齐/混音)+ ffmpeg。

核心原则:风格决定工具。 先定类型,再按该类型的模板选工具和写画面。

作者:小白姐姐(Xiao Bai)· GitHub @newbaisays-aigc · MIT 协议 项目地址:https://github.com/newbaisays-aigc/knowledge-animation-video

本 Skill 与具体 AI 工具无关。 只要你的宿主环境能读 SKILL.md、能跑 shell 命令、能写文件,就能使用它。 TTS 优先用 components/common/scripts/tts.py(Edge TTS,需联网); 若环境不允许安装 Python 依赖,改用宿主自带的语音合成能力,输出同样的 vo.mp3 + 逐句时间表即可。 模型选择不限:任何能写代码的模型都可以,代码量大时优先用推理能力强的模型。


第 1 步:开场选择(必须先做,不要跳过)

一次性向用户问清下面 4 个问题。如果平台支持选项卡式提问就用选项卡,否则直接用文字列出编号让用户回复。

问题 1:视频类型(一句话记住:要震撼选 3D,要亲和选手绘,要推导选公式,要讲结构选信息图,讲历史选档案,看作品选美术馆)

编号类型适合的内容适合的人
A3D 数据有硬数据:数据新闻、产品发布、行业报告、财报解读财经科技博主、新媒体编辑、市场和产品同学
B手绘涂鸦偏观点和故事:历史人文、社会现象、读书笔记、心理学文科老师、知识付费讲师、读书博主
C数学公式抽象的数学、物理公式,算法和 AI 原理理科老师、做课件的学生、技术博主
D信息图流程、方法、系统架构、产品功能、业务流程职场汇报、企业培训、B 端和 SaaS 运营
E复古档案历史人物、历史事件、发明史、品牌故事、老物件历史博主、人文科普、品牌内容、文旅
F美术馆名画赏析、艺术史、文物、设计、建筑、摄影作品艺术博主、美育老师、博物馆和文旅、设计师
G帮我选用户不确定时,看完口播稿后由你推荐—

问题 2:视频比例

  • 16:9 横屏(1920×1080):B 站、西瓜、YouTube、课件
  • 9:16 竖屏(1080×1920):抖音、视频号、小红书
  • 1:1 方形(1080×1080):朋友圈、信息流

问题 3:口播方式

  • 文稿:用户给文字,你来配音(TTS)
  • 音频:用户给录好的音频,你来转写对齐
  • 无配音:只要画面 + 背景音乐

问题 4:要不要字幕

  • 要字幕(默认推荐):逐句显示在画面底部,适合手机静音观看
  • 不要字幕:画面更干净,适合后期在剪映等软件里自己加字幕

注意:口播方式选"无配音"时,字幕是观众理解内容的唯一途径,要提醒用户建议保留。

问完后,单独发一条消息向用户要素材,然后停下来等用户回复。两样素材没有收齐之前,不要写稿、不要出分镜、不要做任何生成。

这条消息照下面的话术发(可按用户已选的类型替换举例):

好的,接下来请给我两样素材:

素材 1:口播 发一段文稿或一段录好的音频。第一次跑建议短一点,15~30 秒(约 60~120 字),方便测试,消耗也少。 如果你还没有稿子,告诉我主题和时长(例如"介绍拿破仑,20 秒"),我先帮你写一版给你确认。

素材 2:风格参考(很重要) 风格用嘴说不清,直接给我看最准。下面任选一种都行:

  • 上传一张或几张图片
  • 发一个链接:Pinterest、小红书、B 站、YouTube 的图片或视频链接都可以
  • 实在没有,回复"用默认风格"

找参考的小技巧:去 Pinterest 或小红书搜"[类型关键词]",挑一张最喜欢的。

各类型的搜索关键词:美术馆 →"museum art documentary motion";复古档案 →"vintage documentary motion graphics";3D 数据 →"数据可视化 3D";手绘涂鸦 →"手绘动画 / doodle explainer";数学公式 →"3Blue1Brown 风格";信息图 →"信息图 动画 / infographic motion"。

收素材时的规则:

  • 用户只给了主题没给稿子:先写稿子,单独发给用户确认,确认后再往下走。
  • 用户只给了口播、没给参考:再提醒一次要参考,用户明确回复"用默认风格"后才用模板默认风格。
  • 用户给的是链接:先打开链接拿到真实的图片或视频(Pinterest 链接可用 https://widgets.pinterest.com/v3/pidgets/pins/info/?pin_ids=<pin 编号> 取得图片和视频地址)。如果是视频,均匀抽 8~10 帧拼成一张图来看。 接口打不开时不要卡住,也不要凭链接文字猜风格——直接请用户上传截图或图片;用户明确说"用默认风格"才用模板默认风格。

如果用户选了 G(帮我选),读完口播稿后按下面的规则推荐,并说明一句理由,等用户确认:

  • 稿子里有较多数字、百分比、排名、增长 → A 3D 数据
  • 讲一件作品(画、文物、建筑)值得细看的细节 → F 美术馆
  • 讲真实历史人物、事件、发明、品牌的来龙去脉 → E 复古档案
  • 以观点、故事、心理概念为主,数字很少 → B 手绘涂鸦
  • 出现公式、定理、推导、算法步骤 → C 数学公式
  • 讲步骤、流程、框架、模块关系 → D 信息图

第 2 步:读取模板

确定类型后,只读取对应的那一个模板文件,不要全部读取:

  • A → templates/3d-data.md
  • B → templates/hand-drawn.md
  • C → templates/math-formula.md
  • D → templates/infographic.md
  • E → templates/vintage-archive.md(同时读 components/vintage-archive/README.md,直接复用组件库)
  • F → templates/gallery.md(同时读 components/gallery/README.md,直接复用组件库)

每个模板都按 7 块结构写成:规格定尺寸,风格定长相,节奏定时间,画面定动作,音乐定情绪,工具定实现,交付定检查。

调整规则:

  • 规格、交付:基本不动,只把比例换成用户选的那个。
  • 风格、节奏、画面、音乐:根据用户的内容和参考图来调。
  • 工具:跟着模板走,不要混用别的模板的工具。

组件库: components/ 下存放已经调好的可复用组件。对应模板有组件库时,必须先读它的 README,优先复用组件和脚本,只为本片新写特有的画面。这样效果稳定,也能少出错。目前已有:

  • components/common/:所有模板共用的脚本,包括配音(tts.py)、自录音频对齐(align.py)、三版本混音(mix_audio.py)和导出(export_versions.sh)。第 4 步和第 7 步直接用这些脚本。
  • components/3d-data/:3D 数据参考实现(SpaceX 财报快讯源码),包括 3D 中文字、发光轨迹、网格地面、全息体和遮罩转场
  • components/gallery/:美术馆(WebGL 液态玻璃镜片画布、镜头视图数学、作品轮盘、放大镜、作品档案卡和细节排版,附蒙娜丽莎完整示例)
  • components/vintage-archive/:复古档案(纸标签、相片卡、丝带、印章、红圈、黄铜铭牌、翻书、黄铜放大镜、整屏名画、木桌、胶片叠层,加上取图、做旧、配音、混音脚本,附拿破仑完整示例)

做出新的满意效果后,把通用部分沉淀回组件库。


第 3 步:分析参考图

仔细看参考图,提取并写下这几项(后面所有镜头都要遵守):

  • 主色 3~5 个(写出色值,如 #0B1E3F)
  • 背景:纯色 / 渐变 / 纹理 / 深色或浅色
  • 质感:扁平 / 立体光影 / 玻璃 / 纸张 / 线稿
  • 字体气质:粗黑 / 圆体 / 手写 / 衬线
  • 构图特点:留白多少、元素密度、居中还是偏置
  • 如果参考是视频,再补充:镜头运动方式、转场方式、文字出场方式、节奏快慢

参考风格和所选模板冲突时(例如选了手绘,却给了一张 3D 玻璃质感图),先把冲突告诉用户,给出两三种融合方案让用户选,再往下走。不要自己悄悄决定。


第 4 步:处理口播,确定时间轴

文稿模式:

  1. 先轻度整理文稿:去掉错别字和不适合朗读的符号(如 ~ * #),不改用户的意思。
  2. 用 components/common/scripts/tts.py 生成配音和逐句时间(数字写成阿拉伯数字;环境不支持 Python 依赖时,改用宿主自带的语音合成能力,输出同样的 vo.mp3 和逐句时间表)。

音频模式:

  1. 用 components/common/scripts/align.py 音频 稿件 输出目录 对齐。有稿件时字幕用稿件原文;没有稿件时用识别文本。
  2. 没有稿件,或者相似度低于 60% 时,把结果给用户核对。

无配音模式:

按每秒 4~5 个汉字估算每句时长。

最终得到一张句子时间表,作为分镜的依据。视频总时长以配音时长为准,画面跟着配音走。


第 5 步:出分镜方案,等用户确认(不要直接渲染)

用表格列出分镜,每个镜头一行:

镜头时间对应口播画面内容动效音效

要求:

  • 一句口播通常对应 1 个镜头,长句可以拆成 2 个。
  • 每个镜头都要有一个"主角元素",并且写清楚它怎么动(从哪来、到哪去、多长时间)。
  • 口播里的数字、关键词必须出现在画面上。
  • 镜头之间写清楚转场方式。

发出分镜后问用户:"这个方案可以吗?哪个镜头想改?"用户确认后才进入第 6 步。 这一步能避免方向错了白白消耗积分。


第 6 步:生成视频

按模板里"工具定实现"的要求搭项目、写代码、渲染:

  1. 初始化 Remotion 项目(若环境里已有就复用),按用户选的比例设置宽高,帧率 30。
  2. 每个镜头写成一个独立组件(Scene01、Scene02……),统一放进主 Composition 按时间排列。这样后面改某个镜头时,只动那一个文件。
  3. 把参考图提取出的配色写成一个公共的主题文件,所有镜头都从这里取颜色。
  4. 字幕(仅当用户在问题 4 选了要字幕时):逐句显示,和配音时间对齐。用户选了不要字幕,就不渲染字幕层,但仍然保留句子时间表用于画面卡点。横屏放在底部,距底约 8%;竖屏放在画面中下部,距底约 25%,避开平台的按钮和文案区。
  5. 背景音乐和音效:按模板"音乐定情绪"的要求生成或选取。背景音乐音量压到配音的 15%~25%,有人声时自动降低。
  6. 先渲染 3~5 张关键帧截图自查(构图、文字是否溢出、颜色是否符合参考图),没问题再渲染完整 MP4。

遇到报错时,先读错误信息定位到具体镜头,只修改那个镜头,不要整体重写。

包装设计是硬要求。 不能只是把图片和文字摆在纯色背景上。每个镜头都要从参考里提取"包装元素",再把它们做成可复用的组件,例如:桌面或场景底纹、相纸或卡片边框、撕边纸标签、丝带横幅、印章、手绘红圈、黄铜铭牌、书本翻页、胶片颗粒、暗角和闪烁。数字和关键词要放在这些包装元素上出场,不要以裸文字出现。

素材来源与授权(硬要求)。 素材需要真实图片时(历史人物、名画、文物),用 components/vintage-archive/scripts/fetch_commons.py 从维基共享资源下载,它会同时生成 ATTRIBUTION.md,记录每张素材的作者、授权协议、来源页面:

  • Public domain(公有领域):无需署名,但建议在片尾保留来源
  • CC BY / CC BY-SA:必须署名 —— 片尾或说明文案里写上「作品名 · 作者 · 来源页 · 协议名」
  • CC BY-SA:除署名外,衍生作品还须以相同协议发布

下载后先看图再写镜头(见第 7 节踩坑 1),交付前对照 ATTRIBUTION.md 逐条核验署名是否落实。字体由 setup_assets.sh 下载,均为 OFL 1.1 / Apache 2.0,可商用可嵌入,但需随成品保留许可声明。

文字可读性规则:所有文字必须放在包装元素内部,不能有文字悬在纸片、横幅外面。印章、强调标签用高对比配色(如黄底红字、深底浅字),不要用半透明红字直接叠在纸上。

音乐和音效: 如果用户有本地素材库(如 D 盘的音效库),先问路径,再按情绪从库里挑背景音乐,按动作挑音效(翻页、纸张、拍立得、铅笔、呼声转场、鼓击、重低音、海浪等)。背景音乐要选一段能在视频结尾自然收尾的片段。只有在没有素材库时,才用程序合成。


第 7 步:交付与修改

导出版本: 渲染前问用户要导出哪几个声音版本(可多选,音效每个版本都保留):

  • 完整版:旁白 + 音乐 + 音效
  • 无旁白版:音乐 + 音效(适合用户自己重新录口播)
  • 无音乐版:旁白 + 音效(适合用户在平台上自己配版权音乐)

做法:画面只渲染一次(静音),再分别合成不同音轨,不要渲染多遍。components/common/scripts/ 里有现成脚本:mix_audio.py 一次输出三条音轨,export_versions.sh 负责合成导出。其他模板照同样的思路做。

交付时告诉用户:

  • 成片文件位置、时长、比例、是否带字幕、导出了哪几个声音版本
  • 用的是哪套模板、主色是什么
  • 一句话提示:"哪个镜头不满意直接说,比如'结尾的地球想换个样式',我只改那一段。"

用户提出修改时:

  1. 先确认是第几个镜头(不确定就根据描述的内容反查分镜表)。
  2. 只修改该镜头的组件文件,其他镜头一律不动。
  3. 改完先截图给用户看,确认后再重新渲染完整视频。

更新这个 Skill 本身时

如果用户要求修改 Skill 的内容(加模板、加组件、改文档)并推送到 GitHub:

  • 每次推送都必须打一个新 tag,版本号格式 vMAJOR.MINOR.PATCH,与 frontmatter 的 metadata.version 一致。
  • 不要手写 git tag / git push / gh release,统一用 tools/release.py:
python tools/release.py --bump minor --note "本次更新说明"

它会依次完成:改版本号 → 更新 CHANGELOG.md → 重新打包 .skill → 提交 → 打 tag → 推送 → 创建 GitHub Release(附分发包)。

改完之后不需要问用户"要不要发布",直接按上面的命令执行即可。


实测踩坑清单(第一轮 27s 复古档案成片跑出来的,照做能省很多返工)

取素材

  1. 维基共享资源的文件名会骗人。 标题写着 Winged Victory of Samothrace,下下来是墙上那块刻字。取图后必须先看图再写镜头,不要按文件名分配画面。
  2. 竖构图照片不能塞整屏(FullPainting / objectFit:cover 会裁掉主体)。竖图一律用相片卡(PhotoCard)——复古档案模板本来就是"桌上摆照片",不是满屏铺图。

写画面

  1. 带弧边或异形底的容器里放多行字,不能按 flex 居中拍脑袋算。丝带横幅(Ribbon)的纸面下缘是中部上弓的曲线,副标题曾经整排掉出纸外。要按"曲线最窄处"的高度校核,或渲染单帧后裁切放大 2 倍目视确认留白。
  2. 元素入场要留够稳定时间:本幕不足 60 帧时,Drop 弹簧入场的东西会没落定就被切场(纸片飞出画面右边界)。入场的纸片 at 帧之后至少留 30 帧静止。

跑脚本

  1. export_versions.sh 的入口参数必须是含 registerRoot() 的文件(常见是 src/index.ts),传 Root.tsx 会报 "does not contain registerRoot"。
  2. 渲染前先抽 3~5 张关键帧自查,不要一次渲染到黑。自查的方法是裁切放大局部看文字是否溢出,而不是只看整帧缩略图——整帧看不出来的 10px 溢出,放大后一清二楚。

交付前检查清单(每次渲染完整视频前都要过一遍)

  • 比例、分辨率和用户选的一致
  • 视频总时长和配音时长一致,结尾不出现黑屏或静音拖尾
  • (如有字幕)每句字幕和配音对齐,没有错别字,没有溢出画面
  • 口播里提到的数字都在画面中出现,且数值正确
  • 配色符合参考图,所有镜头风格统一
  • 背景音乐不盖过人声,开头和结尾有淡入淡出
  • 竖屏时,关键信息不在顶部 10% 和底部 15% 的区域内
  • 每张公版图都肉眼看过,和所在镜头的文案对得上
  • 竖构图照片没有整屏铺图,走的是相片卡
  • 每个纸标签 / 横幅 / 丝带 / 铭牌里的文字都在边界内,四周留白 ≥ 字号的 0.3 倍(放大 2 倍目视确认)
  • 入场元素在本幕内至少有 30 帧稳定时间,没有被切场截断

관련 스킬