TRAE Work 实战指南 / 汇报演示 & 设计创作

实战指南｜如何用 Remotion Skills 做视频

提示

TRAE 是面向开发者、职场人与学生的 AI 办公平台，有 TRAE Work 和 TRAE IDE 两款产品。

TRAE Work 侧重学习、办公与工程执行场景，无论你是开发者、职场人、学生，都可以用它写方案、做分析、处理文件、推进协作，并完成需要持续执行、检查和产出结果的自动化任务。支持桌面端、网页版和移动端，多端协作，随时发起任务、查看进展、持续推进。

TRAE IDE 适合写代码、读项目、改 Bug 等开发工作，更适合期望精细控制自己的代码改动和执行过程的开发者。

作者：Amber

TRAE 产品运营

Remotion 是什么?

Remotion 是一个用 React 编程式创建视频的框架。不用学AE、达芬奇，也不用去研究怎么在时间轴上拖拽素材,你可以直接通过vibe coding来定义动画、转场和特效。可以理解为"视频版的 React"——用组件、props 和你熟悉的 Web 技术来构建视频合成。

Remotion Skills 的出现打破了传统视频制作的边界，让 vibe video 像 vibe coding 一样通过对话就可以快速实现。

可以在 TRAE 里做什么？

在 TRAE 中使用 Remotion 的 Agent Skills 可以让你实现通过自然语言来 vibe code 出一个完整视频。你可以直接描述你想要的元素：动画、转场、UI 效果等等，TRAE 就可以帮你在几分钟内生成 Remotion 代码，完全不用打开传统的视频编辑器!

适用场景：使用这个 Skills 生成的视频非常适合用来做 产品演示、功能发布和宣传视频。

我们先看一段完全由 Remotion Skill 生成的 TRAE Skills 视频片段:

实操

本次演示使用 TRAE IDE。

把 Remotion 添加到你的 TRAE Skills

首先你需要在 TRAE 里面打开一个新的项目
安装 Remotion Skills有两种方式：
- 方式 1:从 GitHub 仓库下载 zip: https://github.com/remotion-dev/remotion/tree/main/packages/skills
- 方式 2:用 Skill.sh 命令行安装，直接把下面的指令复制粘贴到TRAE的终端里面
  MARKDOWN
```
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
```

在 "Which agents do you want to install to", 选择「TRAE 国际版」或者「TRAE 中国版」

图片展示了在TRAE终端安装Remotion Skills的界面。在“Which agents do you want to install to”处，选择“TRAE国际版”或“TRAE中国版”；在installation scope中选择“Project”，Remotion Skills仅用于当前项目。下方列出40个可用agent，其中“Tree”被选中。该图片与文档中介绍在TRAE终端安装Remotion Skills的方式相关，直观呈现了安装操作的终端界面及选择agent的步骤。 — img-522 · 图片展示了在TRAE终端安装Remotion Skills的界面。在“Which agents do you want

在 installation scope中, 选择 "Project" ，这里Remotion Skills 只用于当前项目。

图片展示的是在Node.js开发环境中使用Remotion Skills的安装操作界面。终端中输入命令“npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices”，并提示需安装“skills@1.3.1”等包。下方列出技能信息，如技能名称、来源、仓库克隆状态等，还显示选中技能为“remotion-best-practices”，并询问安装范围，当前为“Project”。该图片与文档中介绍在选择安装方式中选择“Symlink”及开始生成视频开场片段等内容相关，展示了安装操作的具体界面情况。 — img-523 · 图片展示的是在Node.js开发环境中使用Remotion Skills的安装操作界面。终端中输入命令“npx skil

在选择安装方式中, 选择 "Symlink":

图片展示的是在终端中使用Remotion Skills的安装流程。终端显示命令“npm x skills add https://github.com/remotion-dev/skills --skill remotion-best - practices”，并提示需安装“skills@1.1”等信息。随后询问是否继续，输入“y”。接着列出技能“remotion - best - practices”，显示其源代码仓库为“https://github.com/remotion - dev/skills.git”，并提示已找到1个技能，已选择1个技能，有40个代理，询问安装到哪个代理，以及安装范围和方法，其中安装方法被突出显示为“Symlink (Recommended)”。 — img-524 · 图片展示的是在终端中使用Remotion Skills的安装流程。终端显示命令“npm x skills add htt

开始生成你的开场视频片段

首先要想好你想怎么呈现视频开场的关键元素,然后在提示词里明确这些关键信息，包括

主题：你要展示什么
视频尺寸：Remotion 支持不同尺寸,但中途切换很麻烦,所以推荐先提前给出清晰的视频尺寸要求
起始画面：保持简洁（比如一个打开文件目录的命令）
视觉风格：定义你的视频风格

MARKDOWN

我们要为 TRAE Skills 的新功能做一个 remotion 动画,这个功能支持全局和项目级别的 skills。

首先创建一个新的 composition:
1920px x 1080px 的 macOS 终端窗口样式的控制台,带有打字机动画,输入 "cd ./trae/skills"

浅色主题,极简。

图片展示的是Remotion编辑界面。左侧为项目文件夹，显示有多个文件夹和文件。中间部分是代码编辑区域，呈现了与TRAE Skills相关的代码内容，如“render”函数等。右侧是视频预览窗口，显示了视频片段。底部有“Render”按钮，旁边有“100%”字样。该图片与文档中“开始生成你的开场视频片段”部分相关，直观呈现了使用Remotion进行视频制作时的编辑界面情况。 — img-525 · 图片展示的是Remotion编辑界面。左侧为项目文件夹，显示有多个文件夹和文件。中间部分是代码编辑区域，呈现了与TRAE

转场到截图并添加下一个动效

你可以附上产品截图让 Remotion 创建视觉元素。

比如在 TRAE Skills 视频里,我们附上了 TRAE Skills 面板的截图,然后让 agent 根据截图生成下一帧动画：

MARKDOWN

添加一个动效转场到我提供的截图中显示的面板

图片展示了在Remotion中生成视频开场片段的界面。左侧是SOLO Coder的代码编辑区域，显示了TRAE Skills面板的代码。右侧是终端界面，输入了“trae-sandbox”命令及相关参数，用于生成视频。下方是生成的视频预览窗口，呈现了视频片段效果。该图片与上下文紧密相关，直观呈现了在Remotion中通过代码和终端指令生成视频开场片段的操作过程，帮助理解如何根据提示词等信息生成视频。 — img-526 · 图片展示了在Remotion中生成视频开场片段的界面。左侧是SOLO Coder的代码编辑区域，显示了TRAE Skil

另外,你还可以通过提示词在截图内部添加动效。这里我们添加动画来高亮 Skills 面板下的两个不同标签页 Global 和 Project:

MARKDOWN

现在根据截图,高亮 项目 标签,可以往里面添加几个 Agent Skills。

然后切换到高亮 全局 标签页并打开它,也可以往里面添加几个 Agent Skills

继续添加截图或 UI 元素来打磨细节

你可以继续添加更多截图或 UI 元素来完善视频细节。现在我们在打磨列表中单个 Skill 的细节,让它完美对齐 TRAE 的原装UI:

图片展示了使用Remotion Skills制作视频时的代码编辑界面。左侧是SOLO Coder代码编辑器，显示了SkillsPanel.tsx文件内容，包含SkillItem、ReflexIcon、PlusIcon、BosconIcon等组件定义。右侧是Remotion编辑界面，展示了SkillsPanel组件的UI效果，有Global和Project两个标签页，以及相关图标。该图片与上下文紧密相关，直观呈现了代码与UI效果的对应关系，帮助理解如何通过代码实现视频中Skills面板的UI效果。 — img-527 · 图片展示了使用Remotion Skills制作视频时的代码编辑界面。左侧是SOLO Coder代码编辑器，显示了Ski

MARKDOWN

现在把添加 Skills 面板的 UI 改成和我提供的截图里的 UI 一致。确保每个 skill 文件显示正确的 logo(左边橙色的那个),右边是开关和设置按钮。

Skill 名称不需要和我截图里的一致

然后添加动效来展示每个 Skill 的开关切换:

MARKDOWN

现在在 全局 项目里,切换开关 1-2 个 skills 来展示开关按钮。

现在，一个初始的 TRAE Skills 的产品更新动态视频就完成啦。

其他实用的 Remotion Skills 提示词推荐

你可以直接在 AI 对话框输出这些提示词即可。

查看视频时间轴，用于调整局部帧的细节

MARKDOWN

展示一下全部动画效果的时间轴

添加一个滑入屏幕的字幕

MARKDOWN

显示文字 "Agent Skills now available in TRAE" 2 秒,用 Inter 字体
给文字添加一个缩放动画,用 easing out 曲线

给元素添加 3D 旋转效果

MARKDOWN

在开场场景的终端窗口添加 3D 旋转,用 rotateX(20deg) 和 rotateY(-20deg)

在视频中添加背景图

MARKDOWN

把视频的白色背景替换成深绿色背景图

借助 Skill，我们可以大胆探索更多使用场景，不再局限于写代码，它为大家带来了无限可能。如果你还没开始体验，不妨从第一个视频入手，把它当作一个起点：也许从今天起，你解决问题的思路、创造价值的方式，都会悄悄发生变化。