用途
ui-demo 用于录制精致、专业的网页应用 UI 演示视频。它基于 Playwright 的视频录制功能，通过注入光标叠加层、控制自然节奏以及讲故事式的流程来生成演示内容。
该技能适用于以下场景：
- 用户请求制作「演示视频」「屏幕录制」「操作引导」或「教程视频」；
- 用户希望以可视化方式展示某个功能或工作流；
- 用户需要为文档、新手引导或利益相关方演示准备视频。
主要能力
- 使用 Playwright 录制浏览器中的操作过程为视频。
- 在页面中注入 SVG 箭头光标叠加层，使鼠标移动可见。
- 注入底部字幕条，用于展示步骤说明。
- 提供自然节奏控制，包括操作后的停顿、逐字输入延迟、平滑滚动等。
- 支持仪表盘/概览页的元素平移浏览，引导观众视线。
- 提供排练机制，在真正录制前验证所有选择器可用。
使用方式：三阶段流程
每个演示都经过三个阶段：发现（Discover）→ 排练（Rehearse）→ 录制（Record）。不得直接跳到录制。
阶段一：发现
在编写任何脚本之前，先探索目标页面，了解真实存在的元素。原因在于无法为没见过的界面编写脚本——字段可能是 <input> 而非 <textarea>，下拉框可能是自定义组件而非 <select>。发现阶段需要：
- 导出现有可交互元素（input、select、textarea、button、contenteditable）；
- 关注表单字段类型、下拉选项的值与文本、富文本支持（@提及、#标签、markdown、emoji）、必填字段、动态出现的内容、按钮精确文案、表格列标题等；
- 为每个页面输出字段映射，用于在脚本中编写正确的选择器。
阶段二：排练
在不录制的情况下跑通所有步骤，验证每个选择器都能解析。静默的选择器失败是演示录制失败的主要原因。排练使用 ensureVisible 包装器，失败时大声报错并输出当前可见元素列表。脚本以步骤数组形式列出各选择器，全部通过后才继续。排练失败时需阅读可见元素转储、找到正确选择器、更新脚本并重新排练。
阶段三：录制
只有发现和排练都通过后才创建录制。录制原则包括：
讲故事流程：按用户指定顺序，或使用默认顺序——进入（登录/导航到起点）、上下文（平移浏览让观众定位）、动作（执行主要工作流）、变化（展示次要功能如设置、主题或本地化）、结果（展示结果或新状态）。
节奏：登录后 4 秒、导航后 3 秒、点击按钮后 2 秒、主要步骤之间 1.5–2 秒、最终动作后 3 秒、输入延迟每个字符 25–40 毫秒。
光标叠加层：注入 SVG 箭头光标跟随鼠标移动；每次页面导航后都需要重新注入，因为导航会销毁叠加层。
鼠标移动：绝不瞬移光标，点击前先移动到目标位置，每步调用都带描述性标签便于调试。
输入：可见地逐字输入，而非瞬间填充。
滚动：使用平滑滚动而非跳转。
仪表盘平移：展示仪表盘或概览页时，让光标划过关键元素。
字幕：在视口底部注入字幕条，保持文字简短（建议 60 字符以内），使用「Step N - Action」格式，长时间停顿且界面本身可说明时清空字幕。
脚本模板使用 'use strict' 模式，通过 process.env.QA_BASE_URL 设置基础 URL，视频保存在 screenshots 目录，默认输出 demo-FEATURE.webm，并支持 --rehearse 参数。运行方式：node demo-script.cjs --rehearse 为排练，node demo-script.cjs 为录制。
适用场景
- 功能演示与工作流可视化展示；
- 产品文档中的操作视频；
- 新手引导与 onboarding 材料；
- 面向利益相关方的演示视频。
限制与注意事项
- 必须完成发现与排练阶段后才能录制，不能直接录制。
- 每次页面导航后需重新注入光标与字幕条叠加层，否则会消失。
- 选择器失败不可用静默 catch 吞掉，辅助函数需记录警告。
- 下拉框的占位符选项可能带
value="0"或空值，看起来像非空，需要留意。 - 弹窗会创建独立视频，需要显式捕获弹窗页面，必要时后期合并。
- 视频文件路径可能是随机的，需要复制到稳定的输出名称。
- 必须基于阶段一发现的实际 UI 编写脚本，不能假设字段类型或功能。
以上为资料中提供的功能与流程说明；关于收费、价格、平台支持范围等信息在资料中暂未提供。