展开本页目录
开始前准备什么
- 准备一台支持 Remotion 的电脑。当前官方文档列出 macOS 15+；Linux 需 libc 2.35+ 和相应依赖。Windows、WSL 和特殊发行版先核对官方要求。
- 从 Node.js 官网安装当前 LTS，确认 node 与 npm 可用；本页资料核对时官网默认 LTS 为 24.x。Claude Code 原生安装和 Node.js 安装分开处理。
- 选择模型入口：可使用 Opus 5.5 的官方账号，或 apizt Key 与支持 Messages 的令牌分组。模型请求按所选入口计费。
- 下载下方四份原创材料，改成自己的主题；先用文字和基础图形完成无旁白版。
- 创建独立的视频项目目录；若已有 CC Switch 或团队托管设置，先确认当前供应商和认证来源。
- 下载材料
- 安装工具
- 选择模型入口
- 生成并预览
- 导出并验收
2026-10-23 核验材料；实际执行范围、结果与限制见下方记录。
补充：原有练习资料与下载
原创的 30 秒视频任务书；包含目标、文案、视觉和交付要求，可直接替换主题。
可复制到 Claude Code，含画布、分镜、字号、动效与保守排版区域。
四段镜头，时间与帧号逐项对应；用于先审分镜、再检查画面。
记录实际入口、版本、MP4 与关键帧结果；费用和结果默认留空，完成后填写。
真实渲染：30秒竖屏视频与工程下载
用Remotion4.0.538实际生成30秒中文无声MP4，交付可重跑工程；本次未调用Opus模型。
· 本次由本站编写React四段中文分镜并真实Remotion渲染900帧无声MP4；未调用Opus/Claude Code付费模型，不能宣称验证模型生成效果。使用已有Chrome Headless Shell避免重复下载，绝不复用旧MP4。
已取得下列真实结果；仍有内容质量或功能范围需要按本页检查项复核。
- 运行环境
- 4.0.538 (all Remotion packages same version)；macOS arm64，本地独立运行目录；无私人素材、无付费API调用
1. 用Node24创建独立blank项目，等待npm安装结束，保留package-lock.
用Node24创建独立blank项目，等待npm安装结束，保留package-lock.json并运行npx remotion versions确认所有包4.0.538。
bashnpx create-video@latest --yes --blank --no-tailwind my-video cd my-video npx remotion versions2. 将下载包src中的Root.tsx和Composition.tsx放入工程，Compos
将下载包src中的Root.tsx和Composition.tsx放入工程，Composition设置1080×1920、30fps、900帧。
3. 启动npx remotion studio，选择TutorialProof，分别定位第6
启动npx remotion studio，选择TutorialProof，分别定位第60/180/480/780帧，对照四段分镜检查中文排版。
bashnpx remotion studio4. 点击Studio渲染或在终端执行npx remotion render src/inde
点击Studio渲染或在终端执行npx remotion render src/index.ts TutorialProof output.mp4 --codec=h264 --pixel-format=yuv420p --color-space=bt709。
bashnpx remotion render src/index.ts TutorialProof output.mp4 --codec=h264 --pixel-format=yuv420p --color-space=bt7095. 用ffprobe确认30秒、900帧、1080×1920、30fps、H.264/yuv
用ffprobe确认30秒、900帧、1080×1920、30fps、H.264/yuv420p。本例设计为无旁白，0音轨符合预期。
bashffprobe -v error -show_format -show_streams -of json output.mp46. 完整解码并抽取2/6/16/26秒画面；改为有旁白的任务时，需要另加音频素材和音轨验收
完整解码并抽取2/6/16/26秒画面；改为有旁白的任务时，需要另加音频素材和音轨验收。
这次实际得到什么
- 实际MP4：30.000秒，900帧，30/1 fps，1080×1920竖屏。
- 最终H.264、yuv420p、bt709、tv范围；0音轨符合无声任务。
- 首轮full-range问题已通过显式--color-space=bt709重新渲染修正。
- 完整解码退出0，错误日志0字节；2/6/16/26秒关键画面已抽取。
使用这份结果时注意
- 本次由本站编写React四段中文分镜并真实Remotion渲染900帧无声MP4；未调用Opus/Claude Code付费模型，不能宣称验证模型生成效果。使用已有Chrome Headless Shell避免重复下载，绝不复用旧MP4。
- 初次在npm安装完成前运行CLI，缺少可执行链接或native binding；等待安装结束后已恢复。
- 首次默认Chrome Headless Shell下载较慢，终止本次下载进程，显式选择已安装的Headless Shell完成真实渲染。
- 首轮未显式指定color-space，ffprobe显示yuvj420p和pc范围；加--color-space=bt709重新渲染后，实际探测为yuv420p、bt709、tv。保留首轮文件和探测，不能仅以CLI参数认定格式。
1. 先确定成品：四段镜头，共 900 帧
本例讲解“把零散想法变成短视频”，使用文字卡和基础图形。Opus 的官方规格是文字/图片输入、文字输出；电影镜头、真人口播和配音需要另外准备相应素材或服务。
30 秒 × 30 fps = 900 帧，实际帧号为 0–899。下表使用连续区间，给 AI 的提示词写清起止边界，避免镜头间出现空帧。
| 时间 | 帧号 | 屏幕文案 | 画面动作 |
|---|---|---|---|
| 0–3 秒 | 0–89 | 一段想法，怎么变成视频？ | 便签进入，标题淡入。 |
| 3–10 秒 | 90–299 | 今天想讲 AI 做视频，但不知道怎么开始 | 原稿拆成三张文字卡。 |
| 10–23 秒 | 300–689 | 1 定主题 → 2 写分镜 → 3 导出视频 | 逐项出现，当前步骤高亮。 |
| 23–30 秒 | 690–899 | 先做 30 秒，再迭代 | 结果保留至少 3 秒，收尾提示收藏流程。 |
- 时间
- 0–3 秒
- 帧号
- 0–89
- 屏幕文案
- 一段想法，怎么变成视频？
- 画面动作
- 便签进入，标题淡入。
- 时间
- 3–10 秒
- 帧号
- 90–299
- 屏幕文案
- 今天想讲 AI 做视频，但不知道怎么开始
- 画面动作
- 原稿拆成三张文字卡。
- 时间
- 10–23 秒
- 帧号
- 300–689
- 屏幕文案
- 1 定主题 → 2 写分镜 → 3 导出视频
- 画面动作
- 逐项出现，当前步骤高亮。
- 时间
- 23–30 秒
- 帧号
- 690–899
- 屏幕文案
- 先做 30 秒，再迭代
- 画面动作
- 结果保留至少 3 秒，收尾提示收藏流程。
2. 安装 Node.js 与 Claude Code，先检查命令
到 Node.js 官方下载页选择 LTS 和你的系统，使用对应安装包；安装后重新打开终端。Remotion 使用 Node.js 与 npm，而 Claude Code 原生安装本身不要求先安装 Node.js。
下面是 macOS、常规 Linux 与 WSL 的官方 Claude Code 安装命令。已有安装时先检查版本；Windows PowerShell 使用官方命令 irm https://claude.ai/install.ps1 | iex，或者 WinGet 安装 Anthropic.ClaudeCode。
- 安装失败先处理下载或 PATH 错误；这一步还没有发送视频生成请求。
- macOS 已使用 Homebrew 时可以沿用 brew install --cask claude-code，并通过 Homebrew 更新。
macOS / Linux / WSL 终端
curl -fsSL https://claude.ai/install.sh | bash
node --version
npm --version
claude --version
claude doctor3. 创建工程，安装 Remotion skills，打开预览
在准备存放视频的父目录执行命令。my-ai-video 是新目录名称，已有同名工程时换一个名称。选择 blank 模板后，在项目中安装 Remotion 官方 skills。
npm run dev 会保持运行；打开终端显示的 Studio 地址。模板此时只是起点，还没有你要的 30 秒成品。保留这个终端，下一步在第二个终端启动 Claude Code。
- npx remotion versions 用于核对各 Remotion 包版本；保留安装后的 package-lock.json。
- 官方也提供 npx skills add remotion-dev/skills；本页采用项目中的 remotion skills add 路线即可。
终端 A：创建与预览
npx create-video@latest --yes --blank my-ai-video
cd my-ai-video
npx remotion skills add
npx remotion versions
npm run dev
4. 官方账号入口：登录后明确选择 Opus 5.5
选择官方账号的读者，在没有网关环境覆盖的终端中进入视频目录并启动 Claude Code，按客户端完成登录。账号的套餐、地区和组织设置需允许使用该模型。
进入会话后使用 /status 核对账号与模型；需要重新选择时用 /model claude-opus-5-5。选择了官方入口后，直接继续第 6 步；原有 CC Switch 或托管配置由其管理入口处理。
终端 B：官方账号入口
cd my-ai-video
claude --model claude-opus-5-55. apizt 入口：根地址、自己的 Key、准确模型 ID
选择 API 入口的读者，先在配置工具中确认 Claude Code、claude-opus-5-5 与自己的令牌分组。Claude Code 的 ANTHROPIC_BASE_URL 填 https://api.apizt.com，客户端会拼接 /v1/messages；不要在这个字段追加 /v1 或 /messages。
在视频目录打开第二个终端，下面先进入 Bash，再隐藏输入自己的 Key。凭证通过当前终端传给 Claude Code。已有其他 ANTHROPIC_API_KEY、OAuth、CC Switch 或团队设置时，先按配置教程确认认证来源，避免不同入口互相覆盖。
- 会话内运行 /status，检查地址、认证来源与模型；配置字段正确仍需实际任务验证。
- 模型启动失败时，核对分组、余额和准确 ID；本页没有执行付费推理或证明所有 Claude Code 功能均已兼容。
- Windows PowerShell 的对应设置见 API Key 教程，保持同样的根地址与 AUTH_TOKEN 语义。
终端 B：在 my-ai-video 目录运行；Key 输入时不回显
bash
read -r -s -p "apizt API Key: " tokenba_API_KEY
printf '\n'
export ANTHROPIC_BASE_URL="https://api.apizt.com"
export ANTHROPIC_AUTH_TOKEN="$tokenba_API_KEY"
claude --model claude-opus-5-56. 把完整制作提示词发给 Claude Code
将下载的 brief、提示词和镜头表放在项目根目录，告知 Claude Code 文件位置，再粘贴下面内容。先审四段文案和时长，随后让它实现工程。
本例将主要内容限制在 x=90–900、y=160–1590；这是保守排版建议，发布前仍需在抖音实际预览中检查右侧按钮、顶部信息和底部文案遮挡。标题 64 px、正文 42 px 是这个 1080×1920 示例的起点，按手机可读性调整。
原创提示词：可直接复制并改主题
请使用当前项目已安装的 Remotion skills，制作一条 30 秒中文竖屏知识讲解视频。
主题：把一段零散想法变成短视频。
交付：可编辑 React + TypeScript 工程、MP4、关键帧截图、实际运行命令。
画布：1080×1920；30 fps；900 帧；composition ID：AiTutorial。
沿用当前工程入口，完成后说明入口文件实际路径。
分镜（以下帧号均含起止帧；Sequence 起始帧分别为 0、90、300、690，durationInFrames 分别为 90、210、390、210）：
1. 0–3 秒 / 帧 0–89：标题“一段想法，怎么变成视频？”；一张便签进入。
2. 3–10 秒 / 帧 90–299：展示“今天想讲 AI 做视频，但不知道怎么开始”；原稿拆成三张文字卡。
3. 10–23 秒 / 帧 300–689：依次展示“1 定主题”“2 写分镜”“3 导出视频”；每项约 4 秒，当前步骤高亮。
4. 23–30 秒 / 帧 690–899：展示“先做 30 秒，再迭代”；保留结果至少 3 秒，最后展示“收藏这张流程表”。
视觉：
背景 #102022，文字 #F7F5EE，强调色 #F5C242。
主标题 64 px，正文 42 px，辅助信息至少 38 px；每屏最多两行主要信息。
核心文案布局在 x=90–900、y=160–1590 的矩形内。
这个矩形是本项目的保守排版约束，发布时还要在抖音预览里检查界面遮挡。
中文字体优先使用可合法使用的本地字体，并说明字体实际来源。
动效：
使用 useCurrentFrame、interpolate、spring 驱动；任意帧都可单独渲染。
标题用约 12 帧淡入和小幅上移；步骤卡逐项出现；转场约 8 帧。
动画不要改变已确定文案；留足阅读时间；先完成无旁白版。
先阅读下载的 brief 与镜头表，给出分镜检查结果，然后实现。
使用本地文字和基础图形；新增远程素材或收费服务前先列出需要什么。
运行项目已有的类型检查与 lint；列出 composition 后，导出 H.264 MP4。
检查帧 45、195、495、810 的截图和完整 MP4。
如果命令失败，给出真实错误与待处理项；尚未完成的步骤明确标记。
所有模型凭证只用于客户端认证，工程、画面、截图与下载材料中均不写入密钥。7. 在 Studio 中按镜头检查，只改明确的问题
刷新 Studio，选择 AiTutorial，确认 1080×1920、30 fps、900 帧。先跳到帧 45、195、495、810，对照镜头表检查文字与布局，再从头播放。
出现字太小、文字被盖住或读不完时，给 Claude Code 时间点、原文和目标，避免重新生成整条视频。第一条先完成无旁白版；增加旁白后再对齐镜头、字幕和音频时长。
- 中文乱码或字体缺失：确认本机字体名称或合法本地字体文件，说明实际字体来源。
- 素材加载失败：先检查文件路径与大小写；本地素材优先放在项目 public 目录。
- 动画跳帧：使用帧号计算状态；运行与导出应能在任意帧得到一致画面。
第二轮修改示例
只修改第 3 段：在帧 495 检查，“2 写分镜”与下方正文重叠。
保持 900 帧、文案和其他镜头不变。
将这段正文放到 y=900，字号 42 px，行高 1.4；检查内容仍位于排版区域内。
修复后重新输出帧 495 截图，并说明修改了哪些文件、检查结果是什么。
来源：Remotion 官方 HelloWorld 演示。这里定位到第 90 帧，即 30 fps 下的 3 秒；上方看当前画面，下方核对元素出现时间。检查自己的作品时，使用本教程指定的帧 45、195、495、810。
8. 列出 composition，导出 MP4 与四张关键帧
在项目目录的终端运行检查和导出命令。这里假定实际入口是 src/index.ts、ID 是 AiTutorial；如果 AI 创建了其他入口，使用它给出的真实路径。
先运行工程已有的类型检查与 lint 脚本，确认通过，再导出 H.264 MP4。最终文件会写到 out/ai-tutorial.mp4；关键帧文件用于和镜头表逐项核对。
项目目录：按实际入口和 composition ID 调整
npx remotion versions
npx remotion compositions src/index.ts
npx remotion render src/index.ts AiTutorial out/ai-tutorial.mp4 --codec=h264
npx remotion still src/index.ts AiTutorial out/frame-45.png --frame=45
npx remotion still src/index.ts AiTutorial out/frame-195.png --frame=195
npx remotion still src/index.ts AiTutorial out/frame-495.png --frame=495
npx remotion still src/index.ts AiTutorial out/frame-810.png --frame=810
9. 检查真实文件，再处理对应故障
打开 MP4 完整播放，对照下载的验收表填写实际结果。Studio 显示正常和命令退出成功都不能替代最终文件检查。
发布前把成片导入抖音草稿预览，检查界面遮挡、封面和字幕。这里的 30 秒竖屏参数是示例制作目标，不代表平台所有场景的上传规格。
| 现象 | 先检查 | 接下来处理 |
|---|---|---|
| claude / node 找不到 | 安装目录、PATH、是否重新开终端 | 修复安装，再回到工程目录。 |
| 401 / 403 或模型不可用 | 认证来源、Key、分组、准确模型 ID | 按 API Key 教程修配置，保留真实错误。 |
| 找不到 AiTutorial | compositions 输出与注册入口 | 使用真实 ID，检查 registerRoot 与工程文件。 |
| 渲染失败或下载浏览器失败 | 第一条错误、系统依赖与可访问网络 | 按官方故障信息处理，再运行导出。 |
| 中文字小或界面遮挡 | 四张关键帧和手机草稿预览 | 按位置与字号给局部修改指令。 |
| 时长或转场不对 | fps、durationInFrames 与镜头边界 | 核对 30 fps / 900 帧，检查 0–899。 |
- 现象
- claude / node 找不到
- 先检查
- 安装目录、PATH、是否重新开终端
- 接下来处理
- 修复安装，再回到工程目录。
- 现象
- 401 / 403 或模型不可用
- 先检查
- 认证来源、Key、分组、准确模型 ID
- 接下来处理
- 按 API Key 教程修配置，保留真实错误。
- 现象
- 找不到 AiTutorial
- 先检查
- compositions 输出与注册入口
- 接下来处理
- 使用真实 ID，检查 registerRoot 与工程文件。
- 现象
- 渲染失败或下载浏览器失败
- 先检查
- 第一条错误、系统依赖与可访问网络
- 接下来处理
- 按官方故障信息处理，再运行导出。
- 现象
- 中文字小或界面遮挡
- 先检查
- 四张关键帧和手机草稿预览
- 接下来处理
- 按位置与字号给局部修改指令。
- 现象
- 时长或转场不对
- 先检查
- fps、durationInFrames 与镜头边界
- 接下来处理
- 核对 30 fps / 900 帧，检查 0–899。
10. 第一条完成后，再增加旁白与批量版本
先保存通过检查的工程、锁文件、MP4 和验收表。下一条优先只换主题与文案；需要音频时准备有使用权的本地旁白，并让 AI 重新核对音频和画面时长。
模型请求按官方账号或 apizt API 的实际规则计费；费用包括修改、失败和重复尝试，应以对应账单核对。Remotion 当前使用 Free / Company 两档许可：个人、最多 3 名员工的营利组织及其他符合条款的主体可使用 Free License，其他主体按 Company License 处理，使用版本变化后需复核。
本教程提供官方命令与原创制作材料，尚未完成 Opus 5.5 付费生成和视频效果实测。先做一条能完整播放的成片，再记录自己的耗时、返工和费用。
怎样确认已经完成
- 账号或 API 的认证来源与实际模型已确认；Key 未出现在工程、画面或公开截图中。
- AiTutorial 显示 1080×1920、30 fps、900 帧，四段镜头边界连续。
- 帧 45、195、495、810 的文字可读，主题与镜头表一致；手机预览中核心信息未被界面遮挡。
- MP4 完整播放 30 秒，结尾未被截断；新增音频后另行确认同步与素材权限。
- 保留工程、锁文件、真实命令结果与验收表；尚未核对的费用留空。
常见问题
Opus 5.5 可以直接返回 MP4 吗？
本教程采用的方式是 Opus 5.5 通过 Claude Code 编写视频代码，再由 Remotion 导出 MP4。Anthropic 当前模型规格为文字/图片输入、文字输出。
这套方法适合什么视频？
适合文字动画、知识讲解、图表和产品演示。真人口播、电影镜头或写实画面需要另外准备素材或对应服务，先按成片目标决定。
一定要订阅官方 Claude 才能做吗？
可以选择可用的官方账号，或者 apizt API 入口。两者的认证和计费独立；使用 API 时按本页根地址、AUTH_TOKEN 和当前模型分组配置。
为什么我填写 /v1 后出现路径错误？
Claude Code 的 ANTHROPIC_BASE_URL 使用根地址 https://api.apizt.com，由客户端追加 /v1/messages。其他 SDK 的 base_url 可能带 /v1，要按当前工具字段配置。
教程中的排版区域是抖音官方安全区吗？
是本例的保守排版建议。不同设备、发布入口、字幕和界面可能变化，最终要在抖音的手机草稿预览中检查遮挡。
能完全免费完成吗？
下载本页材料免费。模型调用、官方订阅、可选配音与素材服务以及 Remotion 许可按各自规则处理，最终费用以实际账单为准。
需要先安装插件和两套 skills 吗？
按本页使用 npx remotion skills add 即可。官方还提供 Claude Code 插件路径，但初次制作选一条主线更容易检查配置。