SuperAPI AI 工具集

walkthrough-storyboard

设计与创作

查看项目

更新于 10-16 03:15

技能介绍

用途:把“给 X 做个演示”变成可直接录制的场景文件——一份 schema: 1 的 YAML,包含带时间点的节拍(移动、点击、缩放、卡片),交由同系列的 walkthrough-record 技能执行。它针对漫无目的的演示常见问题:到处缩放、大段文字标注、缺少叙事主线、选择器脆弱。

不适用:执行、渲染、导出视频或录制器报错,应使用 walkthrough-record;应用内引导(intro.js 式提示)、幻灯片、YouTube 广告文案也不适用,本技能只产出录制场景。

工作流:先用一句话定义观看者的任务(如“创建第一个仪表盘”),先写结尾——屏幕上成功的样子。每个视频只用一个叙事层级(概览、任务教程或深度流程)。走查真实应用,确定每个节拍的目标元素并收集稳定选择器(data-testid > id > 结构性 CSS);没有就索取或建议添加。标记敏感内容进遮罩列表;登录流程需提示用户导出 storageState 认证文件(不入 git)。按 references/storyboard-patterns.md 编排节拍:先钩子(主卡片 ≤ 2.5 秒,尽早展示收益),再 3–6 章“放大 → 操作 → 卡片 → 缩小”,最后结果/CTA 节拍。纪律:每逻辑步骤最多一次缩放,缩放 1.3–2.0(2.2+ 仅用于极小控件),卡片紧邻但不遮挡操作,标题 3–8 词,正文 8–20 词,卡片停留 1.2–4 秒。按 references/scenario-schema.md 写 YAML(固定 schema: 1),优先等待选择器而非 sleep,移动时长按距离自动计算,状态变更操作后加断言。按 references/theming.md 选外观(默认 coral-glass、indigo、paper 或内联 theme 块),卡片对比度 ≥ 4.5:1。再决定画框:output.frame 将捕获放到带圆角与阴影的壁纸画布上(background: auto 从应用推导;chrome: true 加 macOS 窗口头)。全出血为默认,营销与落地页视频用画框,应用内帮助及会被裁剪的内容不加框。校验与交付:若已安装录制器,用其无浏览器模式校验:node <walkthrough-record>/scripts/record.mjs scenario.yaml --validate-only(schema 干净时退出 0,不启动 Chromium),再交给 walkthrough-record 录制,依据帧画面而非想象迭代节奏。

输出:单个场景 YAML(可选主题文件),通过录制器预检校验,营销/导览 30–90 秒(培训内容 3–7 分钟),前 3 秒有钩子,每步 ≤ 1 次缩放,卡片文案在限内,敏感内容有遮罩,全程稳定选择器。

注意:缩放/环/卡片/遮罩目标仅支持 CSS 选择器(引擎侧 querySelector);Playwright 式 text=/role 选择器仅用于 move/click/type。不要在缩放中途脚本化滚动或打开视口定位的浮层,应“缩放 → 稳定 → 操作”。wait: {until: networkidle} 在 WebSocket 密集应用会挂起,应等待选择器。尊重默认值而非手动计时每步。若交付物含 README gif,标记一个 5–10 秒节拍作为 gif 片段。

文件:references/scenario-schema.md(schema-1 完整编写参考)、references/storyboard-patterns.md(节拍模板与缩放/光标/卡片规则)、references/theming.md(主题键、预设、对比度规则)。