screen-demo-production

屏幕演示制作

当核心证据是一个随时间变化的操作界面时，请使用此技能：例如运行命令、文件变更、控件激活、应用状态变化或工作流完成。

此技能的适用范围不止于 SaaS 营销。它涵盖教程、支持、入门引导、工程、发行说明、内部培训、终端、IDE、浏览器、桌面、远程桌面和多应用演示。

证据立场

• 有文档记录的事实： 来自官方采集/自动化、无障碍、隐私或安全来源的行为。
• 制作启发式建议： 应结合受众和最终栅格图像进行测试的实用方向选择。
• 经验观察： 在实际产品/构建版本、彩排、采集或渲染中验证的结果。

工具和操作系统的行为变化频繁。事实已于 2026-07-12 验证。记录产品/构建版本、浏览器/操作系统、自动化/采集版本、测试夹具、模拟对象和权限。

确定真实性声明类别

每个演示都必须声明以下一种类别：

• 真实采集： 像素来自所述产品或操作系统在实际运行期间的画面。
• 受控真实采集： 真实 UI 在预置数据、固定时间、模拟依赖、自动化或其他重要控制措施下运行。请披露这些控制措施。
• 示意性合成： 为便于说明或控制节奏而重新制作终端或 UI。绝不可称其为真实运行的录像。
• 混合： 将真实像素与合成光标、输入、标注、时间重构或其他图层结合。记录每个组成部分。

选择足以支持预期声明且干预最少的模式。概念性或隐私敏感的说明适合使用合成 UI；可重复的真实网页流程适合使用浏览器自动化；涉及原生窗口装饰、终端/IDE 行为、权限或跨应用交互时，适合采集操作系统/窗口画面。

不得将模拟数据或模拟服务作为实时性能、安全性、交易、基准测试或客户成果的证明。

范围界限

此技能负责采集模式选择、工作流脚本编写、重置、隐私审查、可读性、光标/标注方向、旁白/字幕同步、宽高比变体、重录、QA 和来源记录。

它不能取代通用的 Playwright/测试架构、营销活动定位、没有操作工作流的网站视觉展示、通用剪辑技巧或应用无障碍符合性测试。

制定演示约定

定义：

• 受众、任务、前置条件、预期结果和真实准确的声明；
• 产品/构建版本/提交、环境、账户角色、区域设置、时区、时钟、视口、DPI/缩放、主题和功能标志；
• 真实/受控/合成/混合分类；
• 测试夹具数据和重置流程；
• 操作、就绪信号、失败分支、旁白、字幕、光标、标注和停留时间；
• 禁止展示内容列表以及隐私/安全审批人；
• 主版本和变体的尺寸、时长、fps、字幕/标注安全区域；
• 采集工具、编解码器、音频来源和后期制作图层；
• 来源记录表和审核关卡。

使用镜头记录表：

beat | claim | start state | action | readiness signal | result | narration | cursor/callout | hold | reset

从设计上确保可重置

优先使用一次性目录、专用演示账户、预置测试夹具、幂等重置端点、固定区域设置/时区/时钟、固定版本依赖、已屏蔽的通知和有版本管理的模拟对象。

新的浏览器上下文可以隔离 Cookie 和本地存储等浏览器存储，但不会重置外部数据库或账户状态。录制前应反复测试重置流程和工作流。每个非确定性分支都必须明确列为一个分支、由受控依赖管理，或作为更改采集模式的理由。

浏览器自动化捕获

Playwright 文档中的事实：

• 浏览器上下文会隔离会话状态。
• 定位器操作会自动等待元素满足可操作条件，例如可见、稳定、能接收事件以及在适用情况下处于启用状态。
• Playwright 不建议将 networkidle 用作就绪信号，并指出固定的 waitForTimeout() 延迟容易导致测试不稳定。
• 浏览器上下文关闭时，视频才会完成写入；应明确指定视口和视频尺寸，因为默认视频缩放可能会降低输出质量。
• 存储的身份验证状态可能会冒充账户身份，因此不应提交到代码仓库。
• 跟踪文件和 HAR 文件可能包含截图、DOM、网络、控制台、标头、Cookie、请求正文、时间信息，以及可选的源文件。

等待业务上可观察的状态：确切的 URL、响应、标题、状态消息、已启用的控件、更新后的行或已持久化的结果。将机器就绪状态与观众观看节奏分开：先断言状态，再添加剪辑停留时间。

仅模拟真实情况允许你声称的内容。披露被模拟的外部系统或固定时钟。受控且真实的 UI 仍可作为界面行为的有效证据，但不能证明被模拟服务提供方的真实响应或速度。

将视频、跟踪文件、HAR、日志、存储状态、截图和控制台输出视为相互独立的敏感文件。清理其中一个并不会清理其他文件。

真实屏幕／窗口捕获

浏览器的 getDisplayMedia() 需要当前用户激活，并且每次都需要用户重新选择捕获对象；音频支持因环境而异。操作系统捕获可能需要权限，也可能显示捕获指示标记。

进行真实捕获时：

• 选择范围最小的窗口／屏幕；
• 关闭私人应用、通知、密码管理器、个人浏览器配置文件和无关终端；
• 必要时使用干净的桌面／账户，以及中性的壁纸／菜单栏；
• 隐藏书签、历史记录、本地路径、用户名、主机名、API 密钥、令牌、电子邮件、客户数据、时钟和内部 URL；
• 测试原生对话框、权限、缩放、光标和音频；
• 在每个操作前后捕获可供剪辑使用的画面素材。

不要只依赖裁剪或模糊来保护隐私。应从一开始就避免录入敏感像素。

合成终端和 UI

已知且经过验证的命令／结果、涉及隐私的命令／结果，或需要精确旁白时序的场景，适合使用合成输出。

• 如果声称合成输出具有代表性，请在一次性测试环境中验证命令／结果。
• 保留确切的换行、提示符、宽度、时序、错误和状态转换。
• 对经过测试环境验证的合成输出，注明其已通过验证；若未经验证，则标明其仅供说明。
• 不要捏造产品功能、基准测试数据、网络响应或安全结果。
• 在溯源信息中保留源转录稿和生成规则。

合成重建应提升可读性并改善节奏，而不是歪曲实际发生的事情。

直接操作、光标和标注

先说明操作意图，再执行操作；随后解读结果。避免在标签变化的瞬间念出正在变化的标签。

制作启发式建议：

• 旁白传达含义时，将光标停在一旁；
• 直接移动到目标，停稳，单击一次，并仅在必要时离开；
• 不要持续绕圈标记目标；
• 一次只使用一种强调方式；
• 切勿遮挡目标、焦点指示器、错误或结果；
• 在溯源信息中注明后期制作的光标／点击环并非真实像素；
• 复杂结果应停留足够长的时间，以便观众在最终尺寸下读完。

自动化断言完成所需的时间可能短于观众理解内容所需的时间。就绪后添加剪辑停留时间，不要在就绪前加入任意等待。

旁白、字幕和视觉描述

旁白应解释目的和结果，而不是重复每个控件标签。只有在有助于完成任务时，才使用准确的 UI 名称。

有重要音频的预录同步媒体需要配字幕。必要时，应通过旁白、文字稿或音频描述传达仅通过视觉呈现的重要状态变化。字幕不得遮挡控件、错误、代码或输出。

进行三项测试：

• 静音：观众能否通过字幕和视觉指引跟上操作和结果？
• 仅音频：是否描述了必要的结果？
• 最终尺寸：UI、代码、终端文字、标注和字幕是否清晰可读？

隐私、安全与声明

尽量减少数据收集，只捕获符合声明用途的内容。针对原始捕获内容和诊断产物，制定访问控制、保留期限、删除机制，并明确审核者的责任。

清除以下内容：

• 机密信息、API 密钥、令牌、密码、身份验证状态、Cookie、二维码；
• 姓名、电子邮件、人脸、头像、客户 ID、支付信息、健康／人力资源／法律数据；
• 内部主机、路径、工单、分析数据、未发布的功能标志、管理控件；
• 通知、自动填充内容、剪贴板、浏览器历史记录、源映射、日志；
• 元数据和文件名，以及可见像素中的内容。

不得声称数字签名或 C2PA 记录能够证明所展示的工作流确实发生过，或每项陈述都属实。来源信息可以让签名记录具备防篡改能力，并记录素材和操作。

可读性和变体

从最终交付的光栅图像出发进行设计：

• 捕获前放大终端／IDE／UI 文字；
• 移除无关面板和界面元素；
• 有意识地选择视口和设备缩放比例；
• 确保对比度和焦点指示清晰可读；
• 放大证据，再恢复上下文；
• 避免使用对压缩敏感的微小文字和单像素线条。

将竖屏和方形变体作为独立构图来制作。对桌面画面进行居中裁剪，往往会丢失导航、标签或结果状态。如果工作流无法完整呈现，请重新录制或重新编排。

重录与连贯性

按状态明确的片段或章节重录。在转场前后保留余量。记录每次录制的夹具／构建版本、起始／结束状态、失败情况和选用片段。

剪辑可以删去等待时间，但不得颠倒因果顺序、隐藏会改变声明的错误，也不得把后续成功呈现为失败操作的即时结果。

QA 和来源信息

验证：

1. 声明及其真实性分类；
2. 准确的构建版本、账户角色、夹具、模拟对象、时钟、区域设置和重置操作；
3. 工作流反复成功运行，并正确处理失败；
4. 视频、音频、跟踪记录、HAR、日志、字幕、元数据和缩略图中均无 PII／机密信息；
5. 操作与结果连贯，时间编辑诚实；
6. 光标／标注使用克制，最终尺寸下清晰可读；
7. 字幕、视觉描述、对比度和闪烁；
8. 纵横比变体保留所有必要步骤／结果；
9. 编解码器、尺寸、帧率、音频和输出完整性；
10. 来源信息记录和哈希值。

示例 1：经夹具验证的合成 CLI

这是一个完整示例，并非强制套用的公式。

**目的：**制作 32 秒的虚构 acme deploy 教程，不展示真实 shell 或机密信息。

使用一次性夹具验证命令，设置 UTC、固定区域设置／终端宽度、临时 home 目录、种子 demo-17 和本地模拟端点。仅保存获准的输出。以 1920x1080 分辨率渲染合成终端，使用大号等宽字体，并单独制作 1080x1920 版式。

$ acme init storefront --seed demo-17
Created storefront/acme.yaml

$ acme deploy --environment preview
Building 6 assets...
Preview ready: https://preview.example.test/storefront

$ acme status
storefront  preview  healthy  revision 8c41d2

时间线：说明目标；输入／运行 init；停留展示已创建文件的结果；使用确定性进度部署；停留展示 URL；运行 status；停留展示健康状态。旁白介绍目的并解读结果。每次录制都根据文字稿重新构建，并标注为“基于经夹具验证输出的合成终端演示”。

**可能的失败：**输出实际上未经验证。应重新标注为示意内容，或在发布前完成验证。

示例 2：受控的真实浏览器流程

这是一个完整示例，不是强制套用的公式。

**意图：**制作一段 45 秒的支持培训视频，展示操作员如何解决一个预设的订单问题。

通过幂等重置，为专用账号、订单和工单植入测试数据。固定时间和区域设置，屏蔽通知和分析数据，并披露使用了模拟的外部物流服务商。使用全新上下文和受保护的身份验证状态，并明确设置 1920x1080 的视口和视频尺寸。

等待准确的标题、状态以及响应／状态变更；不要使用 sleep 或 networkidle。先通过跟踪功能进行彩排，然后清理／删除诊断文件并录制正式版本。后期制作时，让光标在指向目标前停稳。将重置和流程各运行三次。检查个人身份信息（PII）、字幕、控制台／网络错误、模拟服务披露、最终裁剪效果，以及构建／测试数据／自动化／光标修改记录。

**可能的失败情况：**成功界面已经显示，但未验证数据是否持久化。在剪辑停留前添加一项可观察的持久化状态断言。

来源

已于 2026-07-12 核实：

• Playwright 可操作性、上下文、定位器、导航、网络、模拟、视频、跟踪、身份验证和时钟：https://playwright.dev/docs/
• W3C 屏幕捕获规范和 MDN getDisplayMedia：https://www.w3.org/TR/screen-capture/ 和 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
• Microsoft 屏幕捕获：https://learn.microsoft.com/en-us/windows/apps/develop/media-authoring-processing/screen-capture
• Apple ScreenCaptureKit：https://developer.apple.com/documentation/screencapturekit
• WCAG 2.2 字幕、音频描述、对比度、重排和闪烁：https://www.w3.org/WAI/WCAG22/Understanding/
• W3C 隐私原则：https://www.w3.org/TR/privacy-principles/
• NIST SP 800-122 和隐私框架：https://csrc.nist.gov/pubs/sp/800/122/final 和 https://www.nist.gov/privacy-framework
• C2PA 规范索引：https://spec.c2pa.org/