🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install supercent-io/skills-template/remotion-video-production

💡 提示：需要 Node.js 和 NPM

Remotion 视频制作

一个使用 Remotion 制作可编程视频的技能。根据文本指令生成自动化视频，并大规模制作品牌风格一致的视频。

何时使用此技能

  • 自动化视频生成：根据文本指令创建视频
  • 品牌视频制作：大规模制作风格一致的视频
  • 可编程内容：整合旁白、视觉元素和动画
  • 营销内容：产品介绍、用户引导和宣传视频

操作说明

步骤 1：定义视频规格

视频规格:
  受众: [目标受众]
  目标: [视频目的]
  时长: [总长度 - 30秒, 60秒, 90秒]
  宽高比: "16:9" | "1:1" | "9:16"
  基调: "快速" | "平静" | "电影感"
  旁白:
    风格: [旁白风格]
    语言: [语言]

步骤 2：规划场景

场景结构模板：

## 场景规划

### 场景 1：开场 (0:00 - 0:05)
- **视觉**: 产品标志淡入
- **音频**: 轻快开场音乐
- **文本**: "改变你的工作流程"
- **过渡**: 淡出 → 场景 2

### 场景 2：问题 (0:05 - 0:15)
- **视觉**: 问题场景插图
- **音频**: 旁白开始
- **文本**: 关键信息叠加
- **过渡**: 向左滑动

### 场景 3：解决方案 (0:15 - 0:30)
...

步骤 3：准备资源

# 资源清单
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

资源准备规则：

  • 标志：SVG 或高分辨率 PNG
  • 截图：标准化以匹配宽高比
  • 音频：MP3 或 WAV，音量标准化
  • 字体：网页字体或本地字体文件

步骤 4：实现 Remotion 合成

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60秒 @ 30帧/秒
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// 场景组件示例
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>改变你的工作流程</Title>
    </AbsoluteFill>
  );
};

步骤 5：渲染和质量保证

# 1. 预览渲染（低质量）
npx remotion preview src/Video.tsx

# 2. 质量保证检查
- [ ] 时长验证
- [ ] 音画同步
- [ ] 文本可读性
- [ ] 过渡流畅

# 3. 最终渲染
npx remotion render src/Video.tsx ProductIntro out/video.mp4

示例

示例 1：产品介绍视频

提示：

创建一个 60 秒的产品介绍视频，包含 6 个场景，
基调轻快，输出 16：9 格式。最后包含行动号召。

预期输出：

## 场景分解
1. 开场 (0:00-0:05)：标志 + 标语
2. 问题 (0:05-0:15)：痛点可视化
3. 解决方案 (0:15-0:30)：产品演示
4. 功能 (0:30-0:45)：关键优势（3 项）
5. 社会证明 (0:45-0:55)：推荐/数据
6. 行动号召 (0:55-1:00)：行动号召 + 联系方式

## Remotion 结构
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

示例 2：用户引导教程

提示：

生成一个 45 秒的用户引导教程，使用截图，
包含标注，输出 9：16 格式用于移动设备。

预期输出：

  • 包含 5 个步骤的场景规划
  • 资源清单（截图、标注箭头）
  • 文本叠加和过渡
  • 应用了移动安全边距

最佳实践

  1. 场景简短：每个场景保持清晰，5-10 秒
  2. 排版一致：定义排版比例
  3. 音画同步：将旁白提示与视觉对齐
  4. 模板复用：保存可复用的合成
  5. 安全区域：确保为移动宽高比留出边距

常见陷阱

  • 文本过多：限制每个场景的文本量
  • 忽略移动安全区域：检查 9：16 宽高比的边缘
  • 未经质量保证直接最终渲染：始终先检查预览

故障排除

问题：音画不同步

原因：帧时序不匹配
解决方案：重新计算帧数并对齐时间戳

问题：渲染缓慢或失败

原因：资源或效果过重
解决方案：压缩资源并简化动画

问题：文本不可读

原因：字体大小或对比度不足
解决方案：使用最小 24px 字体和高对比度颜色

输出格式

## 视频制作报告

### 规格
- 时长： 60秒
- 宽高比： 16：9
- 帧率： 30

### 场景规划
| 场景 | 时长 | 视觉 | 音频 | 过渡 |
|-------|----------|--------|-------|------------|
| 开场  | 0:00-0:05 | 标志淡入 | 背景音乐开始 | 淡出 |
| ...   | ...      | ...    | ...   | ...  |

### 资源
- [ ] logo.svg
- [ ] 截图 (3 张)
- [ ] bgm.mp3
- [ ] narration.mp3

### 渲染清单
- [ ] 预览质量保证通过
- [ ] 音画同步已验证
- [ ] 安全区域已检查
- [ ] 最终渲染完成

多代理工作流

验证与回顾

  • 第一轮（协调者）：规格完整性、场景覆盖
  • 第二轮（分析师）：叙事一致性、节奏审查
  • 第三轮（执行者）：渲染准备状态清单验证

代理角色

代理 角色
Claude 场景规划、脚本撰写
Gemini 资源分析、优化建议
Codex Remotion 代码生成、渲染执行

元数据

版本

  • 当前版本： 1.0.0
  • 最后更新： 2026-01-21
  • 兼容平台： Claude, ChatGPT, Gemini, Codex

相关技能

标签

#video #remotion #animation #storytelling #automation #react

📄 原始文档

完整文档（英文）：

https://skills.sh/supercent-io/skills-template/remotion-video-production

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。