记录产品演示

将用户的产品和操作描述转化为检入的录制场景，对真实应用程序运行该场景，并将生成的资产应用于请求的预览。

选择工作流程

对于产品的首次演示，请阅读 references/new-product-workflow.md 和 references/scenario-schema.md。
对于已有场景，请阅读 references/scenario-schema.md，仅更新所请求的行为，并重新录制到相同的应用路径，除非用户另有要求。

定位产品路由、稳定的交互选择器以及消费其预览的组件。保留所请求的内容、顺序、取景、持续时间和输出位置。
创建或更新 scripts/demo-video-scenarios/<product-slug>.json。对于首次演示，使用 npm run init:demo -- --product "<name>" --route <route> --consumer <file> 初始化，然后用请求的操作序列替换启动操作。将产品特定行为保留在场景中，而不是硬编码到记录器中。
使用真实的浏览器操作。当查看者必须看到防抖更新、完成的动画或中间状态时，添加有意的等待。保持总操作时间低于录制时长；未使用的时间将成为最终的保持帧。对于连续动画，为其完整运行加上可读的保持帧分配时间，并添加 quality.motionChecks 窗口。
将生成的媒体放在 public/previews/ 下，除非现有产品使用另一个公共资产位置。设置 application.consumerFiles 和公共路径，以便运行器验证资产已应用。在添加新预览时先修补消费者；覆盖已被引用的输出即视为更新。

运行：

npm run record:demo -- --scenario scripts/demo-video-scenarios/<product-slug>.json

验证结果，而不仅仅是命令退出：
- 记录器运行 verify:demo，必须通过精确的时长、尺寸、方形像素、平均帧率、帧数、H.264 编码以及已配置的连续运动检查。
- 使用 view_image 打开每个打印的全局和运动联系表。确认输入的值、中间产品更改、均匀分布的运动、过渡的两端以及最终状态。
- 运行 npm run lint；运行 AGENTS.md 要求的所有检查，针对应用预览时所做的任何应用程序 UI 更改。

对于动画演示，优先使用真正的 60 fps。尊重源捕获报告的帧率上限；切勿通过复制帧或插入 WebGL 运动来宣称更平滑的输出。
为一次大型过渡分配足够的场景时间来清晰显示。使用产品预期的持续时间；当没有预期且平滑度至关重要时，从每个方向约 2–3 秒开始，并延长整个视频，而不是匆忙进行后续操作。
在 quality.motionChecks 中标记每个应连续移动的时间间隔。默认门控不允许任何连续的完全相同的重复帧。仅在产品有意在该间隔内保持时才放宽限制，并在场景描述中说明原因。
通过密集的运动联系表直观判断节奏。有效的帧数无法检测到前端加载或突兀的缓动曲线。
如果真实产品动画本身不流畅，且用户要求改进平滑度，请修复其帧节奏或缓动，并在再次录制前运行相关的 UI 检查。否则，保留产品行为并解释限制，而不是在后期制作中掩盖它。

从仓库推断路由、选择器和现有资产消费者。只有在检查后仍有多个产品或实质上不同的输出位置可能时，才进行询问。

当用户没有提供技术细节时说“为 <product> 创建/初始化并应用一个演示”时，请推断实现的路由、目录消费者、选择器和现有的预览约定。只有当仓库和请求没有提供更好的约定时，才默认使用 8 秒、60 fps 和竖屏取景。演示请求并不授权实现缺失的产品。

一个合适的请求可以像这样简单：

使用 $record-product-demo 为设计二维码：分两部分输入 URL，暂停等待树更新，将 3D 变换为 2D 再变回，然后将其应用于目录卡片。

面向用户的初始化和提示示例记录在 demo-video 工作流文档中。