name: video-creator description: 创作完整的数字人解说视频。支持剧本生成、IP形象生成、TTS语音、背景音乐、数字人视频、Remotion合成。 allowed-tools: Bash(), Bash(playwright-cli:), Read, Write, Edit, Glob, Grep, WebSearch, WebFetch, AskUserQuestion, Task(nanobanana-draw), Task(volcengine-tts), Task(supabase-upload), Task(digital-human), Task(bgm-search)
数字人解说视频创作工具
创作完整的数字人解说视频,从剧本到最终成片的全流程自动化。
重要原则
- 实时数据优先:涉及股价、新闻、时事等内容,必须用
playwright-cli获取实时数据,不依赖 WebSearch 缓存 - 剧本必须用户确认:生成剧本后必须展示给用户确认(含数据来源+获取时间),用户同意后才能继续下一步
- 数据真实性:不可编造数据,必须标注数据来源和时间
- 字幕与音频同步:必须使用Whisper语音识别获取精确时间戳,不可手动估算
- 绿幕背景:IP形象必须使用绿幕背景,便于后期抠图合成
- 背景音乐音量:BGM音量控制在解说音量的15-20%,不能盖过解说声音
视频风格规范
画面布局(竖屏 9:16,1080×1920)
┌────────────────────────────────────────┐
│ │
│ 【内容插图区域】 │
│ (占画面 50%) │
│ 宽度与视频一致 │
│ 完整显示不裁剪 │
│ │
├────────────────────────────────────────┤
│ │
│ 【数字人形象区域】 │
│ (占画面 50%) │
│ 透明背景叠加在深蓝科技背景上 │
│ 带网格线装饰 │
│ │
│ ┌──────────────────────────────┐ │
│ │ 字幕文字(白色居中) │ │ ← 底部字幕
│ └──────────────────────────────┘ │
└────────────────────────────────────────┘
分辨率与编码
| 参数 | 规格 |
|---|---|
| 分辨率 | 1080×1920 (竖屏 9:16) |
| 帧率 | 30fps |
| 编码 | H.264 |
| 音频 | AAC, 44100Hz |
字幕样式
- 位置: 视频底部(bottom: 60px)
- 对齐: 居中
- 字体: 白色,36-38px,PingFang SC / Microsoft YaHei
- 阴影: 黑色阴影增强可读性
- 同步: 必须与音频精确同步
完整工作流程
Step 1: 了解需求
与用户确认以下信息:
- 主题方向: 科技解说/产品介绍/知识分享/新闻解读/财经分析
- 视频时长: 30秒/60秒/90秒(建议不超过90秒)
- 语言风格: 专业严谨/轻松幽默/通俗易懂
Step 2: 获取实时数据(关键步骤)
⚠️ 重要:如果主题涉及股价、新闻、财经、时事等内容,必须使用 playwright-cli 获取实时数据,不要依赖 WebSearch 的缓存结果!
使用 playwright-cli 获取实时数据
股票/财经数据:
# 打开股票页面获取实时股价
playwright-cli open "https://finance.yahoo.com/quote/HOOD"
playwright-cli snapshot
# 截图保存(可选)
playwright-cli screenshot --filename=stock_data.png
新闻热点:
playwright-cli open "https://news.google.com/search?q=关键词"
playwright-cli snapshot
科技资讯:
playwright-cli open "https://www.theverge.com"
playwright-cli snapshot
通用搜索:
playwright-cli open "https://www.google.com"
playwright-cli snapshot
playwright-cli fill e1 "搜索关键词"
playwright-cli press Enter
playwright-cli snapshot
数据提取要点
- 从 snapshot 中提取关键数据(价格、日期、百分比等)
- 记录数据获取时间(精确到分钟)
- 记录数据来源URL
- 将提取的数据整理成结构化信息,供 Step 3 使用
补充搜索(可选)
如需更多背景信息,可补充使用 WebSearch:
WebSearch: "小米股票 2026年 分析师评级 目标价"
Step 3: 生成解说剧本(需用户确认)
基于 Step 2 获取的实时数据生成剧本:
{
"title": "视频标题",
"duration_seconds": 60,
"data_source": {
"url": "https://finance.yahoo.com/quote/HOOD",
"fetch_time": "2026-02-05 21:30",
"key_data": {
"current_price": "$76.25",
"day_change": "-3.2%"
}
},
"segments": [
{
"id": 1,
"text": "这段解说词内容...",
"illustration_prompt": "对应的插图描述"
}
],
"full_script": "完整的解说词文本..."
}
剧本要求:
- 开头3秒抓住注意力(提问/悬念/痛点)
- 中间内容逻辑清晰,信息密度适中
- 结尾有总结或行动号召
- 数据必须真实准确
⚠️ 必须展示剧本给用户确认,包含以下信息:
剧本已生成,请确认以下内容:
**视频标题**: xxx
**实时数据**(通过 playwright-cli 获取):
- 数据来源: https://finance.yahoo.com/quote/HOOD
- 获取时间: 2026-02-05 21:30
- 当前股价: $76.25
- 今日涨跌: -3.2%
**完整剧本**:
1. xxx
2. xxx
...
⚠️ 股价等实时数据可能已发生变化,请确认是否需要更新。
确认后将开始生成IP形象、语音、插图等素材。
只有用户确认后,才能继续执行后续步骤!
Step 4: 确认/生成IP数字人形象
IP形象有三种获取方式:
方式一:用户直接提供
用户可以直接提供现成的IP形象图片,要求:
- 绿幕背景(标准绿色 #00B140)
- 3D卡通风格
- 正面或3/4侧面
- 嘴巴微张便于口型同步
方式二:照片 + 文字描述生成
cd .claude/skills/nanobanana-draw
uv run python scripts/nanobanana_draw.py \
"将这张照片中的人物转换成3D皮克斯风格的卡通形象,保持人物五官特征,穿着米白色连帽卫衣,嘴巴微张便于口型同步,背景使用纯绿色(#00B140)绿幕" \
--image user_photo.jpg \
--save-dir output/video-creator/<project-name>
方式三:照片 + 参考图 + 描述生成
cd .claude/skills/nanobanana-draw
uv run python scripts/nanobanana_draw.py \
"将第一张图片中的人物转换成第二张图片的3D卡通风格,保持人物五官特征和性别,服装参考第二张图片的风格,嘴巴微张便于口型同步,背景使用纯绿色(#00B140)绿幕" \
--image user_photo.jpg \
--style-image style_reference.png \
--save-dir output/video-creator/<project-name>
IP形象关键要求:
- ✅ 背景必须是纯绿色幕布(#00B140)
- ✅ 嘴巴微张(便于口型同步)
- ✅ 保持用户五官特征
- ✅ 分辨率至少 512x512
Step 5: 选择音色并生成TTS语音
先询问用户偏好的音色:
可用音色列表:
| 音色代号 | Voice ID | 描述 |
|---|---|---|
| female | BV001_streaming | 通用女声(成熟稳重) |
| male | BV002_streaming | 通用男声(成熟稳重) |
| yangguang | BV056_streaming | 阳光男声(年轻活力) |
| wenrou | BV033_streaming | 温柔小哥(温和亲切) |
| ruya | BV102_streaming | 儒雅青年(知性儒雅) |
cd .claude/skills/volcengine-tts
uv run python scripts/tts.py "${full_script}" \
--voice yangguang \
--speed 1.1 \
--output output/video-creator/<project-name>/audio/narration.mp3
Step 6: 搜索并下载背景音乐
使用 bgm-search skill 搜索适合视频氛围的背景音乐:
根据视频主题选择关键词:
| 视频类型 | 推荐搜索词 |
|---|---|
| 财经分析 | technology corporate, business ambient |
| 科技解说 | electronic futuristic, digital ambient |
| 知识分享 | inspiring uplifting, gentle background |
| 新闻解读 | news documentary, cinematic ambient |
| 产品介绍 | modern corporate, upbeat technology |
cd .claude/skills/bgm-search
# 搜索并下载背景音乐(时长匹配视频长度)
uv run python scripts/search.py "technology corporate ambient" \
--tag music \
--duration 60-180 \
--limit 3 \
--download \
--output ../../output/video-creator/<project-name>/bgm/
背景音乐选择原则:
- ✅ 时长应≥视频时长(Remotion会自动循环或截断)
- ✅ 选择无歌词的纯音乐,避免干扰解说
- ✅ 节奏平稳,不要过于激烈或突变
- ✅ 注意许可证(CC0 或 CC BY 可商用)
Step 7: 上传素材到Supabase
cd .claude/skills/supabase-upload
# 上传IP形象
IMAGE_URL=$(uv run python scripts/upload.py upload ip_avatar.png --folder video-creator --url-only)
# 上传音频
AUDIO_URL=$(uv run python scripts/upload.py upload narration.mp3 --folder video-creator --url-only)
Step 8: 生成数字人视频
调用火山引擎 OmniHuman1.5 生成数字人说话视频:
cd .claude/skills/digital-human
uv run python scripts/digital_human.py \
--image-url "$IMAGE_URL" \
--audio-url "$AUDIO_URL" \
--vertical \
--output output/video-creator/<project-name>/digital_human/avatar.mp4 \
--max-polls 40
关键参数说明:
--vertical- 生成 9:16 竖屏视频 (1080x1920),避免人物被裁剪- 也可用
--width 1080 --height 1920自定义尺寸
注意:
- 生成时间较长,需要耐心等待
- 如果超时,使用任务ID继续查询直到完成
- 使用
--vertical可确保人物完整显示,不会被裁剪
Step 9: 绿幕抠图(关键步骤)
将绿幕视频替换为深蓝色背景的WebM格式(与Remotion背景色一致):
9.1 检测实际绿幕颜色
重要:火山引擎生成的绿幕颜色可能不是标准的 #00B140,需要先检测:
# 提取第一帧
ffmpeg -i avatar.mp4 -vf "select=eq(n\,0)" -vframes 1 -update 1 frame_sample.png -y
# 采样绿幕区域颜色(左上角)
ffmpeg -i frame_sample.png -vf "crop=1:1:20:20,format=rgb24" -f rawvideo -pix_fmt rgb24 - 2>/dev/null | xxd -p
# 输出示例:0a903e 表示颜色为 #0a903e
9.2 绿幕替换为深蓝色背景
# 获取视频尺寸和时长
VIDEO_SIZE=$(ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 avatar.mp4)
# 示例输出:1664,1248
DURATION=$(ffprobe -v error -show_entries format=duration -of csv=p=0 avatar.mp4)
ffmpeg -i avatar.mp4 \
-filter_complex "[0:v]chromakey=0x0a8f3f:0.08:0.05,despill=type=green:mix=0.5[fg];color=c=0x0a1628:s=${VIDEO_SIZE}:d=${DURATION}[bg];[bg][fg]overlay=0:0:shortest=1" \
-c:v libvpx-vp9 \
-b:v 2M \
avatar_transparent.webm -y
关键参数说明:
chromakey=0x0a8f3f:0.08:0.05- 抠除绿色背景0x0a8f3f- 实际检测到的绿幕颜色(火山引擎常用此色)0.08- 相似度(越小越精确,减少衣服/肤色污染)0.05- 混合度(边缘柔和度)
despill=type=green:mix=0.5- 必须添加,去除绿色溢出,防止肤色/衣服变色color=c=0x0a1628- 创建深蓝色背景(与Remotion背景色一致)overlay=0:0:shortest=1- 将抠图后的人物叠加到深蓝色背景上
常见绿幕颜色参考:
| 来源 | 颜色值 | 推荐参数 |
|---|---|---|
| 火山引擎OmniHuman | 0x0a8f3f |
chromakey=0x0a8f3f:0.08:0.05,despill=type=green:mix=0.5 |
| 标准绿幕 | 0x00B140 |
chromakey=0x00B140:0.15:0.05,despill=type=green:mix=0.5 |
| 纯绿色 | 0x00FF00 |
chromakey=green:0.2:0.08,despill=type=green:mix=0.5 |
⚠️ 注意:
- 不要尝试输出透明WebM(yuva420p),Windows上的VP9编码器不支持alpha通道!
- 如果衣服/肤色仍有污染,可进一步降低相似度参数(如0.06),但可能在边缘留绿边
Step 10: 生成内容插图
使用手绘图表风格生成插图:
推荐提示词模板:
Hand-drawn infographic, sketchnote style, doodle art, whiteboard style.
White background, black ink outlines, loose strokes, minimalist coloring with pastel blue and soft red accents.
Content: [具体内容描述]
Visual metaphors, arrows and diagrams, cute stick figures.
Clean composition, high resolution.
All text must be in Simplified Chinese.
示例:
cd .claude/skills/nanobanana-draw
# 场景1:股价下跌
uv run python scripts/nanobanana_draw.py \
"Hand-drawn infographic, sketchnote style, doodle art. White background, black ink outlines, loose strokes, pastel blue and soft red accents. Content: A stock chart showing dramatic decline with red downward arrow, sad stick figure investor. Chinese text labels. Clean composition. All text in Simplified Chinese." \
--save-dir output/video-creator/<project-name>/illustrations
Step 11: 使用Whisper获取精确字幕时间戳
必须使用语音识别获取时间戳,不可手动估算:
import whisper
import json
model = whisper.load_model('base')
result = model.transcribe('narration.mp3', language='zh', word_timestamps=True)
segments = []
for seg in result['segments']:
segments.append({
'startMs': round(seg['start'] * 1000),
'endMs': round(seg['end'] * 1000),
'text': seg['text'].strip()
})
print(json.dumps(segments, ensure_ascii=False, indent=2))
根据识别结果更新Remotion组件中的字幕时间轴。
Step 12: Remotion合成最终视频
12.1 准备素材到public目录
mkdir -p public/<project-name>
cp avatar_transparent.webm public/<project-name>/
cp narration.mp3 public/<project-name>/
cp illustrations/scene_*.jpg public/<project-name>/
cp bgm/*.mp3 public/<project-name>/bgm.mp3 # 背景音乐
12.2 创建/更新Remotion组件
组件布局要点:
- 上方50%:插图区域,
width: 100%,objectFit: contain - 下方50%:数字人区域,深蓝科技背景+网格线
- 底部:字幕居中,白色带阴影
- 字幕时间轴使用Whisper识别结果
- 音频:解说音频 + 背景音乐(需控制音量比例)
// 关键样式
// 插图区域
<div style={{ height: "50%", backgroundColor: "#0d1a2d" }}>
<Img style={{ width: "100%", maxHeight: "100%", objectFit: "contain" }} />
</div>
// 数字人区域
<div style={{
height: "50%",
background: "linear-gradient(180deg, #1a2a4a 0%, #0a1628 100%)"
}}>
<Video src={staticFile("avatar_transparent.webm")} />
</div>
// 字幕
<p style={{
color: "#ffffff",
textAlign: "center",
textShadow: "0 2px 8px rgba(0,0,0,0.8)"
}}>
{currentSubtitle.text}
</p>
// 音频 - 解说语音(主音量)
<Audio src={staticFile("<project-name>/narration.mp3")} volume={1} />
// 音频 - 背景音乐(15-20%音量,不要盖过解说)
<Audio src={staticFile("<project-name>/bgm.mp3")} volume={0.15} loop />
背景音乐音量控制说明:
| 场景 | 推荐音量 | 说明 |
|---|---|---|
| 解说为主 | 0.10 - 0.15 | 背景音乐只做氛围,不干扰解说 |
| 情感渲染 | 0.20 - 0.25 | 需要音乐增强情感时适当提高 |
| 片头片尾 | 0.30 - 0.50 | 无解说时可提高音乐音量 |
动态音量控制(可选):
import { interpolate, useCurrentFrame } from "remotion";
// 片头3秒背景音乐渐入
const bgmVolume = interpolate(
frame,
[0, 90], // 0-3秒
[0, 0.15],
{ extrapolateRight: "clamp" }
);
<Audio src={staticFile("bgm.mp3")} volume={bgmVolume} loop />
12.3 渲染视频
cd project-root
npx remotion render CompositionName output/video-creator/<project-name>/final_video.mp4 --codec=h264
输出目录结构
output/video-creator/<project-name>/
├── script.json # 剧本文件
├── ip_avatar.png # IP数字人形象(绿幕)
├── audio/
│ └── narration.mp3 # TTS解说音频
├── bgm/
│ └── background.mp3 # 背景音乐
├── illustrations/
│ ├── scene_01.jpg # 场景插图
│ ├── scene_02.jpg
│ └── ...
├── digital_human/
│ └── avatar.mp4 # 数字人原始视频(绿幕)
├── public/ # Remotion素材目录
│ ├── avatar_transparent.webm # 抠图后的透明视频
│ ├── narration.mp3
│ ├── bgm.mp3 # 背景音乐
│ └── scene_*.jpg
└── final_video.mp4 # 最终输出视频
常见问题处理
1. 数字人肤色发绿
原因:绿幕抠图时没有添加despill处理
解决:确保ffmpeg命令包含 despill=green 滤镜
ffmpeg -i input.mp4 -vf "chromakey=0x00B140:0.25:0.05,despill=green" ...
2. 字幕与音频不同步
原因:手动估算字幕时间
解决:必须使用Whisper语音识别获取精确时间戳
3. 插图被裁剪
原因:使用了 objectFit: cover
解决:改用 objectFit: contain,配合 width: 100%
4. 数字人生成超时
原因:API处理时间较长
解决:记录task_id,使用单独脚本继续查询直到完成
依赖技能
playwright-cli- 浏览器自动化(获取实时数据)nanobanana-draw- AI绘图(支持图片参考和风格迁移)volcengine-tts- 语音合成bgm-search- 背景音乐搜索(基于 Freesound API)supabase-upload- 文件上传digital-human- 数字人视频生成- Remotion - 视频合成框架
- Whisper - 语音识别(用于字幕同步)