remotion-spec-translator

Remotion 规格翻译器

编排从动态设计规格到可运行 Remotion 代码的完整翻译流程。此技能充当协调器，将工作委派给负责翻译各个方面的专业技能。

此技能的作用

通过以下方式编排翻译流程：

1. 协调流程 — 按正确顺序调用专业技能
2. 解析规格 — 提取各项技能所需的要求
3. 管理交接 — 确保一项技能的输出传递给下一项技能
4. 验证完整性 — 确认所有场景均已实现
5. 记录工作流 — 跟踪流程进度

范围边界

范围内：

• 流程编排与协调
• 规格解析与要求提取
• 技能委派与排序
• 进度跟踪与验证
• 工作流文档记录

范围外：

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

输入／输出格式

输入格式：VIDEO_SPEC.md

需要完整的动态设计规格（来自 /motion-designer）：

# Video Title: ProductDemo

## Overview
- 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

## Scene 2: Features (5s - 15s)
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

## Scene 4: CTA (25s - 30s)
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)

输出格式：TRANSLATION_COMPLETE.md

生成编排摘要文档：

# 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

### Step 2: Animation Configuration (/remotion-animation)
✅ 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

### 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

### Step 5: Render Configuration (/remotion-render-config)
✅ Complete
- Created: Render settings
- Output: RENDER_CONFIG.md
- Target: YouTube (H.264, CRF 18)

## Generated Files

src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ 包含所有场景的合成 ├── constants.ts # ✅ 颜色、弹簧、时间 ├── types.ts # ✅ TypeScript 接口 └── scenes/ ├── Scene1Intro.tsx # ✅ 已实现 ├── Scene2Features.tsx # ✅ 已实现 ├── Scene3Demo.tsx # ✅ 已实现 └── Scene4CTA.tsx # ✅ 已实现

## Next Steps

1. **Add assets** to public/ folders
   - Logo: public/images/logo.svg
   - Product screenshot: public/images/product.png

2. **Test in preview**
   ```bash
   npm run dev

3. 验证时间与规格完全一致

4. 运行渲染（准备就绪后）

   npm run render:youtube
   

5. 审查并迭代（如需调整）

资源清单

规格要求的资源：

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

使用 /remotion-asset-coordinator 获取资源来源指导。

质量清单

• 所有场景均已实现
• 时间与规格一致
• 动画已配置
• 已应用调色板中的颜色
• 合成结构完整
• 已添加资源
• 已测试预览
• 已完成最终渲染

翻译摘要

输入： VIDEO_SPEC.md（动态设计规格） 流程： 依次执行 5 项专业技能 输出： 完整且可运行的 Remotion 合成 状态： 实现已完成，资源和测试待处理

## Orchestration Workflow

The pipeline executes in this sequence:

VIDEO_SPEC.md（输入） ↓ 步骤 1：/remotion-scaffold ↓ 输出：SCAFFOLD_MANIFEST.md + 文件夹结构 步骤 2：/remotion-animation ↓ 输出：ANIMATION_CONFIG.md + 动画常量 步骤 3：/remotion-composition ↓ 输出：COMPOSITION_STRUCTURE.md + 序列布局 步骤 4：/remotion-component-gen（每个场景） ↓ 输出：SCENE_COMPONENT.md × N 个场景 步骤 5：/remotion-render-config ↓ 输出：RENDER_CONFIG.md + 渲染命令 ↓ TRANSLATION_COMPLETE.md（输出）

## Skill Delegation Strategy

### When to Delegate

1. **Parse spec** → Extract requirements for each skill
2. **Check dependencies** → Ensure prerequisites met
3. **Call skill** → Provide focused input
4. **Capture output** → Store for next skill
5. **Validate** → Confirm output quality
6. **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

规格解析辅助工具

提取弹簧配置

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

提取场景时间

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

提取调色板

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

提取资源列表

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

进度跟踪

编排器跟踪流程进度：

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)

错误处理

信息缺失

如果规格缺少必需信息：

• 找出缺口（例如，缺少弹簧配置）
• 尽可能使用合理的默认值
• 在输出中记录假设
• 标记以供用户审查

技能执行失败

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

• 记录错误及其上下文
• 尽可能尝试恢复
• 如果不影响后续步骤，则跳过
• 在最终摘要中报告问题

规格不完整

如果规格不完整：

• 解析现有内容
• 使用 TODO 标记生成
• 列出缺失要求
• 建议改进规格

验证清单

标记翻译完成前：

• 规范中的所有场景都有对应组件
• 动画配置与规范参数一致
• 场景时长总和等于总时长
• 已提取并应用调色板
• 已生成资源列表
• 渲染配置针对正确的平台
• 关键部分没有 TODO 标记

最佳实践

1. 彻底解析 — 提取规范中的所有细节
2. 合理分工 — 为每项任务选择合适的技能
3. 保持上下文 — 在技能之间传递相关信息
4. 验证输出 — 检查每项技能的结果
5. 清晰记录 — 说明已完成的工作
6. 跟踪进度 — 展示工作流状态
7. 处理错误 — 妥善处理失败

与其他技能集成

此技能负责协调工作流：

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 项目。