把口播稿做成双色印刷信息动画 eian-riso-broll

把观众听到的信息变成看得懂的画面

口播提到一个数字、一组步骤或一次前后对比时，可以短暂切入一段图解，帮助观众抓住重点。这类补充画面就是 B-roll。eian-riso-broll 从你的逐字稿里选择合适的句子，用统一的孔版双色印刷风格制作动画图解，再交给你剪进原视频。

先看上方两段演示：它们把多个竖屏作品并排展示，不是工具的横屏输出模式。留意对比画面中长短不同的条形、流程画面里的编号，以及深色背景上的金句怎样改变观看节奏。它们各自突出一个信息，而不是把每一句话都做成字幕卡。

这次先练习把一段流程讲清楚，再把方法换成自己的内容。动画本身不带声音，也不生成整条口播视频；你需要已有逐字稿，最好同时准备录音对应的 SRT 字幕。

安装并检查本机环境

需要 Node.js 22 或更新版本、Chrome（也可使用 Chromium 或 Edge）、FFmpeg 和 ffprobe。渲染器用本地浏览器逐帧截图，再合成视频，不需要安装 npm 依赖或调用图片生成模型。安装工具和下载仓库仍需要网络，使用 AI 助手的费用也应另行考虑。

在终端运行：

git clone https://github.com/YIAN6557/eian-riso-broll.git
cd eian-riso-broll
node scripts/check_setup.mjs

这条路线适用于在仓库目录内使用 Codex、Cursor 或 Gemini CLI：助手可读取根目录的 AGENTS.md。Claude Code 用户也可按作者说明，将仓库克隆到 ~/.claude/skills/eian-riso-broll，让助手读取 SKILL.md 并识别技能。两条路线任选一条，不必重复克隆。

自检会核对 Node 版本，尝试启动浏览器，并检查 FFmpeg 和字体文件。找不到浏览器时，用 CHROME 环境变量指定可执行文件路径，再重跑自检。先解决自检失败项，再开始做动画。

许可范围：仓库目前采用 Eian 个人非商业使用许可 1.0。个人非商业使用可以按许可进行；变现账号、广告、客户或雇主项目，以及组织内部使用或试用等用途，均需事先取得作者书面授权，源码、模板和素材不得再分发。具体以当前许可为准。

从一小段逐字稿开始

下面用一段本站编辑的练习稿走一遍思路：

做口播配图，我分三步。第一步挑出值得展示的信息，第二步确认样帧，第三步导出动画。画面要跟着你说的话走。

这段话有两处适合配画面：“三步”可以用 steps 模板展示顺序；最后一句可以用 quote 模板收尾。因为没有前后数值，没必要硬套 compare，也不用补一个“效率提升”的数字。

把下面的要求发给 AI 编程助手。本文对话示例均为本站编辑建议，未经生成复现测试，不是作者原始提示词。

使用 eian-riso-broll 为下面这段逐字稿制作信息动画：
“做口播配图，我分三步。第一步挑出值得展示的信息，第二步确认样帧，第三步导出动画。画面要跟着你说的话走。”
先给我分镜表，列出原句、模板、屏幕文字和建议时长，暂不渲染。
屏幕文字只从原话删字、换行，不改写，不增加数字或结论。
流程段突出顺序，结尾突出最后一句；保持同一套印刷风格。
我暂时没有 SRT，请标明时长是估算值。

检查分镜时，先问自己“观众需要看见什么关系”。顺序、数量、对比和结论需要的图形不同，选模板应由信息决定。作者提供 10 种模板；你不必为了展示模板而把一期拆成 10 条。

原话要表达什么	可选模板	需要提供什么
一个重要数字	number	原稿中的数字与单位
同一对象的前后变化	compare	可比较的数值、单位和对应说明
按顺序做几件事	steps	原稿已说出的步骤
需要观众看到真实界面	shot	自己提供的真实截图
一句需要强调的结论	quote	原稿中的原句

没有截图时，shot 会保留一个“待替换”的占位框；原稿没说类别名称，就不应让 AI 补齐。缺少必要信息时，换模板或补充有依据的原稿，比让画面显得“完整”更有用。

确认样帧，再看动画节奏

分镜满意后继续说：

按确认的分镜建立项目，为每条动画创建一个 HTML 场景文件，只修改模板顶部的 DATA 配置。
先生成每条动画的最后一帧和预览图总览，运行自动质检，修复报错后给我查看。
暂不渲染最终视频。保留字幕区和右侧平台按钮的位置。

这里的“样帧”指从动画中截取的预览图。每条动画对应项目 compositions/ 下的一个 HTML 文件；文字、颜色、数值和时长集中在顶部 DATA。默认项目放在 ~/eian-riso-broll-projects/<项目名>/，预览图总览保存在 plates/sheet.jpg。

检查时先看主次：一眼能不能认出“三步”，每步文字能不能在手机上读清？字太多时从原话中继续删减，避免把所有文字缩小。信息区在画布 y=168–1330，底部留给剪辑时添加的字幕。

这里的样帧取自动画的最后一帧，只能帮助你确认最终构图。渲染之后仍要播放检查：编号出现的顺序是否正确？重点出现后是否留够阅读时间？自动质检（QA）能发现文字越界、部分重叠和字号问题，但不能替你判断内容是否讲清楚。

确认后，让 AI 渲染 MP4 并再次质检。也可以手动执行下面的命令。请在技能仓库目录运行；复制模板后，先编辑新文件中的 DATA，再继续生成预览图和视频。

# 创建独立项目，不修改原始模板
RISO_PROJECT=$(node scripts/new_project.mjs first-steps)
cp templates/steps.html "$RISO_PROJECT/compositions/01-steps.html"
# 在编辑器中修改 01-steps.html 顶部的 DATA
node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html" --still
node scripts/qa.mjs "$RISO_PROJECT/compositions/01-steps.html"
# 确认预览图且自动质检无报错后，生成视频
node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html"
node scripts/qa.mjs "$RISO_PROJECT/compositions/01-steps.html"

以上命令依据仓库脚本核对，本次收录未在本机执行渲染。成片在项目的 renders/，普通输出是 1080×1920、30fps 的 H.264 MP4，没有音轨，也没有整条口播字幕。

对齐口播，并做一次局部修改

把 MP4 放进剪辑软件，与对应的口播句子对齐。没有 SRT 时，技能按语速估算动画长度，仍需你在时间线上试听；有 SRT 时，可让它根据字幕的开始、结束时间计算时长，不要把每条统一设成五秒。

这是这期录音对应的 talk.srt。请找到三步流程那段，核对开始时间、结束时间和建议时长。
只调整已确认动画的时长，保留文字、模板和配色，重新渲染。

这次只改变节奏。若你把“三步”改成“四步”，就要同时补上真实的第四步旁白、更新步骤列表，再检查时长；只把画面中的 3 改成 4，会让声音和画面表达不同的内容。

如果动画要叠在人像上，可以要求透明版本，或在技能仓库运行：

node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html" --alpha

透明输出为 ProRes 4444 .mov，不是透明 MP4，文件通常很大，适合交给剪辑软件。深色油墨在暗背景上不易看清；这种情况可以直接用普通 MP4 整屏切入。

换成你的选题或产品

先从自己的逐字稿里选一段有明确结构的话，填写下面的需求，再尝试整期制作：

使用 eian-riso-broll 制作口播信息动画。
观众：[谁会看，需要看懂什么]
逐字稿：[粘贴真实原稿，不只给选题]
字幕：[SRT 文件路径，或说明没有字幕]
画面重点：[哪个数字、对比、流程或结论需要被看见]
真实素材：[截图路径、来源；缺少的素材明确列出]
风格：[从内置配色中选择，整期最多两组]
使用方式：[整屏切入，或将透明版本叠加在人物画面上]
先给分镜表，再出样帧，确认后渲染；不要补编原稿没有的内容。

例如讲预约产品，可以让原稿明确说出“选择时段、填写信息、收到确认”，再用流程模板表现。若要展示真实预约界面，就提供截图，使用 shot 模板；具体点击操作仍适合录屏。屏幕文字只从原话提炼，画面就更容易和你自己的口播保持一致。

交付时保留 renders/ 视频、plates/sheet.jpg 总览和 STORYBOARD.md 分镜表。最后在剪辑软件中加入口播、音乐和字幕，完成整条视频。

需要更多模板和配置，查阅作者的模板说明、制作与排错及技能说明。