design-motion 是 gstack 工具集中的设计动效技能，目标是把一个已完成的设计变成“活起来”的循环演示：画面从空状态平滑加载，每个视觉元素按故事线演示其功能，最后回到设计状态并无缝重复。整个流程分为七个步骤。
用途：将已批准的设计稿（PNG、HTML、URL 或 Figma 链接）重建为可动画的页面，并导出 MP4 与 GIF 循环视频，用于展示设计交互与动效。
主要能力：
- 精确重建设计帧：支持从 design-shotgun 的 approved PNG、design-html 的 finalized.html、用户指定的 URL 或 Figma 链接（需 FIGMA_TOKEN）读取设计，并逐源重建页面结构与背景。
- 静帧校验：以 2x 渲染重建页面并与参考图对比，使用 dB 指标（目标 >35 dB）和视觉检查确保保真度。
- 动效编排：支持加载顺序、入场方式、每个视觉元素的故事线，以及循环周期（默认 12 秒）和相位划分。
- 捕获与运动检查：通过捕获契约（?capture 模式）逐帧记录，检查接缝、空拍、静止状态和溢出，确保无缝循环。
- 导出：生成 H.264 MP4（60fps、CRF15、长边至 1920）和多种尺寸 GIF（960px 宽 20fps、800×500）。
使用方式： 该技能在 Claude 环境中运行，依赖 gstack 技能框架。用户需先通过 gstack-skill-start 启动，然后按步骤执行。关键命令包括 gstack-motion-capture.ts 捕获、gstack-motion-encode check 检查、gstack-motion-encode export 导出。技能要求 ffmpeg 可用，且捕获需要 WSL、macOS 或 Linux 环境；原生 Windows 不支持。
适用场景：
- 将设计稿转化为动态展示视频，用于作品集、产品演示或设计评审。
- 为网站设计生成单个重点区域的动效（遵循 gstack 规则：每页一个动效时刻）。
- 创建展示循环（showcase），每个视觉元素均有故事线。
限制：
- 需要 gstack 环境与相关依赖（ffmpeg、浏览器捕获工具）。
- Figma 源需要 FIGMA_TOKEN。
- 原生 Windows 无法完成捕获。
- 动效预算受展示或网站上下文限制，网站页面仅允许一个动效时刻。
- 内容不能隐藏在动画时序之后，需在无脚本、减少动效模式下完整渲染。
- 仅允许对 transform、opacity、filter、clip-path 等属性做动画，且无回弹曲线，模糊不超过 14px。
- 具体收费、价格、平台兼容性等未提供。