视频创作工作室
将自然语言描述转换为基于 React 的可渲染视频代码。核心理念:在 AI 眼里,视频的每一帧都是一个网页,用前端代码实现视频制作。
使用场景
| 场景 | 触发条件 | 说明 |
|---|---|---|
| 文字转视频 | 用户提供脚本或描述 | 自然语言 → React 视频代码 → 渲染 MP4 |
| 字幕同步 | 有音频或配音 | 自动生成时间轴对齐的字幕层 |
| 数据可视化动画 | 有数据集 | 将数字变化做成动态图表动画 |
| 产品演示视频 | 描述产品功能 | 生成终端操作/界面演示动画 |
| 社交短视频 | 15-60秒内容 | 竖屏适配,强钩子前3秒 |
工作流
1. 需求采集与脚本结构化
- 接收用户输入:主题、时长、风格、平台(横屏/竖屏)、目标受众
- 生成视频脚本:分镜列表,每镜包含(时间区间/画面描述/字幕/配音文本)
- 确认脚本:输出分镜表供用户确认或调整
2. React 视频代码生成
- 初始化项目结构:
src/Composition.tsx、src/scenes/、src/audio/ - 逐场景实现:每个场景为一个 React 组件,使用
<Sequence>控制时间区间 - 动画编排:用
useCurrentFrame()和插值函数驱动动画 - 字幕层:基于时间轴渲染字幕,支持样式定制
- 转场:crossfade/wipe/reveal 等转场效果
3. 配音与音效
- TTS 配音:将脚本文本转为语音,生成音频文件
- 音频转录:对配音音频转录,生成精确时间轴用于字幕同步
- 背景音乐:可选添加 BGM,支持节拍同步视觉脉冲
4. 渲染与输出
- 预览:在浏览器中实时预览视频效果
- 渲染:调用渲染管线输出 MP4/WebM
- 多规格输出:横屏 1920x1080、竖屏 1080x1920、方形 1080x1080
核心能力清单
- Composition 编排:多场景
<Sequence>组合,时间轴精确控制 - 动画原语:淡入淡出、缩放、位移、旋转、路径动画
- 文字特效:marker sweep(标记扫过)、手绘圆圈、爆发线、scribble、sketchout
- 数据可视化:动态柱状图、折线图、数字翻滚
- 音频反应:beat sync(节拍同步)、glow pulse(发光脉冲)
- 字幕与标题卡:同步字幕、动画标题卡、overlay 字幕
- 转场:crossfade、wipe、reveal、shader transition
设计原则
- 帧即网页:每一帧都是 React 渲染的 DOM/Canvas
- 可组合:动画原语可自由组合,不硬编码
- 可预览:浏览器实时预览,所见即所得
- 可渲染:确定性渲染,同一代码同一视频
- 性能优先:避免每帧重计算,用
useMemo缓存
输出规范
- 视频代码保存到
output/{project-name}/src/ - 脚本分镜表保存到
output/{project-name}/script.md - 渲染命令:
npx remotion render {Composition} out/video.mp4 - 支持参数化:通过 props 传入不同数据生成系列视频
依赖说明
运行环境
- Agent平台: Claude Code / Cursor / Codex / Gemini CLI / Windsurf 等支持SKILL.md的任意Agent
- 操作系统: Windows / macOS / Linux
- 运行时: 需要Agent支持exec(命令行执行)能力
第三方依赖
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---|---|---|---|
| Node.js 18+ | 运行时 | 必需 | Remotion框架(npm install remotion) |
| LLM API | API | 可选 | 由Agent内置LLM提供脚本生成 |
API Key 配置
- 本Skill无需额外API Key配置
纯Markdown使用说明
本Skill指导使用Remotion框架制作视频。需要Node.js环境和Remotion依赖。
只需将SKILL.md文件放入Agent的skills目录即可直接使用。
如果Skill中包含exec工具调用,需要Agent支持命令行执行能力。
可用性分类
- 分类: MD+EXEC
- 说明: 纯Markdown,但需要exec能力(命令行执行),用于文件读写和命令调用
