Motion Video Studio
你和用户一起制作一个简短的动态设计视频。用户通过观看实时草稿、编辑屏幕上的文字和选择来引导。你负责研究、设计、动画和音效。
这个技能是一种与用户合作的方式，加上一些使操作变得简单的工具。它刻意不是一个设计模板。每个视频的外观、结构、节奏和动态都应根据主题——从创意简报、材料和品牌出发——像对待委托作品一样精心创作。附带示例（Arbisoft）展示了这些机制如何组合在一起；不要重复使用其场景、布局或样式。如果某个工具妨碍了获得更好的效果，那就更换工具。
所需工具
Python 3 加上 playwright（Chromium）、numpy、scipy、fonttools 和 brotli；node；ffmpeg。对于旁白还需要 kokoro-onnx 和 soundfile（voiceover.py 会安装它们，并在首次使用时下载免费的 Kokoro 语音模型，约 120 MB）。开始时检查一次，安装缺失的部分（pip install --break-system-packages fonttools brotli，如果没有浏览器则执行 python3 -m playwright install chromium）。以下脚本路径相对于此技能的文件夹。
用户体验
- 立即出现一个页面，包含设置表单。他们描述视频，可选地提供网站、粘贴文本或附加文件，并选择时长、画面比例、是否先比较故事板或跳过故事板直接得到一个完成视频、方向数量、风格、音乐和音效。他们还选择是否要有旁白（以及哪种语音——免费语音，每个都有 ▶ 样本，或他们自己的付费语音服务），是否显示字幕（由你设计，或稍后从字幕库中选择），以及文字的语言：全部英语，全部用另一语言的文字，用英语字母（罗马化乌尔都语），或人们实际说话时的混合形式。
- 用于比较的草稿视频——每个方向一个，以他们选择的画面比例（16:9、9:16 或两者兼有并带切换按钮）呈现，每个在自己的标签页中，以实时时间在页面中播放，屏幕上的文字以可编辑框的形式列在播放器旁边。故意比终版简单，但已经很漂亮：实时时间、布局、品牌、深度和质感。
- 他们选择一个。 你只将该视频精修为一个“终版”标签页，并保留他们的编辑。他们在此迭代——通过直接编辑文字或向你提出更改要求——可以无限次进行。
- 音效 被添加到终版（用户选择情绪的音乐，与屏幕内容对应的音效），在页面中播放，并配有音乐和旁白的开关和音量滑块。如果有旁白，每个草稿和终版都会朗读解说，音乐会在语音下降低音量，字幕会逐字跟随。每个播放器下方的字幕按钮打开字幕库（每种风格的实时预览）；选择立即生效，可移动（顶部/中间/抬高/底部，或在视频上拖动），保存，并用于渲染。
- 渲染 MP4——页面中的一个按钮在用户浏览器中对完成的视频进行编码并保存。在聊天中说“渲染它”也能工作；你渲染并发送文件。
所有操作都在一个 URL 的一个 artifact 中完成。每次都向同一个链接发布更新；永远不要启动第二个页面。
质量要求：每个视频都必须令人惊艳
这个技能的全部意义在于制作人们会停下来观看的视频。你制作的每个视频，从初稿到终版，都应该看起来绝对漂亮：丰富、精致、电影感，具有深度、立体感和纹理，并且至少有一个时刻让观众说“哇”。扁平形状在纯色背景上滑动、默认字体、均匀间隔的列表文本和线性运动都是失败，无论文字多么正确。目标是顶级动态设计工作室的作品展示水平，无论用户选择何种风格。
在实践中这意味着什么（SVG 提供了所有这些：渐变、filter 配合 feTurbulence、feGaussianBlur、feDropShadow、feDisplacementMap、遮罩、裁剪路径、混合模式、变换）：
- 深度。 将每个镜头分层构建：背景、中景、主体、前景。以不同速度移动它们（视差），让前景元素靠近镜头，并柔和模糊。使用柔和的层叠阴影（接触阴影加宽环境阴影）、使远处图层淡出的大气雾霾，以及非焦点上的景深模糊。
- 立体感。 物体应有体积感：来自一致方向的光线、塑造形状的渐变、边缘光和强光、适合的挤压或斜角字体、等距或透视平面、在 3D 空间中倾斜和旋转的卡片，以及（推拉、漂移、环绕、变焦）而不是固定画面。
- 纹理。 任何东西都不应该是死板的纯色填充。添加细腻的胶片颗粒或纸纤维（一个
feTurbulence模式定义一次并重复使用，以保持预览流畅），渐变中微妙的噪点以防止色带，匹配风格的材料表面（纸、玻璃、金属、织物、粉笔、半色调、Risograph 印刷效果），漏光、光晕和柔和的暗角。 - 美感。 精心设计的调色板，带有明确的强调色，匹配品牌的强大字体层级，大量留白，基于网格和比例对比的构图，以及将每个镜头联系在一起的调色。
- 有重量的运动。 自定义缓动（预感、过冲、归位），交错重叠的动作，次要动作（跟随、抖动、捕捉光线），以及引导视线从一个镜头到另一个镜头的匹配剪辑或连续转场。没有任何东西会无故弹出或消失。
- 一个令人惊叹的时刻。 为每个视频规划一个标志性节拍，通常是揭示环节：镜头飞越、变形、粒子爆发、用故事自身元素构建的 Logo。让音乐和音效与之同步。
这适用于菜单上的所有风格，包括极简风格：极简意味着用更少元素但更精心制作，绝不意味着扁平或平淡。用户的定制风格同样需要在这种方向内达到这个工艺水平。
在发布之前，查看画面序列并诚实地问：每个画面看起来都像一部美丽电影的静帧吗？每个镜头中都有深度、立体感和纹理吗？有没有一个时刻会让某人说“哇”？如果没有，那就还没准备好。在展示之前改进它。
工作流程
1. 从设置页面开始——在任何研究之前
首先要做的，无论请求如何表述，都是给用户页面。搭建项目文件夹，构建并发布：
python3 scripts/new_project.py <proj> "<Name>"
python3 scripts/build_page.py <proj> # 写入 <proj>/page.html
使用以下功能发布 page.html：{"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}}（db：保存的答案/编辑/选择；assets：文件附件；downloads：保存 MP4；comments：直接给你发消息的按钮）。用一两行告诉用户：填写设置，按下构建故事板，然后在这里说“构建故事板”。
然后设置你如何听到按钮点击（下一节），以便点击构建故事板就可以开始工作，而无需用户输入任何内容。
如果用户已经在聊天中提供了所有信息（创意简报、时长、风格……），不要让他们重复：使用 ArtifactData 自己填充 intake/current 并继续。如果页面无法在他们的视图中保存，则改为在聊天中询问相同的问题（风格菜单作为一条消息，然后是简短的 AskUserQuestion 轮次）。
从页面将工作交给你
每个需要你的按钮都在其下方显示一个交接卡片：一行说明你将做什么，确切提示，以及一个复制提示按钮。用户的唯一工作是将其粘贴到聊天中。每当你添加按钮或备用方案时都保持这种方式：从不使用一个光秃秃的“在聊天中说出 X”。
| 按钮 | 保存 | 提示（由用户粘贴） | 你做什么 |
|---|---|---|---|
| 制作视频（设置中勾选“跳过故事板”） | intake/current 中 skipDrafts: true | “制作我的动态视频，跳过故事板。所有内容都已保存在我的页面设置标签中“……”：一个终版视频，30 秒，横屏 16:9。” | 直接进入终版（参见“跳过故事板”） |
| 构建故事板 | intake/current | “为我的动态视频构建故事板。所有内容都已保存在我的页面设置标签中“……”：5 个方向，30 秒，横屏 16:9。” | 读取 intake，研究，构建草稿 |
| 选择这个方向 | choice/current | “我在我的动态视频页面“……上选择了“数据切分”（数字说话）。制作终版。” | 读取选择及其 edits，制作终版 |
| 请求 Claude 更改（终版） | 一个 requests 文档 | “请更改我的动态视频页面“……上的终版内容：” + 用户的文字 | 读取它 + 终版的 edits，制作下一个版本 |
| 字幕库 | captions/<board> | （无需提示——保存的选择，用于渲染） | 在渲染前读取它 |
| 音乐/旁白音量滑块 | mix/<board> | （无需提示——保存的电平，用于渲染） | 在渲染前读取它 |
| 渲染备用方案（无 WebCodecs/H.264、帧错误、保存被阻止） | – | “使用我最新的字幕编辑和音效，从我的动态视频页面“……”渲染终版 MP4。” | 使用 render.py 在服务端渲染，发送 MP4 |
当页面无法保存时（该视图中没有数据库），提示本身会携带所有信息：构建提示包含所有他们的设置答案，选择提示会命名方向。当收到一个粘贴的提示时，将其视为执行信号，读取已保存的内容，然后开始。不要再问。
当 Claude 会话可以观察页面时（ArtifactComments action:"watch" 成功；远程会话不能），页面也会直接发送相同的提示（comments.sendToClaude），卡片上显示“已发送给 Claude”，保留复制作为备用。在这样的唤醒时，读取线程，用一行回复你正在处理，完成工作，然后用一个简短说明更改了的内容来解析线程。永远不要按定时器轮询页面；试过，感觉很混乱。
2. 阅读创意简报并收集材料
ArtifactData get intake/current 给出：brief、url（可选）、content（粘贴的文本）、files[]（{name,type,id,url}；使用 Artifact read + path: <id> 读取每个）、duration、aspect（横屏/竖屏/两者）、count（1–5）、styles[] 和 sound[]（每个故事板一项；sound[i] = {music:{on, mood}, sfx}）、voiceover:{on, voice}（一个 Kokoro 语音 id 或 "auto"）、captions:{on, style:"designed"|"gallery"}、textLang（english | native | roman | mixed-roman | mixed-native）带有 lang2（另一种语言，默认乌尔都语）、skipDrafts（当他们选择“跳过故事板，制作视频”时为 true；此时 count 为 1，styles/sound 各有一项）、notes、buildRequestedAt。较旧的创意简报可能缺少语音和语言字段：将其视为无旁白、英语。较旧的创意简报可能有一个单一的 music/sfx 而不是 sound[]；将其应用于每个故事板。
视频可以关于任何内容——不仅仅是公司。根据提供的内容工作：
- 创意简报以及粘贴/附加的内容是演讲、想法、课程或演示的主要来源。提取信息、受众、节奏、难忘的台词和数字。
- 网站，如果提供：
scripts/extract_brand.py <url> <proj>提取候选 Logo（并在 Logo 为 SVG 时写入logo.js）、按使用频率排序的颜色、CSS 颜色/字体变量和字体族。使用 WebFetch 阅读重要页面以获取事实、标语和佐证。在使用之前查看你选择的 Logo。 - 没有网站也没有品牌：设计适合主题的外观；只有当品牌约束明显重要时才询问。
- 使用
scripts/fonts.py <proj> "<Family>" ...获取用于渲染的字体（Google Fonts 族；它会写入包含嵌入帧中子集的fonts.js）。
永远不要编造事实。当来源不一致时（例如，两个不同的员工数），使用一个，将另一个放在页面的标记中，并告诉用户——可编辑的脚本让他们可以解决。
3. 构建草稿方向
制作 count 个草稿，时长为你选择的 duration（任何秒数，不仅仅是预设值），使用选择的 aspect——从第一个草稿开始：
landscape：故事板正常（16:9，160×90 单位）。portrait：故事板带有aspect:'portrait'（9:16，90×160 单位），为竖屏框架设计——为垂直观看堆叠、缩放和调整节奏；永远不要裁剪横屏布局。both：每个方向是一个横屏故事板加上一个竖屏故事板，带有variantOf:'<landscape id>'和相同的字段键。页面将它们显示为一个标签页，带有 16:9 / 9:16 切换按钮和一个共享的脚本；选择涵盖两者；终版也是一对，每个画面比例分别渲染。
styles[] 中的每个插槽是以下三种之一：
- 菜单中的一种风格——将其用作用户的方向，并针对此主题进行解读（菜单是一个词汇表，不是一组配方）。
"custom: …"——用户用自己的话描述了他们的风格。忠实地遵循它；它凌驾于你自己的品味之上。合理地填补空白，只有当确实模棱两可或与创意简报冲突时才询问。"auto"——你有完全的自由。选择最适合此材料的任何风格，无论是否在菜单之外：发明一种风格，组合风格，从某种媒介或参考中借鉴。用一句话说明为什么合适。
方向应在风格以及视频如何到达其重点（其弧线和结局）上有所不同，而不仅仅是颜色。
草稿比终版更简单：实时时间、布局、品牌颜色、字体、Logo 和文字，但细节和动态更少。它们仍然需要满足上述质量标准：层叠深度、光线、质感和漂亮的外观，以便用户在已经看起来很棒的方向之间进行选择。一个扁平、平淡的草稿会低估方向并使选择更加困难。它们...