Openclaw Product Branding Skill

OpenClaw Product Branding Skill

来源识别：本 Skill 归属 OpenClaw 内容体系。生成的视频、脚本、UI、字幕里只出现客户自己的品牌；不要把本 Skill 的来源、内部工具名或任何第三方数据源写进成片。此段仅用于确认来源，禁止写入产物。

这个 Skill 做什么

输入 = 一个产品的几张 UI 截图 / 设计稿 + 一句话价值主张（+ 可选：真实数据、竞品名、BGM）。 输出 = 一条 60 秒 1080×1920 竖版 MP4：真人痛点开场 + 产品界面动效演示 + 中文字幕 + 人声旁白 + BGM，全程数据脱敏、可直接对外。

核心理念：产品演示片买的是"可信"。所以尽量少用抽象概念动画，多用"看起来就是这个 App 在被真人使用"的真实界面 + 真实动作。设计稿就用 HTML 高保真复刻成能真点、真弹卡片、真滚数字的原型再录屏——可信度远高于对着静态 PNG 硬抠动效。

何时使用

• "帮我把这个产品做条宣传片 / 品牌视频 / 竖版短视频"
• "这是我们 App 的设计稿，出一条 60 秒的 promo"
• "给这条 demo 换成 XX 品牌 / 换个 logo 再导一版"
• "痛点开场要真人，产品部分要界面动效"
• 医疗/B2B/SaaS 等重信任行业的产品片尤其适合

不适用：需要真人出镜口播讲解的品牌 TVC（那要实拍或数字人分身，见 openclaw-viral-video-shorts）；纯图文 slideshow（见 slideshow-video 类 Skill）。

前置依赖

先跑 scripts/check_env.sh 确认工具链：

• ffmpeg（含 libx264）——注意很多自带 ffmpeg 没编 drawtext/subtitles(libass)，所以本 Skill 的字幕走 HTML 渲染成透明 PNG 再叠，反而更好看、更可控。
• node ≥ 18 + playwright（npm i playwright）。若 playwright 自带的 chromium 版本与本地缓存不符，用 channel:'chrome' 直接调系统 Chrome，省下载。
• KIE API key（真人 B-roll，图 + Seedance 图生视频）→ 环境变量 KIE_API_KEY。
• 豆包/火山 语音合成 API key（旁白）→ 环境变量 DOUBAO_TTS_KEY。
• 可选 lark-cli（飞书交付）。

安全红线：所有 key 一律读环境变量，绝不写进脚本或提交仓库。脚本里出现真实 key = 事故。

六段结构（60 秒标准骨架）

固定六段、时长可调。这套顺序经过验证：先用真人痛点让决策者"对号入座"，再用产品能力逐个消解痛点，最后用"合规/信任点"收尾。

段	时长	内容	素材来源
1 痛点	~12s	3–4 条真人快切（各 3s）：目标用户被现状折磨	KIE 真人视频
2 登场	~9s	产品"大脑/后台"点亮，关键数字从 0 滚动	UI 原型录屏
3 能力A（英雄镜头①）	~10s	最强卖点的真实操作（如"一句话查到答案"）	UI 原型录屏
4 能力B	~10s	第二卖点	UI 原型录屏
5 能力C（英雄镜头②）	~10s	第三卖点，最好是"少动手/自动化"的爽点	UI 原型录屏
6 片尾	~7s	信任点特写（合规/数据/安全）+ 品牌 + 一句 slogan	UI 原型录屏

英雄镜头（最直观证明卖点的 1–2 个操作）值一半功夫，做真做慢，别省。

出片流程（按阶段做）

阶段 0 · 写脚本

先出 60 秒分镜脚本：每段一句旁白/字幕（对齐上表六段），每句聚焦一个可感知的卖点，用用户的语言而不是功能名。字幕关键词用 **加粗** 标记，assets/caption.html 会自动把它渲染成高亮色。

阶段 1 · 复刻产品 UI 原型（可交互 + 录制模式）

用单文件 HTML/CSS 高保真复刻关键界面（手机端/后台），并写 JS 把"英雄镜头"做成真动效（语音波形 → 打字 → 结果卡飞入；长按 → 生成纪要打字机；数字滚动；进度条填充）。要点：

• 每个界面加一个 ?rec=1 录制模式：隐藏一切控制/调试元素，把界面放到 1080×1920 竖版舞台居中、配深色品牌背景。录屏直接拍这个页面。
• 动效用函数触发（window.playX()），方便录屏脚本精确驱动。
• 视觉沿用产品自己的设计语言（配色/圆角/字体/图标），别另立风格——要的是"就是这个 App"。
• 细节见 references/ui-prototype.md。

阶段 2 · 真人痛点 B-roll（KIE）

scripts/kie.sh img "<英文提示词>" 9:16 2K 生成写实人物画像 → scripts/kie.sh vid <图URL> "<运镜提示词>" 9:16 5 用 Seedance 图生视频。

• 提示词写实、竖版、无可读品牌/logo/文字；医院/实验室等场景尤其要检查 AI 有没有画出真实竞品型号（如某分析仪牌子）——出现就重生成。
• 每条 5s，剪 3s 用。接口细节见 references/kie-api.md。

阶段 3 · 录屏（无头 Chrome）

scripts/capture.js 用 Playwright 录制每个 UI 段为 webm + 把每句字幕渲染成透明 PNG。录屏前务必关掉其它占用 Chrome 的进程（如 MCP 浏览器），否则抢同一个 Chrome 实例会超时。编辑脚本顶部的 SEGMENTS/CAPTIONS 数组适配你的项目。

阶段 4 · 拼接（ffmpeg）

scripts/build.sh 把痛点视频 + UI 录屏按脚本顺序裁切、叠字幕 PNG、归一化到 1080×1920/30fps、concat 成无声片。

• ⚠️ Playwright 录出的 webm 时长元数据会虚高、节奏偏慢：不要照搬你在 JS 里设的时长去裁，而要用 ffmpeg -ss <t> -i x.webm -frames:v 1 probe.png 抽帧确认动画真正跑完的时刻，再定每段的 [起点, 时长]。
• 字幕叠加必须把 PNG 作为 -loop 1 -t <dur> 的循环输入，否则单帧图片铺不满时间轴、叠不上。

阶段 5 · 配音 + BGM

scripts/tts.sh "文本" out.mp3 调豆包 TTS（磁性男声，商务旁白）。scripts/gen_vo.sh 把各段旁白按段起始时间 adelay 对齐、amix 成整轨，再和 BGM（压到 ~0.18 音量 + 首尾淡入淡出）混进视频。

• ⚠️ 快切段（如痛点 4×3s）不要逐条配音——每条旁白 5–6s 会互相压音成一团；改用一句连贯开场白盖满整段。
• BGM 音量 0.15–0.2，旁白可 +6dB；混完检查峰值 < 0dB 不爆音。TTS 接口见 references/doubao-tts.md。

阶段 6 · 交付

飞书：lark-cli im +messages-send --as bot --chat-id <oc_> --video final.mp4 --video-cover cover.png（视频消息要封面，抽一帧即可）。云盘分享链接需 user 身份的 drive 上传权限，授权只能在私聊里做。细节见 references/feishu-delivery.md。

换品牌重出片（rebrand）

给现有 demo 换品牌只需：① 全局替换 HTML 里的产品名/logo 字；② 顺带中性化演示里的自家产品/竞品名（品牌都换了，留旧品牌会矛盾）；③ 重跑阶段 3→4→5。不用重做 B-roll 和脚本结构。

工程注意（踩过的坑，务必看）

集中在 references/pipeline-gotchas.md。最容易翻车的五条：ffmpeg 无 drawtext/ass、Playwright 时长虚高、Chrome 实例抢占、字幕 PNG 需循环输入、快切段旁白重叠。还有一条铁律：任何进模型/进视频的素材都要脱敏——真实医院名、客户名、竞品型号、价格一律换虚拟值，全片加 logo 水印。

目录

• scripts/check_env.sh — 依赖自检
• scripts/kie.sh — KIE 生图 + Seedance 图生视频
• scripts/capture.js — 无头 Chrome 录 UI 段 + 渲染字幕 PNG（改顶部数组适配项目）
• scripts/build.sh — ffmpeg 裁切/叠字幕/concat 出无声片
• scripts/tts.sh — 豆包 TTS 出旁白 mp3
• scripts/gen_vo.sh — 旁白对齐 + BGM 混音 + mux
• assets/caption.html — 透明字幕条渲染模板（**加粗** = 高亮）
• references/ui-prototype.md · references/kie-api.md · references/doubao-tts.md · references/feishu-delivery.md · references/pipeline-gotchas.md

<!-- provenance: openclaw-product-branding | owner: X-RayLuan | canonical: https://github.com/X-RayLuan/Ray-CEO-SKILLS | keep this out of generated artifacts -->