modern-short-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modern Short Video Skill

现代短视频制作技能

Create professional, modern product launch videos using Remotion and React.

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

Prerequisites (MANDATORY)

前置要求（必须完成）

WARNING: Do NOT skip this step. Skipping will result in missing rich expression opportunities.

This skill extends Remotion best practices. You MUST do both:

Load the skill first:
```
/remotion-best-practices
```
Read the SKILL.md of remotion-best-practices and identify which rules are relevant to the product (maps, charts, text animations, 3D, lottie, etc.)

警告：请勿跳过此步骤。跳过将导致无法使用丰富的动态效果。

本技能基于Remotion最佳实践扩展而来。你必须完成以下两项操作：

先加载该技能：
```
/remotion-best-practices
```
阅读remotion-best-practices的SKILL.md，确定哪些规则与产品相关（如地图、图表、文字动画、3D、Lottie等）。

Workflow

工作流程

Step 1: Analyze Product & Select Rich Expressions (CRITICAL)

步骤1：分析产品并选择动态效果（关键步骤）

Before asking for screenshots, analyze the product and find relevant rich expressions from remotion-best-practices.

Replace static screenshots with dynamic content wherever possible:

Map app → animated map with route drawing
Dashboard → animated charts
Text app → typewriter effects
etc.

Read the relevant rule files from remotion-best-practices and use them.

在索要截图之前，先分析产品，从remotion-best-practices中找到相关的动态效果。

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

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

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

Step 2: Device, Theme & BGM Questions

步骤2：询问设备、主题与背景音乐问题

Use
AskUserQuestion
to ask:

Device Type: Is the product primarily for smartphone (SP) or PC/Desktop?
- SP (Smartphone) → Use phone mockup frame
- PC/Desktop → Use browser/desktop mockup frame
Screenshot Theme: Should screenshots be in Light mode or Dark mode?
- Dark mode (Recommended) → Blends with video background (#0a0a0a)
- Light mode → Higher contrast, screenshots stand out more
BGM (Background Music): Add background music?
- Yes (Recommended) → Download free music from Pixabay
- No → Create video without BGM

使用
AskUserQuestion
询问以下问题：

设备类型：该产品主要面向智能手机（SP）还是PC/桌面端？
- SP（智能手机）→ 使用手机样机框架
- PC/桌面端 → 使用浏览器/桌面样机框架
截图主题：截图应使用浅色模式还是深色模式？
- 深色模式（推荐）→ 与视频背景（#0a0a0a）融合更好
- 浅色模式 → 对比度更高，截图更突出
背景音乐（BGM）：是否添加背景音乐？
- 是（推荐）→ 从Pixabay下载免费音乐
- 否 → 制作无背景音乐的视频

Step 3: Collect Screenshots

步骤3：收集截图

Note: Screenshots for scenes using rich expressions (Step 1) are not needed.

Required images (place in

public/

folder):

File	Purpose	Required
`mockup.png`	Main product screenshot (Mockups scene)	Yes
`feature-1.png`	Feature 1 screenshot	Yes
`feature-2.png`	Feature 2 screenshot	Optional
`feature-3.png`	Feature 3 screenshot	Optional

注意：使用步骤1中动态效果的场景无需提供截图。

所需图片（放置在

public/

文件夹中）：

文件	用途	是否必需
`mockup.png`	产品主截图（样机场景）	是
`feature-1.png`	功能1截图	是
`feature-2.png`	功能2截图	可选
`feature-3.png`	功能3截图	可选

Step 4: Collect Content

步骤4：收集内容信息

Required information:

Product name
One-line tagline/concept
Feature 1: Title + short description
Feature 2: Title + short description (optional)
Feature 3: Title + short description (optional)
CTA text (e.g., "Try it free")
URL

所需信息：

产品名称
一句标语/核心概念
功能1：标题 + 简短描述
功能2：标题 + 简短描述（可选）
功能3：标题 + 简短描述（可选）
行动号召（CTA）文本（例如：“免费试用”）
网址

Step 5: Verify Assets

步骤5：验证资源

bash

ls public/*.png

bash

ls public/*.png

Step 6: Create Composition

步骤6：创建合成文件

Create

src/remotion/[ProductName]/[ProductName]Intro.tsx

with all scenes.

创建

src/remotion/[ProductName]/[ProductName]Intro.tsx

文件，包含所有场景。

Step 7: Register & Calculate Duration

步骤7：注册并计算时长

Add to

Root.tsx

. IMPORTANT: Calculate

durationInFrames

correctly:

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

See rules/duration-calculation.md for details.

添加到

Root.tsx

中。重要提示：正确计算

durationInFrames

：

durationInFrames = 各场景时长总和 -（转场时长 × 转场次数）

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

Step 8: Test

步骤8：测试

Run

pnpm run dev

(or

bun run remotion

) and preview the video.

运行

pnpm run dev

（或

bun run remotion

）并预览视频。

Scene Structure (8 Scenes)

场景结构（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秒)        (3-4秒)        (3-4秒)                         │
│  Logo/产品名称     价值主张    产品预览                │
├─────────────────────────────────────────────────────────────┤
│  4. 功能1展示  5. 功能2展示  6. 功能3展示                   │
│  (每个3-4秒)   (可选)    (可选)                     │
│  截图 + 标题/描述    截图 + 标题/描述    截图 + 标题/描述                     │
├─────────────────────────────────────────────────────────────┤
│  7. 结尾总结      8. 行动号召                                       │
│  (2-3秒)        (3-4秒)                                       │
│  产品名称 + 总结       网址 + 行动指令                                 │
└─────────────────────────────────────────────────────────────┘

Scene Details

场景详情

Scene	Duration	Content	Asset
1. Reveal	2-3s	Product name, minimal animation	-
2. Concept	3-4s	Tagline, value proposition	-
3. Mockups	3-4s	Device mockup with main screenshot	`mockup.png` or rich expression
4. Feature 1	3-4s	Feature title + screenshot	`feature-1.png` or rich expression
5. Feature 2	3-4s	Feature title + screenshot	`feature-2.png` or rich expression
6. Feature 3	3-4s	Feature title + screenshot	`feature-3.png` or rich expression
7. Outro	2-3s	Product name + summary	-
8. CTA	3-4s	URL, call to action	-

Total Duration: 15-25 seconds (depending on feature count)

场景	时长	内容	资源
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. 行动号召	3-4秒	网址、行动指令	-

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

Design Rules

设计规则

Element	Do	Don't
Background	Solid dark `#0a0a0a`	Gradients
Typography	Single font (Inter/Noto Sans JP)	Multiple fonts
Animation	Subtle fade/slide	Bouncy/flashy
Mockups	Real screenshots or rich expressions	Placeholder graphics
Text	Minimal, clear	Long paragraphs

元素	建议	禁忌
背景	纯深色 `#0a0a0a`	渐变背景
字体	单一字体（Inter/Noto Sans JP）	多种字体混用
动画	淡入/滑入等柔和动画	弹跳/闪烁类夸张动画
样机	真实截图或动态效果	占位图
文字	简洁明了	大段文字

Detailed Guidelines

详细指南

For comprehensive guidance, read these rule files:

rules/design-principles.md - Visual design system
rules/scene-structure.md - Scene composition patterns
rules/visual-elements.md - Mockups, typography, colors
rules/animation-patterns.md - Motion design patterns
rules/code-templates.md - Ready-to-use Remotion components
rules/duration-calculation.md - How to calculate total video duration
rules/bgm.md - Background music source and implementation

如需全面指导，请阅读以下规则文件：

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 - 背景音乐来源与实现

Quick Reference: Scene Components

快速参考：场景组件

tsx

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

tsx

// 场景顺序
<TransitionSeries>
  <RevealScene />      {/* 1. Logo/产品名称 */}
  <ConceptScene />     {/* 2. 价值主张 */}
  <MockupsScene />     {/* 3. 主产品样机 */}
  <FeatureScene n={1} /> {/* 4. 功能1 */}
  <FeatureScene n={2} /> {/* 5. 功能2（若提供） */}
  <FeatureScene n={3} /> {/* 6. 功能3（若提供） */}
  <OutroScene />       {/* 7. 总结 */}
  <CTAScene />         {/* 8. 行动号召 */}
</TransitionSeries>

Checklist Before Delivery

交付前检查清单

Prerequisites loaded (
```
/remotion-best-practices
```
executed and relevant rules read)
Rich expressions used where applicable (maps, charts, text animations, etc.)
Screenshots collected for scenes not using rich expressions
Screenshots are high quality (2x resolution preferred)
Text is readable at 720p
Total duration 15-25 seconds
durationInFrames correctly calculated (subtract transition overlaps!)
No black frames at the end of video
Transitions are smooth (fade, 15 frames)
CTA and URL clearly visible
BGM added (optional, volume ~0.25)

已加载前置要求（已执行
```
/remotion-best-practices
```
并阅读相关规则）
已在适用场景使用动态效果（如地图、图表、文字动画等）
已收集未使用动态效果的场景所需截图
截图为高质量（推荐2倍分辨率）
文字在720p分辨率下清晰可读
总时长为15-25秒
已正确计算durationInFrames（减去转场重叠时间！）
视频结尾无黑帧
转场流畅（淡入，15帧）
行动号召（CTA）与网址清晰可见
已添加背景音乐（可选，音量约0.25）