vibe-motion 快速上手操作指南（Windows 优化版）

🎬 vibe-motion 快速上手操作指南（Windows 优化版）

核心概念：通过自然语言 → AI 编程工具 → Remotion的工作流，以纯代码、可复用的方式编程化生成视频动效。

本指南针对Windows 环境进行了深度优化，避免了 Linux 命令行兼容性问题，并集成了国内主流且免费的 AI 编程 Agent 方案：字节跳动 Trae与腾讯 QClaw（小龙虾 AI）。

🛠️ 第一部分：Windows 环境准备

在 Windows 系统下进行代码视频开发，我们需要配置好基础的 Node.js 运行环境与渲染引擎（FFmpeg）。

Step 1：安装 Node.js 与 pnpm

1. 前往官方网站下载并安装 Node.js 官方 LTS 版本（推荐 v18 或 v20）。
2. 打开 WindowsPowerShell或CMD（按下Win + R键，输入powershell回车），运行以下命令安装更适合 Windows 锁存机制的包管理器pnpm：

   npm install-g pnpm

Step 2：安装 Windows 版 FFmpeg（视频渲染必需）

Remotion 导出 MP4 视频依赖 FFmpeg。在 Windows 上，最简单且不会污染系统变量的安装方式是通过scoop或直接使用 Remotion 官方提供的自动命令。
在 PowerShell 中运行以下命令，Remotion 会在执行时自动检测并安全下载便携版 FFmpeg 到用户缓存目录，无需手动配置环境变量：

pnpm dlx remotion ffmpeg install

🚀 第二部分：项目初始化（Windows 命令行）

在 Windows 上，由于路径符号和编码的差异，请使用以下标准命令创建项目。

Step 1：使用脚手架创建专案

在您希望存放项目的文件夹下打开 PowerShell，执行官方初始化脚手架：

# 国内网络环境推荐直接使用淘宝/npmmirror镜像源加速$env:npm_config_registry="https://registry.npmmirror.com"npx create-vibe-motion@latest my-vibe-app

注：Windows 环境下，若遇到脚本执行策略限制，可在 PowerShell 中先运行Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass以临时允许运行。

Step 2：进入项目并启动本地预览

cd my-vibe-app pnpm dev

运行后，Remotion Studio 视频预览服务会启动。此时会自动打开默认浏览器并导航至：
http://localhost:3000

🤖 第三部分：国产免费 AI Agent 替代方案（Windows 实操）

原版视频中使用的 Claude Code 需要终端高频交互与海外付费 Token。由于国内用户可能没有 Claude 权限，以下为您提供字节跳动 Trae与腾讯 QClaw两套国内免费的优秀 Agent 代替方案，均对 Windows 提供了极佳的图形化原生支持。

方案 A：使用 字节跳动 Trae (AI 集成开发环境) ── 推荐，效率最高

Trae 是字节跳动推出的免费 AI 编程 IDE，内置了非常强大的 AI 智能体（Agent）和 Remotion 官方插件生态。

1. 配置与连接

1. 下载并安装 Trae Windows 客户端。
2. 启动 Trae，点击File -> Open Folder，选择您刚刚创建的my-vibe-app文件夹。
3. 打开 Trae 內建的终端（快捷键Ctrl + ~），确保pnpm dev预览窗口在后台运行。

2. 安装 Remotion Skills 插件

1. 在 Trae 界面左侧点击Extensions（插件市场）。
2. 搜索Remotion或Remotion Skills插件并点击安装。
3. 该插件能让 Trae 自动识别 Remotion 的配置项，并在侧边栏 AI Chat 窗口激活专属的“视频生成”微调模型。

4. 驱动 AI 自动写视频动画

1. 在 Trae 右侧的 AI 对话面板（Ctrl + U）中，将模式切换为Agent。
2. 直接使用简体中文对 Agent 下达指令：

   Prompt 示例：
   “我想制作一个配合音乐节奏的文字扫光动画。文字在屏幕居中，背景是深蓝色。当音乐有重音（鼓点）时，文字会产生轻微的缩放震动（Scale）和高光闪烁效果。请在motion/目录下为我新建一个对应的组件，并在主入口中引用它。”

3. Trae Agent会自动分析项目结构，修改motion/目录下的 React 组件代码，并在 Remotion Studio 预览页面实时呈现热更新效果。

方案 B：使用 腾讯 QClaw (微信/本地双端 AI 自动化助手)

QClaw 是腾讯出品的 PC 个人 AI 助手。它基于开源的 OpenClaw 智能体框架打造，拥有 Windows 图形化客户端，并支持通过绑定微信远程操控你的电脑开发环境，特别适合需要随时随地通过手机“催更”或控制渲染的用户。

1. 配置与连接

1. 前往 QClaw 官网下载 Windows 版本并安装，使用微信扫码一键登录。
2. 在 QClaw 客户端的“工作空间关联”或“本地路径管理”中，将工作目录指向您的my-vibe-app路径。

2. 安装 vibe-motion 官方 Skills

QClaw 原生支持 GitHub 开源技能与 MCP 协议。你可以直接在其客户端的技能市场或通过内置控制台导入 vibe-motion 官方的技能模板包：

npx skillsaddvibe-motion/skills

在 QClaw 界面中勾选你需要的 Skills，例如ruler-progress-render（刻度进度条）或svg-assembly-animator（SVG 组装动效）。

3. 驱动 AI 生成与渲染视频

由于 QClaw 支持微信直接绑定，你既可以在 Windows 客户端操作，也可以随时在手机微信上给“QClaw 客服”发送消息：

微信/客户端 Prompt 示例：
“帮我修改my-vibe-app项目中的动画。把背景换成渐变紫，并使用 v1.1.0 的音画同步功能，分析public/bgm.mp3的节奏，让主体 SVG 元素的旋转动画 and 音乐节拍完全对齐。”

4. QClaw 收到指令后会在你 Windows 电脑的后台自动调起 AI 引擎修改代码，甚至你可以直接在微信里回复：“帮我开始 build 渲染”，它就会在后台自动运行pnpm build，渲染完成后通过微信把生成的.mp4视频文件直接发送给你！

🎵 第四部分：v1.1.0 核心突破：音画同步 (Audio-Visual Sync) 实现步骤

在vibe-motion v1.1.0中，最亮眼的功能在于音频数据的解析。你可以让动画的振幅、缩放、颜色变化完美契合 BGM 的频率。

步骤 1：放置你的音频素材

将你的音频文件（例如my-music.mp3）放入项目的public/目录下。

步骤 2：告知 AI 代理引入音频分析

不论你使用的是Trae还是QClaw，向 AI 提出以下具体编程指令：

“请在我的 Remotion 组件中，使用useAudioDataAPI 读取public/my-music.mp3。获取音频的每一个频率段（Frequency Bin），计算其平均振幅（volume），并将这个振幅变量绑定到中心圆圈的scale属性上，让圆圈跟随音乐鼓点放大缩小。”

步骤 3：底层实现逻辑参考（AI 自动生成的代码逻辑）

AI 将在motion/文件夹的组件中为您编写类似如下的 Deterministic（确定性）音频绑定代码：

import { useAudioData, visualizeAudio } from "@remotion/media-utils"; import { useCurrentFrame, useVideoConfig } from "remotion"; import musicSrc from "../public/my-music.mp3"; export const AudioSyncScene = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // 1. 获取并缓存音频帧数据 const audioData = useAudioData(musicSrc); if (!audioData) { return <div style={{ color: "white" }}>音频加载中...</div>; } // 2. 可视化分析当前帧对应的音频振幅 (频率范围设为 20Hz - 200Hz 捕捉低音鼓点) const visualization = visualizeAudio({ frame, fps, numberOfSamples: 16, audioData, startFromHz: 20, endAtHz: 200, }); // 3. 计算当前的音量振幅，并将其映射为缩放系数 (Scale) const volume = visualization.reduce((sum, val) => sum + val, 0) / visualization.length; const scale = 1 + volume * 1.5; // 音量越大，缩放比例越大 return ( <div style={{ flex: 1, backgroundColor: "#0d0f12", display: "flex", justifyContent: "center", alignItems: "center" }}> <div style={{ width: 200, height: 200, borderRadius: "50%", backgroundColor: "#00ecff", transform: `scale(${scale})`, // 动态绑定物理引擎 boxShadow: `0 0 ${volume * 100}px #00ecff` // 动态绑定发光阴影 }} /> </div> ); };

💾 第五部分：本地渲染导出 (Windows 命令行)

在 Remotion 网页端（Studio）预览满意后，即可进行物理渲染：

打开 PowerShell，在项目根目录下执行：

pnpm build

编译系统会自动启动 Chrome Headless Shell，逐帧对 React 动画进行截图，并使用 FFmpeg 将这些帧合并为带音频的、画质无损的.mp4视频，默认输出在项目根目录。

📝 常用命令行速查表 (Windows)

注：该文章大部分参考抖音博主、vibe-motion作者–浙大猫学长