促销广告视频
根据用户提供的对企业的自然语言描述,生成一个可直接发布的竖屏广告视频。你(Claude)的角色是:担任文案撰稿人、动态设计师和编辑;你将编写广告脚本,将其转换为一个简洁的 JSON 文件,并使用 template/ 中附带的 Remotion 模板进行渲染。
输出:一个 MP4 文件(默认 1080×1920)和预览截图,完全通过代码生成,无需任何编辑软件。
前置要求
- Node.js 18+ 和 npm 包管理器(模板在首次运行时会自动安装 Remotion)
- ffmpeg 为可选安装(仅用于修剪/转换用户提供的音频文件)
- 首次渲染时会自动下载一个无头 Chrome 浏览器(约 100 MB)。如果下载被阻止,请设置环境变量
REMOTION_BROWSER=/path/to/chrome。 - 许可:Remotion 对个人、员工不超过 3 人的公司以及非营利组织免费;员工超过 3 人的营利公司需要购买 Remotion 公司许可证 (remotion.dev/license)。如果用户看起来是为大型公司进行渲染操作,请主动提及一次该许可要求。附带的字体遵循 SIL Open Font License 协议(详情见
template/public/fonts/OFL.txt)。
工作流程
请严格按照以下步骤顺序执行。不要跳过第 5 步的预览检查。
1. 收集需求
你需要了解:企业名称,销售的产品/服务,提供的促销优惠/价格,目标受众,购买方式(WhatsApp 号码、Instagram 主页、网站、实体店地址)。锦上添花的信息:品牌颜色、Logo、产品照片、真实客户评价、真实数据(服务过的客户数量、成立年数)。
用一条简短消息(最多 3 个问题)询问缺失的关键信息。不要询问那些你可以自行做出合理选择的内容(如颜色、场景顺序、措辞)。如果用户暂时无法回应,请做出合理选择,并说明你的假设。
2. 编写脚本
阅读 references/ad-scriptwriting.md 文件并选择一种脚本结构。编写一个简短的场景列表作为脚本,并在渲染前将其展示给用户(只需几行),除非用户要求你直接开始。最重要的规则:
- 在开头 2 秒内抓住眼球,最多 7 个词。内容必须能暂停滚动,并且围绕观众,而非品牌自身。
- 总时长 15-30 秒,包含 5-8 个场景。
- 永远不要虚构推荐语、客户数量、评分或价格。 仅当用户提供了相关事实时,才使用
testimonial和stat类型的场景。否则请省略。 - 原样复制用户提供的价格、电话号码和社交媒体账号。
3. 创建工作区(每个项目只需执行一次)
cp -r <skill-dir>/template ./promo-ads # 如果 ./promo-ads 目录已存在,请跳过此步
cd promo-ads && npm install
<skill-dir> 是本 SKILL.md 文件所在的文件夹(即该技能的基础目录,在技能加载时会显示)。它可能位于插件缓存或 ~/.claude/skills/ 目录下;新创建的项目目录引用的文件,切勿编辑原始模板文件,务必先复制模板到工作目录。
将用户提供的 Logo、产品照片和音频文件放入 promo-ads/public/assets/ 目录。使用纯色背景的方形或 4:5 比例的产品照片效果最好。
4. 编写 JSON 配置
创建 promo-ads/briefs/<业务简称>.json 文件。完整字段参考:references/brief-schema.md。可以从 template/briefs/example.json 文件开始。
关键点:
- 颜色必须使用 6 位十六进制代码。请为视频选择一个
background(背景色)、一个高对比度的primary(主色,用于按钮、高亮标记)、一个accent(强调色,用于标签、价格爆发、徽章)以及一个与背景形成强烈对比的text(文字色)。 - 用
*星号*包裹每行中的 1-2 个关键词来突出显示,例如"*今晚*累得不想*做饭*?"。 - 可用场景类型:
hook(钩子)、problem(用户痛点)、product(产品展示)、benefits(卖点)、stat(数据统计)、price(价格)、testimonial(客户评价)、cta(行动号召)。每个场景都支持可选的seconds(持续时间)参数。 - 可用图标:check(勾选)、star(星标)、truck(卡车)、clock(时钟)、shield(盾牌)、phone(电话)、chat(聊天)、globe(地球)、tag(标签)、spark(火花)、heart(爱心)、location(地点)、cash(现金)、bolt(闪电)、gift(礼物)、x(关闭)。
5. 预览截图,然后仔细检查
scripts/render.sh briefs/<配置文件名>.json stills
此命令会验证 JSON 配置,然后为每个场景生成一个 PNG 图片,存放在 out/<配置文件名>-frames/ 目录下。打开每一张截图并检查:
- 文字没有被裁剪或换行不自然(单行末尾出现孤立词 → 缩短文字)
- 文字在背景上清晰可读
- 重要内容不要靠近顶部 15% 或底部 22% 的区域(这两个区域会被平台按钮覆盖;模板已经将内容保持在安全区域内,所以这条主要针对过长的文字)
- 拼写、价格和联系方式完全正确
如有问题,修正 JSON 文件并重新运行 render.sh 命令生成截图,直到截图完美无误。这个过程很快(约 1 分钟),而完整渲染视频则要慢得多。
6. 渲染视频
scripts/render.sh briefs/<配置文件名>.json
该命令会输出 out/<配置文件名>.mp4 视频文件(渲染一个 30 秒的视频大约需要 2-4 分钟)。确认视频时长在 15-30 秒之间。
7. 交付
将 MP4 文件交给用户,并附上一句话说明视频内容。主动提供一个有用的下一步建议,例如:
- 2-3 个备选的“钩子”作为 A/B 测试版本(复制一份 JSON 文件,只修改
hook场景) - 提供其他视频格式:
"format": "1:1"或"4:5"(用于信息流帖子),"16:9"(用于 YouTube 网站) - 制作带旁白解说的版本(参见
references/voiceover.md)
音频
- 音效(嗖、砰、叮、冲击声)会在场景切换和列表项出现时自动播放。可以通过在配置中设置
"audio": {"sfx": false}来关闭。 - 默认情况下会播放一段免版税的入门节拍音乐。你可以通过
"audio": {"music": "assets/song.mp3"}使用用户自己的音乐文件,或者设置为false来关闭背景音乐。切勿下载或使用受版权保护的音乐; 用户必须拥有或已获得他们提供的任何音轨的合法授权。 - 旁白解说:参见
references/voiceover.md。
自定义外观
如需进行超出 JSON 配置范围之外的外观修改(例如添加新的场景类型、改变动画效果),请编辑 promo-ads/src/ 中的文件:
scenes/Scenes.tsx:每种场景类型对应一个 React 组件components/Words.tsx:控制动态文字和突出显示标记components/Frame.tsx:控制背景、品牌标签、安全区域和场景转场动画Ad.tsx:配置场景的时间默认值和音频设置
请务必遵守 Remotion 的规则:所有动画必须通过 useCurrentFrame() 钩子驱动(禁止使用 CSS 过渡或 setTimeout),并且所有资源必须通过 staticFile() 函数加载。
如果遇到问题,请查阅 references/troubleshooting.md。