动态视频工作室
视频在这里是一个网页，其中每一帧都是时间的纯函数 render(t)，由 scripts/record.mjs 逐帧精确录制。这带来了帧完美的运动、真实的字体、真实的产品界面以及代码速度的迭代。其标准是资深动态设计师引以为傲的作品：每个时刻一个清晰的想法，具有物理重量的运动，每个元素都物有所值。
本技能教授思考和构建的方法。它不是模板。 每个视频都从其自身主题获得独特的概念。不要重复使用之前视频的场景、布局或故事节拍；重复使用引擎、工艺和经验教训。使用本技能制作的两个视频应该看起来来自同一个工作室，而不是同一个模具。
开始之前
- 阅读品味文件。
references/taste.md包含适用于所有人的经验教训。然后查找个人品味：项目根目录下的MOTION_TASTE.md，或跨项目的~/.claude/motion-video-taste.md。他们的品味覆盖通用默认设置。 - 根据对象调整说话方式。 许多要求制作视频的人并非开发者。以他们能看到的内容为先。展示渲染好的帧，而不是 ASCII 草图或文本模型；一幅图能在一轮对话中解决的问题，文字描述需要五轮。
工作流程
每个阶段结束时，都会有一个真实的东西可以查看，然后再投入下一个阶段。
1. 需求收集：视频类型与偏好
在一轮对话中提问，每个问题都带有合理的默认值，这样忙碌的人可以直接说“开始” (references/intake.md)：
- 视频类型，从
references/kinds/README.md的菜单中选择：- 产品发布片、品牌广告、解说片、故事片、角色片
- 动感文字、炫酷集锦、预告片、风格展示
- 操作演示、展示集锦、数据故事
- 发布渠道和时长。
- 偏好： 外观、基调、声音（音乐、配音、字幕）、必须展示的时刻、要避免的内容、他们喜欢的参考视频。
然后阅读该类型的剧本 (references/kinds/<kind>.md)，仅提问其列表中资料无法回答的问题。
2. 资料与产品理解
请求提供 UI：代码仓库（只读）、截图或录屏，以及线上网站。绝不修改仓库、打开密钥、登录或调用线上服务。
按照 references/intake.md 中描述的方式进行阅读：
- 它是什么，为谁而做
- 用户旅程，一个屏幕接一个屏幕，使用产品自己的语言
- 卖点，排序（为什么有人会切换过来）
- 顿悟时刻
- 品牌标识（标志、颜色、字体、语调）
- 真实数据
- 不应该展示的内容
撰写产品理解简报并获得用户的首肯（或在独立工作时陈述你的假设）。用户要求展示、探索或解释的任何内容都必须以“必须展示”的形式放入简报中。
从实际屏幕中记录字体、颜色、圆角、间距、真实文案和真实数据。视频应该看起来像他们的品牌，而不是一个通用的运动模板；凭空制造外观是第一个版本被拒绝的最常见原因。
如果用户分享了参考视频，请在构思前逐帧研究它 (bash scripts/study-reference.sh ref.mp4 out/)。记录它实际在做什么：
- 摄像机距离和角度
- 文字的大小和角色
- 其颜色的含义
- 镜头如何衔接
- 节奏和弧线
告诉用户你的解读，并在开始构建前获得确认。绝不要仅根据参考视频的单个截图进行构建。
3. 概念：先有原创想法，后有风格
根据产品理解简报（旅程、排序后的卖点、顿悟时刻）进行构建。每次都要先执行 references/originality.md 中的原创性方法，即使是独立工作时：
- 找到人性真相
- 从8个不同角度写出8个概念
- 用替换测试和陈词滥调测试剔除平庸的
- 选择最突出的幸存者，它仍然能卖，并记录下你否定的那些显而易见的想法
对于任何软件产品来说，最可能出现的想法（输入请求 → 结果构建 → 通知 → 蒙太奇 → 标语 → 标志）被禁止作为主干。本技能中的其他所有内容（演示、野外指南、实例、过往影片）都展示机制，而不是可供复制的镜头顺序。
然后从 references/styles.md 中选择风格：
- 电影级产品片
- 清新轻产品片
- 大气玻璃质感
- 叙述解说片
- 日常生活纪事
- 角色主导片
- 主打镜头片
- 炫酷短片
- 卡片展示片
- 操作演示片
- 动感文字
- 数据故事
在选择前阅读 references/patterns.md：它是关于优秀产品发布片实际做法的野外指南。
类型说明了视频的用途；风格说明了它的感觉。当需求开放时，提供两种风格作为两个方向。
然后用一句话写出故事，然后是承载它的视觉隐喻，取自主题自身的关键词和动词。列出场景：每个场景一个想法，每个想法有一个标志性瞬间（证明观点的动画节拍），同样取自该主题。当需求开放时，提出两个方向让用户选择。references/craft.md 包含深层原则（在所有风格中都适用）、方法、运动词汇和计时规则。在每次构思前阅读其原则。
4. 制作计划：整个影片，逐帧
在任何代码之前，使用 references/plan.md 的格式编写完整计划：
- 影片一页纸： 概念、被否定的明显想法、主角对象、情感弧线、卖点出现的位置
- 作为令牌的外观
- 逐帧的每个镜头： 每个可见变化的时间戳，以及摄像机、效果、入/出过渡、文本、声音、资产和移动
- 4–8 张渲染为静帧的关键帧
- 风险
在此阶段预期没有限制：描述影片的最佳状态，然后朝此构建。每个镜头都必须推动故事发展；如果不能，就删掉它。 展示计划和关键帧，只有在获得同意后才开始构建。独立工作时，对照质量检查清单和 originality.md 检查计划，并在构建前修复问题。现在撰写任何画外音，因为它驱动着计时。references/voice-and-sound.md 涵盖了AI语音工具易于读取的脚本格式、节奏、发音和声音。对于产品发布，规划链条：哪个元素携带每个屏幕进入下一个（craft.md, “连接屏幕”）。
5. 构建
将 assets/engine-starter.html 和 assets/motion.js 复制到项目的资产目录旁，然后逐个镜头构建。首先从移动库构建 (references/moves.md)：
- 打字特写 (
macroType) countUp- 墙壁飞入 (
wall) buildIn,cascade,montage,growToWordcursor和clickZoommorphRect- 景深 (
twin) shots用于剪辑，start用于预览和录制
assets/moves-demo.html 展示了如何调用每个移动。仅将其作为机制阅读；其镜头顺序是被禁止的默认设置，绝不是模板。仅在概念需要时才使用移动；一个影片可能不使用任何移动。只手动构建库未涵盖的内容，当一个新移动经证明有效后，以相同的形式将其添加到库中。
从 references/motion-tokens.md 获取所有持续时间和曲线，而不是凭猜测。遵循 references/engine.md 中的契约和陷阱；它们源自真实的错误。
对于超过大约 20 秒的内容，先做一个快速的粗略计时检查：使用灰色方块、真实的摄像机移动和计时，以及一些静帧。先让节奏正确，然后在不改变计时的情况下替换为真实的艺术作品。
6. 关卡：联系表
使用 node scripts/record.mjs page.html stills/ --stills 1,3.5,... 渲染 8 到 16 个关键时刻，然后运行 bash scripts/contact-sheet.sh stills/ sheet.jpg。首先根据下面的检查清单和品味文件自行审查；修复问题并重新渲染。然后才能展示给用户。在静帧正确之前，不要录制完整视频。
7. 录制、配音、适配、混音
录制一个草稿版本 (--scale 1 --fps 30) 供审查，最终版本使用 --scale 2 --blur 4：超采样，然后缩放到正常尺寸，带有真实的电影风格运动模糊。当配音录音到达时，运行 node scripts/voice-segments.mjs voice.wav 来找到每个口播行的位置。使用时间扭曲表将动画拉伸以匹配配音。不要剪切或加速配音。使用 node scripts/mix.mjs mix.json 放置口播行和音乐。
8. 交付
按渠道导出，并附带缩略图和帖子文案 (references/delivery.md)。验证最终文件：从 mp4 本身提取帧（每个帧一个 ffmpeg 调用）并检查时长和响度。
9. 学习
当用户反应时，将他们喜爱或拒绝的内容以及原因写入他们的品味文件中（创建 MOTION_TASTE.md，或者如果是个人品味而非项目品味，则创建 ~/.claude/motion-video-taste.md）。如果某个经验教训对其他人有帮助，建议将其添加到 references/taste.md。这就是每个视频都比上一个更好的原因。
质量检查清单（每张联系表都要检查）
- 看起来像真实的品牌/产品： 相同的字体、颜色、圆角、组件。没有凭空捏造。
- 每个屏幕一个想法。 如果眼睛需要同时阅读两件事，删除一个。
- 没有内容被截断、重叠或拥挤： 文本整洁换行，标志光学居中对齐，卡片完整，保持安全边距。
- 颜色真实： 没有褪色的滤镜或灰色面纱；文本具有对比度。
- 运动有重量感： 缓入缓出，弹簧效果稳定，仅时钟和进度条使用线性运动。
- 过渡是有动机的（摄像机移动、对象交接、推近），并且在过渡进行时场景仍然可读。
- 屏幕和配音一致： 当时屏幕上显示的内容与正在说的内容一致。
- 实际且可安全发布（参见 delivery.md）。
- 结尾： 品牌标记加上一个链接或一个操作。没有用户不想要的额外请求。
- 在手机上可读： 重要文本在舞台上应为 40 像素或更大，或者摄像机会放大直到达到此标准。检查缩小到大约 375 像素宽的表格。
- 每个镜头都稳定下来： 每次移动后都有足够长的静止时刻供阅读（每个词 0.5 秒 + 0.3 秒）。
- 风格保持一致： 连接、颜色、文本和摄像机自始至终遵循所选风格的配方。
- 展示动作，而非屏幕： 每个镜头都显示某人在做某事，或其结果。
- 尺度和节奏至少变化一次（近景 ↔ 远景，慢 ↔ 快）。
- 强调色具有单一含义。
- 每张图像都经过肉眼检查： 正确的产品对应其标签，正确的标志，没有裁剪或拉伸。打开每张图像；不要相信文件名。
- 数字有意义： 只有总数和增长量会计数变化；价格和固定值直接出现。
- 干净的过渡： 文本在某个物体经过它之前离开（没有白上吞白的情况），并且镜头之间没有空白帧。
- 具体而非通用： 至少有一个时刻只能是该主题才能拥有；只有在主题有该动作时才使用库移动。
- 原创： 它通过了替换测试，它没有使用被禁止的主干（originality.md），并且它与演示或使用本技能制作的最后一个影片的镜头顺序不同。
在向用户展示任何内容之前，根据以下每项为自己打分（满分 10 分）：品牌匹配、故事清晰度、运动质量、可读性、过渡、声音/配音同步和完成度。首先修复任何低于 8 分的项。
文件
references/genres.md：视频类型，包含结构、时长和格式默认值。references/intake.md：需求收集问题（带默认值）、如何阅读仓库以了解用户旅程和卖点，以及产品理解简报。references/kinds/：每种视频类型的剧本（产品发布片、品牌广告、解说片、故事片、角色片、动感文字、炫酷集锦、预告片、风格展示、操作演示、展示集锦、数据故事）：要问的问题、可采取的形式、世界、移动、示例、陷阱。kinds/README.md是菜单。references/plan.md：制作计划格式：影片一页纸、外观令牌、逐帧的每个镜头、关键帧、风险。references/originality.md：首先阅读。 每次创建原创概念的方法：人性真相、8个角度、剔除测试、禁止的陈词滥调。它覆盖了技能中的所有示例。references/patterns.md：基于对15个强大产品发布片逐帧研究的野外指南：它们几乎都做了什么、动感文字、过渡、展示产品工作、角度何时有效、结构、专业细节。在概念阶段阅读它。references/styles.md：十二种不同的风格（电影级产品片、叙述解说片、卡片展示片、操作演示片、动感文字、数据故事、清新轻产品片、大气玻璃质感、日常生活纪事、角色主导片、主打镜头片、炫酷短片），每种都是一个完整的配方：摄像机、文本、颜色、连接、节奏、弧线、陷阱。references/craft.md：深层原则、概念方法、构图、运动词汇（宏观打字、结果墙、连接屏幕、点击缩放、摄像机）、计时。references/motion-tokens.md：数据：曲线、持续时间、弹簧、交错、阅读停顿、手机文本大小、节拍、颜色。references/engine.md：render(t) 契约、预览/录制、时间扭曲、捕获真实 UI、陷阱。references/voice-and-sound.md：语音脚本格式、节奏、发音、适配、音乐混音。references/delivery.md：渠道规格、缩略图、帖子文案、不应发布的内容。references/taste.md：来自真实客户反馈的经验教训；如何维护个人品味文件。scripts/record.mjs：帧精确录制器（视频或静帧，--blur N用于真实运动模糊）。需要 Node 22+、Chrome 或 Chromium、ffmpeg。scripts/contact-sheet.sh：将静帧合成为一张审查图像。scripts/study-reference.sh：将参考视频转换为按时间排序的联系表，以便逐帧研究。scripts/voice-segments.mjs：找出配音录音中每个口播行的开始和结束位置。scripts/mix.mjs：视频 + 口播行 + 音量降低后的音乐，生成响度归一化的 mp4。references/moves.md：移动库：每个移动的用途、选项以及哪些移动适合哪种风格。assets/
…
[因翻译而截断]