eian-riso-broll ：把口播逐字稿印成B-Roll信息动画。

这是我的第二个 B-roll类 Skill。

做口播视频的人大概都会被配B-roll画面逼疯吧，因为这件事实在是太磨人了。

一期 2 分钟的口播，值得配画面的地方可能有十几处，

纯手搓一张就是几十分钟。交给 AI 生成吧，出来的又常常是一页页风格各异的 PPT，数据还可能是它自己编的。

所以继拼贴 B-roll 之后，我又把做信息动画的流程做成了一个 Skill：

eian-riso-broll

GitHub：https://github.com/YIAN6557/eian-riso-broll

它是一套孔版双色印刷风格的口播信息动画工作流：把你的逐字稿交给AI Agent，它会自动挑出值得配画面的句子，根据口播内容做成9:16的竖屏信息动画视频，拖进剪辑软件就能直接用。画面跟着你说的话走，风格统一，内容直接来自你的原话。

安装方法在文章最后面。

先看效果

10 个模板，对应 10 种信息形状

口播里能被”看见”的信息，其实翻来覆去就那么几种形式：一个数字、一次对比、一串步骤、一句金句……

我把最常见的 10 种做成了 10 个模板，每个都有自己的”画面故事”。

01 · 误区翻转 versus/02 · 章节卡 title/03 · 数字冲击 number/04 · 前后对比 compare/05 · 收敛归类 converge/06 · 连接密度 network/07 · 多选一 focus/08 · 流程步骤 steps/09 · 截图锚点 shot/10 · 金句 quote

动起来是这样的（成片是 30fps 的高清 mp4）：

一、为什么是孔版印刷

可能有人会问，信息动画风格那么多，为什么偏偏选孔版印刷？

孔版印刷（Risograph），就是用少数几种油墨、一版一版叠着印。

这种效果天生就非常适合用来做视频里的的信息动画：

网点和错位的效果，让人一眼就看出”这是印出来的”，而不是又一页 PPT。

整套视觉，我只用了五个部件：

• 一张纸：纯色纸面加一层纤维噪点，没有任何渐变。

• A 墨（深色）：所有要读的字和结构线，都归它管。

• B 墨（荧光色）：一帧只做一处重点，比如大数字、压条或者印章。

• 叠印与套印错位：两种墨叠在一起的地方，自动出现第三种颜色；B 版整版偏移 3 像素，就像真实印刷里那一版没对准。

• 网点：所有”渐变”都用网点来表达，包括底部字幕区里那层越往下越密的网点地层。

动画也不是常见的淡入淡出，而是”这张海报被印出来的过程”。

还有一条很重要的点：一条动画只有一个高潮，主要信息 2.5 秒内全部显示到位，剩下的时间就停在海报上。

这样做最直接的好处就是：观众暂停在哪一帧，画面都很好看。

配色一共有四组，一期视频最多用两组：正文一组，开头和结尾一组，首尾呼应，颜色也不会乱。

二、三道确认闸门，每一步都需要等你确认。

为了确保做出来的视频直接可用，所以在整个制作流程中做了3个审批流程，同时改动越早其实越便宜，前期改动，在分镜表里只是改一行字就行，到了成片再改，相当于白渲染了一遍。

所以从你贴出逐字稿，到拿到成片，AI分三步走，每一步都停下来等你确认：

1. 分镜表：先通读逐字稿，挑出 5–8 段”能被看见”的信息，比如一个数字、一组步骤、一次前后对比。每段定好模板、屏幕文字、时长和配色；不适合做动画的段落，写进”落选段”，并建议去处。删条、换条。

2. 样帧：每条套一个模板，只改模板顶部的数据，版面按字数自动排。然后渲染出每条的最后一帧，拼成一张总览图，再跑一遍自动质检。质检有错先修好，然后AI自己先看一遍，没问题就发给你确认，构图、文字不满意，也可以在这一步可以直接修改。

3. 成片：渲染 mp4，再检查一遍时长和尺寸。最后交付给你的是：每条一个 mp4、一张总览图、一份分镜表，如果你需要把视频叠在人像上，还可以要一个透明底版本。

三道确认门 · 逐字稿 → 分镜表 → 样帧 → 成片

前两步结束都会停下来等你确认，不满意就在当前这一步改，改完再给你看。

这里重点说一下：样帧和成片是同一个文件、用同一种方式渲染出来的。

所以成片的最后一帧，一定就是你确认过的那一张，不会出现”样图和成品不一样”这种事。

如果你只给一句话，或者明确说”直接出片”，Claude 会把三步合成一步，但质检一步都不会少，还是会全部走完。

四、不能编内容。

我踩的最多的一个坑就是，做信息图的时候，它会很贴心地帮你补上类别名、百分比和结论。

结果就是你得一条一条去核对，工作量反而越来越多了，所以这个skill里面规定绝对不能替你编内容，所有的内容都来源于你的口播原稿。

具体来说，有这么几条：

• 只删字、不改写：口播是给耳朵听的，屏幕画面是用眼睛看的，所以一定要提炼。但只能从原话里删字、换行，不能换说法。

• 数字原样：“1 万 2 千”可以写成 12,000，但不能四舍五入，也不能推算出台词里没说的结论。口播说”40 分钟变成 2 分钟”，画面绝不会自作主张写上”效率提升 20 倍”。

• 没说的留空：台词说”收敛成 6 大类”，却没说是哪 6 类，画面就是 6 个只带序号的空块。说了是哪几类，才会把名字写上去。

• 没有截图就不画界面：需要展示后台、原帖、表格的地方，你没给截图，就只显示”待替换”的占位框，绝不用代码画一个仿造的界面。

• 放不下就删字，不缩字：每种文字都有字数上限，比如论点每行不超过 8 个字。字太多时，办法是从原话里再删几个字，而不是把字号缩小。手机上看，字太小就等于没有。

五、专门为竖屏短视频设计

经常刷短视频就会发现都，画面上还盖着一层界面，顶部是搜索栏和状态栏，右侧是点赞、评论、分享按钮，底部是字幕。

这个时候如果信息放错了位置，就会被挡住。

所以每条动画，都会按一张计算过的固定的版面来排：

• 顶部 168 像素以内不放任何东西。

• 所有文字集中在 168–1330 像素之间的信息区。

• 底部字幕区（1330 像素以下）只放网点地层之类的装饰。

• 右侧按钮栏尽量不放字。

质检叠层图：绿色虚线是信息区，顶部红色是平台顶栏，右侧橙色是按钮栏，底部斜纹是字幕区

六、它是怎么做出来的

可以把每个动画看成一个网页，用 HTML 和 CSS 排版，用 GSAP 写动画，再由本机的 Chrome 一帧一帧截图，最后交给 ffmpeg 合成视频。

整个过程不调用任何图片生成模型，也不需要联网，更不用花钱。

• 模板只改数据：每个模板顶部有一段 DATA，写着配色、版头、数字、文字和时长。使用时只改这一个地方。

• 每一帧都能复现：动画里的一切，包括计数器、网点和纸纹的”呼吸”，都是时间的函数，随机数也有固定的种子。渲染器跳到任意一帧，得到的画面都一样。

• 零 npm 依赖：渲染器用 Node 自带的 WebSocket 直接驱动 Chrome，不用装任何其他东西。需要的只有 Node 22、Chrome 和 ffmpeg。

• 字体内置：标题用思源宋体 Heavy，标签用思源黑体，数字用 Oswald，编号用 JetBrains Mono，都是开源字体。中文字体只保留 GB2312 的 6763 个常用字，四款加起来约 2.5 MB。字体没加载上时会直接报错，不会悄悄换成系统字体出片。

• 三个系统效果一致：因为字体和渲染方式都不依赖系统，所以macOS、Linux、Windows 渲出来的画面一样。

七、怎么开始用

先装好Claude code/Codex、Node.js 22 或更新版本、Chrome（Edge 或 Chromium 也行）和 ffmpeg，嫌麻烦让AI帮你装就行。

然后把这段话发给你的Agent：

帮我安装 eian-riso-broll 这个 skill,
仓库地址 https://github.com/YIAN6557/eian-riso-broll 。
请把它克隆到你加载 skill 或规则的正确位置
(如果你是 Claude Code,放到 ~/.claude/skills/eian-riso-broll;其他助手克隆到合适的工作目录即可,它根目录的 AGENTS.md 就是给你看的说明)。
然后检查本机是否装了 Node.js 22+、Chrome 和 ffmpeg,
运行它的 scripts/check_setup.mjs 做自检,
全部通过后告诉我怎么用。

安装完成后对你的Agent说：

1. 用 eian-riso-broll 给这期逐字稿做信息动画：……

2. 把这句做成 Riso 动画，直接出片：......

3. 对准口播时长：这是字幕文件 口播.srt，帮我把第 3 段做成动画，时长和口播对上

4. 叠在人像上：给我一个透明背景的版本

然后Agent就会调用这个skill。

最后，如果你在所有过程中有任何问题记得给我留言，喜欢可以点个star~

关于我

我是 Eian，一个 AI 使用者。

天天泡在 AI 里：写 Skill、用 AI 做视频、搭 AI 工作流。

专注 AI 实战，做开源下载工具 UCI，1700 多个网站一个链接就能下载，

关注Eian，一起进步。