用途:把一段 UI 录屏转成静态、带标注的 Figma 故事板,提取重要的前后状态、推断每次变化的触发方式,再在 Figma Design 文件中放入干净截图、蓝色交互标记和简洁注释。
主要能力:先用低分辨率 scout 扫描(默认 1 fps、缩放到 640px 宽)生成帧清单与联系表,必要时用 full 模式高分辨率提取;分析关键瞬间,识别视觉变化(弹窗、抽屉、下拉、提示、导航、加载内容、选中态、校验态、输入聚焦、滚动位置等)与触发(点击、轻触、键盘、悬停、滚动、滑动、表单提交、自动/定时、未知);用 0 到 1 归一化坐标放置标记,坐标仅作机器元数据,不写入可见注释;生成 Figma Plugin API 脚本,创建截图容器、标签、原生注释与标记覆盖层,再上传图片并执行填充。
使用方式:需本地视频路径(.mp4/.mov/.webm/.avi)、ffmpeg 与 ffprobe、安装 Pillow 的 Python,以及 Figma MCP 工具 create_new_file、use_figma、upload_assets、get_screenshot 或 get_design_context。缺少 Pillow 时执行 pip install Pillow --break-system-packages -q。按 scripts/ 中脚本依次运行 extract_key_frames.py、resolve_moment_frames.py、prepare_upload_frames.py、generate_figma_calls.py,再在 Figma 中运行生成的 figma_storyboard.js 与填充脚本,最后用 get_screenshot 等验证。目标须为 Figma Design 文件,FigJam 或 Slides 需改用 Design 文件。
适用场景:UI 交互走查、设计评审、把录屏整理成可标注的故事板。
限制:需本地环境与 Figma MCP 工具;长视频需指定时间范围;关键瞬间建议 5 到 15 个;触发不明确时标为 Unknown;不确定或不可见的目标默认抑制标记;upload_assets 不可用时回退路径较慢。