remotion-video-production

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Video Production

Remotion 视频制作

Remotion을 사용한 프로그래머블 비디오 제작 스킬입니다. 텍스트 지침에서 자동화된 비디오를 생성하고, 일관된 브랜드 비디오를 대규모로 제작합니다.

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

When to use this skill

适用场景

자동화된 비디오 생성: 텍스트 지침에서 비디오 생성
브랜드 비디오 제작: 일관된 스타일의 대규모 비디오
프로그래머블 콘텐츠: 내레이션, 비주얼, 애니메이션 통합
마케팅 콘텐츠: 제품 소개, 온보딩, 프로모션 비디오

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

Instructions

操作指南

Step 1: Define the Video Spec

步骤1：定义视频规格

yaml

video_spec:
  audience: [타겟 오디언스]
  goal: [비디오 목적]
  duration: [총 길이 - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [내레이션 스타일]
    language: [언어]

yaml

video_spec:
  audience: [目标受众]
  goal: [视频目的]
  duration: [总时长 - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [旁白风格]
    language: [语言]

Step 2: Outline Scenes

步骤2：规划场景

씬 구조화 템플릿:

markdown

undefined

场景结构化模板：

markdown

undefined

Scene Plan

场景规划

Scene 1: Hook (0:00 - 0:05)

场景1：开场钩子（0:00 - 0:05）

Visual: 제품 로고 페이드인
Audio: 업비트 인트로
Text: "Transform Your Workflow"
Transition: 페이드 → Scene 2

视觉元素：品牌标志淡入
音频：背景音乐启动
文本："Transform Your Workflow"
转场效果：淡入 → 场景2

Scene 2: Problem (0:05 - 0:15)

场景2：问题呈现（0:05 - 0:15）

Visual: 문제 상황 일러스트
Audio: 내레이션 시작
Text: 핵심 메시지 오버레이
Transition: 슬라이드 좌측

视觉元素：问题场景插画
音频：旁白开始
文本：核心信息叠加
转场效果：向左滑动

Scene 3: Solution (0:15 - 0:30)

场景3：解决方案（0:15 - 0:30）

...

undefined

...

undefined

Step 3: Prepare Assets

步骤3：准备资产

bash

undefined

bash

undefined

에셋 체크리스트

资产清单

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, 볼륨 정규화
- 폰트: 웹폰트 또는 로컬 폰트 파일


**资产准备规则**:
- 标志：SVG或高分辨率PNG
- 截图：按比例标准化
- 音频：MP3或WAV格式，音量标准化
- 字体：Web字体或本地字体文件

Step 4: Implement Remotion Composition

步骤4：实现Remotion合成

tsx

// 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} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Scene Component Example
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transform Your Workflow</Title>
    </AbsoluteFill>
  );
};

tsx

// 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} // 60s at 30fps
        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>Transform Your Workflow</Title>
    </AbsoluteFill>
  );
};

Step 5: Render and QA

步骤5：渲染与质量检查

bash

undefined

bash

undefined

1. 프리뷰 렌더링 (저품질)

1. 预览渲染（低画质）

npx remotion preview src/Video.tsx

2. QA 체크

2. QA检查

3. 최종 렌더링

3. 最终渲染

npx remotion render src/Video.tsx ProductIntro out/video.mp4

---

npx remotion render src/Video.tsx ProductIntro out/video.mp4

---

Examples

示例

Example 1: Product Intro Video

示例1：产品介绍视频

Prompt:

Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.

Expected output:

markdown

undefined

提示:

Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.

预期输出:

markdown

undefined

Scene Breakdown

场景分解

Hook (0:00-0:05): Logo + tagline
Problem (0:05-0:15): Pain point visualization
Solution (0:15-0:30): Product demo
Features (0:30-0:45): Key benefits (3 items)
Social Proof (0:45-0:55): Testimonial/stats
CTA (0:55-1:00): Call to action + contact

开场钩子（0:00-0:05）：标志+标语
问题呈现（0:05-0:15）：痛点可视化
解决方案（0:15-0:30）：产品演示
功能亮点（0:30-0:45）：核心优势（3项）
社交证明（0:45-0:55）：客户证言/数据
行动号召（0:55-1:00）：行动指引+联系方式

Remotion Structure

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

undefined

src/scenes/HookScene.tsx
src/scenes/ProblemScene.tsx
src/scenes/SolutionScene.tsx
src/scenes/FeaturesScene.tsx
src/scenes/SocialProofScene.tsx
src/scenes/CTAScene.tsx

undefined

Example 2: Onboarding Walkthrough

示例2：新用户引导视频

Prompt:

Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.

Expected output:

Scene plan with 5 steps
Asset list (screenshots, callout arrows)
Text overlays and transitions
Mobile-safe margins applied

提示:

Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.

预期输出:

包含5个步骤的场景规划
资产列表（截图、指引箭头）
文本叠加层与转场效果
应用移动端安全边距

Best practices

最佳实践

Short scenes: 씬당 5-10초로 명확하게
Consistent typography: 타이포그래피 스케일 정의
Audio sync: 내레이션 큐와 비주얼 정렬
Template reuse: 재사용 가능한 컴포지션 저장
Safe zones: 모바일 비율 시 여백 확보

短场景：每个场景控制在5-10秒，内容清晰
统一排版：定义排版规范
音频同步：旁白提示点与视觉元素对齐
模板复用：保存可重复使用的合成组件
安全区：移动端比例时预留足够边距

Common pitfalls

常见误区

텍스트 과부하: 씬당 텍스트 양 제한
모바일 세이프존 무시: 9:16 비율 시 가장자리 확인
QA 전 최종 렌더링: 항상 프리뷰 먼저 확인

文本过载：限制每个场景的文本量
忽略移动端安全区：9:16比例时需检查边缘区域
未做QA就进行最终渲染：务必先预览检查

Troubleshooting

故障排除

Issue: Audio and visuals out of sync

问题：音频与视频不同步

Cause: 프레임 타이밍 불일치 Solution: 프레임 재계산 및 타임스탬프 정렬

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

Issue: Render is slow or fails

问题：渲染缓慢或失败

Cause: 무거운 에셋 또는 효과 Solution: 에셋 압축 및 애니메이션 단순화

原因：资产过大或效果复杂 解决方案：压缩资产并简化动画

Issue: Text unreadable

问题：文本可读性差

Cause: 폰트 크기 또는 대비 부족 Solution: 최소 24px 폰트, 고대비 색상 사용

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

Output format

输出格式

markdown

undefined

markdown

undefined

Video Production Report

视频制作报告

Spec

规格

Duration: 60s
Aspect Ratio: 16:9
FPS: 30

时长：60s
宽高比：16:9
帧率：30

Scene Plan

场景规划

Scene	Duration	Visual	Audio	Transition
Hook	0:00-0:05	Logo fade	BGM start	Fade
...	...	...	...	...

场景	时长	视觉元素	音频	转场效果
开场钩子	0:00-0:05	标志淡入	背景音乐启动	淡入
...	...	...	...	...

Assets

资产

Render Checklist

渲染检查清单

Multi-Agent Workflow

多Agent工作流

Validation & Retrospectives

验证与回顾

Round 1 (Orchestrator): 스펙 완전성, 씬 커버리지
Round 2 (Analyst): 내러티브 일관성, 페이싱 리뷰
Round 3 (Executor): 렌더 준비 상태 체크리스트 검증

第一轮（编排Agent）：规格完整性、场景覆盖度
第二轮（分析Agent）：叙事一致性、节奏审核
第三轮（执行Agent）：渲染准备状态清单验证

Agent Roles

Agent职责

Agent	Role
Claude	씬 플래닝, 스크립트 작성
Gemini	에셋 분석, 최적화 제안
Codex	Remotion 코드 생성, 렌더링 실행

Agent	职责
Claude	场景规划、脚本撰写
Gemini	资产分析、优化建议
Codex	Remotion代码生成、渲染执行

remotion-video-production

Original

Translation

Remotion Video Production

Remotion 视频制作

When to use this skill

适用场景

Instructions

操作指南

Step 1: Define the Video Spec

步骤1：定义视频规格

Step 2: Outline Scenes

步骤2：规划场景

Scene Plan

场景规划

Scene 1: Hook (0:00 - 0:05)

场景1：开场钩子（0:00 - 0:05）

Scene 2: Problem (0:05 - 0:15)

场景2：问题呈现（0:05 - 0:15）

Scene 3: Solution (0:15 - 0:30)

场景3：解决方案（0:15 - 0:30）

Step 3: Prepare Assets

步骤3：准备资产

에셋 체크리스트

资产清单

Step 4: Implement Remotion Composition

步骤4：实现Remotion合成

Step 5: Render and QA

步骤5：渲染与质量检查

1. 프리뷰 렌더링 (저품질)

1. 预览渲染（低画质）

2. QA 체크

2. QA检查

3. 최종 렌더링

3. 最终渲染

Examples

示例

Example 1: Product Intro Video

示例1：产品介绍视频

Scene Breakdown

场景分解

Remotion Structure

Remotion结构

Example 2: Onboarding Walkthrough

示例2：新用户引导视频

Best practices

最佳实践

Common pitfalls

常见误区

Troubleshooting

故障排除

Issue: Audio and visuals out of sync

问题：音频与视频不同步

Issue: Render is slow or fails

问题：渲染缓慢或失败

Issue: Text unreadable

问题：文本可读性差

Output format

输出格式

Video Production Report

视频制作报告

Spec

规格

Scene Plan

场景规划

Assets

资产

Render Checklist

渲染检查清单

Multi-Agent Workflow

多Agent工作流

Validation & Retrospectives

验证与回顾

Agent Roles

Agent职责

Metadata

元数据

Version

版本

Related Skills