ui-demo
ui-demo 是一个用于录制网页应用 UI 演示视频的技能,基于 Playwright 的视频录制能力实现。它的核心特点是注入光标叠加层、控制自然节奏,并按照讲故事的方式组织演示流程。该技能适用于用户要求制作演示视频、屏幕录制、操作引导或教程视频的场景,例如向他人展示某个功能或工作流、为文档/新手引导/利益相关方演示制作视频。整个录制过程分为三个阶段:发现(Discover)、排练(Rehearse)、录制(Record),明确要求不得直接跳到录制阶段。发现阶段会先探索目标页面、导出现有可交互元素,理解表单字段、下拉选项、富文本支持、必填项、动态内容、按钮文案和表格表头等真实情况,避免基于假设编写脚本。排练阶段在不录制的情况下验证每个选择器是否可用,通过 ensureVisible 等辅助函数在失败时输出可见元素列表,只有全部选择器通过后才进入录制。录制阶段强调讲故事式流程(进入、上下文、主要动作、变化、结果)、节奏控制(登录后停 4 秒、导航后 3 秒、点击按钮后 2 秒等)、注入 SVG 箭头光标、鼠标移动后再点击、逐字缓慢输入、平滑滚动、仪表盘平移浏览以及底部字幕条。技能还提供了完整的脚本模板和录制前检查清单,并列出常见问题(如导航后光标消失需重新注入、视频太快需增加停顿、下拉选择处理不当等)。