modern-short-video

现代短视频技能

使用 Remotion 和 React 制作专业、现代的产品发布视频。

前置条件（必须）

警告：请勿跳过此步骤。跳过将导致错过丰富表现形式的机会。

此技能扩展了 Remotion 最佳实践。你必须完成以下两项：

1. 先加载技能：

   /remotion-best-practices
   

2. 阅读 remotion-best-practices 的 SKILL.md，并确定哪些规则与产品相关（地图、图表、文本动画、3D、lottie 等）。

工作流

第 1 步：分析产品并选择丰富表现形式（关键）

在索取屏幕截图之前，先分析产品，并从 remotion-best-practices 中找出相关的丰富表现形式。

尽可能使用动态内容替代静态屏幕截图：

• 地图应用 → 绘制路线的动画地图
• 仪表盘 → 动画图表
• 文本应用 → 打字机效果
• 等等

阅读 remotion-best-practices 中相关的规则文件并加以应用。

第 2 步：询问设备、主题和 BGM

使用 AskUserQuestion 提问：

1. 设备类型：产品主要面向智能手机（SP）还是 PC／桌面端？

   • SP（智能手机）→ 使用手机模型边框
   • PC／桌面端 → 使用浏览器／桌面模型边框

2. 屏幕截图主题：屏幕截图使用浅色模式还是深色模式？

   • 深色模式（推荐）→ 与视频背景（#0a0a0a）融合
   • 浅色模式 → 对比度更高，屏幕截图更加突出

3. BGM（背景音乐）：是否添加背景音乐？

   • 是（推荐）→ 从 Pixabay 下载免费音乐
   • 否 → 制作不含 BGM 的视频

第 3 步：收集屏幕截图

注意：使用丰富表现形式的场景（第 1 步）无需屏幕截图。

所需图片（放入 public/ 文件夹）：

文件	用途	必需
mockup.png	产品主屏幕截图（模型场景）	是
feature-1.png	功能 1 屏幕截图	是
feature-2.png	功能 2 屏幕截图	可选
feature-3.png	功能 3 屏幕截图	可选

第 4 步：收集内容

所需信息：

• 产品名称
• 一句话标语／概念
• 功能 1：标题 + 简短描述
• 功能 2：标题 + 简短描述（可选）
• 功能 3：标题 + 简短描述（可选）
• CTA 文案（例如“免费试用”）
• URL

第 5 步：验证素材

ls public/*.png

第 6 步：创建合成

创建 src/remotion/[ProductName]/[ProductName]Intro.tsx，并加入所有场景。

第 7 步：注册并计算时长

添加到 Root.tsx。重要：正确计算 durationInFrames：

durationInFrames = Sum of scene durations - (transition duration × number of transitions)

详情请参阅 rules/duration-calculation.md。

第 8 步：测试

运行 pnpm run dev（或 bun run remotion）并预览视频。

场景结构（8 个场景）

┌─────────────────────────────────────────────────────────────┐
│  1. REVEAL     2. CONCEPT    3. MOCKUPS                     │
│  (2-3s)        (3-4s)        (3-4s)                         │
│  Logo/Name     Value prop    Product preview                │
├─────────────────────────────────────────────────────────────┤
│  4. FEATURE 1  5. FEATURE 2  6. FEATURE 3                   │
│  (3-4s each)   (optional)    (optional)                     │
│  Screenshot +  Screenshot +  Screenshot +                   │
│  Title/Desc    Title/Desc    Title/Desc                     │
├─────────────────────────────────────────────────────────────┤
│  7. OUTRO      8. CTA                                       │
│  (2-3s)        (3-4s)                                       │
│  Summary       URL + Action                                 │
└─────────────────────────────────────────────────────────────┘

场景详情

场景	时长	内容	素材
1. 揭示	2-3 秒	产品名称、简约动画	-
2. 概念	3-4 秒	标语、价值主张	-
3. 模型	3-4 秒	带主屏幕截图的设备模型	mockup.png 或丰富表现形式
4. 功能 1	3-4 秒	功能标题 + 屏幕截图	feature-1.png 或丰富表现形式
5. 功能 2	3-4 秒	功能标题 + 屏幕截图	feature-2.png 或丰富表现形式
6. 功能 3	3-4 秒	功能标题 + 屏幕截图	feature-3.png 或丰富表现形式
7. 结尾	2-3 秒	产品名称 + 总结	-
8. CTA	3-4 秒	URL、行动号召	-

总时长：15-25 秒（取决于功能数量）

设计规则

元素	应做	不应做
背景	纯色深色 #0a0a0a	渐变
排版	使用单一字体（Inter/Noto Sans JP）	使用多种字体
动画	轻柔淡入／滑动	弹跳／炫目效果
模型	真实屏幕截图或丰富表现形式	占位图形
文本	精简、清晰	长篇段落

详细指南

如需全面了解，请阅读以下规则文件：

• rules/design-principles.md - 视觉设计系统
• rules/scene-structure.md - 场景构图模式
• rules/visual-elements.md - 模型图、字体、颜色
• rules/animation-patterns.md - 动态设计模式
• rules/code-templates.md - 可直接使用的 Remotion 组件
• rules/duration-calculation.md - 如何计算视频总时长
• rules/bgm.md - 背景音乐来源和实现方式

快速参考：场景组件

// Scene order
<TransitionSeries>
  <RevealScene />      {/* 1. Logo/Name */}
  <ConceptScene />     {/* 2. Value proposition */}
  <MockupsScene />     {/* 3. Main product mockup */}
  <FeatureScene n={1} /> {/* 4. Feature 1 */}
  <FeatureScene n={2} /> {/* 5. Feature 2 (if provided) */}
  <FeatureScene n={3} /> {/* 6. Feature 3 (if provided) */}
  <OutroScene />       {/* 7. Summary */}
  <CTAScene />         {/* 8. Call to action */}
</TransitionSeries>

交付前检查清单

• 已加载前置条件（已执行 /remotion-best-practices 并阅读相关规则）
• 在适用的场景中使用了丰富表达方式（地图、图表、文本动画等）
• 已为未使用丰富表达方式的场景收集截图
• 截图质量高（优先使用 2 倍分辨率）
• 文本在 720p 下清晰可读
• 总时长为 15-25 秒
• 已正确计算 durationInFrames（减去转场重叠帧数！）
• 视频结尾没有黑帧
• 转场流畅（淡入淡出，15 帧）
• CTA 和 URL 清晰可见
• 已添加 BGM（可选，音量约为 0.25）