简体中文 · English

FrameLoom

给 Agent 一篇文档，做成带图解和动画的视频

A document-to-video Skill for Codex, Claude Code, and other coding agents

看实际效果 · 做第一条视频 · 浏览风格 · 安装与排错 · 作者的其他产品

FrameLoom 让 Coding Agent 把文章、讲稿或产品说明编排成视频：Agent 理解内容、写讲稿和分镜，Remotion 在本机渲染图解与动画。你可以先看静音预览，继续导出供剪辑软件使用的干净画面，或接入配音制作有声视频。

效果展示

真实案例：把儿童自然博物馆宣传文稿，做成带旁白的白板视频。 输入一份文稿，生成插画、逐行书写和四阶段图解；下方用 10 秒无声动图展示效果。

观看完整案例 · 68 秒 · 含旁白 · 案例与素材来源 · 图解动画示例 · 在线浏览风格与镜头

完整视频包含 7 场白板动画，使用霞鹜文楷与自然语速旁白，片尾展示 https://naturemuseum.top/。插画用于概念示意，不是产品界面或实际三维模型。自动 QA 已通过，完整播放与素材公开使用仍待复核。

适合用来做什么

适合已经在使用 Codex、Claude Code 等 Coding Agent、希望把文字材料做成讲解视频的创作者。当前为 v0.5 公开测试阶段；以文字、图解和真实素材为主，不承诺真人表演、剧情片或复杂 3D 镜头。

快速开始

1. 安装并打开 Agent

准备 Git、Node.js 24+、FFmpeg / ffprobe。推荐 Node.js 24 LTS；还没装齐时，先按安装指南操作并检查版本。

git clone --depth 1 https://github.com/Acorn2/frame-loom.git
cd frame-loom
npm ci

在 Coding Agent 中打开整个 frame-loom 仓库：

第一条静音预览无需配置 TTS 或 API Key。首次渲染可能下载浏览器；Agent 的使用权限与费用按你选择的服务准备。

在终端执行：

npm run render:storyboard -- examples/creator-production-pilot/storyboard.json .tmp/quick-start/preview-silent.mp4 --mode fast
npm run inspect:output -- .tmp/quick-start/preview-silent.mp4 examples/creator-production-pilot/storyboard.json

看到 OUTPUT OK 后，用本机播放器打开 .tmp/quick-start/preview-silent.mp4。预期为 1920×1080、30 fps、20 秒的静音视频。输出目录会自动创建；再次试跑时换一个文件名。此路线使用现成分镜，体验文档编排请继续下一步。

2. 用自带文档做第一条视频

无需先准备自己的材料。在 Agent 对话框粘贴：

请使用 frame-loom Skill，读取 examples/creator-production-pilot/source/source.md，
用墨白杂志风格（retro-zine）制作 16:9 横屏静音预览。
使用 fast 模式，根据文档推荐镜头并直接继续制作。
完成后告诉我视频的实际路径、时长和检查结果，并打开视频供我观看。

Agent 会新建 projects/YYYYMMDD-内容主题/，保留原文、编写讲稿与分镜，完成渲染与 QA。成功结果是该项目中的 output/preview-silent.mp4，以及实际时长和检查结果。 视频带审片标记且没有声音；新文档的内容与时长由实际编排决定。

你不需要手写 JSON、创建项目目录或逐个选择镜头。观看后可直接告诉 Agent 哪一幕需要修改，沿用同一个项目继续调整。

3. 换成自己的材料

将下面的占位路径换成已有 Markdown 或纯文本文档的实际路径，也可以直接附上文件：

请使用 frame-loom Skill，把 <文档路径> 做成横屏静音预览。
根据内容推荐风格和镜头，使用 fast 模式直接继续制作。
完成后告诉我视频路径、时长和检查结果。

有产品截图时一并附上，或提供准确网址让 Agent 截图。主体产品截图默认用于参考全片配色，风格负责构图与动效；也可以明确说“使用风格默认配色”。需要先审稿时，改为“使用 review 模式，先给我审核讲稿和分镜，我确认后再渲染”。

选一种喜欢的风格

当前九套视频风格按画面构建方式分为两类：

• AI 插画风格：手绘白板、批注推演、编辑式排印。纯文档制作时，Agent 调用 AI 生成人物、物件或情境插画，再编排文字、图解与动画；提供真实截图时直接使用截图，不自动生图。三套使用各自的固定内置镜头流程。
• 图文动效风格：墨白杂志、暗场信号、手绘便签、瑞士蓝、工程蓝图、产品演示。以文字排版、图形、图表与界面素材构成画面，通过镜头动效逐步呈现，也可使用真实图片和截图；镜头可由 Agent 推荐或手动限定。

这两类描述画面构建方式，知识讲解、产品介绍、教程或故事属于内容用途。

三套 AI 插画风格

三套 AI 插画风格使用同一份“好问题，从观察开始”的文案，均为18秒横屏静音样片。下面展示实际视频的完成态，点击封面或“观看样片”即可查看动画；文案、图解为主体，插画辅助表达。

手绘白板 · Whiteboard	批注推演 · Annotated Reasoning	编辑式排印 · Editorial Typography
逐行书写 · 同步铅笔 · 小赖字体	圈词旁注 · 关系累积 · 思源宋体	关键词重排 · 关系展开 · 思源黑体
观看样片	观看样片	观看样片

三套均支持横屏，用户选风格即可，不需要再选镜头集合。批注推演与编辑式排印以正文、数字和关系为主体，辅助插画的声明框总面积最多占画布 8%。全片字体可独立选择，详见字体清单；素材准备见插画生产流程，分镜编排见文案动画制作。

六套图文动效风格

下面六套图文动效风格使用同一份分镜，便于比较；展示图解完成态，可点击观看实际静音样片。

墨白杂志 · Editorial Ink	暗场信号 · Signal	手绘便签 · Sketch Notes
观看样片	观看样片	观看样片

瑞士蓝 · Swiss Blue	工程蓝图 · Blueprint	产品演示 · Product Frame
观看样片	观看样片	观看样片

在在线配方库选择风格，复制制作指令，再交给本地 Agent 和你的文档。Agent 默认根据内容推荐镜头；也可手动限定。网页只展示公开样例，视频生产在本地进行。

当前版本的配方库提供右上角中文／英文切换，界面与制作指令随语言切换，保留制作选择。现有样片和原始配方文档保留中文并明确标注；界面语言不改变视频成品语言或字体。在线站点需发布当前版本后获得这些更新。

预览满意后，继续完成视频

例如，已配置好 TTS 后，在同一个项目中继续说：

请在刚才的项目中继续制作有声版，使用已配置的真实 TTS。
如果有多个可用配置，先让我选择；按实测配音时长调整画面，完成渲染与 QA。

配置细节、外部配音和审核步骤见使用指南。有声视频与底片交接需要你完整播放复核；自动 QA 通过不等于事实、发音和视觉效果均已人工验收。

需要进一步调整时，可以让 Agent 按实测语音时间安排字幕与镜头。三套 AI 插画风格还支持右上角品牌名或本地 Logo，视频与同源封面共用配置，详见品牌设置。

制作连续系列时，可以从同一份系列配置新建多期。每期保留开工时的角色素材、来源、字体、品牌、画法与固定结尾，交付用途逐期选择。系列制作步骤

常见问题

需要会写代码或分镜 JSON 吗？ 不需要手写。你需要安装本地工具、能使用 Coding Agent，并检查它生成的内容；CLI 和 JSON 是 Agent 的工作入口。

必须配置配音吗？是否收费？ 第一条静音预览无需配音。使用 TTS 时只配置一家服务；Agent 和 TTS 的费用取决于各自服务，本地渲染不调用生成式视频 API。

支持竖屏吗？ 六套图文动效风格支持 16:9 横屏和 9:16 竖屏：横屏每套有 43 个场景配方，竖屏支持基础语义、操作筛选、结果生成和单位点阵重组四项配方。三套 AI 插画风格目前只支持横屏，并按各自内置流程编排；完整兼容范围见镜头配方库。

文档会上传到配方库网站吗？ 网站不接收文档。渲染在本机进行；你选择的 Agent 或 TTS 服务可能接收文档内容或旁白，按其配置与服务条款使用。

项目目录为什么比视频大？ 项目还保留素材、音频、审片图、缓存和修订记录。新审片包使用原分辨率 JPEG 并共享重复帧；修订使用紧凑归档。运行 npm run inspect:storage -- projects/<id> --duplicates 可只读查看体积与重复文件；旧目录不会自动清理。详见空间管理。

遇到错误或效果不满意怎么办？ 先看安装与排错。仍有问题时提交安装或运行问题或视频效果反馈。

深入使用与参与开发

• 文档导航：按安装、制作、技术参考与维护查找文档。
• 使用指南：选风格、字体、素材、配音、导出和审核。
• TTS 配置与截图配色：按需加载的操作说明。
• 共享 Skill、镜头配方与Storyboard 契约：Agent 与开发者入口。
• 贡献说明、变更记录与安全反馈。

当前运行时：52 个场景配方、9 个宿主动作、5 个换章配方；筛选清单接入 48/48。

注册总数包含历史兼容能力，具体风格可用范围与新项目的固定流程分别约束选用。当前场景配方与预设组合为 experimental；兼容范围以能力清单为准。可选预设见知识讲解组合，本地网页维护见配方库指南。

作者的其他产品

FrameLoom 由 Hresh赫什 维护。我是一名用 AI 把想法做成产品的独立开发者，持续实践产品、效率工具与产品冷启动。除了 FrameLoom，我也在做这些产品：

查看完整产品作品集 → · 打开产品工作台 →

作品集还收录了读镜 / READFRAME、亲友记 / KinKeep、组局记等项目；各产品的介绍、当前状态与访问入口以网站为准。

致谢与许可

• Remotion提供基于 React 的确定性视频渲染能力。
• video-shotcraft提供镜头配方方法与展示结构参考；来源及适配许可见各配方 provenance.json 与接入台账。
• whiteboard-video提供白板绘制与生产方法参考，保留原始 MIT 署名。
• 项目字体保留原始版权与 SIL OFL 1.1 许可，见字体目录。

FrameLoom 自有代码采用 MIT。Remotion 使用独立的官方许可；字体、图片、配乐和 TTS 输出按各自来源条款使用，本项目的 MIT 不替代这些许可。