从提示词到成片：脚本、分镜、渲染与字幕（2026）
阅读说明
官方信息查阅日期：2026-10-23。以官方原文为准。本文不写价格。
一句话结论
项目建好之后，用提示词让 Claude Code 先写脚本和分镜，再写 Remotion 或 HyperFrames 代码，预览通过后再渲染。Opus 5.5 写出的是代码；MP4 由框架渲染。
安装 Claude Code、新建项目、安装 Skill、第一次打开预览，按 环境搭建 做完再回到这里。模型怎么选，见 Claude Opus 5.5。
文档里的两条写法
HyperFrames 提示指南 把常见提示分成两种：
| 形状 | 文档怎么说 | 你要写清的内容 |
|---|---|---|
| Cold start | 从零描述这支片子 | duration、aspect ratio、mood / style、key elements（标题、下三分之一、字幕、音乐） |
| Warm start | 把已有材料做成片子 | 一个 URL、一份文档、一份 CSV 或一份转写稿 |
同一页写明：不写宽高比时，HyperFrames 默认 1920x1080。帧率在这份提示指南和本次查阅的 Remotion 页面里都没有规定成某一个数，由你在提示里写明。时长同样由你指定。提示指南里的 “10 seconds” 和 “5 scenes of 3s each” 是示例。插件文档里的试用句是一支 5 秒标题卡，同样只是示例。
想先看方案再让它改文件：指南写明可以要求故事板。代理会在项目根目录写 STORYBOARD.md，一个画面一节，你批准后再按节实现。赶时间可以写文档里的那句：Just build it — don’t ask me anything.
Remotion · Claude Code 写明可以用提示直接做视频，并配合 Claude Code 等编程代理。具体 Skill 见 Agent Skills：不确定用哪个时用 /remotion-best-practices；新建项目或 composition 用 /remotion-create；写 React 画面（动画、布局、字体、音频、时序）用 /remotion-markup。
推荐顺序
下面每一步都标了出处。HyperFrames 的推荐流程来自提示指南；Remotion 的预览和渲染来自对应文档。
| 步骤 | Remotion | HyperFrames |
|---|---|---|
| 预览 | 在项目目录运行 npm run dev，打开 Studio | npx hyperframes preview。指南写明：预览没开就改，等于盲改 |
| 让代理写片 | /remotion-create、/remotion-markup | 提示以 /hyperframes 开头，加载 composition 规则 |
| 渲染前 | 在 Studio 里看画面 | npx hyperframes lint && npx hyperframes check，两条都要通过 |
| 渲染 | 点 Render，再确认 Render video；或用 CLI | npx hyperframes render，或带输出路径的那条命令 |
| 声音 | Using audio 列出的能力 | /media-use：音乐、音效、旁白等 |
| 字幕 | /remotion-captions，以及 Captions | /hyperframes 的参考材料包含 captions |
HyperFrames 指南把推荐流程写成七步：npx hyperframes init my-video（脚手架；skills 会一并装上）、用 Claude Code 打开项目、用 /hyperframes 和上面两种形状之一提需求、npx hyperframes preview、用小而具体的提示继续改、跑 lint 和 check、满意后再渲染。init 和装插件的命令，环境搭建页已经写过，这里不重复。
快速开始页写明：第一版不是保证可用的成片。先看一遍故事、事实、文字是否可读、声音是否正常。
1. 脚本
提示指南写明：必须精确的部分（说法、名字、时长）由你指定，其余可以让代理补。材料用 warm start 交进去，避免它现编文案。
示例提示词（非官方）
先不要写代码，也不要改项目文件。
请只根据我贴出的材料写口播脚本，并给每段一个建议时长。
必须精确：
- 产品或主题名称：
- 只能使用下面的事实，不要补充我没写的数字、客户名或引用：
- 总时长：我指定为 __ 秒
- 谁在看、在哪里播：
材料：
（在这里贴要点、链接或原文）
输出：按时间段列出旁白，以及屏幕上要出现的字。
2. 分镜
提示指南写明，要审方案时让代理先写 STORYBOARD.md。
示例提示词（非官方）
先不要实现画面。请在项目根目录写 STORYBOARD.md，一个画面一节。
每节写明：起止时间、屏幕上的字、运动方式、有没有旁白或音乐。
我指定的参数（由我决定，不是框架的默认值）：
- 宽高比：
- 帧率：__ fps
- 总时长：__ 秒
事实以我上一条消息里的材料为准。不确定的列出来问我。
我回复批准之后，再按每一节实现。
3. 生成 composition
Remotion 里，composition 由 /remotion-create 创建，画面写法走 /remotion-markup。HyperFrames 的 composition 是 HTML。仓库 README 里的示例用 data-width、data-height、data-duration、data-start 描述一块画面；那是示例片段，尺寸仍以你在提示里写的为准。
官方技能示例（英文，来自技能说明，不是下面的中文模板）：
/remotion-create Make a promo video for a record store
Using /hyperframes, create a 10-second product intro with a fade-in title over a dark background and subtle background music.
示例提示词（非官方）
按已经批准的 STORYBOARD.md 实现整支片子。
Remotion 项目：使用 /remotion-create 和 /remotion-markup。
HyperFrames 项目：使用 /hyperframes。
参数用我指定的值：宽高比 __ ，帧率 __ fps，总时长 __ 秒。
我标成必须精确的句子不要改写。
做完用几行列出新建或修改的文件。不要在这一步渲染成片。
4. 预览
Remotion 文档：在项目目录运行
npm run dev
这会启动 Remotion Studio。HyperFrames 文档：
npx hyperframes preview
快速开始页写明，代理做完第一版后会留下可编辑的项目文件夹并打开本地预览；之后在项目目录里用上面这条命令重新打开。Claude Code 需要在这个项目目录里工作。预览终端要保持开着。打不开时，先按环境搭建页核对目录和命令，本文不另写一套安装步骤。
5. 修改
提示指南把迭代写成 “small targeted prompts”：一次改一小处。快速开始页要求对照故事、事实、可读性和声音看第一版。
示例提示词（非官方）
只改这一处，其他画面、句子和颜色保持不动：
- 位置：第 __ 节
- 改动：把标题换成「__」，这一节时长改为 __ 秒
改完用一句话说明动了哪个文件。不要重新设计整支片子。
6. 渲染前检查，然后渲染
HyperFrames 提示指南把下面两条当作渲染前的关口，并写明两条都要通过：
npx hyperframes lint && npx hyperframes check
check 在无头浏览器里跑 composition，报告静帧看不出来的问题：元素溢出区域、两块文字重叠、只在时间线中段才出现的运行错误、对比度低于 WCAG AA。指南写明这一步不应当省。
示例提示词（非官方）
先不要渲染。请按清单检查并回复结果：
1. 对照我给的材料，列出片子里任何我没提供的说法、数字或专名。
2. 说明画面上的字在预览里是否完整可见。
3. 如果这一版有声音，说明用了哪条音轨；如果没有，直接写没有。
4. 若是 HyperFrames 项目，运行 npx hyperframes lint && npx hyperframes check，两条都要通过。把失败项原文贴出来。
5. 若是 Remotion 项目，确认 Studio 能打开当前 composition。
我确认之后再渲染。
Remotion 的 Render your video：在 Studio 里点击 Render，选好设置后，用 Render video 确认。命令行示例是：
npx remotion render HelloWorld
把 HelloWorld 换成你的 composition ID，或在末尾加上输出路径以覆盖默认位置。不写 composition ID 时，文档写明会显示选择器：
npx remotion render
也可以让代理调用 /remotion-render（技能说明：渲染成视频或静帧）。同一页还列出不编码成视频的变体：只导出音频、用 --sequence 输出图像序列、静帧、GIF、透明视频。具体参数以该页链接的文档为准。
HyperFrames 渲染，README 与提示指南分别是：
npx hyperframes render
npx hyperframes render --output final.mp4
配音和字幕
Remotion 的 Using audio 是索引页，列出的能力包括：导入音频、延迟开始、从视频取出音频、控制音量、静音、改变速度、改变音高、可视化、导出音频。页面点名的标签有 <Html5Audio /> 和 <Video />。渲染页另外写了可以只导出音频，不渲染画面。本次索引没有收录各子页面的代码，这里不编组件写法。
字幕见 Captions：从 .srt 或 .vtt 导入、从音频转写、在片子里显示、导出烧录字幕或 .srt。工具包名称是 @remotion/captions。代理侧用 /remotion-captions。
HyperFrames 侧，/hyperframes 的参考包含 captions；/media-use 负责音乐、音效、图片、旁白、转写和已摆上时间线的音频混合。提示指南把它写成可用 HeyGen 的 heygen CLI（OAuth 登录），或本地工具（Kokoro TTS、Parakeet/whisper、背景去除、附带的音效）。要不要配音，在分镜提示里写明即可。
常见问题
这些中文提示词是官方模板吗？
不是。标了「示例提示词」的块是按上述文档的步骤改写成中文，方便直接改空格。英文代码块里的命令和技能示例来自官方页面。
不写分辨率会怎样？
HyperFrames 提示指南写明，不写宽高比时默认 1920x1080。要竖屏，在提示里写 “9:16 vertical” 或你自己的宽高。Remotion 这几份文档没有给默认分辨率，尺寸需要你写进提示。
第一版渲染出来就能发吗？
HyperFrames 快速开始写明：第一版不是保证可用的成片，要自己检查故事、事实、文字可读性和声音。提示指南要求 lint 和 check 都通过后再渲染。
网上抄来的 Opus 5.5 视频提示词只给出一个 HTML 页面，怎么变成视频？
很多社区案例让模型写的是单个 HTML 页面（Canvas、SVG、Three.js 等）。awesome-opus5-5-videos 的 README 给的做法是：让它把结果渲染成单个 HTML 文件，要视频就把页面录下来。想直接得到按帧渲染的 MP4，就让 Claude 按本页的 HyperFrames 或 Remotion 写法重写成 composition，再用 npx hyperframes render 或 Remotion 的渲染命令导出。
Codex 也能跑这些流程吗？
Remotion 技能仓库 README 写明适用于 Claude Code、Codex、Kimi Code、Cursor 等代理。第三方技能各有说明，见 热门开源项目。
相关阅读
参考来源（官方）
awesome-opus5-5-videos · GitHub：https://github.com/yihui-dev/awesome-opus5-5-videos（查阅日期：2026-10-23）
HyperFrames · Prompt Guide：https://hyperframes.heygen.com/guides/prompting（查阅日期：2026-10-23）
HyperFrames · Install the plugin：https://hyperframes.heygen.com/guides/plugins（查阅日期：2026-10-23）
HyperFrames · Make your first video：https://hyperframes.heygen.com/quickstart（查阅日期：2026-10-23）
HyperFrames · GitHub：https://github.com/heygen-com/hyperframes（查阅日期：2026-10-23）
Remotion · Claude Code：https://www.remotion.dev/docs/ai/claude-code（查阅日期：2026-10-23）
Remotion · Agent Skills：https://www.remotion.dev/docs/ai/skills（查阅日期：2026-10-23）
Remotion · Render your video：https://www.remotion.dev/docs/render（查阅日期：2026-10-23）
Remotion · Captions：https://www.remotion.dev/docs/captions/（查阅日期：2026-10-23）
Remotion · Using audio：https://www.remotion.dev/docs/using-audio（查阅日期：2026-10-23）
Remotion Agent Skills · GitHub：https://github.com/remotion-dev/skills（查阅日期：2026-10-23）