一篇文章，怎么变成一条视频？ · 无尘阁 skills实验室

01 / 成品

25 秒，12 个镜头

只讲一个场景：把一个 Skill 装进 WorkBuddy，然后问一个问题。这是公众号文章里反复强调的取舍 —— 一条片子只讲一件事。

时长 25.0s 1920×1080 25fps / 625 帧 H.264 / 无声牛奶白 #FDFAF7 × 粉 #E8548A

为什么没有声音？公众号文章的做法是「先导出可播放的无声 MP4，保留工程文件，画面确认后再加音乐」。这一版停在画面确认这一步；音乐、音效与响度测量都还没做，页面下方「边界」里写清楚了。

下载 MP4（约 15 MB）

02 / 实验室四要素

成品、素材、用的 Skill、边界

skills 实验室每篇实验固定回答这四件事，不写「一键出片」。

01 / 成品

一条 25 秒动效短片

12 个不同构图：文字冲击 → 真实网页宽景 → UI 特写 → 数字 → 横向时间轴 → 流水线 → 尾卡。附首帧海报与分镜总览图。

02 / 原始素材

原文截图，一张没造

文章页首屏实拍 1 张 + 原文配图 8 张（共 25 张里选的），以及原文写明的数字与时间戳。截图里自带的红色箭头、手写标注都保留并注明来源，没有当成自己的标注。

03 / 用的哪个 Skill

business-motion-film

来自 echris6/motion-video-kit（MIT）。本片按它的 Brief → 分镜表 → 确定性渲染 → 独立质检走了一遍，下一节展开。

04 / 边界

这是方法论复刻演示

不是产品实测录屏，不代表任何疗效；没有多轮 Gauntlet 评审、没有音频、没有 1080p60 master、没用 Three.js（本片无 3D 需求）。详见文末「诚实边界」。

03 / 这个 Skill 是什么

business-motion-film：不是视频生成器，是做片方法 + 质检工具链

它把 28 部专业 SaaS 发布片拆成可复用的动效语法，再配一套「做的人不许给自己打分」的质检流程。用户只要给出真实素材和一句需求，剩下的分镜、动效、渲染、检查交给智能体。公众号那篇文章拿自己的网站截图试出了 25 秒成片，也把踩过的坑写了出来。

项目	内容
仓库	github.com/echris6/motion-video-kit · MIT · `business-motion-film/`
片长	15–40 秒的短商业片 / 产品发布片 / 讲解片 / 样片集锦
核心文件	`SKILL.md` 工作流，`references/` 11 份方法论（动效语法、质量门槛、Gauntlet 评审、音频、商业打法…），`scripts/` 测量脚本，`templates/` 组件实验室
素材做法	真实素材优先；AI 生成的静帧需先定关键帧再动起来；无真实素材时必须明确标注「概念片」
渲染	HTML/GSAP 代码动效为主，必要时 Three.js；官方示例用 HyperFrames，但方法论与渲染器无关
测量	`frozen-time.sh`（静止时长）、`loudness.sh`（响度）、contact sheet、逐帧审阅

五条不可妥协原则

1

真实性不编造评价、案例、疗效、节省金额；概念片必须写明是概念片。

2

静音也能看懂业务第一次看的人，关掉声音也要能说出「这是干嘛的」和「下一步做什么」。

3

独立评审Builder ≠ Judge，每一轮换一个没看过制作过程的人，只看成片、简报和规范。

4

确定性动效每个画面都是时间轴的纯函数，seek 到任意帧得到相同像素；不许自由运行的 rAF / Date.now()。

5

「没 bug」不等于「好」干净、流畅但空洞的片子照样打回；要测量，也要有创意判断。

+

这套规则的来源28 部发布片、48 分钟、81,647 帧的数值分析，加上逐片视觉拆解。

安装提示词（把路径换成你自己的）

公众号文章给的模板。本机已把仓库拉到 skill-repo/ 并直接读取 SKILL.md 与所需 references，没有走 Claude Code 的安装路径 —— 文章特别提醒「别把 Claude Code 的安装路径当成安装成功的证据」。

Skill所在目录：C:\Users\zgyji\WorkBuddy\2026-11-09-01-04-02\skill-repo\business-motion-film

请读取仓库 README 和 business-motion-film/SKILL.md，按当前支持的方式加载完整技能目录，
保留 references、scripts 和 templates。
如果无法原生安装，把完整目录保留在项目内，直接读取技能说明与当前需要的参考文件，
并明确采用了哪种方式。不要把 Claude Code 的安装路径当成安装成功的证据。

请使用 business-motion-film，结合我提供的产品截图和案例，制作一条约25秒的产品宣传动效视频。

先向我确认产品名称、目标观众、本次要介绍的一个场景、素材文件夹和播放比例。
只围绕这个场景安排内容：观众遇到什么问题、产品怎么帮助他、重点操作或案例是什么、看完下一步做什么。
先给我一张简短分镜表，确认后再制作。
使用真实产品素材，不虚构功能和效果。先导出可播放的无声MP4，保留工程文件，画面确认后再加音乐。
按Skill完成实际渲染检查，独立审阅能力不足时如实说明。

04 / 按文章说的做

公众号那篇的每一条，落到这条片子上

文章里说的	这条片子怎么做的
先确认产品、观众、一个场景、素材、比例	写了 BRIEF.md：主体是博客与 skills 实验室，唯一场景是「装一个 Skill 并问一个问题」，比例 16:9
先给分镜表，确认后再制作	12 镜分镜表，写明每镜时间、画面、业务作用、转场
只讲一个场景，别贪多	全片没有铺开讲 4 个问法，只走「搜索 → 安装 → 提问 → 结果」一条线
桌面截图别硬塞竖屏	直接定 16:9 横屏，不重做 9:16
圈不准的框就去掉	初版加了个圆形强调环，预览发现压到右栏标题，直接删掉；改成只罩住整张截图的柔框，不假装圈中某个按钮
先导出可播放的无声 MP4，保留工程文件	MP4 + 单文件 render.html（素材内联，双击可开，`seek(t)` 可复现任意帧）
成片自己完整看一遍，指出时间点和具体怎么改	跑 `frozen-time.sh`、抽帧总览、换镜密集抽帧，并做了两轮独立评审（首轮 REWORK 后逐条改，次轮换人逐条复核）
结尾案例要标「站内示例」，别误导	右下角常驻「business-motion-film · 真实素材」，数字镜标「原文写明的口径，不是本片统计」

05 / 分镜表

12 镜，25 秒

规范给的节拍是 1.4–3.5 秒、每 30 秒 12–15 个不同构图、主体在特征镜占画幅 60–85%、超过 0.6 秒不许静止。下面这张表是先写、后做的。

#	时间	画面	这一拍干什么
1	0.0–2.2	完成的文字冲击构图 + 真实文章标题卡 + 点明用的 Skill	0 帧即成片，缝合两条主线
2	2.2–4.2	博客文章页首屏实拍，缓慢推近	证明素材是真文章
3	4.2–6.2	10 大能力模块截图全屏扫过 + 2500 页 / 350 万字	交代装的是什么
4	6.2–8.2	大字「看过介绍，还是不会装」+ SkillHub 列表	立痛点
5	8.2–10.2	列表 UI 特写 + 只罩住整张图的粉色柔框	认准哪一个
6	10.2–12.3	上方满幅对话截图 + 下方横向三步	回答「怎么装」
7	12.3–14.2	第二个 Skill 界面 + `nihaisha`	原文点名的坑
8	14.2–16.3	提问气泡 + 原文长回答向上滚动	装完能干什么
9	16.3–18.3	129 / 345 / 上千 / 8 四张数字卡	可核对的量级
10	18.3–20.3	满幅板书截图 + 底部横向时间轴 83:57 / 100:26	第二个 Skill 的能力
11	20.3–23.2	business-motion-film 四格流水线 + 边界标注	介绍这次用的 Skill
12	23.2–25.0	尾卡：完整域名 + 两个 CTA	静音也说得出下一步

↑ contact sheet：每个镜头取一个落点帧拼成，是官方质检要求交付的「show the work」之一。

06 / 文件都能拿走

成片与工程文件

MP425 秒成片1920×1080 · 25fps · H.264 · 无声 · 约 15 MB JPG首帧海报Frame 0 完成构图 JPG分镜联系表12 个落点帧 HTML可复现的渲染工程单文件、素材内联、window.seek(t) 纯函数 MDBRIEF.md业务、观众、单一动作、真实性清单 MDSTORYBOARD.md12 镜分镜表 + 独立评审后的修改记录

渲染链路：本地 HTML/CSS → Playwright 按 seek(t) 逐帧截图 → ffmpeg image2pipe 编码，帧不落盘。官方 frozen-time.sh 实测 0 个近静止采样（≈0.0 秒），目标 ≤ ~1 秒；seek(19.9) 乱序重复两次像素完全一致。

07 / 诚实边界

哪些做了，哪些没做

做了：下载并阅读 SKILL.md、motion-grammar.md、quality-bar.md、critic-prompts.md；写 Brief 与分镜表；12 镜确定性渲染；真实素材；16:9 无声 MP4；poster / contact sheet / 工程文件；frozen-time.sh 测量；一轮独立评审（判定 REWORK 后逐条修改）。
没做：规范建议的 3–5 轮 Gauntlet 循环（实际跑了两轮：首轮 REWORK、次轮换人逐条复核）；音频、音乐、音效与 loudness.sh 响度测量（本片无声）；1080p60 master（交付 1080p25）；Three.js 组件（本片没有需要解释的物理/空间结构）；HyperFrames 渲染器（改用本地 Playwright + ffmpeg，方法论与渲染器无关）。
素材口径：界面图全部来自原文配图或本站文章页实拍，无 AI 生成伪界面；原文配图里自带的红色箭头与手写标注已注明非本片添加；数字均为原文写明口径，不是本片统计。
内容口径：涉及中医、方药的内容不构成医疗建议，身体不适请咨询执业中医师 —— 沿用原文与博客文章的免责声明。
审阅范围：质检抽看了首帧、落点帧、11 个换镜点的密集帧与 CTA 全段（约 150 帧），没有逐帧扫完 625 帧；完整逐帧无瞬时 glitch 不能打包票。
原文版权：视频与页面用到的文字、配图来自博客转载整理的原文，版权归原作者所有；本页仅作方法演示与学习交流。