Communitygithub.com

igorcacerez/motion-video-studio

通过代码创建动态设计视频、广告、解释性视频和 2D/3D Reels,使用 Three.js、逐镜头参考、动态排版、真实 UI、同步音频和确定性渲染。与 Claude Code 或 Codex 配合使用效果最佳,适用于此类视频或视觉重建。

motion-video-studio 是什么?

Motion Video Studio 是一个基于代码的动态设计视频制作工具包,专为与 AI 代理(如 Claude Code 和 Codex)配合使用而设计。它能够将简单的简报转化为可编辑的源代码、可审查的帧、同步音频和最终 MP4 视频。该技能严格遵循基于“Movez”课程的 12 章教程体系,但明确提醒不要仅因启用技能而承诺专业品质——需要实际制作、检查并修正工件。它支持多种工作模式:从分析参考视频(逐镜头)、处理产品 UI 屏幕截图并收集品牌资产,到创建 3D 元素(使用 Three.js 0.187.0 及预置的 94 份官方文档)、长片/角色动画,以及针对镜头级别的点对点修订。整个流程强调确定性渲染(禁止 `Math.random`、实时时钟、CSS 过渡或 `requestAnimationFrame`),以帧号驱动状态,确保输出可重复。它内置了生产契约:要求用户收集缺失的输入、分析参考、撰写风格指南和镜头列表、生成节拍网格与提示点,并强制进行至少三轮已记录的审阅(在 360px 宽度和过渡帧范围内测试)。最终输出包括 MP4、海报、接触印相、源文件、简报以及资产/版权清单。该工具包完全可自包含运行(`npm ci`、`npx playwright install` 等),无需任何付费 API 密钥,仅依赖本地资产并通过 loopback 加载,同时主动阻止外部网络请求。

兼容平台✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Motion Video Studio

将简报转化为可编辑的源代码、审查后的帧、音频和 MP4。基础是 Movez 课程;请参阅 12 章对应关系。不要仅因启用该技能就承诺专业品质:要制作、检查并修正工件。

从正确的模式开始

  • 与示例类似的参考: 阅读 逐镜头分析 和 效果配方。参考文件位于 examples/reference/original.mp4;此为学习材料,其版权与代码无关。
  • 产品视频: 运行 npm run gather -- --url URL --out assets/brand(仅需提供 URL;生成桌面/移动端截图、图片/图标、颜色、字体以及许可证标注为“未验证”的 inventory.json),并同时收集 URL、真实截图、Logo、字体、颜色、已批准的文案和 CTA。模板中包含明确标注为虚构的 UI;在宣布现有产品之前,请用真实图片替换。
  • UI 变形/循环: 使用 assets/morph/ 中的说明和模板。阅读 production.md 中的循环部分。
  • 3D 元素: 阅读 threejs-guide.md,重用 scripts/three-helpers.mjs 和模板 assets/three/。依赖的 Three.js 0.187.0 已包含在包中;94 份官方文档 已附加以供查阅。使用相机、几何体、材质、灯光和以 t 为功能的动画;不要将手册中的实时循环传输到渲染器中。
  • 长片/角色: 阅读 assets/brief-template.md 中的导演模板;为每个项目维护一份身份圣经和动画指南。
  • 点对点修订: 保留现有源文件,仅使用 --start 和 --duration 渲染受影响的区间。

在 prompts.md 中选择抱负级别(L1 冒烟测试 … L5 长片):它决定了要问多少问题、审查多少内容以及何时停止。一行代码测试的是引擎,而不是创意;对于自己的工作,要求给出论点、参考和可验证的事实。

以下命令相对于包含此 SKILL.md 的文件夹。在环境中找到此文件夹;不要假设当前目录就是技能目录。为每部电影在包的副本中工作,保留可复用的安装。npm run new -- --dir ../my-film 会创建 docs/(简报、风格指南、镜头列表 md/json、变形规格、审查日志)、refs/、assets/、audio/ 和 out/,且不会覆盖;每个品牌使用一个文件夹/会话。

生产契约

  1. 仅收集缺失的输入:主题/产品、目标、时长、格式、品牌、参考、背景音乐/旁白、预算和交付物。充分利用已提供的内容。记录可逆的假设。
  2. 在动画化之前分析参考。运行 npm run analyze -- --input VIDEO --fps 4 --out out/reference。打开帧。记录风格、镜头、节奏、遮罩、连续性和音频;区分观察、假设和测量。如需精确计时,请在原始视频中查看连续帧。
  3. 编写 docs/style_guide.md 和 docs/shotlist.md,包含开始/结束、信息、主导对象、入场、保持、退场、连续性、相机和声音提示。使用 assets/brief-template.md。在需要时将其提交以进行创意决策。文章包含要求批准的提示:切勿因沉默而假定批准。当已获得完整工作的授权时,继续执行可逆的本地操作。 3b. 将 docs/shotlist.json 转换为基于网格的计划:npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json。它会指出节拍外的镜头、超过 4 秒且无新意的间隙,并为 sfx 生成提示。在编写动画之前展示结果。
  4. 用 scripts/beats.py 测量现有背景音乐;确认节拍和重拍。如果没有音乐,用 npm run audio 合成一段原创音乐。将叙事与声音同步,并使用网格作为辅助;不要仅仅为了落在节拍上而裁剪单词。 4b. 在渲染任何新页面之前,运行 npm run lint -- --input FOLDER:它会检查 Math.random、时钟、定时器、requestAnimationFrame、CSS 过渡、will-change、辉光和缺少 window.seek。错误会阻止渲染。
  5. 在精加工之前构建关键帧和动态故事板。默认使用引擎 A(assets/starter/)。仅在需求证实时才选择 Remotion/HyperFrames:路由架构见 references/production.md。不要凭习惯安装所有引擎。
  6. 在 docs/review_log.md 中进行至少三轮有记录的审查:每镜头 3-5 张静帧、按节拍的联系表、在 360px 宽度和过渡帧范围内测试。在每轮中,记录三个最大的问题及其时间戳,修正后再次审查。对钩子、可读性、运动、多样性、构图、品牌和同步性按 1-10 分进行评估。目标:所有项目均 ≥8,并有证据支持;在无法看到/听到时,不要捏造分数。
  7. 渲染主版本、混音音频、运行 qa 并准备 review。重新评估编码后的 MP4,而不仅仅是画布。对于每种宽高比,重新排版布局;不要裁剪横向视频来制作竖版。
  8. 交付 MP4、海报、整个时长的接触印相、源文件、简报、资产/版权清单以及限制。仅当影片需要循环时才生成拼接测试。说明哪些内容已测试,哪些仍依赖人工审查。发布、付费服务及上传需要用户明确授权。

引擎与视觉语言规则

  • window.seek(t) 必须以确定性的方式绘制完整帧。帧之间无状态、无实时时钟、无 Math.random、无定时器、无 CSS 过渡或无 requestAnimationFrame 参与渲染路径。在绘制时通过种子重建 PRNG,或按时间索引噪声。
  • 在第一帧之前等待字体和资源。使用输出分辨率的画布、deviceScaleFactor:1 和本地数据。不要在相机放大的文本上使用 will-change。
  • 使用解析弹簧;对于多目标,通过 track 对阶跃响应求和。排版:无可见过冲;UI:谨慎;吉祥物:如果方向允许则富有表现力。常量和辅助工具见 scripts/motion.mjs。
  • 文章方向:避免居中标题加渐变、所有内容淡入、角落装饰标签、边框、UI 中的发光和通用粒子。除非方向不同,否则使用一种显示字体、一种 UI 字体和一种强调色。参考中表示支出的语义红色是一个功能例外。
  • 每 2-4 秒在叙事上做出新内容;在长片中,每 3-5 秒一个回报。前 2 秒内设置钩子。不要将新奇与持续晃动混为一谈。
  • 在场景之间保留对象:大 → 小 → 外围锚点 → 恢复。变形文本在变换开始后进入,在下一次变换之前退出。光标和点击必须对应真实操作。
  • 对现有产品使用真实屏幕和数据。不要捏造指标、推荐或功能。对于概念,明确声明 UI 是虚构的。
  • 对于循环,要求图像、位置、速度和音频的连续性。t % duration 只是重复时钟:测试拼接点并让状态收敛。
  • 文章参考主版本:60 fps,每帧四个子帧,H.264 yuv420p,CRF 16。--fps 30 --sub 1 --scale 0.5 是经济的动态故事板,而非此主版本。
  • 音频:目标 −14 LUFS 集成;保留余量(此包中真实峰值目标为 −1.5 dBTP)。在混音和编码后测量。提供的音乐文件保持原始状态;在副本上进行混音。

现成脚本

所有参数和示例见 scripts.md。不要重写已存在的辅助工具。

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../my-film
npm run gather -- --url https://product.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

渲染器仅通过 loopback 打开本地资产,并在浏览器中阻止外部网络。这并不会使外部代码变得可信:在运行前阅读代码,并尊重环境的权限。不要打印密钥或将 .env 嵌入共享项目中。基础包无需 API 和付费积分即可运行。

相关技能