remotion-ad-video

Remotion 广告视频

概述

使用此技能，通过 AI Agent 和确定性代码渲染器制作以效果为导向的广告视频。Agent 负责创意和制作工作流。Remotion 是默认渲染器；当用户要求使用基于 HTML 的视频创作方式或提供了现有 Hyperframes 项目时，也支持 Hyperframes。

适用场景

用于：

• 默认将产品链接制作成 15s 广告视频；只有用户要求更长格式时，才制作 30s 或 45s 视频。
• 将 Google Play、App Store、SaaS 或落地页制作成产品介绍广告。
• 为 TikTok、Reels、Shorts、Meta 方形视频或 YouTube 横屏视频批量制作不同版本。
• 将产品简介转化为脚本、分镜、Remotion props 或 Hyperframes variables，以及渲染 QA 检查清单。

不适用于：

• 广告转化并非目标的长篇编辑类视频。
• 确实无法使用的素材：授权的第三方音乐、名人或可识别个人的肖像，或你没有使用权的付费图库素材／字体。
• 受监管的医疗、金融、法律或收入相关声明，除非用户提供了经批准的文案。

素材与声明政策（默认务实，而非过度限制）：

• 此技能为投放付费广告活动的广告主（效果营销／UA／联盟营销／代理机构）制作广告创意，而非为产品的内部员工制作。将产品或应用自身公开的素材视为标准创意输入：商店图标、截图、功能宣传图、Open Graph 图片、Logo 和品牌色。默认收集并使用这些素材。不要因为等待对公开商店素材的“权利确认”而耽误工作。
• 可使用公开的商店指标——评分、下载量、评论数。使用真实数据，并注明来源商店（例如“Google Play 4.0★，10M+ 次下载”）。绝不捏造或夸大数字。
• 广告主负责其投放渠道最终的商标、比较性声明和授权决策。在交付时指出仍需由广告主承担的责任；不要因此阻止制作。
• 生成的占位素材仅用于确实缺少素材的情况（例如无法可靠地提取正确截图），而非默认选项。优先使用实际收集的素材。

核心工作流

1. 信息收集

仅收集广告所需的源材料。对于 URL，如果工具可用，则检查在线页面；否则询问产品名称、目标客户、核心卖点、截图、Logo 和品牌限制。 当素材质量、声明安全性或素材权利不明确时，加载 references/ad-intake.md。 对于每个 URL 任务，在编写分镜脚本或代码前加载 references/ad-brief-contract.md。完成素材分类后创建或更新 ad-brief.json，并将预检问题的答案和默认值保存在其中。 对于基于 URL 的任务，在编写分镜脚本前加载 references/asset-harvest.md。 对于技能测试、首轮迭代，或用户在意速度时，加载 references/fast-test-workflow.md。 当用户要求使用 Hyperframes、目标仓库已使用 Hyperframes、开源渲染器许可是优先事项，或 ad-brief.json 中的 renderEngine: "hyperframes" 时，加载 references/hyperframes-output.md。 对于仅提供 URL 的任务，在编写分镜脚本或代码前加载 references/preflight-questionnaire.md。首先准确询问两个必选的预检选项：格式和创意路线。只有在用户明确要求不提问、尽可能采用最快默认值，或以推断默认值运行基准测试时，才跳过问题。完成这两个选项后，仅在后续可选问题会实质影响广告时才提出。 当用户需要选择竖版、方形或横版输出时，加载 references/platform-presets.md。 当产品类别不明显属于游戏或社交信息流模式时，加载 references/industry-angle-library.md。 对于休闲游戏、手机游戏、应用商店游戏列表、益智游戏、超休闲游戏或简单游戏循环，加载 references/game-ad-patterns.md。 对于短视频、社交、创作者、UGC、直播购物、社区或内容信息流应用，加载 references/social-feed-ad-patterns.md。 当用户需要多个选项、批量广告，或商业品质的广告而非单个样例时，加载 references/variant-system.md。 在任一渲染引擎中实现动态效果前，加载 references/motion-language.md。其中包含缓动、错落和动态排版的术语体系（Remotion 的 src/motion.ts + KineticText，或 Hyperframes 的 GSAP），可避免动态效果退化为平淡的线性插值。

语言政策：

• 面向用户的预检问题应使用用户当前的对话语言。如果用户使用中文聊天，即使源 URL 为英文，也应使用中文询问 format 和 creativeRoute。
• 根据采集到的标题、描述、截图或列表文案，或页面文本，识别来源语言。默认使用检测到的来源语言生成视频脚本、字幕、CTA 和屏幕文案。
• 在 ad-brief.json 中记录 interactionLanguage、sourceLanguage 和 outputLanguage。只有用户明确要求使用其他视频语言时，才更改 outputLanguage。

必需决策：

• 产品或应用名称。
• 目标客户及其痛点。
• 尺寸预设和精确尺寸：竖版、方形或横版，除非已指定平台专用格式。
• 时长：短视频广告默认为 15s；仅当需求需要更深入的说明或用户提出要求时，才使用 30s 或 45s。
• 一个主要转化目标。
• 可用素材及其权利状态。
• Remotion 许可是否适合预期的商业用途。
• 渲染引擎：按以下顺序确定：用户或调用方明确指定的选择、目标项目现有技术栈，然后是本地渲染器是否可用。如果 Remotion 和 Hyperframes 都可用，询问用户使用哪一个。如果两者都不可用，建议选择一个安装。

记录的默认值，无需用户决定：

• 对于快速 URL 任务、快速测试和首轮迭代，音频模式默认为 sfx-only。对于商业品质、批量制作或“更有创意”的请求，默认采用完整音景——music-sfx 加脚本化旁白，无需询问。大胆的广告若没有旁白，且只重复播放点击声，会显得单薄。仅当用户要求适合静音播放、指定音乐方案或指定平台声音方案时才询问。 URL 任务至少必须尝试获取网站图标、触控图标、Open Graph 图片、可见徽标或截图，以及品牌颜色。电商商品 URL 还必须在创意工作开始前，使用 scripts/harvest-ecommerce-assets.mjs 尝试获取商品主图；链接中的商品是广告主体，平台／商店背景应处于次要位置。将可用的公开素材保存在生成项目的本地 public/<brand>/ 文件夹中；条件允许时创建或更新素材清单，并使用 staticFile() 引用素材。

对于 URL 任务，在创意工作开始前运行 scripts/classify-ad-source.mjs。已知当前用户语言时，传入 --interaction-language <current-user-language>；在现有项目中工作时，传入 --project-dir <target-project>；仅当用户明确选择了渲染引擎时，才传入 --render-engine remotion|hyperframes。否则让 --render-engine auto 自动检测引擎。如果项目目录存在，将其输出写入 ad-brief.json。该简报是来源类型、语言计划、渲染引擎、渲染引擎选择原因、预检默认值或答案、格式、音频模式、阻碍项和素材要求的事实来源。如果 ad-brief.json 中存在阻碍项、包含 preflight_answers_required、render_engine_choice_required 或 render_engine_install_required，或者 assetPlan.status 为 blocked／user_required，则停止并询问缺少的决定或素材。使用 interactionPlan.choiceQuestions 作为创意预检的第一步：仅先询问格式和创意路线，并使用 interactionLanguage。如果 Agent 支持结构化选择界面，请在那里呈现选项；否则使用包含相同选项的文本备用方案。音频默认使用可听见且同步的音效；仅当用户要求静音安全方案、音乐、配音或平台专属声音方案时，才询问音频相关问题。不要一开始就提出较长的开放式问题清单。仅当用户明确同意跳过问题时，才使用 --preflight-mode defaults。

2. 策略

编写场景前，先选定一个主要广告切入角度。实施前加载 references/creative-direction.md，避免产出静态幻灯片式内容。从一个 insight（唯一真实的客户痛点或经批准的惊人事实）出发，而不是从模板入手。

• 痛点钩子：先展示问题，再展示产品如何解决问题。
• 演示证明：展示产品或应用如何完成工作。
• 优惠转化：折扣、试用、套餐或截止日期。
• 社会认同：评分、评价、成果或使用证明。
• 对比：前后对比，或新旧方式对比。
• 游戏玩法奇观：对于简单游戏，与其解释功能，不如模仿其高能核心循环。
• 信息流原生奇观：对于社交或短视频应用，模仿快速滑动、创作者片段、直播／商店叠加层、评论／点赞栏和声音响应式剪辑。

将声明标记为 observed（页面上的事实，以及评分、下载量和评价数等公开商店指标）、user_supplied、inferred 或 blocked。可自由呈现 observed 和 user_supplied 声明，包括注明来源商店的真实公开商店数据。不得呈现 inferred 或 blocked 数字，也绝不可捏造或夸大数据。

每个真实的商业案例都需要一个能让人停下拇指的视觉创意，而不只是文案。例如：聊天气泡变成已完成的任务、工作流前后对比并迅速简化、产品截图爆发出各项功能，或终端命令触发可见的自动化效果。

每个创意在编写分镜或代码前，还需要一个大胆的版式构想：海报级大字、一个主导视觉、不对称构图、激进裁切、超大产品／应用画框、动感分屏，或分阶段揭示。避免规整居中的幻灯片式布局，除非对比或动效能让它更像广告。 默认采用大胆风格。品味得体、克制且适合演示的广告会让人划走。让每个创意都突破舒适区：至少加入一种奇观手法（超现实尺度、不可能的物理效果、扭曲世界、夸张的前后对比、极致动感爆发、戏剧化的利害关系、UI 焕发生命力或时间断裂——即 spectacleMove 枚举），营造出「等等，什么？」的瞬间。夸张只体现在视觉和情绪层面——所有数字和事实声明都必须真实且有来源依据。阅读 references/creative-direction.md（大胆为先）和 references/ad-exemplars.md（奇观／夸张手法），了解相关方法。

如果有来源支持的数字证明，就将其设计成动态效果，而不是静态文案：评分逐步递增，折扣从 0 跳变到最终百分比，价格或节省金额滚动到位，下载／评论数逐步上涨，分数像游戏 HUD 一样爆发显现。最终值必须使用准确且获准的数字，绝不可为不受支持或夸大的声明制作动画。

对于简单游戏，尤其是应用商店列表中的游戏，视觉创意通常应模拟游戏玩法：棋子下落、交换、合并、碰撞、分数弹出、爆炸、升级时刻、险些失败时的救场，或奖励连锁。静态截图只能作为证明素材，不能单独充当广告。

对于短视频、创作者或社交信息流应用，视觉创意通常应模拟原生信息流：手机画面滚动或切换内容、创作者图像、UI 栏、声音／效果贴纸，以及有来源支持时使用 LIVE 或 Shop 标签；快速剪辑应让人感觉像平台本身，而不是产品讲解。

除非用户指定了唯一的确切方向，否则每项任务都必须在实现前编写 concepts.json。快速测试和快速 URL 任务使用精简版本（3 个创意，每项字段一行）——允许降低分辨率，不允许降低创意水准；过去「仅适用于商业品质」的例外条款，正是默认任务会产出模板填充内容的原因。至少生成三个彼此不同的创意（钩子机制和 structure 各不相同，而不只是颜色／文案不同），每个创意都要有 signatureMoment（只有这个产品才能拥有的画面）和 spectacleMove，使用 references/variant-system.md 为其评分，并遵循 references/concept-contract.md。从 references/ad-exemplars.md 中借鉴手法，让创意达到优秀广告的水准，而不是套用现成模板。然后进行关卡审核：

node scripts/validate-creative.mjs <project-dir>/concepts.json

关卡通过前，不要开始制作分镜。选定的创意必须在 attention、distinctiveness 和 boldness 上至少得 4 分，在 claimSafety 上至少得 3 分；其 structure 不得悄然默认采用现成的「钩子／痛点／演示／证明／行动号召」结构，除非记录了 forceDefaultReason。attention、distinctiveness 或 boldness 得到仅仅算合格的 3 分并不足以发布——请选择或修改创意，使其更大胆。boldness 评估的是创意有多夸张、多戏剧化，绝不是声明有多真实。实现最强或用户选定的创意，并确保分镜体现其 structure、firstFrame 和 motionIdea。

3. 分镜脚本

编码前先创建带时间标记的分镜脚本。加载 references/storyboard-contract.md，了解场景约定。 除非用户明确要求使用其他语言，否则所有面向视频的文案均使用 ad-brief.json 中的 outputLanguage。

没有默认结构——根据所选概念的 structure 推导场景列表（参见 references/storyboard-contract.md 中的 Mapping rules）。15s 时始终适用以下严格节奏要求：

• 钩子必须在前 2 秒内出现，同时让产品可见。
• CTA 至少占用 2.5 秒并保持画面（最终场景不设 transitionOut）。
• 钩子与 CTA 之间的所有内容都应服务于该概念——非线性结构（CTA 提前呼应、三段递进、倒计时反转、单镜头）都可以；参见 references/ad-exemplars.md（Structure-Diverse Shapes）。
• 场景超过 2.5 秒时，必须加入次要节拍（冲击效果、指标跳动、重新入场、转场预备）。

每个节拍只呈现一个视觉创意。避免在视频中放入大段文字；优先使用适合手机屏幕的短句。大多数场景最多使用一个标题和一条辅助文案；应将主导词语或数字放大，而不是把许多文本块做成相同大小。如果场景使用有来源支持的数值声明，请加入包含 from、to、prefix/suffix、decimals 和简短标签的 metric 方案，以便渲染器为数值制作动画。游戏应使用快速动态镜头；可以剪切，但每个镜头都应包含游戏过程、产品动态、角色或世界动作，或视觉亮点，而不是静态信息卡。 对于社交或短视频应用，应使用剪辑。每个镜头都应像信息流片段、创作者视频、通知、声音提示、直播/购物时刻或行动提示，而不是静态功能卡片。 添加音乐、音效、旁白、字幕或静音自动播放的可读性处理时，加载 references/audio-caption-system.md。

4. 模板

如果项目不存在且 renderEngine 为 remotion，请将 assets/remotion-template/ 复制到目标工作区。如果 Remotion 项目已存在，则适配其现有包管理器、入口文件和组件风格；若缺少 @remotion/google-fonts，请安装该依赖；即使 fontPreset 保持为默认的无网络选项，模板也会导入它。

如果 renderEngine 为 hyperframes，请复制 assets/hyperframes-template/ 或适配现有的 Hyperframes 项目。Hyperframes 输出为原生 HTML：index.html 是合成源文件，variables.json 存放已批准的广告文案和素材路径，QA 使用 npx hyperframes lint、inspect、preview 和 render。实施前加载 references/hyperframes-output.md。制作新广告时，编写原生 Hyperframes HTML；除非用户明确要求迁移现有 Remotion 源文件，否则不要使用 Remotion 到 Hyperframes 的移植工作流。

Remotion 模板规则：

• 使用 Zod 模式定义输入属性。
• 场景应由数据驱动，而不是硬编码。
• 将每个场景的 block 设为一种场景块类型（cold-open-payoff、split-before-after、device-frame、stat-slam、hero-morph、ui-takeover、charge-reveal、cta-card 或 standard），让所选概念的 structure 渲染出不同的布局和动效，而不是重复使用同一种卡片。将概念的结构场景块映射到这些模板块；添加新的块组件，而不是强行让每个场景都走 standard。ui-takeover（假通知展开成主视觉）和 charge-reveal（进度条挤压→猛击）是专门设计的钩子块——优先使用它们，而不是另想一个较弱的开场。
• 使用 Remotion 的 Composition、Sequence 和 AbsoluteFill。
• 将平台、尺寸、时长、品牌颜色、CTA、优惠、免责声明和场景设为参数。
• 将所选的 format / platform 映射到实际的合成尺寸和场景布局。方形和横版输出不得原样沿用竖版布局。
• 优先使用采集到的真实产品／应用／商店素材（图标、截图、宣传图、OG 图片、品牌颜色）。仅在确实缺少素材时使用生成的占位内容，并清楚标记。
• 默认使用应用／产品的公开商店素材（如果提供了 URL）；它们是安装／UA 广告的标准输入。将素材存放在 public/<brand>/ 下，并通过 staticFile() 引用。
• 当评分、折扣、价格、节省金额、评论数以及游戏／应用分数等数字有来源支持时，支持对其使用动画指标／计数器属性。
• 默认通过属性添加生成并同步的 SFX。使用多样化的生成 SFX 音效库，并提供与帧锁定的 startFrame、类别、场景／锚点同步元数据和可见事件提示描述，而不是重复使用同一种点击声。将音频视为默认实现细节，而非必需的前置检查或 QA 门槛。只有当用户要求静音场景适用、音乐、配音或平台专属声音时，才规划或验证特殊音频。
• 用户要求音乐时，支持 music-sfx，并搭配生成的、获授权的或用户提供的音乐底音以及与画面锁定的 SFX。快速 URL 任务和快速测试默认使用 sfx-only。
• 对于商业品质、批量或“更有创意”的请求，默认使用完整音景：音乐底音 + 密集 SFX + 脚本化 voiceover。根据 references/audio-caption-system.md（配音脚本创作），以 outputLanguage 编写配音内容，包含 3–5 段口播节拍，并变化演绎方式（活力、语速、语气）。生成的 TTS 语音使用 rightsStatus: generated。
• 至少添加三种动效系统：动感钩子、动画化的产品／素材展示，以及 CTA 强调。将概念声明的 spectacleMove 作为真实的屏幕节拍呈现（机制参见 references/ad-exemplars.md），让广告拥有那个“等下，什么？”的瞬间。
• 使用 references/motion-language.md 中的动效词汇，而非直接使用线性的 interpolate。使用 src/motion.ts 中的缓动函数（入场使用 power3Out，计数递增使用 expoOut，弹出效果使用 backOut / springPop），并用 staggerDelay 依次展示多个元素；通过 KineticText（拆分单词／字符）展示标题和 CTA，而不是让整块文本淡入。对于共享元素展示（截图→主视觉、前后对比），使用 FlipMove（hero-morph 块可作为现成示例）；对于奖励／奇观／游戏节拍（彩纸、金币、分数弹出、爆炸），使用 Burst。
• 为每个场景边界设置定向衔接，通过 scene.transitionOut 使用 whip-left / whip-right / whip-up、zoom-punch、luma-wipe 或有意设计的 cut。绝不可发布全程使用 fade 的广告，也不要在相邻边界重复相同类型，并在每个边界帧同步一个 SFX（sfx-whoosh、sfx-impact、sfx-swipe）。最后一个场景不设置转场，让 CTA 保持展示。
• 每条广告至少设置一个实体冲击点：使用 scene.impact: { atFrame, strength } 节拍（闪光 + 镜头抖动），或使用块内置的猛击效果（指标锁定、CTA 弹簧效果），并在同一帧同步 sfx-impact / sfx-sub-boom。如果奖励节拍需要，可通过 scene.celebrate: { preset } 触发 Burst 效果。
• 选择与品牌风格相符的 fontPreset（bold-geometric、condensed-impact、editorial-serif、rounded-friendly、mono-tech），而不是默认使用 clean-sans 的 Inter 风格；非默认预设通过 @remotion/google-fonts 加载（每次渲染需要联网一次）。恰好为一个场景（通常是 stat-slam 或 cta-card）设置 colorMode: "inverted"，让广告出现一处颜色变化。
• 音频方案包含配音时，还要在 props.captions 中填入与语音同步的逐词卡拉 OK 字幕（时间戳与配音音轨一致，并为数字和有力词语设置 emphasis: true）——大多数信息流默认静音播放，没有字幕的配音实际上等同于不存在。参见 references/audio-caption-system.md（卡拉 OK 字幕）。
• 除非概念的美术指导要求扁平风格，否则保持影片质感效果（finish.grain / finish.vignette，默认开启）启用。
• 对于简单游戏，至少加入一种受公开截图或商店描述启发的自定义游戏循环动画。
• 确保移动设备上的文字易读；不要依赖密集的正文文本。 Remotion 实现细节请尽可能使用 Remotion best-practices 技能，尤其要遵循合成、参数、素材、时间、转场、音频和字幕规则。

Hyperframes 模板规则：

• 在根合成上使用 data-composition-id、data-start、data-duration、data-width 和 data-height。
• 在每个片段上使用 data-start、data-duration 和 data-track-index。
• 通过 data-composition-variables 声明可编辑字段，并使用 variables.json / --variables-file 传递值。
• 在 variables.json 中包含 width、height 和 layoutMode，并在渲染前将这些值写回合成的 data-width / data-height。
• 使用 window.__hyperframes.getVariables() 获取文案、CTA、颜色和本地素材路径。
• 在 window.__timelines 中注册一个已暂停的 GSAP 时间轴。使用 references/motion-language.md 中的缓动／错开动画术语（此路径直接使用 GSAP）：入场使用 power3.out，数字递增使用 expo.out/power3.out，弹出效果使用 back.out(1.7)，多元素揭示使用 stagger。
• 产品／应用视觉素材应存储在本地并经过权利审查。最终输出不得依赖远程 URL。

5. 渲染 QA

交付前请加载 references/render-qa-checklist.md。

最低检查要求：

• Remotion：通过类型检查／构建，并为钩子段、中段和 CTA 段渲染静帧。测试和迭代时，先使用低分辨率的快速实验室静帧，再渲染完整 MP4。
• Hyperframes：预览／渲染前通过 npx hyperframes lint 和 inspect 检查。
• 文本不得溢出或重叠。
• 视觉素材必须存在，不得为空白。
• 钩子段、中段和 CTA 静帧应展现不同的视觉状态。
• 有来源支持的数字证明应动画递增至准确的最终数值，不得渲染成纯文本的静态证明卡片。
• 每项任务都须通过 references/ad-aesthetic-qa.md 中的广告美学 QA（快速测试可进行精简检查——浏览评分表并修复明显不合格之处；商业级作品须进行完整评分）。
• CTA、优惠内容和免责声明须与获批文案一致。
• 删除或改写任何缺乏依据的声明。
• 报告输出文件和命令。

技能测试默认输出半尺寸草稿视频；对于不影响功能的问题，不要重新渲染完整尺寸 MP4。使用 references/fast-test-workflow.md 中的阻塞／非阻塞问题划分。

输出约定

请返回：

• 来源摘要及声明可信度。
• ad-brief.json 路径或内联摘要，其中包括来源类型、interactionLanguage、sourceLanguage、outputLanguage、renderEngine、预检答案／默认值、阻塞项、格式和音频模式。
• 预检假设或用户答案，包括尺寸预设和创意路线。
• 选定的广告角度和目标平台。
• 脚本和分镜。
• Remotion props JSON 或 Hyperframes variables.json。
• 已更改的文件或模板路径。
• 验证证据。
• 已知的权利、许可证或素材缺口。

常见错误

• 做成泛泛的产品视频，而不是有转化目标的广告。
• 尚未确定钩子、证明和 CTA，就开始编写 Remotion 代码。
• 制作类似 PPT、通过淡入淡出衔接的一连串文字卡片。
• 用平直的线性 interpolate 动画处理所有内容（没有缓动、错开效果，整块文字一起淡入），导致动画显得廉价——请使用 references/motion-language.md 中的缓动／错开动画／动态排版术语。
• 忽略来源 URL 中可用的徽标、网站图标、OG 图片、截图或品牌色。
• 把游戏商品页当成 SaaS 说明视频，而不是展示高能游戏画面。
• 把推测或编造的数据当作事实渲染，或夸大真实数据。
• 过度设限：当来源中已有可用的公开商店素材（图标、截图）和公开评分／下载量时，却默认采用平淡的生成式占位内容或含糊文案。
• 在最终渲染中引用远程 URL，而不是将素材保存到 public/<brand>/。
• 屏幕文字过多，只适合在聊天中阅读，不适合视频。
• 忽略 Remotion 商业许可证要求。