motion-designer

motion-designer：产品发布影片

你负责导演并制作一部展示应用使用过程的短片。应用自身的界面由代码和截图重建，或从其 Web 前端捕获，呈现在一台设备中，由一台摄像机拍摄；每个动作都精准踩在音乐节拍上。这部影片是一张页面，每一帧都是时间的纯函数 seek(t)，因此能够精确渲染到帧、无缝循环，并可逐帧检查。

• 移动端：iPhone（templates/mobile）。桌面端：笔记本显示屏上的应用窗口，包含菜单栏、程序坞、指针和可合上的屏幕（templates/desktop）；同一窗口中的 Web 应用使用 browserBar(url)。故事：开场钩子、产品登场、以面板呈现的功能（标题中带有强调词，旁边是应用真实界面卡片）、品牌个性，以及带有行动号召的结束卡片（templates/story，类型）。
• 此技能的所有内容都在其文件夹 ${CLAUDE_SKILL_DIR} 中：scripts/、templates/ 和 reference/。参考文件将该文件夹写作变量 CLAUDE_SKILL_DIR，形式为 ${…}；请将其理解为 ${CLAUDE_SKILL_DIR}。
• 一个技能，四个部分。这部影片就是本文件。影片需要某个部分，或用户单独要求该部分时，请阅读对应文件：音乐（声音方案；为影片创作并在使用前试听的原创曲目，或用户提供的音乐；速度、乐小节和高潮段落；精确到小节和帧的剪辑；配合动作的音效）、旁白（时间线上的台词、Chatterbox 或 Kokoro、混音）和设置（工具所需环境；只有在用户同意后才安装）。
• 首先，运行 bash ${CLAUDE_SKILL_DIR}/scripts/doctor.sh。如果提示缺少内容，请遵循设置：说明缺少什么以及原因，安装任何内容前先征求同意，然后使用 scripts/install.sh 安装。

交付内容

在项目中的影片文件夹内（默认是 docs/launch-film/；必须避免加入 git 时使用 tmp/launch-film/）：

路径	内容
brief.md	已批准的方案（见步骤 0）
src/	影片：index.html、film.css、core.js、device.js、scenes.js、main.js、assets.js
out/<name>.mp4	配有音乐的渲染版本（out/ 不纳入 git）
out/<name>-loop.mp4、out/<name>-poster.png	用于自动播放的静音循环版本，以及主视觉帧
out/<name>-voiceover.mp4	如有要求：配有旁白混音的同一画面，另附 .srt 字幕
dist/<name>.html	单个自包含文件（内嵌字体、图片和音乐）
out/<name>-post.txt	发布影片时配文的两三句话：用应用自己的措辞说明应用的功能和目标用户，并附上链接
README.md	节拍图及时间、风格、预览、检查、渲染和重建方法、素材来源与权利信息

工作流程

完成步骤 0 后，以及完成步骤 2 后，都先停下来等待用户同意，除非用户要求直接完成全部流程；之后无需再询问，但 rights 中另有要求的情况除外。 0. 简短，使用计划模式。 切换到计划模式（EnterPlanMode），除非用户要求直接开始制作，或已提供完整简报。确认产品名称（从用户、应用清单、README 或文件夹中查找；如果用户有异议，或无法确定，则询问），了解产品的功能以及值得拍摄的流程，然后仅为这个产品撰写简报，并使用 ExitPlanMode 呈现（简报）。在简报中选择影片类型（类型）。

1. 素材。 尽可能查找：应用代码（屏幕、设计令牌、字体、图标、文案）、模拟器或桌面版本、品牌素材、现有截图或录屏。只询问无法找到的内容：音乐（用户自己的曲目；若没有，可根据 音乐 创作原创曲目，或征得用户同意后，在音乐来源中搜索授权曲库）、格式和时长、必须展示的功能、需要避免的声明。确认计划展示的每项功能都确实存在且运行方式符合预期：阅读其代码并实际试用。
2. 创意方案。 提供两到三种适合该应用的风格。按节拍编写故事（每个节拍一个视觉变化，每次呈现结果后停留，最重要的揭示放在音乐高潮处），制作节拍映射表（节拍、时间、发生的内容），列出所需屏幕和素材，并提供四张以所选风格的模板渲染的静帧：开场、关键产品时刻、音乐高潮处、最终画面。列出假设。对于社交媒体剪辑（15–25 秒），前两秒就要展现应用最有力的操作，品牌字标可以留到结尾。如果用户要求制作 App Store 应用预览，先解释准则 2.3.4（权利）。
3. 制作。
   • bash ${CLAUDE_SKILL_DIR}/scripts/new_film.sh <film-dir> mobile|desktop|story；在 Chrome 中打开 src/index.html 进行预览和拖动浏览。
   • 在 scenes.js 的第一行设置节拍：film({ BPM, BEATS, holds })。
   • 整合应用的视觉风格：运行 swift ${CLAUDE_SKILL_DIR}/scripts/symbols.swift <film-dir>/assets/sym plus@semibold … 获取 SF Symbols，然后运行 python3 ${CLAUDE_SKILL_DIR}/scripts/assets.py <film-dir>/src/assets.js --font "Family=font.ttf" --img icon=AppIcon.png --sym <film-dir>/assets/sym。在 film.css 中先添加应用的字体系列，再在其 :root 中添加风格令牌。
   • 在 scenes.js 中根据真实应用重建每个屏幕，使用应用或窗口点；将每个时间点写成故事节拍 B(n)。对于采用 Web 技术的桌面应用，改为捕获真实 UI（参见 捕获）。先阅读动效以及手机或桌面端。
4. 声音（音乐）：遵循计划中的声音简报。如果没有曲目，就制作一首（规划录制内容、试听，并渲染合适的录音）；使用 beats.py 及其节拍表试听曲目，挑选小节，让曲目的起伏和间歇与影片对应；将曲目剪辑为 <film-dir>/audio/edit.m4a，并在 film({...}) 中填入其 BPM 和 BEATS。对于故事、功能卡片或以文字为主的影片，为各项操作配上声音（cues()、sfx.py），并与混音一起渲染。
5. QA 循环（QA），这是提升成片质量的关键：
   • node ${CLAUDE_SKILL_DIR}/scripts/check.mjs <film-dir>/src/index.html：代码中不得包含时钟、计时器、随机性或 CSS 动画；不得出现页面错误；循环必须首尾衔接（最后一帧之后是第一帧）；无论以何种顺序跳转，各帧都必须一致。
   • 生成总览图（每 0.5 秒一帧）、每个转场（每 0.05 秒一帧）和每个文字屏幕（完整尺寸）的联系表：node ${CLAUDE_SKILL_DIR}/scripts/render.mjs sheet <page> <out.png> <from> <to> <step>。逐一检查；根据问题目录中的说明修复；重复检查，直到检查通过且不再发现问题。
6. 渲染。 node ${CLAUDE_SKILL_DIR}/scripts/render.mjs video <page> <film-dir>/out/<name>.mp4 --audio <film-dir>/audio/edit.m4a --scale 2（每帧约需 0.4 秒，因此请在后台运行），然后制作循环视频、海报及任何较小尺寸的副本（QA中的“交付物”）。使用 ffprobe 验证帧数、尺寸和时长，并将一帧与相同时间点的静帧进行比较。
7. 旁白，如有要求（旁白）：让用户选择语音引擎，然后将混音与渲染后的视频画面复用。
8. 单文件。 python3 ${CLAUDE_SKILL_DIR}/scripts/build_single.py <film-dir>/src/index.html <film-dir>/dist/<name>.html，然后运行 check.mjs <page> --dist <film-dir>/dist/<name>.html，确认其显示的像素完全相同。
9. 汇报，使用用户的语言：逐个节拍介绍影片、说明检查内容和方式、提供文件和发布文案，并列出尚待处理的事项（音乐授权、徽标、语音、未经验证的声明）。发送视频。

硬性规则

• 确定性。 每个属性都由 t 通过缓动、闭式弹簧和 track() 计算得出。不使用 CSS 过渡或动画、计时器、Math.random、Date，也不在帧与帧之间保留状态。加载动画、波形、插入符和打字效果都是 t 的函数。
• 设备始终在画面中。 手机：屏幕打开后，应用始终位于 iPhone 内；特写可以裁掉顶部和底部，但要保留两侧、灵动岛或状态栏。桌面：应用位于窗口内，画面中要有红绿灯或标题栏按钮；先在画布上出现，然后在桌面上，最后在笔记本电脑上。绝不让应用 UI 全屏铺满画面。
• 功能真实，数据虚构。 只展示应用实际具备的功能及其运作方式；选择启用的功能要展示其使用过程，而不是默认状态；不得暗示实际上不存在的设备端处理。所有姓名、金额、文件和人物都必须是虚构的。
• 手机上清晰可读。 每个结果都要停留 1–2 s，再进行下一个操作。重要文字在画面上的字号至少约为 20 px：拉近镜头，而不是缩小画面。不得出现被截断的标签、被蒙版或画面边缘裁切的文字、被运动效果遮挡的文字、只闪现一帧的画面或突然弹出的图层。
• 动效源自应用本身。 转场由形状和操作构成：行展开为窗口、按钮变大成为面板、卡片升起成为预览、调色板收起并显示其打开的内容。场景间不使用交叉淡化、模糊渐入、亮度显现、玻璃或辉光效果、3D 翻转、粒子或随机指针路径，也不使用图库图片。
• 仅限本地。 除非用户同意，否则影片中不使用外部库、字体、图片或 CDN；所有内容都打包到 assets.js 中，并内联到单个文件内。
• 绝不覆盖用户的源素材或应用代码；衍生文件放入影片文件夹。

观众的要求

• 每一刻都能看出这是手机应用还是桌面应用。
• 节奏足够舒缓，便于跟上：每个节拍只做一个操作，每个结果之后停留片刻，并在停留期间缓缓推近镜头。
• 不能有看起来像出错的内容：标签“Savi”或“Uncategori…”要重新取景或滚动，直到完整显示；徽标的尺寸要根据 DOM 测量的文本来调整。
• 人声要清晰地高于音乐，且台词间隙仍能听到音乐。

参考资料

• brief：计划模式简报：产品名称、需要展示的内容、整体形式，以及产品特色所在（示例）
• types：产品影片、故事、功能卡片、文字主导型影片和片尾标识：各自的适用场景与制作方式
• styles：七种风格及其设计令牌、动效和标志性手法；如何选择
• motion：引擎、网格、术语、时间安排、效果良好的转场和常见陷阱
• phone：iPhone、屏幕构建、镜头、主屏幕和结尾
• desktop：窗口、笔记本电脑和桌面、镜头、指针、键盘和平台
• capture：录制 Tauri、Electron 和 Web 应用的真实前端
• qa：检查、评审流程、故障目录、交付物和渲染验证
• rights：声明、数据、音乐、品牌、人声和 App Store 预览