说实话，作为一名开发者或者技术博主，每次想要制作一个酷炫的产品演示视频时那种感觉简直让人头大。你得去学那些复杂的非线性编辑软件，什么时间轴、关键帧、渲染队列……光是想想那些密密麻麻的按钮，就Yi经让人想要放弃治疗了。但是Ru果你告诉我，写代码的人其实Ke以用写代码的方式来Zuo视频，甚至Ke以用自然语言跟AI“聊”出一个视频，你会不会觉得这简直是在Zuo梦？

这并不是什么科幻小说而是正在发生的现实。今天我们要聊的，就是如何利用 Remotion Skills 配合 TRAE，通过一种被称为“Vibe Coding”的方式，把视频制作变得像写React组件一样简单、直观且充满乐趣。

重新认识视频制作：当React遇见MP4

在深入操作之前，我们需要先转变一下思维。Remotion 不仅仅是一个工具，它geng像是一种全新的视频制作范式。简单来说它是一个允许你使用 React 代码来编程式创建视频的框架。这意味着什么？意味着你不需要去学 Adobe After Effects，也不用去研究达芬奇那些让人眼花缭乱的调色板。

你Ke以把它理解为“视频版的 React”。你熟悉的组件、Props、State，甚至是那些你每天dou在用的 Web 技术，现在dou成了构建视频合成的基本砖块。对于前端开发者来说这简直就是降维打击；而对于非开发者，TRAE 的 AI Agent Skills 则填平了技术鸿沟，让你完全不需要触碰底层的代码逻辑。

准备工作：在TRAE中搭建你的“影棚”

好了理论说得再多，不如动手试一试。我们要Zuo的第一件事，就是在 TRAE 这个强大的开发环境中把我们的“影棚”搭起来。这里有两种主要的安装路径，你Ke以根据自己的喜好来选择，但我个人geng推荐第一种，因为它geng符合现代开发的流式体验。

方式一：命令行极速安装

这可Neng是Zui快的方式，没有之一。你只需要打开 TRAE 的终端，然后把下面这串指令像复制粘贴代码一样贴进去，回车，然后喝口咖啡等着就行。

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

执行完这步之后TRAE 会弹出一个交互式的询问界面。这时候，你可Neng会kan到“Which agents do you want to install to”这样的选项。别犹豫，根据你的需求选择「TRAE 国际版」或者「TRAE 中国版」即可。这一步就像是给你的影棚配备了专门的灯光师和摄影师。

方式二：传统的GitHub下载

当然Ru果你是那种喜欢把所有源码dou握在手里的老派极客，你也Ke以选择直接从 GitHub 仓库下载 zip 包。虽然步骤稍微繁琐那么一点点，但胜在心里踏实。不过为了体验那种行云流水的快感，我还是强烈建议你试试命令行。

配置安装范围

在安装过程中，有一个细节非常关键，那就是 Installation Scope。这里有两个选项：“Symlink” 和 “Project”。

我的建议是Ru果你只是想在当前这个项目里玩一玩，或者是为了某个特定的视频需求，那么选择 "Project" 是Zui稳妥的。这意味着 Remotion Skills 只会作用于当前的项目目录，不会污染你的全局环境。这就像是在你的大工作室里专门隔出一个小房间用来Zuo这个视频，互不干扰。

核心环节：用自然语言“Vibe”出视频

这才是重头戏。Remotion Skills 的出现，彻底打破了传统视频制作的边界。它让制作视频变得像 Vibe Coding 一样——你只需要通过对话，就Ke以快速实现脑海中的构想。在 TRAE 中，你Ke以直接在 AI 对话框里输出你的想法，完全不用打开传统的视频编辑器！

但是怎么跟 AI 对话也是有讲究的。你不Neng像跟 Siri 聊天那样随意，你需要像导演给摄影师讲戏一样，明确你的关键信息。

第一步：定调子——视觉风格与尺寸

在开始之前，你脑子里得有个大概的轮廓。视频尺寸 是个硬骨头。Remotion 虽然支持中途切换尺寸，但那简直是自找麻烦，渲染起来会让人崩溃。所以一定要在第一时间就把尺寸定死。比如我们通常Zuo演示视频，标准的 1920px x 1080px 是跑不了的。

然后是视觉风格。你想要极简风？赛博朋克风？还是复古苹果风？这些dou要在提示词里明确告诉 Agent。

比如我们Ke以试着输入这样一段提示词：

我们要为 TRAE Skills 的新功NengZuo一个 remotion 动画,这个功Neng支持全局和项目级别的 skills。
创建一个新的 composition:1920px x 1080px 的 macOS 终端窗口样式的控制台,带有打字机动画,输入 "cd ./trae/skills"浅色主题,极简。

你kan，这段话里包含了尺寸、元素、动作、内容以及风格。有了这些，AI 就知道该怎么下手了。

第二步：构建骨架——起始画面与主题

开场白hen重要，视频也一样。你要展示什么？主题是什么？起始画面Zui好保持简洁，不要一上来就堆砌太多元素，那样会吓跑观众。

比如我们Ke以先展示一个打开文件目录的命令，或者是一个简单的 Logo 动画。这就像是电影开场前的黑屏字幕，虽然简单，但Neng让人静下心来。

实战演练：打磨细节，注入灵魂

有了基础的框架，接下来就是Zui让人兴奋的部分——打磨细节。这时候，你Ke以大胆地把你想要的特效、转场、UI 效果统统抛给 TRAE。几分钟内，它就Neng帮你生成 Remotion 代码。

让我们kan一段完全由 Remotion Skill 生成的 TRAE Skills 视频片段作为参考。

添加动态元素：让文字“活”过来

静态的文字是无聊的。我们想要字幕滑入屏幕，想要文字有呼吸感。你Ke以这样提示：

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

这里我们指定了字体，指定了动画类型，甚至指定了缓动曲线。这种对细节的控制力，是传统剪辑软件hen难通过简单的拖拽实现的。

空间感的营造：3D 旋转效果

Ru果画面太“平”，就会缺乏质感。我们Ke以尝试给元素添加一点 3D 效果。比如让那个终端窗口在开场时来个帅气的旋转登场：

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

这不仅仅是旋转，这是在告诉观众：“嘿，这不仅仅是个视频，这是一个由代码构建的三维空间。”

氛围感的渲染：背景与色彩

有时候，一张好的背景图Neng拯救一切。Ru果你觉得默认的白色背景太刺眼，或者太单调，那就换掉它：

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

深绿色往往给人一种黑客帝国或者极客的感觉，非常适合技术类的演示视频。这种氛围感的营造，往往Neng决定视频的档次。

进阶技巧：截图与UI的完美复刻

Zuo产品演示视频，Zui头疼的莫过于还原产品的 UI 界面。手画？太慢了。截图？怎么动起来？

Remotion Skills 给出了一个极其聪明的解法：直接把截图扔给 Agent，让它根据截图生成下一帧动画，或者直接把 UI 改成和截图一致。

转场与高亮

比如在 TRAE Skills 视频里我们附上了 TRAE Skills 面板的截图。然后我们Ke以这样指挥 Agent：

现在根据截图,高亮 项目 标签,Ke以往里面添加几个 Agent Skills。然后切换到高亮 全局 标签页并打开它,也Ke以往里面添加几个 Agent Skills

甚至，你Ke以要求它展示全部动画效果的时间轴，或者添加一个动效转场到你提供的截图中显示的面板。这种基于截图的交互，让视频制作变得像是在Zuo PPT 一样简单，但效果却是电影级的。

像素级的UI对齐

Ru果你是个完美主义者，容不得 UI 有一像素的偏差，那你一定会爱上这个功Neng。我们Ke以继续打磨列表中单个 Skill 的细节，让它完美对齐 TRAE 的原装 UI：

现在把添加 Skills 面板的 UI 改成和我提供的截图里的 UI 一致。确保每个 skill 文件显示正确的 logo,右边是开关和设置按钮。Skill 名称不需要和我截图里的一致

你kan，连 Logo 的位置、颜色、按钮的布局dou规定得死死的。这种精确度，以前可Neng需要你在设计软件里对齐半小时现在只需要一句话。

Zui后别忘了给这些开关添加一点动效，比如添加一个动效转场，或者展示开关切换时的状态变化。这些微小的交互细节，往往ZuiNeng打动观众。

无限可Neng：从代码到价值的跨越

借助 Skill，我们Ke以大胆探索geng多使用场景，不再局限于写代码。它为大家带来了无限可Neng。你想想，用这种方式生成的视频，非常适合用来Zuo 产品演示、功Neng发布和宣传视频。

比如你Ke以快速生成一个展示新功Neng的 GIF，或者制作一个深度的技术讲解视频。甚至，你Ke以把代码逻辑的变化直接可视化为视频动画，这在教学领域简直是神器。

Ru果你还没开始体验，不妨从第一个视频入手，把它当作一个起点。也许从今天起，你解决问题的思路、创造价值的方式，dou会悄悄发生变化。你不再是一个只会写代码的程序员，而是一个Neng用代码创造视觉艺术的创作者。

开启你的创作者之旅

现在一个初始的 TRAE Skills 的产品geng新动态视频就完成啦。回顾一下整个过程，我们没有碰过任何时间轴，没有手动设置过任何关键帧。我们所Zuo的，仅仅是描述我们想要的东西。

这就是 Vibe Coding 的魅力，也是 Remotion Skills 的强大之处。它把复杂的视频制作技术封装在了一个简单的对话界面背后让创意得以自由流淌。

所以还在等什么？去 TRAE 里新建一个项目，把那段 `npx skills add` 命令敲进去，开始你的第一个 Remotion 视频吧。相信我，一旦你习惯了这种创作方式，你就再也回不去那个拖拽素材的传统时代了。

本文作者：Amber，TRAE 产品运营

---