用 Opus 5.5 和真实截图做产品演示视频：附可运行的 Remotion 项目

Opus 5.5 可以帮你把一份产品简报变成可编辑的视频项目。 在本教程中，它负责编写 React/Remotion 代码；真实的网站截图提供界面画面；Remotion 导出 MP4。你将制作一个包含五个场景的 30 秒概览视频，替换其中的截图，并检查最终视频对产品的描述是否依然属实。

本文面向能在本地运行项目、但不想逐个元素手动做动画的运营人员、创始人和内容创作者。这是一个基于截图的产品导览，不是用户完成 API 请求的录屏。如需了解更完整的工作流和其他提示词，请先阅读我们的 Opus 5.5 视频制作指南。

观看成品并获取可运行文件

本地实际渲染：1280 × 720，30 fps，900 帧。此版本有意不含声音。界面为英文，截取于 2026 年 9 月 30 日。

下载完整项目、MP4 或 原始模型简报。同一项目还包含带旁白的合成和竖屏合成，下文分别链接了对应的教程。

实际测试了什么： 我们通过现有的官方 Claude Code 会话调用了 claude-opus-5-5，保留其生成的源码并在本地渲染。模型收到的是截图文件名、尺寸和文字描述；在那次调用中，它没有查看图片像素。之后我们审阅了实际图片并修改了代码，包括竖屏裁切和字幕处理。这是一个可复现的项目，不是模型基准测试，也不代表一条提示词就能达到商业品质。

压缩包包含 src/index.tsx、依赖锁定文件、原始截图、参考旁白、英文 SRT、简报和复现说明。不包含任何凭据或 node_modules。

先确定截图能证明什么

我们的简报刻意收窄：介绍模型目录、展示文档，并指向 API 参考。这是三个观众可以自行核实的公开页面。我们不会做假光标动画，不虚构 API 响应，也不暗示浏览文档就等于请求已成功执行。

收集素材前，先用一句话写清观众下一步要做什么。本例是：“先浏览模型目录，再找到与你的集成相关的文档。” 如果视频承诺五个互不相关的好处，就需要更多证据和另一套分镜；单纯增加转场并不会让它变好。

保留一份简短的素材清单，记录文件名、原始 URL、截取时间、尺寸以及每张图打算支撑的说法。以原尺寸逐张检查图片。排除余额、个人身份信息、私人对话和真实 API Key。如果界面语言不对，请在真实的语言设置下重新截取，或在文章中说明这是英文界面；不要替换界面文字来模拟本地化。

我们的三张原图均为 1280 × 720。目录截图只显示源图顶部 320 像素，因为下方区域包含会变动的价格。这个裁切是编辑上的选择，不是对当前价格的核实。带日期的截图永远不应被当作长期有效的价格承诺。

先做分镜，再让模型做动画

有用的分镜会给模型一个边界清晰的问题：用哪个素材、传达什么信息、持续多久、必须保留什么结果。本项目使用以下固定时间线。

在 30 fps 下，切点位于第 0、120、330、540 和 750 帧，合成在第 900 帧结束。这种做法便于让三个输出版本共用同一条时间线，也让修改要求更具体：“文档场景停留久一点”意味着调整已知的边界，而不是重新生成一整段没有明确规格的视频。

做你自己的产品时，先替换场景信息，再改颜色。例如仪表盘概览可以展示空状态、配置后的视图和导出的报告——后两者只有在你有真实截图时才使用。如果故事依赖上传文件之类的交互，请换成真实录屏，并说明其开始和结束状态；一张配了动画指针的截图并不是同等的证据。

先运行提供的项目

使用装有 Node.js 和 npm 的电脑。压缩包将 React 固定为 19.1.0、Remotion 相关包固定为 4.0.424，这样示例不会依赖你阅读时恰好最新的版本。针对你自己的环境和组织使用情况，请参阅 Remotion 的 编码代理配置说明 和 许可信息。

运行项目前先安装 Node.js 和 npm。下文可选的终端媒体检查还需要另行 安装 FFmpeg（包括 ffprobe）；npm ci 不会安装这个命令行工具。不使用这些可选检查命令，也可以通过项目自带的 npm 脚本完成渲染。

解压项目，在其根目录打开终端，然后运行：

npm ci
npm start

打开终端输出的本地地址。在合成列表中选择 DemoLandscape。拖到第 5 秒：应该看到目录的裁切画面，而不是空白矩形。拖到第 13 秒：应该能看到文档截图。如果这两项检查不通过，先修正路径，再改设计。

本地 Remotion Studio 的真实截图。这是可编辑项目的预览；上方可下载的 MP4 才是导出结果。

主要文件各有分工：

npm ci 需要联网下载缺失的依赖。首次 Remotion 渲染可能还会下载无头浏览器。这与模型访问无关：渲染压缩包中已有的代码不会再次调用 Opus。

给 Opus 一份可落地的简报

原始简报可在上方下载。下面这个更短的改编模板保留了重要约束，同时让你替换故事内容。它不是第二次经过测试的模型运行。

在现有 Remotion 项目中创建一个可编辑的产品概览视频。
保持已安装的包版本不变。修改前先检查当前源码。

受众：[谁来观看]
下一步行动：[一个具体的目的地]
合成：DemoLandscape，1280x720，30 fps，900 帧。
素材：[文件名、尺寸、来源 URL，以及每张图片能证明什么]。
使用 Img/staticFile 引用真实图片；不要重绘界面。

时间线：
0-4 秒：[开场陈述]
4-11 秒：[素材 1 及一条可核实的信息]
11-18 秒：[素材 2 及一条可核实的信息]
18-25 秒：[素材 3 及一条可核实的信息]
25-30 秒：[结尾与目的地]

保持截图比例。所有裁切均以源图像素标明。
不要展示私人数据，也不要把旧价格变成当前承诺。
用 useCurrentFrame/interpolate/spring 驱动动画，不要用 CSS 动画。
不要假光标交互、虚构结果、新增包或网络调用。
返回修改过的文件，并说明如何预览和渲染。

如果你的代理能查看图片，就把实际审核通过的素材交给它，但仍要检查其输出。如果像我们这样只提供尺寸和描述，就不要假设它知道屏幕上哪个控件是重点。正因如此，检查渲染后的画面是工作流的一部分，而不是可有可无的收尾步骤。

让真实界面保持清晰可读

我们横屏版的目录视口宽 1120 像素。因此 1280 × 320 的源图裁切会变成 1120 × 280：两个轴使用相同的缩放系数 0.875。完整的 1280 × 720 文档截图则变成 1120 × 630。它的标题和字幕位于图片下方的独立色带中，不会遮挡页面。

这些计算很重要。把截图强行填满任意尺寸的框，可能会拉伸控件、切掉关键标签，或让一个未激活的控件看起来像别的东西。在提供的 Shot 组件中，图片尺寸保持等比，由一个溢出隐藏的容器决定可见的裁切区域。原始 PNG 保持不变。

动效要克制。示例中的镜头缩放从 0.985 变到 1；大幅缩放会让细小的界面文字变糊。开场的矩形明显是编辑图形，而产品画面是真实截图。改编时请保持这种区分：装饰可以帮助讲故事，但不应在产品界面里伪造证据。

在手机尺寸下，即使导出文件在技术上足够清晰，完整的桌面页面可能仍然太小。面向移动端受众时，请参考 竖屏重新排版教程，而不是把整个横屏画面缩小。

修改单个场景，同时保留可用版本

每次较大改动前先保存可用的项目。每次只提一个修改，并附上验收条件，例如：

只修改模型目录场景。保留其 4-11 秒区间和
源图裁切 y=0..320。把标题与图片的间距增加 12 像素。
不要改动截图、后续场景、合成尺寸或依赖。
在第 150 帧，标题、完整的裁切画面和截图标签不得重叠。

检查 diff，并在导出全部 900 帧之前先渲染受影响的片段。如果修改涉及场景时长，要同时检查 SCENES、总时长、旁白和字幕。视觉场景变长而配音不变，这是时间上的改动，而不只是设计上的改动。

在我们实际的修改中，竖屏版的文档和 API 画面需要更紧的源图裁切。我们还移除了行数截断（line-clamping），因为在后续编辑后它可能悄悄隐藏字幕文字。这些修正已包含在可下载的最终源码中；来源说明区分了模型输出与编辑修改。

导出并验证 MP4

在项目根目录运行：

npm run render:landscape
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/landscape.mp4

预期视频为 H.264、1280 × 720、30 fps、900 帧，时间线 30 秒。此合成按设计为静音。不要把它当作缺少音频的故障；按照 配音与字幕指南 操作时请使用 DemoNarrated。

检查的不只是文件是否存在。从头到尾播放 MP4，在每个场景暂停，并将截图与原图对比。确认目的地清晰可读、没有出现私人数据、没有意外的空白停顿。元数据只能证明尺寸和时长，不能证明信息有用或准确。

让成品视频真正派上用场

把可编辑项目、原始素材和导出文件放在一起，这样产品界面变化时可以直接更新，而不必编一个新故事。演示你自己的产品时，请替换示例中的 Ofox 目的地和截图。不要把公开页面的概览当作你未经测试的私有流程的证据。

Opus 5.5 模型页 是 Ofox 上对应的模型条目；本教程记录的代码生成调用使用的是官方 Claude Code，而不是 Ofox 的 API。Ofox 的模型条目和文档是有用的后续目的地，但这并不表示 Ofox 就是 Remotion 渲染器。

接下来可以继续阅读 添加配音和字幕 或 为竖屏视频重建布局。视频主指南 串联了整个工作流。