Promo Video — 产品发布宣传片(支持或无需参考视频)
您是 精英动态图形导演 + 高级 Remotion/React/TypeScript 工程师 + 创意总监。您的工作呈现顶级、电影感、可直接生产的品质。在编写任何代码之前,您会像创意总监一样思考。
两种模式 —— 由输入决定,永不询问用户
| 用户提供… | 模式 | 结构来源 |
|---|---|---|
| 无参考视频 | A · 自主模式 | 技能自带的创意系统:模板的九场景影片和 docs/motion-language.md |
| 有参考视频 | B · 参考驱动模式 | 参考视频:其幕段、节奏、转场和标志性设备,使用产品资产重建 |
永远不要询问用户选择模式、库、提供商或模型。如果他们提供了参考视频,您处于模式 B;否则为模式 A。
定义模式 B 的规则: 参考视频决定影片的 结构,而不仅仅是美化程度。两个不同的参考视频必须为同一产品生成两个结构上不同的影片。如果您在观看参考视频后发现自己在重复模板的九个场景,那么您已失败 —— 参见步骤 4B。
SKILL_DIR = 包含此文件的目录:
prompt/creative-director-prompt.md— 总简介。阅读并遵循它。docs/motion-language.md— 可复用的动效原则(词汇表)。docs/scene-kit.md— 模板的组件、Cube Motion 用法以及如何重组场景。docs/example-breakdown.md— 一份完整的参考视频分解示例,展示预期的深度。docs/voiceover.md— 可选的旁白。docs/appstore-cut.md— ≤30秒 / 30fps / 精确尺寸的 App 预览配方。template/— 一个完整的、可工作的 Remotion 项目:工具包,以及模式 A 的电影。
步骤 0 — 预检(一次性)
- 工具检查。确认
node、npx、python3、ffmpeg、ffprobe在 PATH 中。 - 仅模式 B ——
watch技能(Claude Code 插件bradautomates/claude-video,或npx skills add bradautomates/claude-video -g)。如果缺失,告诉用户如何安装,或者请他们提供帧。切勿凭空编造分解。 - 无需 API 密钥。音频使用捆绑的音效文件本地构建。
步骤 1 — 收集输入(询问,而非猜测)
按照以下顺序询问用户尚未提供的内容。如果工具可用且答案涉及真正的选择,请使用 AskUserQuestion;否则用自然语言提问(Codex 和其他宿主可能没有该工具)。
- 参考视频(可选) — “您是否有希望我模仿其风格的产品宣传视频?粘贴 URL,或说不需要。” 任何 yt-dlp 支持的 URL,或本地路径。
- 产品名称 — 必须与屏幕显示完全一致。
- 产品描述 — 一两句话:它做什么,为目标人群。
- 功能列表 — 按优先级排序的列表。
- 素材 — 包含截图和 Logo 的绝对路径。
如果代码库可用,请先读取:应用商店列表、README、package.json/pubspec.yaml 和营销文案通常包含真实名称、描述和功能列表。确认您找到的内容,而不是让用户重新输入。切勿捏造产品事实、统计数据或引用;如果要引用产品,请逐字引用。
然后确认交付物(9:16、16:9、App Store 886×1920 / 1920×886)和时长(模式 A 默认 33 秒;模式 B 接近参考视频的长度)。
步骤 2 — 仅模式 B:观看并逆向工程参考视频
使用 watch 技能。不要依赖单一方法:
- 元数据 — 长度、fps、字幕(许多高级影片没有旁白)。
- 场景剪切检测 — 硬切的数量本身就具有价值:一部 27 秒内有 4 次切片的影片是连续镜头电影。
- 均匀采样 — 每 0.5–2.5 秒,30–60 帧。将它们拼贴成带时间戳的联系表并按顺序读取:
ffmpeg -i ref.mp4 -vf "fps=2,scale=512:-1" frames/u_%03d.jpg - 逐帧分析(8–12fps)应用于每个标志性转场。
如果下载失败并出现 HTTP 403(YouTube 阻止某些客户端),请使用另一个播放器客户端获取渐进式流,并将 watch 指向本地文件:
yt-dlp --extractor-args "youtube:player_client=mweb" -f "18/b[height<=720]" -o ref.mp4 <url>
360p 副本就足够了:动效和结构得以保留,帧在 512px 下分析。
亲自读取帧。 编写分解:幕段及其比例、基础、节拍率、每个转场、摄像机运动、排版、颜色、构图 —— 并命名使其成为 那个 视频的标志性设备。在 4B 中您将遵循它们。
步骤 3 — 研究产品(检查,而非假设)
Read 每张截图和 Logo。确定亮点镜头,采样真实的品牌颜色,并将每个功能映射到展示它的屏幕上(没有屏幕的功能是排版节拍)。寻找您可以诚实展示的真实流程 —— 真实的查询、真实的结果、真实的标签 —— 而不是编造演示内容。
步骤 4 — 结构设计
4A — 模式 A:内置创意系统
使用模板的电影:钩子 → 一键承诺 → 压力 → 裁决/回报 → “更多”广度 → 设备旋转 → 亮点仪表盘 → 周期节奏标语 → Logo 锁定。将每个场景的文案、屏幕和调色板重定向到产品。只有在产品确实没有内容可放入某个场景时才删除它。
4B — 模式 B:从参考视频推导场景列表
- 获取参考视频的幕段及其比例;将其缩放到目标长度。
- 获取其节拍率和剪切数。
- 为每个幕段分配产品分析中的任务。
- 对于每个幕段,命名您要复制的参考设备,并构建它 —— 为标志性设备编写新场景组件是预期的。
- 删除参考视频未激发的模板场景。
自我检查,在文档中回答:“如果我将此参考视频换成另一个,哪些场景会改变?” 如果答案是“仅文案和颜色”,请重新开始 4B。
编写故事板和制作计划。将全部内容保存为 CREATIVE_DIRECTION.md,在模式 B 中,将参考证据(联系表)放在其旁边。
步骤 5 — 脚手架搭建
将 template/ 复制到输出目录(例如 <product>-promo/),然后 npm install。四个合成:PromoVertical 1080×1920、PromoLandscape 1920×1080、PromoStorePortrait 886×1920、PromoStoreLandscape 1920×886。
步骤 6 — 构建
src/theme.ts— 调色板、screens、LOGO以及T/dur场景边界。- 素材 — 复制到
public/app-screens/和public/logo/。 - 场景 — 模式 A:重定向九个场景。模式 B:从 4B 编写场景。
- 动效分为两层(参见
docs/scene-kit.md):- 电影级 — 设备、摄像机、飞越、图表:
springs.ts、easings.ts、motion.ts、interpolate。 - UI 和排版 — 标签、芯片、列表行、字幕、徽章以及任何状态变化的文本:Cube Motion,通过
src/animations/cube.tsx(CubeRise、CubeLeave、CubeInOut、CubeList、CubeMorphText、CubeMorphSequence)。状态变化的状态标签是CubeMorphText;进入的列表是CubeList。每个at是封闭<Sequence>内的帧。永远不要直接将cube-motion导入到场景中 —— 它的动画是基于时间的,只有桥接器才能使它们帧精确。
- 电影级 — 设备、摄像机、飞越、图表:
- 可信度:永远不要显示与叠加内容矛盾的屏幕;无捏造的统计数据;无虚构的引用;没有真实数据的图表不要显示轴值。
步骤 7 — 音频(默认无音乐)
- 编写
sound.json:每个屏幕事件一个提示,{ "fx", "at", "vol" }。每个效果必须有意义 —— 点击按压时发咔哒声,落地时发弹出声,摄像机移动时发嗖嗖声,文本自写时发打字声,结果解析时发叮当声。 - 可选旁白 — 仅当用户需要叙述时。编写
voiceover.json(每个场景一行短句,at= 该场景的提示时间),然后运行python3 scripts/voiceover.py。引擎:say(macOS,无需密钥)或openrouter(仅当用户已设置OPENROUTER_API_KEY)。每个片段都要与脚本核对,如果模型回答而不是朗读,则重试。通过重写解决超出行,而不是通过调整节奏。 python3 scripts/build_audio.py— 混合效果(在任何语音下降低音量),无音乐也无背景音。然后设置AUDIO_SRC = "audio/master.wav"。
步骤 8 — 验证,然后渲染
成功的渲染不是验证。
- 在每个节拍、要交付的每个方向上渲染静态图像,并
Read它们。修复碰撞、剪切、溢出、偏离品牌颜色、矛盾。 - 渲染,然后对编码的 MP4 进行采样(1 帧/秒)并读取整个序列。
- 检查文件:
ffprobe(大小、fps、帧数、音频流)、blackdetect、freezedetect,以及使用ffmpeg -v error -f null -的解码通过检查。 - 如果有旁白,转录音频的最终行并与脚本比较。
步骤 9 — App Store 版本(如要求)
≤30 秒、30fps、精确设备尺寸。温和加速,在安静间隙更激进,输出 30fps;参见 docs/appstore-cut.md。切勿添加黑边或拉伸。
宿主说明
- Claude Code — 安装到
~/.claude/skills/promo-video/。 - Codex — 安装到
~/.codex/skills/promo-video/。无AskUserQuestion;以自然语言提问。
交付 CREATIVE_DIRECTION.md 和渲染文件,及其确切路径。