一条完整工作流——任何网址丢进去，5 分钟生出符合那个品牌视觉规范的影片，配音、TikTok 逐字高亮字幕全部接好。重点是全程不写一行 code，只跟 Claude Code 讲话。中间会踩两个雷：CSS 动画 render 出来会闪、TikTok 字幕高亮会错位整支影片，两个都直接让 AI 修给你看。
一、为什么是 Remotion，先讲事实
用过 Submagic 吗？AI 帮 YouTuber 加酷炫字幕那个，上线 3 个月年营收 100 万美金，现在 300 万个用户。Crayo，AI 短影片故事，月收 50 万美金。Typeframes 老板 Tibo 自己讲：「Remotion 就是我们产品背后在跑的那个东西」。
这几家月入几十万美金的公司，底层用的都是同一个东西，就是 Remotion。你今天学的不是玩具，是独角兽公司在用的引擎。
二、3 分钟把环境装好，AI 整装待命
系统需求先讲：macOS 要 15 Sequoia 以上，Node 20 LTS 以上（18 已经 EOL，别用了）。再来，电脑要先装过 Claude Code，没装去 claude.com/claude-code 装一下，需要订阅。
建专案
npx create-video@latest --yes --blank my-video这指令拉一个空白 Remotion 模板，blank 就是最干净的版本。
cd my-video
npm install关键的一步：先装 Remotion 官方的 Agent Skills
npx remotion skills add跑完之后会跳出 Skills 互动选单，依序确认 Source、安装路径，Installation scope 选 Global，Installation method 选 Symlink，最后 Installation Summary 框跳出来按 Yes 确认。
Skills 你可以理解成「一包写好的最佳实践」，AI 读了之后写出来的 Remotion code 会准很多。装完它会 symlink 到 Claude Code（顺便也挂 Codex），Global 全域生效，以后每个 Remotion 专案都吃得到，不用每次重装。
这个雷一定要避开：没装这包，待会 Claude Code 会用 CSS animation 写动画，render 出来会闪。
把 Claude Code 的 MCP 也装起来
claude mcp add remotion-documentation -s user -- npx -y @remotion/mcp@latestMCP，全名 Model Context Protocol，是让 AI 实时查 Remotion 官方文档的通道。Skills 是最佳实践（刚刚装 Global），MCP 是查询通道，两个都装最强。
注意中间那个 -s user，这把 MCP 装成全域，所有专案都吃得到，跟刚刚 Skills 的 Global 对齐。没加这个 flag 预设只装当前专案，换专案要重装。
开 dev server 跟 Claude Code，分两个 terminal
# Terminal A
npm run dev
# Terminal B
claude左半边浏览器跳出 Remotion Studio 介面，右半边 terminal 跑着 Claude Code 等 prompt。环境就绪，从现在开始一行 code 都不会自己写，全部交给 AI。
三、先让 AI 做一个基本动画——也顺便引出那条雷
先讲 Remotion 的概念：影片就是一个 React 元件，有个叫 frame 的数字从 0 开始一直加，你每一帧回传长什么样子，串起来就是影片。原理你懂了就好，剩下交给 AI。
第一个 prompt：淡入
看一下我现在的 Composition.tsx，帮我改成黑底白字、字体 120px，
中央显示「Hello Remotion」，60 帧内从透明淡入到不透明，
60 帧之后保持不动。描述完直接出成品。AI 帮你用了 interpolate 这个函式做渐变，这是 Remotion 动画的核心 helper 之一。
第二个 prompt：弹跳
这个动画太静态了。把淡入改成从中央弹跳出来的效果，要有一点 Q 弹感。这次 AI 用的是 spring，物理弹簧模拟。记住两个动画核心：
| helper | 用途 |
|---|---|
interpolate | 淡入、移动位置 |
spring | 弹跳、放大 |
故意踩雷：用 CSS animation
你不要用 Remotion 的 spring，改用 CSS animation 做这个弹跳效果。Claude Code 改成 CSS keyframes 版本，Studio 预览看起来正常。然后跑 render：
帮我跑 npx remotion render，把预设那个 composition 输出成 mp4。render 出来整个闪，文字弹跳明显跳帧。这就是 Hook 里说的雷。
关键观念：Remotion 的 render 是一帧一帧独立跑的，CSS 动画不知道现在是第几帧，每一帧都会从头开始，render 出来就闪烁。这就是 Skills 的价值——装了 Skills 的 Claude Code，预设会避开这个坑用 spring。
还原回正确版本
把刚刚改成 CSS 的部分还原回 spring，然后用同一个指令重新 render 一次。这次 mp4 播放滑顺。这个流程以前手刻要 4 小时，跟 AI 讲话 8 分钟搞定。
四、用 Design.md 把任何品牌变成 Remotion 影片
基本动画熟了，现在做点真的能商用的东西——让 AI 生出来的影片，视觉风格完全符合一个指定品牌。
这边有个问题你应该想过。刚刚那个 Hello Remotion，黑底白字，是随便指定的。但你做客户案、做广告影片，视觉要符合品牌——颜色、字型、圆角、阴影都不能乱选。你会怎么做？开官网一个一个用滴管吸颜色、看字型、量圆角？太慢。
用 design.yahaclass.com 一键生 DESIGN.md
这个工具是我自己做的，没收费没帐号。流程：
- 打开
design.yahaclass.com - SOURCE URL 栏位输入
notion.so - OUTPUT LANGUAGE 选「繁体中文」
- 点「Generate DESIGN.md」
这边背后是 vision 模型在跑，帮你看截图、抓主色、量字型、量圆角。大概等 15 到 30 秒。出来的 markdown 长这样：
| 段落 | 内容 |
|---|---|
| Brand Description | 品牌敘述，整体视觉调性 |
| Colors | 颜色 token，主色、辅色、背景色、语意色，每个带 hex 值 |
| Typography | 主字型、副字型、字重、字级 |
| Radius | 圆角 token |
| Shadows | 阴影 token |
重点是这份不是色票图，是 AI 看得懂的 markdown——下一步 Claude 要读的就是这份文件。点右上「DOWNLOAD」下载，把它拖进 Remotion 专案的根目录。
叫 Claude Code 照规范做开场动画
专案根目录有一份 DESIGN.md，是 Notion 这个品牌的设计规范。
第一步：先读 DESIGN.md，把你抓到的主色 hex、主字型、主要圆角值列出来给我确认，
没问题我会说 OK 你再开始写。
第二步（等我说 OK 之后）：帮我做一个 10 秒的开场动画 composition，叫 IntroScene，
1920x1080、30fps：
1. 所有颜色、字型、圆角、阴影都要严格按照 DESIGN.md 规范
2. 背景用品牌的 canvas 色
3. 「Built on Notion」这几个字用品牌主字型，2 秒处从下方淡入飘上来
4. 字下方放一个品牌色的圆角卡片，里面放一个 emoji icon
5. 5 秒处整个卡片用品牌的 spring 动画轻微放大弹一下
6. 8 到 10 秒慢慢淡出
7. 注册到 Root.tsxClaude Code 会先回覆「主色 #FFFFFF、主字型 Inter、卡片圆角 8px、阴影...」这种 token 清单。
这一步是关键。故意叫 AI 先把抓到的东西列出来，因为两件事——第一，要确认它真的有读 DESIGN.md，没有乱写；第二，如果它列出 Inter 但你电脑没装 Inter，现在就要去装，不然 render 出来会 fallback 成系统字型，整个走味。
小提醒：AI 偶尔不会乖乖等你说 OK，列完直接开始写。没关系，看到它列的 token 不对，按 ctrl+c 打断它叫它停就好。
确认 token 没问题，输入「OK，开始写」。Claude Code 自动读 DESIGN.md、读 sidebars、写新档、改 Root.tsx 全部存档。Studio 侧边栏出现 IntroScene composition，点进去播放——完整 10 秒动画，Notion 风格白底、Inter 字型、浅灰圆角卡片、emoji，视觉一看就是 Notion。
这支影片的所有颜色、字型、圆角，都不是你或 AI 乱选的，是直接从 notion.so 这个网址抓出来的真实品牌规范。
这就是为什么 Submagic、Crayo 那些独角兽用 Remotion——AI 写程式码控制每一帧，比 Pika、Runway 那种文字生影片的黑盒子模型可控太多。Pika 生出来的东西你不能说「字型换成 Inter、圆角改 12px」，Remotion 可以，而且改完一秒重新 render。这条工作流真实的商业价值在这——客户丢你一个网址，5 分钟出符合他品牌的影片。
五、配音——交给 AI，连音档放哪都不用管
影片有了，加声音。先把一个录好的 mp3 丢进专案根目录，叫 voice.mp3。
我在专案根目录丢了一个 voice.mp3。帮我：
1. 把这个档案搬到 Remotion 正确的静态资源位置
2. 在 IntroScene 这个 composition 里加上这段配音，从第 0 秒开始播
3. 解释为什么 Remotion 不能直接用 React 的 <audio> 标签Claude Code 自动把 voice.mp3 移到 public/，改 IntroScene 加上 Remotion 的 <Audio> 元件，存档。Studio reload，按播放配音跟动画一起跑。
重点是 AI 回覆里那两个东西：
staticFile()：用来指向public资料夹的函式<Audio>：Remotion 自己的元件（从remotion汇入），会跟着 Remotion 时间轴走
这是另一个雷：用 React 原生的 <audio> 标签，整支影片 render 出来会没声音。AI 帮你避开了。
六、本地免费跑字幕——AI 帮你装 Whisper.cpp
Remotion 有 4 条路线生字幕：install-whisper-cpp、whisper-web、openai-whisper、elevenlabs。这次选 Whisper.cpp，本地、免费、最快。
我要用 @remotion/install-whisper-cpp 把 public/voice.mp3 转成字幕。
要求：
1. 先确认我有没有装 ffmpeg，没有就用 brew 帮我装
2. 装 @remotion/install-whisper-cpp 这个套件
3. 写一个 transcribe.mjs 脚本，做完整流程：
安装 Whisper.cpp 1.5.5、下载 medium.en 模型、
把 mp3 转成 16kHz 的 wav、跑语音识别、输出 captions.json 到 public/
4. 注意我这个影片是英文配音，所以用 medium.en 模型
5. 跑这个脚本
完成之后给我看 captions.json 的前 3 笔资料。Claude Code 自动跑完整流程——npm install、写脚本、检查 ffmpeg、用 brew 装 ffmpeg、执行 transcribe.mjs。terminal 跑了快 3 分钟，编译 Whisper.cpp、下载 1.5GB 模型、跑语音识别。
跑完后 captions.json 每一笔有 text、startMs、endMs、timestampMs、confidence。3 分钟搞定，自己摸至少卡一下午。
语言切换：这边用 medium.en 是因为配音是英文。做中文影片的话 prompt 里把 .en 拿掉，AI 会帮你下载中文也能识别的模型。
七、TikTok 逐字高亮字幕——让 AI 从零做完，含活的 debug
这段是今天最精彩的，90% 中文教学没讲过。
我要做 Submagic 那种 TikTok 风格的字幕——黑底，
每次出现 2-4 个字，配着声音逐字高亮成绿色。
要求：
1. 安装 @remotion/captions
2. 建一个新 composition 叫 CaptionedVideo，1920x1080、30fps
3. 从 public/captions.json 读字幕资料
4. 用 createTikTokStyleCaptions 把字幕分页，每 1200ms 一页
5. 每页用 <Sequence> 放在对的时间点
6. 字幕字体 80px、粗体、白色字配黑色描边（4px）
7. 当前正在念的 token 变成绿色 #39E508，没念到的维持白色
8. 注册到 Root.tsx
另外，因为要等 captions.json 载入完才能 render，
记得用 delayRender / continueRender 处理。Claude Code 自动跑——npm install @remotion/captions、写 CaptionedVideo.tsx、改 Root.tsx 全部存档。Studio reload，秀出黑底字幕配着声音逐字高亮——但有问题，绿色高亮的字跟正在念的字错位，整个乱掉。
踩雷了，叫它修
用 AI 最赞的地方就是不用自己 debug，叫它修就好。
你刚刚写的字幕逐字高亮错位了，绿色出现在错误的字上。
我猜问题在时间戳判断。每个 Sequence 内部的 frame 是从 0 开始算的，
但你的 token 时间戳是用整支影片的绝对时间记的。
你判断 token isActive 的时候是不是用了 Sequence 内部的时间，没有加上 page.startMs？
检查一下，修好。修完跟我解释你改了什么。Claude Code 读档、改逻辑、存档。回覆解释：「你说对了，我之前用 currentTimeMs 判断，但 token 的时间戳是绝对时间，要加上 page.startMs 变成 absoluteTimeMs 才能对得上。已修正。」Studio reload，字幕对齐，逐字绿色高亮跟着声音走。
这个雷的本质：每个 <Sequence> 是一场电影院，里面有自己的时钟从 0 开始；但 token 的时间戳是用「真实世界的墙钟」记的。要把电影院时钟加上「电影院开门那一刻的墙钟时间」，才能对得上。这个雷以前自己写卡了快一个小时，现在跟 AI 讲一句话它 10 秒内修好。
八、最后输出 mp4
把 CaptionedVideo render 成 mp4，
输出路径指定为 ./final.mp4（不要丢到预设的 out/）。terminal 跑进度条到 100%。QuickTime 开启 final.mp4，完整成品播放——黑底配音 + AI 生的开场动画 + TikTok 逐字高亮字幕。配音、动画、字幕全部齐。
到这边，你已经做出一支用 Claude Code 聊出来的影片，配音、AI 生成动画、TikTok 逐字高亮字幕全部齐。这就是 Submagic 月入几十万，最核心技术栈的最小版本。从头到尾没手写一行 code。
九、5 分钟挑战
去 design.yahaclass.com 输入你正在做的品牌、或客户的品牌网址，下载 DESIGN.md，然后跑 npx create-video 建专案，叫 Claude Code 照那份规范做一个 10 秒开场动画。
小提醒：第一次玩建议先抓 Notion、Linear、Stripe、Vercel 这种设计感强的网站。如果你抓自己公司官网结果做出来觉得丑，不一定是 Remotion 的问题，是那个网站本身设计 token 就不够强。