cuishiqing 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
步骤 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 小时