演示脚本技能
通过探索真实产品并与用户共同创作，生成结构化的演示视频脚本。
为什么存在
好的演示视频需要好的脚本。糟糕的演示会跑题、跳过重要内容或节奏过快。本技能能生成精确、可审查的脚本，供 /record-demo 自动执行。
工作流程
阶段 1：简要说明
从用户那里收集背景信息：
必需：
- 要演示的产品/功能
- 目标 URL（预发环境/生产环境）
- 观众是谁？（潜在客户、现有用户、开发者、内部团队）
可选（如未提供则询问）：
- 要展示的具体流程（例如，“创建一个带有步骤和预期结果的测试用例”）
- 语气（专业、随意、技术、营销）
- 时长目标（30 秒、1 分钟、3 分钟、5 分钟）
- 需要强调的关键点
- 需要避免/跳过的事项
如果未指定，默认假设：
- 观众：正在评估产品的潜在用户
- 语气：专业但平易近人
- 时长：1-2 分钟
- 分辨率：1920x1080
阶段 2：产品探索
使用 Playwright 浏览器工具探索实际产品 UI。
这一点至关重要——不要猜测 UI 的样子。实际浏览它：
- 在浏览器中打开目标 URL
- 截取每个相关页面/屏幕的屏幕截图
- 记录实际的按钮标签、菜单项、表单字段
- 理解导航流程
- 通过真实的选择器识别 UI 元素
示例探索流程：
→ 导航到应用 URL
→ 截取仪表盘屏幕截图
→ 点击进入目标功能
→ 截取每次状态变化的屏幕截图
→ 记录所有交互元素的确切选择器
→ 检查加载状态、动画、弹窗
为什么先探索？
- 真实的选择器名称（而不是在录制时会失败的猜测名称）
- 与屏幕内容匹配的准确旁白
- 发现自然流程（可能用户忘记提及某个步骤）
- 捕捉潜在问题（认证墙、加载缓慢、空状态）
认证：
- 如果应用需要登录，向用户索要凭据或已在认证状态的会话
- 或者，使用带有测试数据的预发环境
- 注意：保存 cookies/会话以备录制阶段使用
阶段 3：脚本起草
以 JSON 格式生成结构化脚本，包含 metadata 和 scenes 数组。
关于完整的 JSON 模式、操作引用和高亮样式，请查阅 references/script-format.md。
阶段 4：审查与迭代
以可读的格式（而非原始 JSON）向用户展示脚本。格式如下：
🎬 演示脚本：“创建你的第一个测试用例”
时长：约 90 秒 | 观众：潜在用户
━━━ 场景 1：开场 — 仪表盘概览 ━━━
→ 导航到 /dashboard
🎙️ “欢迎使用 OneTest。让我们创建你的第一个测试用例。”
⏸️ 暂停 2 秒
━━━ 场景 2：导航到测试用例 ━━━
→ 点击：侧边栏“测试用例”
🎙️ “从侧边栏打开测试用例部分。”
✨ 高亮：侧边栏项目（脉冲）
⏸️ 暂停 1.5 秒
━━━ 场景 3：创建新测试用例 ━━━
→ 点击：“创建”按钮
🎙️ “点击创建以开始一个新的测试用例。”
✨ 高亮：创建按钮（发光）
⏸️ 暂停 2 秒
→ 在标题中输入：“使用有效凭据登录”
🎙️ “给它一个描述性的标题。”
⏸️ 暂停 1 秒
→ 在描述中输入：“验证用户能否登录...”
🎙️ “添加清晰的描述，说明此测试用例验证的内容。”
⏸️ 暂停 1.5 秒
━━━ 场景 4：结束 ━━━
→ 等待 2 秒（停留在最终画面）
🎙️ “就是这样——你的第一个测试用例已准备就绪。”
⏸️ 暂停 1.5 秒
总计预估：约 90 秒
与用户迭代：
- “想要添加/删除任何场景吗？”
- “节奏应该更快还是更慢？”
- “有没有需要修改的旁白文本？”
- “想重新排序吗？”
阶段 5：保存与交接
一旦获得批准：
- 将脚本 JSON 保存到
workspace/<日期>/demo-script-<名称>.json - 将可读版本保存到
workspace/<日期>/demo-script-<名称>.md - 告知用户：“脚本就绪！运行
/record-demo来录制，或者我现在可以开始录制。”
脚本操作参考
支持 10 种操作：navigate、click、type、select、scroll、hover、wait、screenshot、drag、keyboard。
5 种高亮样式：pulse、glow、arrow、dim-others、zoom（通过 CSS/JS 注入）。
完整参考（包含字段和示例）见 references/script-format.md。
旁白指南
好的旁白：
- 短句（少于 15 个词）
- 现在时，主动语态（“点击创建”而非“我们将点击创建按钮”）
- 描述正在发生的事情以及原因（“添加描述，以便你的团队知道要测试什么”）
- 不要旁白显而易见的内容（“我正在将光标移动到...”——不需要）
- 暂停时长与旁白长度匹配（旁白越长 = 暂停越长）
节奏规则：
- 第一个场景：暂停较长（观众正在适应）
- 中间场景：暂停适中
- 最后一个场景：在最终状态上停留 2-3 秒
- 输入后：短暂暂停，让观众阅读
- 页面导航后：等待加载 + 额外 1 秒，让观众浏览
根据不同观众的语调：
- 潜在客户：关注益处，保持简单，避免行话
- 开发者：可以使用技术术语，展示配置，提及 API
- 内部团队：可以更随意，引用团队惯例
优秀演示的技巧
- 从数据开始 — 不要在空应用上演示。确保测试数据已存在。
- 展示主流程 — 将边缘情况留给文档，而不是演示。
- 每个视频展示一个功能 — 90 秒的焦点视频胜过 10 分钟的导览。
- 以结果结尾 — 展示已经创建/完成的内容，而不是菜单。
- 真实地命名事物 — “使用有效凭据登录”胜过“测试 1”。
- 清理 UI — 关闭不必要的标签页，隐藏开发者工具，使用干净的浏览器配置文件。