Remotion + Claude Design：用「系统提示词」把教程视频流水线搭起来
你是不是也遇到过这种崩溃：
- 教程写完了，视频还没开始做。
- 剪映/PR 打开就头疼，字幕、镜头、配图全靠手拉。
- 每次做视频都像从零开始，风格还不统一。
我喜欢的做法很“工程化”：用 Claude Design 的系统提示词把输出格式锁死，让它稳定吐出「可直接喂给 Remotion 的视频脚本 JSON」。Remotion 负责渲染，你负责把内容写对。
下面这套流程，你照着做就能跑起来。🛠️
你要达到的效果（目标很具体）
你给 Claude 一段主题，比如：
“用 2 分钟教会新手：如何用某某 AI 工具做一张封面图”
它输出：
- 分镜（每一镜干什么）
- 旁白（可直接配音）
- 字幕（可直接上屏）
- 画面元素（标题、要点、屏幕录制提示、B-roll 建议）
- 节奏（每镜头几秒、转场方式）
- 统一风格（字体、字号、配色、语气）
然后你把这个 JSON 丢进 Remotion：
- 自动排版
- 自动上字幕
- 自动按镜头切换
- 导出 MP4
你就能把“做视频”从手工活，变成“填空题”。
准备清单（别装复杂，够用就行）
必备
- Claude（能用就行，重点是系统提示词）
- Node.js（建议 18+）
- Remotion（React 视频渲染）
可选（但强烈推荐）
- TTS（ElevenLabs / Azure / Edge TTS）用来批量配音
- 屏幕录制（你需要演示软件操作时用）
核心思路：把“视频风格”写进系统提示词
你做教程视频，最怕什么？
- 每次标题样式不一样
- 字幕忽大忽小
- 讲解忽快忽慢
- 镜头切得像抽风
解决办法只有一个：把风格规范写死。
你可以把下面这份「系统提示词模板」直接拿去用。
Claude 系统提示词模板（可直接复制）
放在 Claude 的 System 里。你以后所有教程视频，都用它做“视频总导演”。
你是“AI 教程视频总导演 + 分镜编剧 + 字幕导演”。
你的任务：把我给的教程主题，输出成“可直接用于 Remotion 渲染”的结构化 JSON。
硬性要求：
- 只输出 JSON，不要解释。
- 视频时长：60~120 秒。
- 口吻：像朋友在教你，短句，多动词，少空话。
- 画面：适合竖屏 9:16。
- 每个镜头都要：时长、旁白、字幕、屏幕要展示的元素、转场建议。
- 字幕：每句不超过 18 个汉字，必要时拆行。
- 节奏：开头 3 秒抓人，中段给步骤，结尾给行动建议。
风格规范（固定不变）：
- 主色：#111111 背景，强调色：#00E5FF
- 字体：思源黑体（或系统默认无衬线）
- 标题：大字粗体；要点：中号；提示：小号
- 屏幕内容若涉及按钮/菜单，字幕要写“点哪里”。
输出 JSON 结构：
{
"meta": {
"title": "",
"ratio": "9:16",
"durationSec": 0,
"style": {
"bg": "#111111",
"accent": "#00E5FF",
"font": "Sans"
}
},
"scenes": [
{
"id": "s1",
"sec": 0,
"voice": "",
"subtitles": ["", ""],
"visual": {
"type": "title|bullets|screen|broll",
"title": "",
"bullets": ["", ""],
"screenHint": "如果需要屏幕录制，描述录制内容",
"assets": ["可选：图片/图标关键词"]
},
"transition": "cut|fade|slide"
}
]
}
你在 User 里怎么喂内容（给你一份好用的提问格式）
你在 Claude 的普通对话框里（User）贴这个：
主题：用 Remotion 做一个“自动字幕教程视频”的最短路径
受众：完全没接触过 Remotion 的新手
必须覆盖：安装、项目初始化、读取 JSON、渲染导出
画面偏好：多用步骤清单 + 关键命令上屏
避坑提醒：Node 版本、字体丢失、字幕换行
结尾 CTA：给一个“下一步可以做什么”的建议
Claude 会按你系统提示词的格式，吐出 JSON。
你拿到 JSON 后，别急着开剪辑软件。
直接进 Remotion。
Remotion 落地：把 JSON 变成视频
1）初始化项目
npx create-video@latest
# 选 Remotion
cd your-project
npm i
npm run start
2）放入你的脚本 JSON
新建：src/script.json
把 Claude 输出的 JSON 粘进去。
3）做一个“通用渲染组件”读取 scenes
新建：src/VideoFromScript.tsx
import React from 'react';
import script from './script.json';
import {AbsoluteFill, Sequence, useVideoConfig} from 'remotion';
const fps = 30;
const TitleScene: React.FC<{title: string; subtitle?: string[]}> = ({title, subtitle}) => {
return (
<AbsoluteFill style={{backgroundColor: '#111111', color: 'white', padding: 64}}>
<div style={{fontSize: 72, fontWeight: 800, lineHeight: 1.1}}>{title}</div>
{subtitle?.length ? (
<div style={{marginTop: 24, fontSize: 36, color: '#00E5FF'}}>
{subtitle.join('\n')}
</div>
) : null}
</AbsoluteFill>
);
};
const BulletsScene: React.FC<{title: string; bullets: string[]; subtitles: string[]}> = ({title, bullets, subtitles}) => {
return (
<AbsoluteFill style={{backgroundColor: '#111111', color: 'white', padding: 64}}>
<div style={{fontSize: 56, fontWeight: 800}}>{title}</div>
<ul style={{marginTop: 24, fontSize: 38, lineHeight: 1.35}}>
{bullets.map((b, i) => (
<li key={i} style={{marginBottom: 16}}>{b}</li>
))}
</ul>
<div style={{position: 'absolute', bottom: 64, left: 64, right: 64, fontSize: 34, opacity: 0.9}}>
{subtitles.join(' / ')}
</div>
</AbsoluteFill>
);
};
export const VideoFromScript: React.FC = () => {
const {durationInFrames} = useVideoConfig();
let cursor = 0;
return (
<AbsoluteFill>
{script.scenes.map((s: any) => {
const from = cursor;
const frames = Math.max(1, Math.round((s.sec || 1) * fps));
cursor += frames;
const type = s.visual?.type;
const title = s.visual?.title || '';
const bullets = s.visual?.bullets || [];
const subtitles = s.subtitles || [];
return (
<Sequence key={s.id} from={from} durationInFrames={frames}>
{type === 'bullets' ? (
<BulletsScene title={title} bullets={bullets} subtitles={subtitles} />
) : (
<TitleScene title={title || script.meta.title} subtitle={subtitles} />
)}
</Sequence>
);
})}
{/* 防止 duration 不够时黑屏：可按需补齐 */}
<Sequence from={Math.max(0, durationInFrames - 1)} durationInFrames={1}>
<AbsoluteFill style={{backgroundColor: '#111111'}} />
</Sequence>
</AbsoluteFill>
);
};
4）注册 Composition
打开 src/Root.tsx，加上：
import {Composition} from 'remotion';
import {VideoFromScript} from './VideoFromScript';
import script from './script.json';
export const RemotionRoot: React.FC = () => {
const fps = 30;
const durationInFrames = Math.round((script.meta.durationSec || 90) * fps);
return (
<>
<Composition
id="Tutorial"
component={VideoFromScript}
durationInFrames={durationInFrames}
fps={fps}
width={1080}
height={1920}
/>
</>
);
};
5）导出
npx remotion render Tutorial out.mp4
到这一步，你已经能把 Claude 的脚本“自动变视频”。
进阶玩法：把配音也自动化（更像完整成片）
你可以让 Claude 在 JSON 里额外输出一个字段：voice（每镜旁白）。
流程是：
- 把所有
scene.voice拼成一段文稿 - 丢给 TTS 生成音频
- Remotion 里用
<Audio />对齐播放
这块不难，麻烦点在“对齐”。
偷懒办法：
- 每镜头一段音频，按镜头时长播放
- 或者用 Whisper/强制对齐工具做时间戳（追求极致再上）
一个更稳的输出技巧：让 Claude 给“镜头秒数”也可控
你会遇到这种情况：
- Claude 写嗨了，一镜头 20 秒，观众直接划走。
解决方法：在 User 里加一句：
每个镜头 2~6 秒，超过 6 秒必须拆成两个镜头。
效果立竿见影。
常见翻车点（提前避掉省半天）
- 字幕太长：上屏字一多就丑，还显得啰嗦。强制限制“每句不超过 18 字”。
- Remotion 字体丢失：生产环境可能没有你本地字体。用系统无衬线，或把字体文件打包进项目。
- 镜头类型不统一：一会儿 title，一会儿 screen，一会儿 broll，渲染组件写不完。建议先只支持
title + bullets两种，跑通再扩展。 - 时长对不上：JSON 写 90 秒，Composition 配了 60 秒，结尾被截。让
durationSec成为唯一可信来源。 - 屏幕录制没法自动：Remotion 不是录屏工具。需要你自己录好，然后作为 asset 放进镜头里。
一个可复用的工作流（你每天能早下班那种）
你可以把它当成“视频工厂”：
- 你写主题 → Claude 输出 JSON
- JSON 进 Remotion → 自动成片
- 需要录屏的镜头 → 手动补一个素材
- 导出后发平台
下次再做教程，不用再从空白时间线开始折磨自己。😄
你可以直接照抄的「选题模板」
想快速批量做系列教程？把下面这段改改就行：
主题：教新手用【工具名】完成【结果】
限制：90 秒以内，竖屏
结构：3 秒抓人 + 3 步骤 + 1 个避坑 + 结尾 CTA
画面：每步给“点哪里/输入什么/看到什么结果”
输出：严格按 JSON
如果你愿意，把你要做的视频主题丢给我（工具、受众、时长、想要的风格），我可以按上面的结构给你一份可直接渲染的脚本 JSON。
