使用 Remotion 和 React 创建专业短视频：现代产品发布视频制作指南

modern-short-video by imaimai17468/modern-short-video-skills

233 周安装量

6 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/imaimai17468/modern-short-video-skills --skill modern-short-video

内容创作开发 React

🇨🇳中文介绍

现代短视频技能

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

前提条件（必需）

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

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

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

工作流程

步骤 1：分析产品并选择丰富的表达方式（关键）

在请求截图之前，请分析产品并从 remotion-best-practices 中找到相关的丰富表达方式。

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

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

阅读 remotion-best-practices 中的相关规则文件并使用它们。

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

使用 AskUserQuestion 询问：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

步骤 3：收集截图

注意：使用丰富表达方式的场景（步骤 1）不需要截图。

所需图片（放置在 public/ 文件夹中）：

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

步骤 4：收集内容

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

步骤 5：验证资源

步骤 6：创建合成

创建包含所有场景的 src/remotion/[ProductName]/[ProductName]Intro.tsx。

步骤 7：注册并计算时长

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

durationInFrames = 各场景时长之和 - (转场时长 × 转场次数)

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

场景结构（8 个场景）

┌─────────────────────────────────────────────────────────────┐
│  1. 揭示       2. 概念       3. 模型                        │
│  (2-3秒)       (3-4秒)       (3-4秒)                        │
│  徽标/名称     价值主张      产品预览                        │
├─────────────────────────────────────────────────────────────┤
│  4. 功能 1     5. 功能 2     6. 功能 3                      │
│  (各 3-4秒)    (可选)        (可选)                         │
│  截图 +        截图 +        截图 +                         │
│  标题/描述     标题/描述     标题/描述                       │
├─────────────────────────────────────────────────────────────┤
│  7. 结尾       8. 行动号召                                   │
│  (2-3秒)       (3-4秒)                                       │
│  总结          URL + 行动                                   │
└─────────────────────────────────────────────────────────────┘

场景	时长	内容	资源
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秒	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 - 背景音乐来源与实现

快速参考：场景组件

// 场景顺序
<TransitionSeries>
  <RevealScene />      {/* 1. 徽标/名称 */}
  <ConceptScene />     {/* 2. 价值主张 */}
  <MockupsScene />     {/* 3. 主要产品模型 */}
  <FeatureScene n={1} /> {/* 4. 功能 1 */}
  <FeatureScene n={2} /> {/* 5. 功能 2 (如果提供) */}
  <FeatureScene n={3} /> {/* 6. 功能 3 (如果提供) */}
  <OutroScene />       {/* 7. 总结 */}
  <CTAScene />         {/* 8. 行动号召 */}
</TransitionSeries>

交付前检查清单

前提条件已加载（已执行 /remotion-best-practices 并阅读相关规则）
已使用丰富表达（在适用处使用地图、图表、文本动画等）
已为未使用丰富表达的场景收集截图
截图质量高（推荐 2 倍分辨率）
文本在 720p 下清晰可读
总时长 15-25 秒
durationInFrames 计算正确（减去转场重叠部分！）
视频末尾没有黑帧
转场平滑（淡入淡出，15 帧）
行动号召和 URL 清晰可见
已添加背景音乐（可选，音量约 0.25）

2026 年 1 月 27 日

🇺🇸English

Modern Short Video Skill

Create professional, modern product launch videos using Remotion and 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.)

Workflow

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

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.

Step 2: Device, Theme & BGM Questions

UseAskUserQuestion 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

Step 3: Collect Screenshots

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

Step 4: Collect Content

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

Step 5: Verify Assets

ls public/*.png

Step 6: Create Composition

Create src/remotion/[ProductName]/[ProductName]Intro.tsx with all scenes.

Step 7: Register & Calculate Duration

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.

Step 8: Test

Run pnpm run dev (or bun run remotion) and preview the video.

Scene Structure (8 Scenes)

┌─────────────────────────────────────────────────────────────┐
│  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                                 │
└─────────────────────────────────────────────────────────────┘

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

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

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

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

Quick Reference: Scene Components

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

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)

Weekly Installs

201

Repository

imaimai17468/mo…o-skills

GitHub Stars

First Seen

Jan 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode186

gemini-cli183

cursor180

codex179

github-copilot171

cline157

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

116,600 周安装