Remotion video starter

A complete Remotion video production automation skill for creating product promotional videos

Install

npx -y skills add cuishiqing/remotion-video-starter

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

13.1 KB, as published. Nobody here has run it

Remotion Video Starter Skill

版本： v2.0 最后更新： 2026-03-24 作者： Abu + Claude

Skill 概述

这是一个完整的 Remotion 视频制作自动化 skill，用于快速制作产品推广视频。

核心能力：

自动分析 GitHub 项目并生成视频创意
9步完整流程，从分析到交付
支持竖屏（1080×1920）和横屏（1920×1080）
自动生成配音、发布文案、信息卡

适用场景：

GitHub 项目推广视频
开源项目介绍
产品功能演示

输出格式：

竖屏：抖音、视频号、小红书
横屏：B站、YouTube

使用方法

调用方式

使用 remotion-video-starter skill 为 [项目名称] 制作推广视频

必需输入

GitHub URL 或 项目名称
视频格式（可选，默认竖屏）
目标时长（可选，默认76秒）

9步完整流程

步骤 1：Gemini 深度分析项目

目的： 理解项目的核心价值、亮点、目标用户

操作：

调用 Gemini 分析项目
输入：GitHub URL
输出：content/01-主题分析.md

输出内容包含：

核心功能（3-5个）
目标用户（3-5类）
解决的痛点（3-5个）
独特优势（3-5个）
最吸引人的亮点（1-3个）
视频推广角度（标题建议、核心卖点、风格定位）
配色方案建议

步骤 2：设计视频结构

目的： 规划6场景结构和时间线

操作：

基于 01-主题分析.md 设计场景结构
输出：content/02-视频结构.md

场景结构（76秒竖屏版）：

场景1：开场钩子（10秒）- GitHub Star 数量滚动
场景2：痛点直击（10秒）- 传统方式的问题
场景3：方案登场（10秒）- 产品名称突出
场景4：核心亮点（20秒）- 功能卡片展示
场景5：实际演示（18秒）- 使用流程
场景6：行动号召（8秒）- GitHub Star 引导

输出内容包含：

每个场景的画面描述
配音方向
动画建议
时间线总览（帧数计算）
配色方案
动画库参考

步骤 3：编写配音脚本

目的： 创作6场景完整配音文案

操作：

基于 01 和 02 创作配音脚本
输出：content/03-配音脚本.md

配音原则：

场景1：有力、吸引注意（强调 Star 数量）
场景2：紧迫感、痛点共鸣
场景3：产品名称清晰有力（语速稍慢 1.1x）
场景4：平稳清晰、停顿强调
场景5：从容、步骤清晰
场景6：上扬、号召行动（语速稍快 1.15x）

总字数控制：

76秒视频：约 280-320 字
语速：约 2.2 字/秒（正常）到 2.8 字/秒（快）

步骤 4：复制模板项目并清理

目的： 快速搭建 Remotion 项目骨架

操作：

# 4.1 选择模板项目
cd ~/Documents/Claude\ Code/视频

# 竖屏视频（推荐）
cp -r social-analyzer-video [新项目名称]-video

# 横屏视频
# cp -r [横屏模板项目] [新项目名称]-video

# 4.2 进入新项目
cd [新项目名称]-video

# 4.3 清理旧文件
rm -rf public/audio/*.mp3
rm -rf out/*
rm -rf content/*.md

模板项目位置：

竖屏：~/Documents/Claude Code/视频/social-analyzer-video/（最新，9步流程）
横屏：~/Documents/Claude Code/视频/[横屏模板]/

步骤 5：更新 Remotion 配置

目的： 修改项目名称和配置

操作：

# 5.1 批量替换项目名称
cd src/compositions
# 使用 VSCode 或编辑器
# 查找：SocialAnalyzer
# 替换：[新项目名称，驼峰命名]

# 5.2 更新 Root.tsx
# 检查 durationInFrames 是否匹配步骤2的时间线

关键配置：

Root.tsx：视频分辨率、总时长
remotion.config.ts：项目配置
package.json：项目名称

步骤 6：实现场景组件

目的： 根据步骤2的结构实现6个场景

操作：

# 基于 02-视频结构.md 修改每个场景组件
cd src/compositions

# 修改文件：
# - Scene1_Opening.tsx
# - Scene2_PainPoint.tsx
# - Scene3_Solution.tsx  ⭐ 最重要场景
# - Scene4_Features.tsx
# - Scene5_Demo.tsx
# - Scene6_CTA.tsx

场景3特别说明（产品名称突出）：

// 1. 超大字号渐变
background: "linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%)"
WebkitBackgroundClip: "text"
WebkitTextFillColor: "transparent"

// 2. 脉冲动画
const logoPulse = Math.sin(frame * 0.1) * 0.05 + 1;

// 3. 发光效果
<div style={{
  background: `radial-gradient(circle, rgba(34, 197, 94, ${glowIntensity * 0.5}) 0%, transparent 70%)`,
  filter: "blur(20px)",
}} />

// 4. 扫描线动画
<div style={{
  top: `${(frame / 150) * 100}%`,
  height: "2px",
  background: "#00ff41",
}} />

步骤 6.4：添加固定尾帧

目的： 统一品牌识别，提升效率

操作：

# 6.4.1 创建 Scene7_Ending.tsx 组件
# 基于模板项目的 Scene7_Ending.tsx

# 6.4.2 复制尾帧文件
cp ~/Documents/Claude\ Code/视频/assets/ending-frames/default.mp4 \
   public/scenes/scene7-ending.mp4

# 6.4.3 添加到主组件时间线
# 在 [ProjectName]Video.tsx 中：
<Sequence from={2280} durationInFrames={148}>
  <Scene7_Ending />
</Sequence>

# 6.4.4 更新 Root.tsx 总时长
durationInFrames={2428}  # 2280 + 148

尾帧映射表：

视频类型	推荐尾帧	文件名
通用产品	主账号宣传	default.mp4
科技/创新	（未来）科技风格	alternative-tech.mp4
B端/专业	（未来）极简风格	alternative-minimal.mp4

默认使用： default.mp4（主账号宣传，4.93秒，148帧）

步骤 7：生成配音音频

目的： 使用豆包TTS生成6个场景配音

操作：

# 7.1 创建音频生成脚本
cd scripts
cp ~/Documents/Claude\ Code/视频/social-analyzer-video/scripts/generate_audio.py .

# 7.2 修改脚本中的文案
# 编辑 generate_audio.py
# 替换 SCENES 数组中的文案为步骤3的内容

# 7.3 生成音频
python3 generate_audio.py

豆包TTS配置：

VOLC_API_KEY = "你的豆包API Key"
VOLC_TTS_URL = "https://openspeech.bytedance.com/api/v1/tts"
VOICE_TYPE = "zh_male_liufei_uranus_bigtts"  # 刘飞声音
CLUSTER_ID = "volcano_tts"

💡 获取 API Key： 访问火山引擎

预期输出：

public/audio/
├── scene1.mp3
├── scene2.mp3
├── scene3.mp3
├── scene4.mp3
├── scene5.mp3
└── scene6.mp3

步骤 8：生成视频号发布文案

目的： 生成适配视频号的发布文案

操作：

基于 01-主题分析.md 和 03-配音脚本.md
输出：content/08-发布文案.md

内容结构：

短标题（16字符以内）
开头钩子（来自配音脚本场景1）
核心亮点（3-5个，来自主题分析）
价值升华（一句话总结）
行动号召（来自配音脚本场景6）
热门标签（3-5个相关标签）

示例：

【标题】22,000+ Star！全网账号一键扫描 🔍

【开头】
你的网络"分身"藏不住了！
1分钟找到你在1000个网站的踪迹

【核心亮点】
✅ 支持 1000+ 社交媒体和网站
✅ 智能评分系统，精准定位
✅ 多层次检测 + OCR 光学字符识别
✅ 可视化图谱分析

【价值升华】
安全专家和执法机构都在用的 OSINT 神器

【行动号召】
开源免费，链接在评论区！快去试试看吧！

【标签】
#网络安全 #OSINT #开源工具 #GitHub推荐

步骤 9：生成信息卡

目的： 生成项目信息卡图片，用于视频封面

操作：

调用 Gemini 生成 HTML 信息卡
输出：output/[项目名称]-card.html

核心原则：

信息卡目标是让用户通过图片理解产品价值
内容必须丰富、具体、有说服力
必须从多个文档汇总，不能简单列举
列出具体名称（播客名、人名），不只是数字

内容结构（7个部分）：

痛点引入 - 场景化描述，引起共鸣
核心理念 - 产品 Slogan
具体数据 - 列出播客名、人名（不只是数字）
核心功能 - 详细说明（不只简单列举）
使用方法 - 操作步骤、所需时间
目标用户 - 适合人群
行动号召 - GitHub、Star

样式选择： 从以下2个样式中选择：

终端风格（科技产品）
卡片风格（通用产品）

错误示例 vs 正确示例：

❌ 错误：

核心亮点：
- 支持1000+网站
- 智能评分系统
- 可视化图谱

✅ 正确：

核心亮点：
- 1000+ 网站：Facebook、Twitter、Instagram、抖音、微博、B站等主流平台
- 智能评分：0-100 分可信度评分，有效降低假阳性
- 可视化图谱：力导向图展示账号关联，元数据提取

生成预览：

# 使用 HTML 预览工具
# 或直接在浏览器中打开 HTML 文件

转图片：

# 使用截图工具或命令行工具
# 推荐尺寸：600×900px（竖屏封面）

步骤 10：调试和渲染

步骤 10.1：启动开发服务器

cd ~/Documents/Claude\ Code/视频/[新项目名称]-video
npm start

访问：http://localhost:3000

步骤 10.2：检查清单

内容检查：

所有6个场景的文案正确
文字清晰可读
颜色对比度足够
无错别字

动画检查：

动画流畅不卡顿
过渡自然
重点信息有动画强调

音频检查：

音频播放正常
音量适中（建议 0.9）
音频与画面同步
无静音等待

步骤 10.3：渲染最终视频

# 渲染完整视频
npx remotion render src/index.jsx [ProjectName]Video out/final-video.mp4 \
  --codec=h264 --pixel-format=yuv420p --overwrite

# 渲染单个场景（用于测试）
npx remotion render src/index.jsx [ProjectName]Video out/scene1.mp4 \
  --sequence --frames=0-299

预期输出：

✓ out/final-video.mp4 (约 5-7 MB)

交付成果清单

完成9步流程后，你应该得到：

1. 视频文件

out/final-video.mp4 - 完整视频
out/scene1.mp4 到 out/scene6.mp4 - 分场景视频（可选）

2. 内容文档

content/01-主题分析.md - Gemini 深度分析
content/02-视频结构.md - 6场景结构设计
content/03-配音脚本.md - 完整配音文案
content/08-发布文案.md - 视频号发布文案
content/04-完成报告.md - 项目总结

3. 音频文件

public/audio/scene1.mp3 到 scene6.mp3 - 6个场景配音

4. 视觉素材

output/[项目名称]-card.png - 项目信息卡封面图

参考资源

模板项目

竖屏：~/Documents/Claude Code/视频/social-analyzer-video/
横屏：~/Documents/Claude Code/视频/[横屏模板]/

工作文档

~/Documents/Claude Code/视频/工作流/Remotion视频制作标准化工作流.md
~/Documents/Claude Code/视频/工作流/视频项目模板.md
~/Documents/Claude Code/视频/工作流/templates/README.md

尾帧管理

~/Documents/Claude Code/视频/assets/ending-frames/
~/Documents/Claude Code/视频/assets/ending-frames/README.md

最佳实践

1. 时长控制

竖屏短视频：60-90秒（推荐76秒）
横屏长视频：90-120秒

2. 场景3突出产品名称

超大字号渐变
脉冲动画
发光效果
扫描线动画
配音语速稍慢（1.1x）

3. 音视频精确同步

每个场景帧数 = 音频时长(秒) × 30fps
场景起始帧 = 前面所有场景帧数之和
Root.tsx 的 durationInFrames = 所有场景帧数总和

4. 配色方案

根据项目类型选择：

科技产品：黑客绿 + 深黑
B端产品：科技蓝 + 深灰
消费产品：渐变色 + 浅色

5. Hook 开场（前3秒）

必须有数字（Star 数量、用户数）
必须有冲突感（痛点 vs 解决方案）
必须有代入感（场景化描述）

常见问题

Q1: 如何选择模板项目？

竖屏视频使用 social-analyzer-video，横屏视频使用其他横屏模板项目。

Q2: 音频生成失败怎么办？

确认豆包TTS API Key配置正确，检查网络连接，不要擅自改用其他TTS服务。

Q3: 渲染时提示 "No entry point specified"？

# 必须指定入口点
npx remotion render src/index.jsx [ProjectName]Video out/video.mp4

Q4: 音频在场景结尾被截断？

检查音频实际时长，增加 durationInFrames，调整后续场景的 from 参数。

Q5: 信息卡内容不够丰富？

必须从多个文档汇总（01、02、03），列出具体名称，不只是数字。

更新日志

v2.0 (2026-03-24)：

新增步骤8：视频号发布文案生成
新增步骤9：信息卡生成
步骤6.4：添加固定尾帧自动化
更新为9步完整流程

v1.0 (2026-03-13)：

初始版本，7步流程

Skill 维护者： Abu + Claude 最后验证项目： Social Analyzer 视频（2026-03-24） 使用次数： 20+ 项目 平均耗时： 首次 4-6 小时，复用 2-3 小时

One thing to look at

SKILL.md

Remotion Video Starter Skill

Skill 概述

使用方法

调用方式

必需输入

9步完整流程

步骤 1：Gemini 深度分析项目

步骤 2：设计视频结构

步骤 3：编写配音脚本

步骤 4：复制模板项目并清理

步骤 5：更新 Remotion 配置

步骤 6：实现场景组件

步骤 6.4：添加固定尾帧

步骤 7：生成配音音频

步骤 8：生成视频号发布文案

步骤 9：生成信息卡

步骤 10：调试和渲染

步骤 10.1：启动开发服务器

步骤 10.2：检查清单

步骤 10.3：渲染最终视频

交付成果清单

1. 视频文件

2. 内容文档

3. 音频文件

4. 视觉素材

参考资源

模板项目

工作文档

尾帧管理

最佳实践

1. 时长控制

2. 场景3突出产品名称

3. 音视频精确同步

4. 配色方案

5. Hook 开场（前3秒）

常见问题

Q1: 如何选择模板项目？

Q2: 音频生成失败怎么办？

Q3: 渲染时提示 "No entry point specified"？

Q4: 音频在场景结尾被截断？

Q5: 信息卡内容不够丰富？

更新日志

Keep looking