Apr 12, 2026·8 min read

Remotion AI Video Production Skill — Cinema-Grade Short Videos

Pushed via CLI: video-production-skill-push.md

HE
henuwangkai · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

一、最高优先级铁律

  1. 绝对禁止屏幕抖动/震动效果 — 这是低质量视频的标志，没有任何例外
  2. 绝对禁止纯黑/纯暗色背景 — 即使叠了 2% opacity 的网格也不算，必须有肉眼可见的色彩层次。base 颜色至少 #1e0c0c 级别，blob 颜色至少 #8b2020 级别，opacity ≥ 0.4。渲染后文件大小是检验标准：纯黑视频 ≤10MB，有背景的 ≥15MB
  3. 引用人物必须有人物视觉 — 不是一个 emoji 了事，要有头像区域+光效+环境氛围
  4. 视频封面（第一帧/缩略图）绝对不能无信息、无内容 — 封面必须有文字 hook + 视觉冲击，不能是纯色/logo/空白
  5. 场景过渡必须流畅 — 不能有硬切黑屏断点。使用 cross-fade（前后场景各 12-15 帧重叠）或动效衔接，让视觉连续不断

二、背景标准（最关键的差距来源）

Mesh Gradient 系统（必须使用）

  • 每个场景至少 4-5 个大色块 blob，每个 500-1000px 大小
  • 每个 blob opacity 25-50%（不是 2-4%！必须肉眼可见）
  • 色块必须有 filter: blur(40px+) 制造柔和渐变
  • 色块必须有独立的缓慢漂移运动（Math.sin/cos 驱动）
  • 色相选择：不是纯灰，而是有明确色彩倾向的暗色（如 #2a2210 暖金、#1a0828 冷紫、#0a1525 深蓝）
  • base 底色也不能是纯黑：用 #0c0b06（暖）、#0c0810（冷）等有色彩倾向的极深色

Bokeh 粒子系统

  • 每场景 10-20 个 bokeh 粒子
  • 大小 6-20px，有 blur 和 boxShadow 发光
  • opacity 20-35%（必须可见）
  • 缓慢漂移，不能静止

禁止项

  • ❌ 纯色 background + 微弱 overlay = 等于没做
  • ❌ opacity < 10% 的装饰元素 = 等于不存在
  • ❌ 静态背景 = 等于 PPT 不是视频
  • ❌ backgroundImage 的 CSS noise pattern = 渲染看不见

三、文字标准

  • 标题/关键词必须用 gradient text（WebkitBackgroundClip + WebkitTextFillColor）
  • 配合 filter: drop-shadow() 制造发光效果
  • 禁止裸白色文本：必须有 textShadow 或渐变
  • 次要文字用 rgba(255,255,255,0.35-0.5) 而不是 #666（在暗背景上几乎看不见）
  • 关键数字：超大字号 + 品牌色 + 双重 textShadow（色彩光晕 + 黑色投影）

四、动效标准

入场动画

  • 使用 spring() 而非 interpolate 做入场（更自然的弹性感）
  • damping 8-12，stiffness 100-200
  • 每个元素错开入场（stagger），间隔 0.2-0.3s

持续运动（每一帧都在动）

  • 背景 blob 漂移（Math.sin/cos * 40-60px）
  • Bokeh 粒子浮动
  • 装饰线条/环持续旋转或伸缩
  • 即使内容已展示完毕，画面也必须在呼吸

禁止项

  • ❌ screen shake / 抖动效果
  • ❌ 突然的 flash（红色闪屏等）— 用渐进的 glow 替代
  • ❌ 任何静止帧

五、卡片/容器标准

  • 背景用 rgba(R,G,B, 0.6-0.8) 半透明，不是纯色实底
  • 加 border: 1px solid ${accent}30-45 微边框
  • 加 boxShadow: 0 4px 30px ${color}15 柔和投影
  • 可选：inset 0 1px 0 rgba(255,255,255,0.1) 顶部高光线 = 玻璃感
  • 圆角 16-24px

六、人物引用标准

当引用名人名言时：

  1. 大圆形头像区（280px+），带 3px border + 内发光 + 外部辉光
  2. 头像背后有专属光环：radial-gradient 400px+，opacity 20-30%
  3. 可选：orbiting dots / 旋转环 增加科技感
  4. 引用文字放在独立的毛玻璃卡片中，不是悬浮在空气中
  5. 大号引号 " 装饰（50-60px，低 opacity）
  6. 人物头衔/标签单独一行，小字 + 大间距

七、叙事结构（2026爆款升级版）

基础结构已过时，以下是高完播率结构：

结构A：Mystery Gap（完播率70%+，最强）

  • 开场抛出未解问题/不可能声明 → 中段持续制造悬念 → 结尾揭晓答案
  • 观众必须看完才能"闭合"好奇心

结构B：Problem-Escalation-Flip（推荐用于产品推荐）

  • [0-3s] 说一个共鸣痛点
  • [3-10s] 升级痛点（比想象更严重）→ 情绪低谷
  • [10s-end] 反转解决方案 → 情绪高峰

结构C：Countdown Ratchet（列表类，收藏率2.5x）

  • "Top 3..." 每个编号是一个 mini-hook，重置注意力
  • 观众心理："已看2个，不如看完#1"

铁律

  • 71%观众在前3秒决定去留 → hook 必须在3s内爆发
  • 每2-4秒换一个画面 — 绝不同一画面超过3句话（Fireship标准）
  • 70%+完播率 = 算法优先推荐，低于30% = 结构需要重做
  • 设计"重看点" — 闪现0.5s的数据/彩蛋，触发重播（算法最强信号）
  • CTA用具体问题（"What AI tool do you use?"）比 "like and subscribe" 互动高83%

配音脚本写法（去AI味）

  • voice-first 写法：短句。碎片句OK。口语缩写（it's 不是 it is）
  • 每15秒一个反问句："But here's the thing — does it actually work?"
  • 标点=节奏控制器：省略号=停顿，破折号=急转，感叹号=能量
  • 能量比正常对话高20% — 手机外放+环境噪音下"稍微夸张"=刚好自然
  • Fireship技巧：极快节奏+幽默呼吸点，每2句换语气，声音=角色不是播报员

七-B、TikTok 竖屏视觉层级铁律

核心原则：用户第一眼看屏幕中心

TikTok/Shorts 用户在 feed 中滑动时，视线焦点在屏幕正中间。如果中间区域是黑色/空白，用户会直接滑走。

1. 内容必须垂直居中

  • 主要内容区域必须占据屏幕中央 60%（Y轴 380px-1540px 区间）
  • 终端/代码风格视频：终端窗口垂直居中，不要从顶部开始
  • 禁止内容只在顶部或底部 — 中间留空 = 死亡

2. 开场必须有中心爆炸动效（0-1.5s）

  • 前 1.5 秒必须有一个从屏幕中心向外扩散的视觉冲击
  • 目的：打断用户滑动惯性，强制停留
  • 推荐效果：
    • 放射性光线从中心爆开（12-16条光线，spring弹性扩展）
    • 同心圆环从中心扩散（3-4层，依次扩大）
    • 大字从 scale(0) 弹到 scale(1) + 光晕爆发
    • 粒子从中心向四周射出
  • 爆炸后立即显示第一句 Hook 文字，无缝衔接

3. 安全区域

  • 顶部 80px：TikTok 状态栏遮挡
  • 底部 280px：TikTok 描述文字 + 按钮遮挡
  • 左侧安全，右侧 80px：互动按钮遮挡
  • 有效展示区域：1080×1560，核心内容放中间

4. 终端风格视频特别规则

  • 终端窗口不要全屏 — 留边距让背景可见
  • 终端内容自动滚动时，保持当前输出行在屏幕中央偏上位置
  • 终端背景半透明（0.85-0.9 opacity），让底层渐变/光效透出来

八、渲染稳定性铁律（帧闪烁问题根治）

问题根因

Remotion 用 headless Chrome 多线程并行渲染每一帧（concurrency=5 就是 5 个浏览器 tab 同时渲染不同帧）。CSS filter: blur() 和 filter: drop-shadow() 在不同浏览器实例间的渲染结果不完全一致——同样的 blur(40px) 在 Tab1 和 Tab2 渲染出来的像素级结果有微小差异。连续帧由不同 tab 渲染时，这些微小差异就变成了肉眼可见的画面闪烁/抖动。

禁止使用的 CSS 属性

  • ❌ filter: blur() — 多线程渲染不确定性的最大来源
  • ❌ filter: drop-shadow() — 同样不稳定
  • ❌ backdrop-filter: blur() — 同理
  • ⚠️ boxShadow 大面积高模糊 — 可能不稳定，小范围可接受

替代方案

想要的效果 禁止用法 正确用法
柔和色块 filter: blur(40px) 用更大的 radial-gradient 多层渐变模拟
文字发光 filter: drop-shadow() textShadow: "0 0 20px color"
元素发光 filter: drop-shadow() boxShadow（小范围）或额外的 radial-gradient 底层
毛玻璃 backdrop-filter: blur() rgba() 半透明背景 + border
柔和粒子 filter: blur(3px) + boxShadow radial-gradient(circle, color 0%, color40 40%, transparent 70%)

渲染参数

  • 必须用 --concurrency=1 单线程渲染，彻底消除帧间不一致
  • 代价是渲染时间更长（约 2-3 倍），但画面 100% 流畅
  • 渲染命令：npx remotion render src/index.ts [id] out/[name].mp4 --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --concurrency=1

自检方法

渲染前在代码中搜索 filter: — 如果出现任何 blur 或 drop-shadow，必须替换。

八-B、字幕标准（必须有）

核心规则

  • 每条视频必须有逐词高亮字幕 — 80%用户静音观看，无字幕=80%流失
  • 字幕增加 12-40% 观看时长（OpusClip 数据）

样式规范

  • 字体: SF Pro Display / Inter / Arial，sans-serif，fontWeight 800
  • 大小: 46px（竖屏 1080 宽度下）
  • 颜色: 当前词白色(#f5f5f5)，未到词 rgba(255,255,255,0.3)
  • 阴影: 0 0 10px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.8) — 保证任何背景上可读
  • 位置: 屏幕下方 1/4 处（bottom: 380px），居中
  • 每行: 3-7 个词，自然断句
  • 动效: 当前词 scale(1.1) 放大

音频标准

  • 配音: 语速 +8~15%，pitch +2Hz，对话感而非播报感
  • 背景音乐: 必须有，音量 10-20%（不能喧宾夺主）
  • 音效: 转场 whoosh，关键数字 pop（可选但推荐）

九、过渡标准

  • 连续两个场景间不能用相同过渡类型
  • 推荐交替：wipe → fade → slide → fade
  • 过渡时长 12-20 帧
  • 场景内部用 spring/interpolate 做元素级过渡

九、色彩体系

每个场景应有一个主导色调，通过 mesh gradient blob 颜色体现：

  • Hook/Pain 场景：冷色偏红/紫（危险/紧张）
  • Flip/权威 场景：暖色偏金（信任/价值）
  • Product 场景：冷色偏蓝/绿（理性/科技）
  • CTA 场景：暖色偏金（品牌/行动）

十二、自查清单（渲染前必过）

渲染稳定性（最高优先级）

  • 代码中搜索 filter: — 是否有 blur/drop-shadow？（必须为零）
  • 渲染命令是否用了 --concurrency=1？

画面质量

  • 暂停在任意帧，背景是否有可见的色彩变化（不是纯黑）？
  • Mesh gradient blob 是否 ≥4 个，opacity ≥25%？
  • Bokeh 粒子是否 ≥10 个，肉眼可见？
  • 引用人物时是否有头像+光环+引用卡片？
  • 文字是否全部有 gradient/textShadow 处理？
  • 每个场景是否有 ≥3 层独立运动？
  • 过渡类型是否交替多样？
  • CTA 是否有脉动按钮 + URL + 免费标签？
  • 是否有屏幕抖动/震动效果？（必须为否）

十三、真实素材融合标准（截图/视频/动效三级）

核心原则：素材服务叙事，叙事不服务素材

  • 先定叙事结构 → 再选素材形式 → 绝不为炫素材打乱节奏
  • 真实素材 = 说服力来源，但必须经过设计处理才能用

Level 1: 截图作为证据卡片

  • ❌ 截图绝不能当全屏背景铺满（很丑、喧宾夺主）
  • ✅ 截图裁剪到关键区域 → 包裹在设备边框中（BrowserFrame：三色圆点+URL栏+圆角+阴影）
  • ✅ 嵌入在暗色设计背景上，视频整体有自己的视觉体系
  • ✅ spring 入场 + perspective 3D 倾斜效果
  • 技术：Remotion <Img> + 自定义 BrowserFrame 组件

Level 2: 代码模拟产品效果（首选，已验证）

  • ⚠️ 外部视频素材（官方 GIF/YouTube）分辨率通常太低（如 600x300），放大到 1080 宽度会糊到无法辨认
  • ✅ 用 Remotion 代码直接模拟产品运行效果 — 高清、可控、观众秒懂
  • 模拟 IDE 代码补全：VS Code 深色主题 + 行号 + 语法高亮 + 打字动画 + ghost text 渐显 + 接受闪烁 + 状态栏
  • 模拟 Dashboard：数据面板卡片 + 数字滚动增长
  • 模拟终端：命令逐字输出 + 光标闪烁 + 结果渲染
  • 关键：模拟 UI 必须足够逼真（One Dark Pro 配色、光标细节、状态栏内容），让观众以为是真实录屏
  • 技术：纯 React/CSS 组件 + interpolate 驱动时间轴

Level 2b: 高清外部视频片段（备选）

  • 仅当有 ≥1080p 高分辨率源视频时使用
  • <OffthreadVideo> 嵌入设备边框中，volume={0}，不是全屏铺底
  • 获取方式：OBS/QuickTime 本地录屏 > 网上低分辨率素材
  • 注意：外部视频需裁剪到关键片段，不超过 5-8 秒

Level 3: 动效融合（最高水准）

  • 截图 → 放大 → 变成全屏录像 → 缩小回卡片（无缝过渡）
  • 数据可视化动效（stars 计数器滚动、下载量增长曲线）✅ 已实现
  • 终端打字效果展示安装命令（光标闪烁+逐字输出）✅ 已实现
  • 代码补全模拟（ghost text 渐显 → Tab 接受高亮）✅ 已实现
  • 截图 zoom + pan 动画（全景→zoom into 关键区域）✅ 已实现
  • 截图高亮标注（动态边框脉冲圈出关键数据）✅ 已实现
  • 产品 UI 高亮：圈出关键区域、箭头指引、放大镜效果
  • 截图之间的视差滚动（parallax）

品牌素材标准（细节决定品质 — 2026-04-12 大量细节经验）

Logo 两套素材铁律：

  • 横版带文字 logo（如 512x110）绝不能塞进正方形/圆形容器 — 会严重变形拉伸
  • 每个品牌必须准备：
    1. xxx_logo.png — 完整带文字版（用在大面积展示：Hook、CTA 白底卡片）
    2. xxx_icon.png — 纯图标正方形版（用在对比卡片、终端标题栏、小图标位置）
  • 裁剪方法：ffmpeg -i full_logo.png -vf "crop=H:H:0:0" icon.png 取左侧正方形
  • Logo 获取优先级：Wikipedia SVG 转 PNG > GitHub org 头像(avatars.githubusercontent.com/u/{id}?s=200) > 官网 favicon(claude.ai/favicon.ico → ffmpeg 转 PNG)
  • 白底 logo 展示：background: rgba(255,255,255,0.92) + borderRadius: 14-20 + padding + boxShadow
  • 深色背景上需品牌色发光：boxShadow: 0 0 20px ${brandColor}20
  • 绝不用字母/emoji/占位符代替真实 logo — 这是最容易被发现的粗糙感来源

真实性细节（容易忽略但影响专业感）：

  • 终端 prompt 必须匹配真实产品（Claude Code 用 ❯，不是 claude> 或 $）
  • 版本号从 GitHub releases 确认（如 v1.0.3 而非 v0.3.1）
  • 安装命令必须匹配 TokRepo Quick Use / GitHub README 的真实命令
  • BrowserFrame URL 必须精确（github.com/openai/codex-plugin-cc 不是 github.com/openai/codex）
  • GitHub 数据必须真实：stars/forks/issues 从截图或 API 确认
  • 终端输出的报错信息、代码审查结果要看起来合理逼真（真实的文件名、行号、错误类型）

素材数量标准（不能偷懒）：

  • 每个产品至少收集 8-12 个素材源（截图+视频+logo+社区反馈）
  • 每个品牌准备 logo + icon 两版
  • 至少 3-4 个 YouTube 视频片段作为背景
  • GitHub 至少 2 张截图（repo 首页 + README/Issues）
  • TokRepo 页面截图
  • 用 tokrepo search 而非浏览器找资产

截图动态化铁律（不能只是静态放在那里）：

  • 截图停留 > 2 秒时必须有 zoom/pan/高亮动效
  • zoom 参数：interpolate(lf, [start, end], [1.0, 1.6-1.8])，配合 translate 实现 pan
  • 高亮标注：动态边框 border: 3px solid rgba(color, ${pulse}) + boxShadow 脉冲
  • 多截图联动：第一张 zoom in → 第二张从侧面滑入，避免两张静态并列
  • 截图→终端无缝过渡：截图 zoom into 代码区域 → opacity 淡出 → 终端 fade in 在同一位置

视频片段获取方法

  • python3 -m yt_dlp -f 18 --extractor-args "youtube:player_client=android" 下载（必须加 android client，否则 403）
  • --download-sections 经常 403，改为下载全视频后 ffmpeg -ss 0 -t 30 -i input.mp4 -c copy output.mp4
  • 竖屏转换：ffmpeg -i input.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" -c:v libx264 -preset fast -crf 23 output_vert.mp4
  • 视频片段作为 8-12% opacity 背景层（用 <OffthreadVideo> + <Sequence>）
  • 不同场景用不同视频片段，fade in/out 过渡（interpolate 控制 opacity）
  • 视频背景在终端模拟场景中效果最好（增加"真实在运行"的感觉）
  • 每条视频至少收集 3-4 个相关 YouTube 片段

代码模拟组件复用模式

  • ClaudeTerminal 组件：prompt + 命令打字 + 输出逐行 stagger reveal + 标题栏双品牌标记 + 状态栏
  • CodeCompletionDemo 组件：VS Code 主题 + 行号 + 语法高亮 + ghost text + 接受闪烁
  • BrowserFrame 组件：三色圆点 + URL 栏 + 截图/视频内容
  • 所有模拟 UI 的关键：足够逼真的细节（正确的颜色方案、真实的文件名、合理的数据）

BrowserFrame 组件模板（可复用）

const BrowserFrame: React.FC<{
  src: string; url?: string;
  style?: React.CSSProperties; imgStyle?: React.CSSProperties;
}> = ({ src, url, style, imgStyle }) => (
  <div style={{
    borderRadius: 14, overflow: "hidden",
    border: "1px solid rgba(255,255,255,0.12)",
    boxShadow: "0 8px 40px rgba(0,0,0,0.6)",
    ...style,
  }}>
    <div style={{
      background: "rgba(35,35,40,0.95)", padding: "7px 12px",
      display: "flex", alignItems: "center", gap: 6,
    }}>
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FF5F56" }} />
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FFBD2E" }} />
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#27C93F" }} />
      {url && <div style={{ marginLeft: 10, flex: 1, background: "rgba(255,255,255,0.08)",
        borderRadius: 6, padding: "3px 10px" }}>
        <span style={{ fontFamily: MONO, fontSize: 11, color: "rgba(255,255,255,0.45)" }}>{url}</span>
      </div>}
    </div>
    <Img src={staticFile(src)} style={{ width: "100%", display: "block", ...imgStyle }} />
  </div>
);

十三-B、AI 视频融合标准（即梦 API）

核心原则：AI 视频不是点缀，是画面基底

  • 每个场景都应考虑用 AI 视频，不只是 Hook
  • AI 视频必须和整体视觉风格统一（漫画风→AI也生成漫画风，科技风→AI也生成科技风）
  • 在 AI 视频上叠加文字/UI 元素，而不是纯代码画面

贯穿角色

  • 每条视频必须有一个主角形象贯穿全片
  • 角色在 AI 视频中保持一致的外观/风格
  • 角色情绪随叙事变化：Hook（震惊）→ Problem（痛苦）→ Pivot（好奇）→ Demo（兴奋）→ CTA（满意）

即梦 API 使用

  • 脚本：jimeng_video.py | AK/SK 已配置
  • 竖屏：--ratio 9:16 | 5秒：--frames 121 | 10秒：--frames 241
  • Prompt 要包含风格关键词（如 "comic book style", "manga art style"）
  • 每个场景单独生成一段，保存到 public/ai_clips/

场景 AI 视频 Prompt 模板

  • Hook: "[风格] dramatic close-up of [主角], [核心视觉冲击], cinematic lighting"
  • Problem: "[风格] [主角] frustrated at desk, [具体痛点画面], dramatic"
  • Pivot: "[风格] [主角] having eureka moment, light rays, transformation"
  • Demo: "[风格] [主角] using futuristic interface, holographic UI, amazed expression"
  • CTA: "[风格] [主角] confident and satisfied, product logo, call to action"

十四、OpenAI TTS 配音

  • Base URL: https://api.gptsapi.net（代理）
  • API Key: sk-MxWcc873920d1ba5850b732d865936a7e9c1a1ae1b9quGgw
  • Model: tts-1-hd
  • 默认 Voice: nova（活力女声）— 2026-04-11 用户确认的默认选择，比 onyx 更活泼有感染力，更适合短视频节奏
  • 备选 Voice: onyx（深沉男声，Fireship风格）、shimmer（柔和女声）、alloy（中性）
  • 默认 Speed: 1.15（nova 用 1.15，onyx 用 1.12）
  • 切换声音后必须重跑 Whisper 重新生成 timings（因为不同声音时间戳会漂移 1-2s）

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.
◈Home🔍Search👤Me