remotion-spec-translator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Spec Translator

Remotion 规格转译器

Orchestrates the complete translation pipeline from motion design specifications to working Remotion code. This skill acts as a coordinator that delegates work to specialized skills for each aspect of the translation.

协调从动效设计规格说明到可运行Remotion代码的完整转译流水线。本技能作为协调器，会将转译各环节的工作委派给专用技能。

What This Skill Does

本技能的功能

Orchestrates the translation by:

Coordinating pipeline — Calls specialized skills in correct order
Parsing specs — Extracts requirements for each skill
Managing handoffs — Ensures output from one skill feeds into next
Validating completeness — Confirms all scenes implemented
Documenting workflow — Tracks pipeline progress

通过以下方式协调转译工作：

协调流水线 — 按正确顺序调用专用技能
解析规格说明 — 提取每个技能的需求
管理交接流程 — 确保一个技能的输出能对接下一个技能
验证完整性 — 确认所有场景已实现
记录工作流 — 跟踪流水线进度

Scope Boundaries

范围边界

IN SCOPE:

Pipeline orchestration and coordination
Spec parsing and requirement extraction
Skill delegation and sequencing
Progress tracking and validation
Workflow documentation

OUT OF SCOPE:

Direct code generation (delegated to specialist skills)
Implementation details (handled by component/animation skills)
Manual file creation (handled by scaffold skill)

纳入范围：

流水线编排与协调
规格说明解析与需求提取
技能委派与排序
进度跟踪与验证
工作流文档记录

排除范围：

直接生成代码（委派给专用技能）
实现细节（由组件/动画技能处理）
手动创建文件（由脚手架技能处理）

Input/Output Formats

输入/输出格式

Input Format: VIDEO_SPEC.md

输入格式：VIDEO_SPEC.md

Expects complete motion design specification (from

/motion-designer

markdown

undefined

需要完整的动效设计规格说明（来自

/motion-designer

）：

markdown

undefined

Video Title: ProductDemo

Overview

Duration: 30 seconds
Frame Rate: 30 fps
Aspect Ratio: 16:9 (1920x1080)
Total Scenes: 4

Duration: 30 seconds
Frame Rate: 30 fps
Aspect Ratio: 16:9 (1920x1080)
Total Scenes: 4

Color Palette

Primary: #FF6B35 - Ember Orange Secondary: #4ECDC4 - Teal Background: #0A0A0A - Black Text: #FFFFFF - White

Scene 1: Intro (0s - 5s)

Visual Description: Centered logo with smooth entrance Animation Details:

Logo: Scale 0.8 → 1.0, Spring (damping: 200)
Subtitle: Fade in with upward slide

Visual Description: Centered logo with smooth entrance Animation Details:

Logo: Scale 0.8 → 1.0, Spring (damping: 200)
Subtitle: Fade in with upward slide

Scene 2: Features (5s - 15s)

Visual Description: Three feature cards stagger in Animation Details:

Cards: Stagger delay 10 frames, slide from left

Visual Description: Three feature cards stagger in Animation Details:

Cards: Stagger delay 10 frames, slide from left

Scene 3: Demo (15s - 25s)

Visual Description: Product screenshot with highlights Animation Details:

Screenshot: Fade in, scale 0.95 → 1.0
Highlights: Sequential pulse effect

Visual Description: Product screenshot with highlights Animation Details:

Screenshot: Fade in, scale 0.95 → 1.0
Highlights: Sequential pulse effect

Scene 4: CTA (25s - 30s)

Visual Description: Call-to-action with button Animation Details:

Text: Fade in
Button: Scale bounce effect

Visual Description: Call-to-action with button Animation Details:

Text: Fade in
Button: Scale bounce effect

Assets

Logo: public/images/logo.svg (400x400)
Product screenshot: public/images/product.png (1200x800)

undefined

Logo: public/images/logo.svg (400x400)
Product screenshot: public/images/product.png (1200x800)

undefined

Output Format: TRANSLATION_COMPLETE.md

输出格式：TRANSLATION_COMPLETE.md

Generates orchestration summary document:

markdown

undefined

生成编排汇总文档：

markdown

undefined

Translation Complete: ProductDemo

Status

✅ Pipeline execution complete ✅ All scenes implemented ⏳ Ready for render

Pipeline Execution Summary

Step 1: Scaffold Generation (/remotion-scaffold)

✅ Complete

Created: Project structure
Output: SCAFFOLD_MANIFEST.md
Files: index.tsx, constants.ts, types.ts, 4 scene templates

✅ Complete

Created: Project structure
Output: SCAFFOLD_MANIFEST.md
Files: index.tsx, constants.ts, types.ts, 4 scene templates

Step 2: Animation Configuration (/remotion-animation)

✅ Complete

Created: Animation parameters
Output: ANIMATION_CONFIG.md
Configs: Spring settings, interpolations, timing

✅ Complete

Created: Animation parameters
Output: ANIMATION_CONFIG.md
Configs: Spring settings, interpolations, timing

Step 3: Composition Structure (/remotion-composition)

✅ Complete

Created: Sequence layout
Output: COMPOSITION_STRUCTURE.md
Timing: All scene durations calculated

✅ Complete

Created: Sequence layout
Output: COMPOSITION_STRUCTURE.md
Timing: All scene durations calculated

Step 4: Scene Implementation (/remotion-component-gen)

✅ Complete - 4/4 scenes

Scene 1 (Intro): SCENE_COMPONENT.md → Scene1Intro.tsx
Scene 2 (Features): SCENE_COMPONENT.md → Scene2Features.tsx
Scene 3 (Demo): SCENE_COMPONENT.md → Scene3Demo.tsx
Scene 4 (CTA): SCENE_COMPONENT.md → Scene4CTA.tsx

✅ Complete - 4/4 scenes

Scene 1 (Intro): SCENE_COMPONENT.md → Scene1Intro.tsx
Scene 2 (Features): SCENE_COMPONENT.md → Scene2Features.tsx
Scene 3 (Demo): SCENE_COMPONENT.md → Scene3Demo.tsx
Scene 4 (CTA): SCENE_COMPONENT.md → Scene4CTA.tsx

Step 5: Render Configuration (/remotion-render-config)

✅ Complete

Created: Render settings
Output: RENDER_CONFIG.md
Target: YouTube (H.264, CRF 18)

✅ Complete

Created: Render settings
Output: RENDER_CONFIG.md
Target: YouTube (H.264, CRF 18)

Generated Files

src/remotion/compositions/ProductDemo/
├── index.tsx                  # ✅ Composition with all scenes
├── constants.ts               # ✅ Colors, springs, timing
├── types.ts                   # ✅ TypeScript interfaces
└── scenes/
    ├── Scene1Intro.tsx        # ✅ Implemented
    ├── Scene2Features.tsx     # ✅ Implemented
    ├── Scene3Demo.tsx         # ✅ Implemented
    └── Scene4CTA.tsx          # ✅ Implemented

src/remotion/compositions/ProductDemo/
├── index.tsx                  # ✅ Composition with all scenes
├── constants.ts               # ✅ Colors, springs, timing
├── types.ts                   # ✅ TypeScript interfaces
└── scenes/
    ├── Scene1Intro.tsx        # ✅ Implemented
    ├── Scene2Features.tsx     # ✅ Implemented
    ├── Scene3Demo.tsx         # ✅ Implemented
    └── Scene4CTA.tsx          # ✅ Implemented

Next Steps

后续步骤

Add assets to public/ folders
- Logo: public/images/logo.svg
- Product screenshot: public/images/product.png
Test in preview
bash
```
npm run dev
```
Verify timing matches spec exactly
Run render when ready
bash
```
npm run render:youtube
```
Review and iterate if adjustments needed

将资源添加到 public/ 文件夹
- Logo: public/images/logo.svg
- 产品截图: public/images/product.png
在预览中测试
bash
```
npm run dev
```
验证时长与规格说明完全匹配
准备就绪后执行渲染
bash
```
npm run render:youtube
```
如需调整则进行审核与迭代

Asset Checklist

资源检查清单

Required assets from spec:

public/images/logo.svg (400x400)
public/images/product.png (1200x800)

Use

/remotion-asset-coordinator

for asset sourcing guidance.

规格说明中要求的资源：

public/images/logo.svg (400x400)
public/images/product.png (1200x800)

如需资源获取指导，请使用

/remotion-asset-coordinator

。

Quality Checklist

质量检查清单

Translation Summary

转译汇总

Input: VIDEO_SPEC.md (motion design specification) Pipeline: 5 specialized skills executed in sequence Output: Complete, working Remotion composition Status: Implementation complete, assets and testing pending

undefined

输入： VIDEO_SPEC.md（动效设计规格说明） 流水线： 按顺序执行5个专用技能 输出： 完整可运行的Remotion合成项目 状态： 实现完成，待添加资源与测试

undefined

Orchestration Workflow

编排工作流

The pipeline executes in this sequence:

VIDEO_SPEC.md (Input)
    ↓
Step 1: /remotion-scaffold
    ↓ outputs: SCAFFOLD_MANIFEST.md + folder structure
Step 2: /remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md + animation constants
Step 3: /remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md + Sequence layout
Step 4: /remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md × N scenes
Step 5: /remotion-render-config
    ↓ outputs: RENDER_CONFIG.md + render commands
    ↓
TRANSLATION_COMPLETE.md (Output)

流水线按以下顺序执行：

VIDEO_SPEC.md (Input)
    ↓
Step 1: /remotion-scaffold
    ↓ outputs: SCAFFOLD_MANIFEST.md + folder structure
Step 2: /remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md + animation constants
Step 3: /remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md + Sequence layout
Step 4: /remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md × N scenes
Step 5: /remotion-render-config
    ↓ outputs: RENDER_CONFIG.md + render commands
    ↓
TRANSLATION_COMPLETE.md (Output)

Skill Delegation Strategy

技能委派策略

When to Delegate

何时委派

Parse spec → Extract requirements for each skill
Check dependencies → Ensure prerequisites met
Call skill → Provide focused input
Capture output → Store for next skill
Validate → Confirm output quality
Proceed → Move to next step

解析规格说明 → 提取每个技能的需求
检查依赖项 → 确保前置条件已满足
调用技能 → 提供针对性输入
捕获输出 → 保存供下一个技能使用
验证 → 确认输出质量
推进流程 → 进入下一步

Delegation Examples

委派示例

typescript

// Step 1: Scaffold
const scaffoldInput = {
  projectName: "ProductDemo",
  duration: 30,
  fps: 30,
  dimensions: "1920x1080",
  scenes: ["Intro", "Features", "Demo", "CTA"]
};
// Call: /remotion-scaffold

// Step 2: Animation
const animationInput = {
  springConfigs: extractSpringConfigs(spec),
  interpolations: extractInterpolations(spec),
  timing: extractAnimationTiming(spec)
};
// Call: /remotion-animation

// Step 3: Composition
const compositionInput = {
  scenes: [
    { name: "intro", durationSeconds: 5 },
    { name: "features", durationSeconds: 10 },
    { name: "demo", durationSeconds: 10 },
    { name: "cta", durationSeconds: 5 }
  ],
  fps: 30
};
// Call: /remotion-composition

// Step 4: Component Gen (per scene)
for (const scene of spec.scenes) {
  const componentInput = {
    sceneName: scene.name,
    visualDescription: scene.visual,
    animationDetails: scene.animation,
    assets: scene.assets
  };
  // Call: /remotion-component-gen
}

// Step 5: Render Config
const renderInput = {
  platform: "YouTube",
  quality: "high",
  format: "MP4"
};
// Call: /remotion-render-config

typescript

// Step 1: Scaffold
const scaffoldInput = {
  projectName: "ProductDemo",
  duration: 30,
  fps: 30,
  dimensions: "1920x1080",
  scenes: ["Intro", "Features", "Demo", "CTA"]
};
// Call: /remotion-scaffold

// Step 2: Animation
const animationInput = {
  springConfigs: extractSpringConfigs(spec),
  interpolations: extractInterpolations(spec),
  timing: extractAnimationTiming(spec)
};
// Call: /remotion-animation

// Step 3: Composition
const compositionInput = {
  scenes: [
    { name: "intro", durationSeconds: 5 },
    { name: "features", durationSeconds: 10 },
    { name: "demo", durationSeconds: 10 },
    { name: "cta", durationSeconds: 5 }
  ],
  fps: 30
};
// Call: /remotion-composition

// Step 4: Component Gen (per scene)
for (const scene of spec.scenes) {
  const componentInput = {
    sceneName: scene.name,
    visualDescription: scene.visual,
    animationDetails: scene.animation,
    assets: scene.assets
  };
  // Call: /remotion-component-gen
}

// Step 5: Render Config
const renderInput = {
  platform: "YouTube",
  quality: "high",
  format: "MP4"
};
// Call: /remotion-render-config

Spec Parsing Helpers

规格说明解析工具

Extract Spring Configs

提取弹簧配置

typescript

function extractSpringConfigs(spec: string) {
  // Parse animation details for spring parameters
  // Look for: damping, stiffness, mass values
  // Return: SPRING_CONFIGS object
}

typescript

function extractSpringConfigs(spec: string) {
  // Parse animation details for spring parameters
  // Look for: damping, stiffness, mass values
  // Return: SPRING_CONFIGS object
}

Extract Scene Timing

提取场景时长

typescript

function extractSceneTiming(spec: string) {
  // Parse scene headers for timing (0s - 5s)
  // Calculate frame numbers
  // Return: Scene timing array
}

typescript

function extractSceneTiming(spec: string) {
  // Parse scene headers for timing (0s - 5s)
  // Calculate frame numbers
  // Return: Scene timing array
}

Extract Color Palette

提取调色板

typescript

function extractColorPalette(spec: string) {
  // Parse Color Palette section
  // Extract hex codes and names
  // Return: COLORS object
}

typescript

function extractColorPalette(spec: string) {
  // Parse Color Palette section
  // Extract hex codes and names
  // Return: COLORS object
}

Extract Asset List

提取资源列表

typescript

function extractAssets(spec: string) {
  // Parse Assets sections per scene
  // Collect all required assets
  // Return: Asset checklist
}

typescript

function extractAssets(spec: string) {
  // Parse Assets sections per scene
  // Collect all required assets
  // Return: Asset checklist
}

Progress Tracking

进度跟踪

The orchestrator tracks pipeline progress:

Pipeline Progress: ProductDemo
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ Step 1/5: Scaffold (remotion-scaffold)
✅ Step 2/5: Animation (remotion-animation)
✅ Step 3/5: Composition (remotion-composition)
⏳ Step 4/5: Scenes (remotion-component-gen) - 2/4 complete
⬜ Step 5/5: Render Config (remotion-render-config)

Current: Implementing Scene 3 (Demo)
Next: Scene 4 (CTA)

编排器会跟踪流水线进度：

Pipeline Progress: ProductDemo
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ Step 1/5: Scaffold (remotion-scaffold)
✅ Step 2/5: Animation (remotion-animation)
✅ Step 3/5: Composition (remotion-composition)
⏳ Step 4/5: Scenes (remotion-component-gen) - 2/4 complete
⬜ Step 5/5: Render Config (remotion-render-config)

Current: Implementing Scene 3 (Demo)
Next: Scene 4 (CTA)

Error Handling

错误处理

Missing Information

信息缺失

If spec lacks required information:

Identify gap (e.g., missing spring config)
Use sensible defaults where possible
Document assumption in output
Flag for review by user

如果规格说明缺少必要信息：

识别缺失项（例如：缺少弹簧配置）
尽可能使用合理默认值
在输出中记录假设内容
标记供用户审核

Skill Failures

技能执行失败

If a delegated skill fails:

Log error with context
Attempt recovery if possible
Skip to next step if non-blocking
Report issue in final summary

如果委派的技能执行失败：

记录含上下文的错误信息
如有可能则尝试恢复
如果不阻塞则跳至下一步
在最终汇总中报告问题

Incomplete Specs

规格说明不完整

If spec is incomplete:

Parse what's available
Generate with TODO markers
List missing requirements
Suggest spec improvements

如果规格说明不完整：

解析现有内容
生成含 TODO 标记的内容
列出缺失的需求
提出规格说明改进建议

Validation Checklist

验证检查清单

Best Practices

最佳实践

Parse thoroughly — Extract all details from spec
Delegate appropriately — Use right skill for each task
Maintain context — Pass relevant info between skills
Validate outputs — Check each skill's result
Document clearly — Explain what was done
Track progress — Show pipeline status
Handle errors — Gracefully manage failures

彻底解析 — 提取规格说明中的所有细节
合理委派 — 为每项任务选择合适的技能
保持上下文 — 在技能间传递相关信息
验证输出 — 检查每个技能的结果
清晰记录 — 说明已完成的工作
跟踪进度 — 展示流水线状态
错误处理 — 优雅地处理故障

Integration with Other Skills

与其他技能的集成

This skill orchestrates the pipeline:

remotion-spec-translator (this skill - ORCHESTRATOR)
    ↓ coordinates
remotion-scaffold → remotion-animation → remotion-composition → remotion-component-gen → remotion-render-config

Works with:

```
/motion-designer
```
— Consumes VIDEO_SPEC.md from this skill
```
/remotion-scaffold
```
— Delegates scaffolding
```
/remotion-animation
```
— Delegates animation config
```
/remotion-composition
```
— Delegates composition structure
```
/remotion-component-gen
```
— Delegates scene implementation (per scene)
```
/remotion-render-config
```
— Delegates render settings

Triggers:

"Translate spec to code"
"Implement video spec"
"Generate Remotion from spec"
"Build Remotion project from design"

This skill ensures motion design specs translate systematically into complete, working Remotion projects through intelligent orchestration and delegation.

本技能负责协调以下流水线：

remotion-spec-translator (this skill - ORCHESTRATOR)
    ↓ coordinates
remotion-scaffold → remotion-animation → remotion-composition → remotion-component-gen → remotion-render-config

协同技能：

```
/motion-designer
```
— 接收来自本技能的 VIDEO_SPEC.md
```
/remotion-scaffold
```
— 委派脚手架生成任务
```
/remotion-animation
```
— 委派动画配置任务
```
/remotion-composition
```
— 委派合成结构任务
```
/remotion-component-gen
```
— 委派场景实现任务（按场景）
```
/remotion-render-config
```
— 委派渲染配置任务

触发词：

"将规格说明转译为代码"
"实现视频规格说明"
"根据规格说明生成Remotion项目"
"根据设计构建Remotion项目"

本技能通过智能编排与委派，确保动效设计规格说明能系统地转换为完整可运行的Remotion项目。