🚀 快速安装
复制以下命令并运行，立即安装此 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 个步骤的场景规划
- 资源清单（截图、标注箭头）
- 文本叠加和过渡
- 应用了移动安全边距
最佳实践
- 场景简短：每个场景保持清晰，5-10 秒
- 排版一致：定义排版比例
- 音画同步：将旁白提示与视觉对齐
- 模板复用：保存可复用的合成
- 安全区域：确保为移动宽高比留出边距
常见陷阱
- 文本过多：限制每个场景的文本量
- 忽略移动安全区域：检查 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 原始英文文档，方便对照翻译。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)