remotion-asset-coordinator

Remotion 资源协调器

简化从动态图形设计规范到可用于生产的文件的资源准备工作流。识别需求、推荐来源、指导优化，并生成正确的导入代码。

此技能的功能

协调完整的资源生命周期：

1. 需求提取 — 从规范中解析所有资源需求
2. 来源推荐 — 推荐免费/付费资源来源
3. 格式指导 — 为每种资源类型推荐最佳格式
4. 准备工作流 — 提供分步资源准备说明
5. 导入代码生成 — 创建经过验证的 staticFile 导入
6. 质量验证 — 验证资源是否符合生产标准

输入/输出格式

输入格式：VIDEO_SPEC.md 或 CODE_SCAFFOLD.md

此技能接受以下任一格式：

选项 1：VIDEO_SPEC.md（来自 /motion-designer）

# Video Title

## Assets Required

### Images
- Logo (800x800, transparent background)
- Product photo (1920x1080)

### Audio
- Background music (full duration, 0.4 volume)
- Whoosh sound effect (5s mark, 0.6 volume)

### Fonts
- Inter (weights: 400, 600, 700)

选项 2：CODE_SCAFFOLD.md（来自 /remotion-spec-translator）

## TODO Markers

- [ ] **Assets Required**
  - [ ] Add `public/logo.png` (800x800)
  - [ ] Add `public/audio/background.mp3`
  - [ ] Add `public/audio/whoosh.mp3`

输出格式：ASSET_MANIFEST.md

生成全面的资源准备清单：

# Asset Manifest: [Video Title]

## Status Overview
- 🔴 Not Started: 3 assets
- 🟡 In Progress: 0 assets
- 🟢 Ready: 0 assets

**Progress:** 0/3 assets ready

## Required Assets

### Images (2 required)

#### 1. Logo
- **Status:** 🔴 Not Started
- **File Path:** `public/images/logo.png`
- **Specifications:**
  - Format: PNG (transparency required)
  - Dimensions: 800x800 pixels (2x for retina)
  - Display size: 400x400px
  - File size target: < 200KB

- **Source Recommendations:**
  - Option 1: Export from Figma/design tool
  - Option 2: Create in Photoshop/Illustrator
  - Optimization: Use pngquant or tinypng.com

- **Preparation Steps:**
  1. Export at 800x800 resolution
  2. Ensure transparent background
  3. Optimize with `pngquant --quality=80-95 logo.png`
  4. Verify file size < 200KB
  5. Save to `public/images/logo.png`

- **Import Code:**
  ```typescript
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('images/logo.png')}
    alt="Logo"
    style={{
      width: 400,
      height: 400,
    }}
  />

2. 产品照片

• 状态： 🔴 尚未开始

• 文件路径： public/images/product.jpg

• 规格：

  • 格式：JPEG（无需透明背景）
  • 尺寸：1920x1080 像素
  • 质量：85-90%
  • 目标文件大小：< 500KB

• 来源推荐：

  • 选项 1：Unsplash（免费，高质量）- https://unsplash.com
  • 选项 2：Pexels（免费）- https://pexels.com
  • 选项 3：定制摄影

• 准备步骤：

  1. 下载或拍摄 1920x1080 及以上尺寸的照片
  2. 编辑/裁剪至精确的 1920x1080 尺寸
  3. 以 JPEG 格式导出，质量设为 85-90%
  4. 确认文件大小 < 500KB
  5. 保存至 public/images/product.jpg

• 导入代码：

  import { Img, staticFile } from 'remotion';
  
  <Img
    src={staticFile('images/product.jpg')}
    style={{
      width: '100%',
      height: '100%',
      objectFit: 'cover',
    }}
  />
  

音频（需要 2 个）

3. 背景音乐

• 状态： 🔴 尚未开始

• 文件路径： public/audio/music/background.mp3

• 规格：

  • 格式：MP3
  • 时长：30 秒
  • 比特率：192-256 kbps
  • 采样率：44.1 kHz 或 48 kHz
  • 声道：立体声

• 来源推荐：

  • 选项 1：YouTube 音频库（免费）- https://studio.youtube.com
  • 选项 2：Incompetech（免费，需署名）- https://incompetech.com
  • 选项 3：Epidemic Sound（付费）- https://epidemicsound.com

• 准备步骤：

  1. 下载/购买 30 秒的音乐曲目
  2. 如有需要，裁剪至恰好 30 秒
  3. 如有需要，转换为 MP3：ffmpeg -i input.wav -b:a 192k output.mp3
  4. 如有需要，在结尾添加淡出效果
  5. 保存至 public/audio/music/background.mp3

• 导入代码：

  import { Audio, staticFile, useVideoConfig } from 'remotion';
  
  const { durationInFrames } = useVideoConfig();
  
  <Audio
    src={staticFile('audio/music/background.mp3')}
    volume={0.4}
    startFrom={0}
    endAt={durationInFrames}
  />
  

4. 呼啸音效

• 状态： 🔴 尚未开始

• 文件路径： public/audio/sfx/whoosh.mp3

• 规格：

  • 格式：MP3
  • 时长：1-2 秒
  • 比特率：192 kbps
  • 时间点：在 5 秒处播放（30fps 下为第 150 帧）

• 来源推荐：

  • 选项 1：Freesound（免费，知识共享许可）- https://freesound.org
  • 选项 2：Zapsplat（免费，需署名）- https://zapsplat.com
  • 选项 3：AudioJungle（付费）- https://audiojungle.net

• 准备步骤：

  1. 下载呼啸/转场音效
  2. 裁剪至 1-2 秒
  3. 如有需要，标准化音量
  4. 转换为 MP3：ffmpeg -i input.wav -b:a 192k whoosh.mp3
  5. 保存至 public/audio/sfx/whoosh.mp3

• 导入代码：

  import { Audio, Sequence, staticFile } from 'remotion';
  
  <Sequence from={150} durationInFrames={60}>
    <Audio
      src={staticFile('audio/sfx/whoosh.mp3')}
      volume={0.6}
    />
  </Sequence>
  

字体（需要 1 种）

5. Inter 字体

• 状态： 🟢 就绪（Google 字体）

• 所需字重： 400（常规）、600（半粗）、700（粗体）

• 来源： 通过 @remotion/google-fonts 使用 Google Fonts

• 安装：

  npm install @remotion/google-fonts
  

• 导入代码：

  import { loadFont } from '@remotion/google-fonts/Inter';
  
  const { fontFamily } = loadFont({
    weights: ['400', '600', '700'],
  });
  
  <div style={{
    fontFamily,
    fontWeight: 600,
  }}>
    Text content
  </div>
  

目录结构

在项目中创建以下文件夹结构：

public/
├── images/
│   ├── logo.png          # 🔴 Required
│   └── product.jpg       # 🔴 Required
└── audio/
    ├── music/
    │   └── background.mp3  # 🔴 Required
    └── sfx/
        └── whoosh.mp3      # 🔴 Required

快速参考：优化命令

图片

# Optimize PNG
pngquant --quality=80-95 input.png -o output.png

# Convert to JPEG
magick input.png -quality 90 output.jpg

# Resize image
magick input.png -resize 1920x1080 output.png

音频

# Convert to MP3
ffmpeg -i input.wav -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:00 -t 00:00:30 -c copy output.mp3

# Normalize volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" output.mp3

质量检查清单

标记资源为就绪前：

• 所有文件都位于正确的目录中
• 文件名与导入路径完全一致
• 图片尺寸正确（如有需要，视网膜屏幕使用 2 倍尺寸）
• 图片格式合适（透明图片使用 PNG，照片使用 JPEG）
• 图片文件大小已优化（理想情况下小于 500KB）
• 音频文件采用 MP3 格式
• 音频时长正确
• 音频比特率合适（192-256 kbps）
• 字体已正确安装并导入
• 已测试所有 staticFile() 路径

后续步骤

1. 收集资源，参考上面的来源建议
2. 准备资源，按照各类资源的准备步骤进行
3. 验证质量，使用检查清单
4. 更新状态，随着资源准备完成，将状态更新为 🟢 Ready
5. 实现代码，使用提供的导入代码片段
6. 运行 /remotion-video-reviewer，验证资源集成情况

**This document provides:**
- Complete asset inventory with specifications
- Source recommendations (free and paid)
- Step-by-step preparation workflows
- Ready-to-use import code snippets
- Quality validation checklist
- Progress tracking (🔴 🟡 🟢)

**Feeds into:** Developer implementation → `/remotion-video-reviewer` for quality check

## Asset Categories

### Images

**Types:**
- Product photos
- Background images
- Textures and patterns
- Icons and illustrations
- Logos and brand assets

**Optimal Formats:**
- **PNG**: Logos, icons, text overlays (transparency needed)
- **JPEG**: Photos, backgrounds (no transparency)
- **SVG**: Simple graphics, icons (scalable, small file size)
- **WebP**: Modern alternative, smaller file sizes

**Recommendations:**
```typescript
// Logo (transparency required)
Format: PNG
Resolution: 2x intended display size (retina)
Example: 400x400 element → 800x800 PNG

// Product photo
Format: JPEG (85-90% quality)
Resolution: Exact or slightly larger than display
Example: 1920x1080 display → 1920x1080 or 2560x1440 JPEG

// Icon
Format: SVG (preferred) or PNG
Resolution: 2x display size if PNG

视频

类型：

• 背景素材
• 产品演示
• 屏幕录制
• 转场

最佳格式：

• MP4（H.264）：兼容性最佳
• WebM：现代格式，文件更小
• ProRes：高质量源素材

建议：

// Background video
Format: MP4 (H.264)
Codec: H.264, High profile
Resolution: Match composition (1920x1080)
Bitrate: 5-10 Mbps
Frame rate: Match composition (30fps)

// Product demo
Format: MP4 (H.264)
Resolution: 1920x1080 or 3840x2160 (4K)
Bitrate: 10-20 Mbps
Alpha channel: Use ProRes 4444 if transparency needed

音频

类型：

• 背景音乐
• 音效（SFX）
• 旁白
• 环境音

最佳格式：

• MP3：经过压缩，兼容性良好
• WAV：未压缩，质量最佳
• AAC：现代格式，压缩效果优于 MP3

建议：

// Background music
Format: MP3 or AAC
Bitrate: 192-320 kbps
Sample rate: 44.1 kHz or 48 kHz
Channels: Stereo

// Sound effects
Format: WAV (for editing) → MP3 (for production)
Bitrate: 192 kbps (MP3)
Sample rate: 44.1 kHz
Channels: Stereo or Mono
Duration: Trim to exact needed length

// Voiceover
Format: WAV or MP3
Bitrate: 256-320 kbps
Sample rate: 48 kHz
Channels: Mono (sufficient for voice)

字体

类型：

• Google Fonts（免费，适用于 Web）
• 自定义字体（特定品牌专用）
• 系统字体（备用字体）

建议：

// Google Fonts (preferred)
Method: Import via @remotion/google-fonts
Weights: Only import needed weights
Example: 400 (regular), 600 (semibold), 700 (bold)

// Custom fonts
Format: WOFF2 (best), WOFF, TTF
Location: /public/fonts/
Import: Via CSS @font-face

资源来源建议

免费来源

图片与插图：

• Unsplash — 高质量照片（免费，无需署名）
• Pexels — 照片和视频（免费）
• Pixabay — 照片、矢量图和视频（免费）
• unDraw — 可自定义插图（免费，SVG）
• Heroicons — 精美的手工制作 SVG 图标（免费）

音频：

• Freesound — 音效库（知识共享许可）
• YouTube Audio Library — 音乐和 SFX（可免费用于商业用途）
• Incompetech — 免版税音乐（需要署名）
• Zapsplat — 免费音效（需要署名）

字体：

• Google Fonts — 1400 多款免费字体（适用于 Web）
• Font Squirrel — 可免费用于商业用途的字体

付费／高级来源

图片：

• Adobe Stock — 专业品质
• Shutterstock — 海量素材库
• Getty Images — 高级内容

音频：

• Epidemic Sound — 高品质音乐库
• Artlist — 无限音乐授权
• AudioJungle — 单曲曲目，价格实惠

字体：

• Adobe Fonts — 包含在 Creative Cloud 中
• MyFonts — 海量字体市场

资源准备工作流

图片准备

# 1. Resize to appropriate dimensions
magick input.png -resize 1920x1080 output.png

# 2. Optimize PNG
pngquant --quality=80-95 input.png -o optimized.png

# 3. Convert to JPEG (if no transparency)
magick input.png -quality 90 output.jpg

# 4. Generate WebP (modern format)
magick input.png -quality 85 output.webp

手动工作流：

1. 在 Photoshop/GIMP/Figma 中打开
2. 调整大小至精确尺寸或显示尺寸的 2 倍
3. 以合适的质量导出
4. 确认文件大小（大多数图片小于 1MB）

视频准备

# Convert to H.264 MP4
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 20 -c:a aac -b:a 192k output.mp4

# Resize video
ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 -crf 20 output.mp4

# Extract clip segment
ffmpeg -i input.mp4 -ss 00:00:10 -t 00:00:05 -c copy output.mp4

# Compress video
ffmpeg -i input.mp4 -c:v libx264 -crf 28 -c:a aac -b:a 128k compressed.mp4

音频准备

# Convert to MP3
ffmpeg -i input.wav -codec:a libmp3lame -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:05 -t 00:00:10 -c copy trimmed.mp3

# Adjust volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" louder.mp3

# Fade in/out
ffmpeg -i input.mp3 -af "afade=t=in:st=0:d=2,afade=t=out:st=28:d=2" faded.mp3

导入代码生成

图片

规格要求：“Logo.png (800x800)”

生成的代码：

import { Img, staticFile } from 'remotion';

// In component
<Img
  src={staticFile('logo.png')}
  alt="Logo"
  style={{
    width: 400,
    height: 400,
  }}
/>

视频

规格要求：“背景视频（1920x1080，30fps）”

生成的代码：

import { Video, staticFile } from 'remotion';

<Video
  src={staticFile('background-video.mp4')}
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  }}
/>

音频

规格要求：“背景音乐（完整时长）”

生成的代码：

import { Audio, staticFile, useVideoConfig } from 'remotion';

// In component
const { durationInFrames } = useVideoConfig();

<Audio
  src={staticFile('background-music.mp3')}
  volume={0.5}
  startFrom={0}
  endAt={durationInFrames}
/>

字体

规格要求：“Inter 字体（400、600、700）”

生成的代码：

import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont({
  weights: ['400', '600', '700'],
});

// In component
<div style={{
  fontFamily,
  fontWeight: 700,
}}>
  Text content
</div>

资源整理

目录结构

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   ├── product.jpg
│   │   └── background.webp
│   ├── videos/
│   │   ├── intro.mp4
│   │   └── demo.mp4
│   ├── audio/
│   │   ├── music/
│   │   │   └── background.mp3
│   │   └── sfx/
│   │       ├── whoosh.mp3
│   │       ├── pop.mp3
│   │       └── ding.mp3
│   └── fonts/
│       └── CustomFont.woff2
└── src/
    └── remotion/
        └── compositions/

命名规范

// Good naming
logo.png              // Clear, simple
product-hero.jpg      // Descriptive
background-gradient.webp
whoosh-transition.mp3
background-music.mp3

// Bad naming
IMG_1234.jpg         // Not descriptive
final-FINAL-v2.png   // Confusing versions
my image.png         // Spaces (use hyphens)

质量验证清单

在生产环境中使用素材前：

图像：

• 尺寸正确（如有需要，视网膜屏幕使用 2x 尺寸）
• 格式合适（透明图像使用 PNG，照片使用 JPEG）
• 文件大小经过优化（理想情况下小于 500KB，最大不超过 1MB）
• 没有瑕疵或压缩问题
• 如有需要，使用透明背景

视频：

• 分辨率正确（与合成内容匹配）
• 帧率正确（与合成内容匹配）
• 编码格式合适（H.264）
• 文件大小合理（理想情况下小于 50MB）
• 没有丢帧
• 如有需要，包含音频

音频：

• 格式正确（MP3 或 WAV）
• 比特率合适（192-320 kbps）
• 剪辑至准确时长
• 音量已标准化
• 没有削波或失真
• 如有需要，添加淡入/淡出效果

字体：

• 拥有可用于商业用途的合法许可证
• 提供所有所需字重
• 格式正确（首选 WOFF2）
• 已在合成内容中正确加载

与其他技能集成

配合使用：

• /motion-designer — 从规格说明中提取素材需求
• /remotion-spec-translator — 在翻译过程中生成素材导入代码
• /remotion-video-reviewer — 在审核过程中验证素材质量

规则目录

详细的素材指南：

• rules/image-assets.md — 图像准备与优化
• rules/video-assets.md — 视频编码与准备
• rules/audio-assets.md — 音频处理与集成
• rules/font-assets.md — 字体加载与管理

---

此技能可确保所有素材都经过妥善获取、准备和集成，从而制作出可用于生产环境的 Remotion 视频。