clementsprs/product-motion-film

高级产品动态演示视频

制作时长约 40 秒的产品宣传视频的配方，使其看起来像品牌自己的发布视频并充满活力：以 UI 驱动，没有人像，没有旁白，配有音乐和少量音效。该配方基于一个真实发布视频的大约 15 轮评审反复打磨而成，包括合作品牌自己的内容审查；下面的每一条规则都源于评审中反馈的笔记。

代码模式：references/remotion-patterns.md。 品牌洞察：references/brand-reading.md。 简报格式：references/brief-template.md。

首先需要收集的输入

1. 简报：每个功能一行（用户问什么，产品做什么，AI 回答什么）。如果没有，请编写它（references/brief-template.md）并在构建前获得批准。
2. 品牌的实时页面：最接近该主题的营销页面和产品应用程序，在浏览器中打开。
3. 用户提供的资源：标志（SVG）、图标、背景图案、合作伙伴和渠道徽标（真实文件）、已授权的 woff2 字体、虚拟人物的头像（生成或已授权），以及音乐：在生成音乐之前，先询问他们是否有喜欢的曲目。
4. 格式：首先制作 16:9 版本；只有在 16:9 版本获得批准后，才制作 1:1 和 4:5 的裁切版本。

如果你无法打开浏览器，请说明情况并要求提供截图。切勿凭记忆猜测品牌的颜色或字体。

1. 从实时网站和应用程序中解读品牌

通过页面中的一个小脚本（在 H1、body、主按钮、卡片上使用 getComputedStyle；参见 references/brand-reading.md）提取真实值：标题字体/字重/字间距、主要和次要灰色、强调色、卡片圆角和外轮廓、背景处理方式、标志性视觉效果（例如夜空背景）以及标志 SVG。将所有值写入一个 theme.ts，并注明读取的地点和时间；不要在其他任何地方使用颜色字面量。

基于通用动态套件构建的版本被拒绝为“不够高级，不符合品牌调性”：必须基于品牌自己的实时系统构建。

2. 结构：一次连续对话

部分	时长	内容
吸引钩子	~5 秒	展示其可协作的 AI，作为完整带名称的徽标，在一个芯片中切换，最后以所有图标一同展示结束；一段简短的两行声明（主要色 + 灰色）；产品标志强势显现（“<产品名称> 让它工作。”）
对话 ×4	每段 ~7-10 秒	提示词升起并自动在中间大号打出 → 发送，滑向右侧 → 状态行（“正在搜索 <产品名称>…”+ 真实工具名称，加载点 → ✓）→ 产品卡片出现在对话线程内并完全展示 → AI 的回复以消息气泡形式流入
结局	~3.2 秒	品牌的深色背景充满全屏（唯一的暗色时刻）；“[标志] 的全部力量，现在就在你的 AI 中。”；纯文本 URL

• 没有插播广告、没有标题卡片、顶部没有字幕。 一次讨论展示所有能力。每个新提示都是过渡：对话线程滚动，新消息升起将之前的对话推向上方。在一个步骤内部，镜头运动顺序为：提示 → 产品卡片 → 回复。

• 一次只聚焦一件事。 没有分屏显示聊天内容在一侧、产品在另一侧（“屏幕上信息太多”）。

• 全程浅色背景。 产品结果作为卡片存在于对话中；电影中途出现的深色面板感觉像突兀的剪切。深色仅用于结尾卡。

• 当产品可与任何 AI 协作时，保持 AI 中立（如 MCP 服务器、公共 API）：聊天中不出现任何单一助手的徽标、字体或颜色。标题 = 一个“<产品名称> MCP”芯片 + “与以下 AI 协作” + AI 图标；回复使用产品的正文字体，并在仍在加载的词语上添加产品颜色的尾部。

• AI 以消息气泡说话（白色，左侧，与用户的灰色气泡相对）。纯回复文本读起来像字幕，“不是对话的一部分”。不需要头像。

• 在回复之前完成执行：回复仅在卡片完成后才开始。步骤长度 = 打字时间 + 状态时间 + 卡片自身执行时间 + 回复时间。

• 移动端尺寸：在 1920 × 1080 的画布上，提示约 62 px，状态约 44 px，回复约 58 px；产品卡片缩放约 1.2-1.4 倍（每张卡片单独设置，以确保最高的卡片仍能避开标题）。

• 代理主导变体（产品本身就是 AI 代理）：语法相同，但角色互换。代理先写（白色气泡，其标记和名称标记在标题中），用户决定（灰色气泡，带有实时波形和转录的语音笔记）。展示设备，而非描述：一个手机场景以锁屏打开，显示代理的推送通知落下，然后点击一下，横幅像打开应用一样扩展到全屏，对话就在其中；应用图标是代理的脸，放在白色瓦片上。设备通过宽度展示：手机场景位于手机框架内（窄列，通知在其中打开），笔记本电脑场景使用全宽度；框架在两者之间弹开，整个历史记录会重新排布到新的宽度（将对话线程布局两次，手机和笔记本电脑，并将位置和大小与框架混合），这样对话永远不会消失。只命名一次设备（“在你的笔记本电脑上”），之后的分隔线只显示时间。切勿为了达到时长而剪掉证明场景（客户故事、参考文献）：它可能会在请求时被要求恢复。在代理主导的电影中，代理的小标记位于其每条消息旁边（与 AI 中立的 MCP 电影不同）。跨设备的场景将成为一个上下文标题芯片，会翻转（“在你的手机上 · 8:42 AM”→“在你的笔记本电脑上”）加上对话线程中的时间分隔线，绝不使用设备框架。将其构建为一个项目列表（代理/用户/语音/卡片/分隔线，每个都有阅读时长），并从中计算开始时间、布局和滚动镜头。

• 主动代理变体（外部首选）：当重点是代理为你工作时，根本不显示聊天。代理主动推送（一行标题，使用其声音 + 一张卡片），用户只需轻点接受或跳过（按压 + 波纹效果，然后出现一个“已接受”芯片；当代理推送列表时，每行提供跳过/接受按钮）；当推送的卡片已有自己的操作按钮（如“添加到今天的通话”）时，用户点击该按钮，则不再需要单独的接受行。用户输入指令（如“剪掉开头然后发送”）读起来像普通的 LLM 聊天。允许一个超越“接受”的时刻：用户提出一个代理能提供见解的问题（如“关于 Tom，有什么我需要知道的吗？”）或要求代理现场执行额外操作；绝不允许更正文案。外部版本的开头要充满能量：一堆真实应用的通知堆积并震动，然后被甩开，接着出现“太多线程了。”，代理的标记强势显现。

3. 文案

• 提示听起来像是同一个人在继续对话：通过引用之前的内容来体现连续性（例如“对他们来说”、“这些信号”、“运行这个”），最多只有一个轻微的反应。不要在每条提示上都使用赞美之词。
• 具体且体现价值，在步骤间使用共享的词汇（例如，每条提示中都使用“购买意向信号”）。
• 少量数字：钩子中不使用数字（无价格）；数字出现在卡片内部。有声明性的数字必须在简报中有来源；UI 中的数字需标明是说明性的；人物和公司均为虚构。
• 状态行使用真实工具或 API 名称，并对照产品的实际工具列表进行检查。切勿虚构工具名称。
• 用徽标代替文本：结尾行中使用标志图形；标志图形 + 文字组合保留其文字间距。URL 旁无箭头或按钮：视频中没有任何可点击的元素。

4. 产品卡片：展示 AI 实际做了什么

• 每个步骤一张卡片，3-4 行，产品完整标志位于标题中。
• 定性的、AI 时代的输出，而非底层机制：不要使用 {{firstName}} 合并标签（“对于 AI 时代来说不够定性”）。展示为一条记录实时编写的真实消息，从数据中提取的短语用标记笔高亮，并附带一行说明角度。
• 工作流是带有条件分支的流程（步骤使用其实际词语 → “等待 3 天”→“未打开”→ 邮件 / “已打开，无回复”→ 带有实时波形的语音消息），而不是一行日期图标。卡片随着流程的绘制而向下增长：永远不要有空块。
• 真实的渠道徽标（例如 LinkedIn、Gmail）使其看起来真实。
• 状态列表是现代运行日志：细条填充，待办项用点 → 旋转环 → 品牌颜色中填充的勾号，每步一个结果行，一个小型时长指示器。带绿色勾号的方块图标读起来像“老派”。
• 状态变化是一个独立的时刻：切换开关等待卡片落地，然后轨道淡入，旋钮压扁，脉冲环扩散，“活跃”标签弹出，然后运行才开始。
• 剪掉与显示的动作无关的 UI（例如，在有调度步骤的卡片上放一个团队聊天回顾卡片“说不通”）。

5. 运动语法：元素动态，停留可读

目标：像高端的发布视频那样，每个元素都有物理感（公开示例：Allo 的 “We decided to give Grok Bot a phone”，2026年10月；不需要吉祥物）以及 AI 助手自己的发布视频（无边界的对话，大号字体）。

• 对所有到达的元素使用弹簧效果，而非缓动函数（使用 spring() 并带过冲；模式文件中有预设和一个阻尼的 kick() 函数）。
• 词语弹性升起，稍微倾斜，并相互推动以形成一行；旧行被抛开，而不仅仅是淡出。标志猛烈出现，线条抖动一次。
• 对话线程相机：根据文本长度估计布局对话线程，并在焦点之间使用柔和的弹簧效果滚动（新提示居中 → 卡片居中 → 回复可见），在发送和卡片落地时添加小的冲击效果。标题位于白色渐变之上，以便滚动的内容在其下方滑过。
• 卡片以弹簧效果落地（轻微倾斜，工具调用落地时有一个小的弹跳）；行滑入，标签和勾选标记弹出，条形图过冲，预览翻转。
• 停留时间要长，运动要快：3.2 秒的步骤被反馈为“太快了，我们读不完”。动态感来自快速的入场（0.3-0.6 秒），而不是缩短停留时间。回复速度约 9 词/秒，在下一条提示前约 1 秒。当时长与可读性冲突时，可读性优先：提供删除一个步骤的选项。
• 无硬切，无整帧交叉淡入淡出：保持一个连续的空间。

6. 音乐和音效

• 感觉良好、活泼、现代：~115-122 bpm，清脆有力的鼓点（没有俱乐部式底鼓）、有弹性的贝斯、拨弦/吉他/马林巴、拍手声和响指声。审核中已拒绝的方案包括：平静的钢琴背景音乐（“不够动态”）、四拍地板电子流行音乐（“太夜店风”）、任何复古风格（“不显老旧”）。
• 如果选择的曲目太短（库存律动通常约 25 秒）：在乐句边界重复其完整部分的整个 4 小节块，在电影开头跳过其前奏以保持高能量开场，在最后一帧保留其真实结尾。切勿对选定的曲目进行时间拉伸。配方在模式文件中（“音效”部分）。
• 生成音乐：请求电影的确切长度，并在基于其构建之前检查每秒的响度；模型会忽略提示的结构（有一次生成的音乐在停止前安静地播放了 15 秒）。模式文件中有一个有效的提示示例。
• 音效仅在有可见原因时使用（徽标切换和卡片落地时的弹出声、发送时的点击声、提示升起和结局时的柔和风声、最后一步打勾时的叮当声）。混音至约 -14 LUFS。

7. 质量：极致清晰锐利

• 主渲染使用 2 倍超采样（--scale=2，CRF 14，JPEG 100，x264 slow）；审核轮次可以使用直接的 1080p 渲染。
• 大表面上不使用 CSS 模糊；不大面积使用 box-shadow 模糊（Chrome 会对其产生带状伪影，请使用径向渐变）；使用本地 woff2 字体并设置有限等待时间；使用 fill="currentColor" 的 SVG 在 <Img> 内部会渲染为黑色，需重写填充属性。
• 仅画面变更：渲染一次 --muted 版本，将每个音频混音渲染为 WAV 文件并混合。仅音频变更：将新音频混流到现有画面上。

8. 构建和审查循环

1. 搭建一个 Remotion 项目（结构在模式文件中），填充 theme.ts，将用户的资源放入 public/。
2. 按以下顺序编写电影：徽标列表 + 吸引钩子文案，PROMPTS，TOOLS，STATUSES，REPLIES，每个步骤的一个卡片组件及其高度和缩放比例，然后是时间线常量（开始和时长被计算出来），最后是音乐偏移量。
3. 在完整渲染之前，对每个步骤进行静态帧检查（npx remotion still … --frame=<秒 × 60> --scale=0.5），制作成联系表：检查重叠、换行、卡片是否在标题下方、空块、残留的单助手品牌标识。
4. 首先发送 1080p 版本用于审查；仅在批准后才能制作 4K 和社交媒体版本。将每一条修改意见在同一天内写回到此技能文档中。

卡片高度是测量出来的，而非猜测：对话线程布局会预留每张卡片的高度，而低估会导致下一条消息滑到卡片下方（某回顾卡片预留了 452 px 但实际渲染约 530 px，导致重叠）。计算真实部分的实际高度（标题 + 内边距 + 行数 × 行高），然后在完整渲染之前，检查每张卡片最终状态的静态帧及其后面的项目。

何时完成

• 它读起来像一次与 AI 的对话，一次只聚焦一件事，在手机上首次观看时每一行都清晰可读。
• 每个步骤在产品内部完成执行后 AI 才回答；每张产品卡片都显示了具有真实渠道徽标的、定性的真实输出。
• 没有元素在无动画的情况下出现或消失；结束卡之前没有暗色元素。
• 颜色、字体和徽标与品牌实时页面匹配；1080p 裁剪清晰锐利；音乐以全能量开场，在最后一帧结束。
• 每个字体、徽标、图片和音频文件都是自有、已授权或生成的，并且你能够说明其来源。

评审中已拒绝的方案（请勿重复）

通用动态套件 · 3.2 秒步骤 · 平静的钢琴背景音乐 · 四拍地板俱乐部节拍 · 分屏聊天+产品 · 顶部固定字幕 · 全屏插播标题卡片 · 电影中部的深色面板 · 在“与任何 AI 协作”电影中使用单个助手的品牌元素 · 合并标签 · 用于工作流的一行日期图标 · 带绿色勾号的方块图标 · 纯文本回复 · AI 头像 · 每条提示上的赞美词 · 与主题无关的 UI · 粘合在一起的标志+文字 · 钩子中的价格 · URL 上的箭头。

相关

• ai-video-director：包含人物的 AI 生成素材。当电影需要真人在屏幕上时使用此技能；本技能仅限于 UI 内容。