用途
design-to-motion 用于把静态设计稿做成像素级精确的 HTML 动画演示。核心原则是：展示动画不是重新设计。观众必须看到与源设计完全一致的设计，同时看到它“活”起来。典型流程是：精确帧 → 空状态 → 平滑加载 → 每个视觉元素演出自己的故事 → 无缝循环。
该技能分为三部分：Part A 重建设计，使完成帧与源设计无法区分；Part B 是动效系统；Part C 负责录制与导出。必须先完成 A，再进入 B；在 A7 与 B9 的检查通过之前，不得开始编码导出。
两种场景
使用前先确定场景，它决定动画对象、起止方式与交付物：
- 展示（Showcase）：适用于“帮我给这个设计做动画”这类请求。整帧都参与动画，从页面加载的空状态开始；故事运行后画面溶解并循环重复。文本以导出图层呈现，确保像素精确。交付物包括页面以及用于 X 的 MP4、网站 GIF、800×500 GIF。
- 网站（Website）：适用于构建或编辑落地页或站点。只有符合条件的区块参与动画，区块滚动进入视口时触发一次；故事可永久运行，无溶解、无循环。文本使用站点字体的实时 HTML，以满足 SEO 与可访问性；仅视觉部分导出为图片或 SVG。交付物是站点代码中的动画区块，仅在被要求时导出。
如果请求未说明，看工作环境：在站点代码库内则按网站处理；只有设计稿而无站点则按展示处理；仍不明确时询问一次。
网站场景下按区块扫描：便当式/功能卡（含文字加视觉）适用于卡片滚动入场加视觉故事循环；产品或仪表盘截图适用于滚动加载入场（表面保留、内容加载），是否在加载后加故事需询问用户，不得擅自添加；Logo 行与集成可用跑马灯或柔和点亮；纯文本区块（标题、评价、FAQ、价格、CTA、页脚）不用本技能。网站规则包括：用 IntersectionObserver 在约 30% 可见时触发一次；离开视口暂停故事、返回恢复；按区块内阅读顺序错峰；沿用站点组件、令牌、圆角与字体；prefers-reduced-motion 时直接显示最终状态。
Part A 保真度要点
- 信息采集：先确定场景，再收集源（带节点 ID 的 Figma 链接最佳，平面图会限制图层分离）、布局（应用框架或独立卡片）、背景是否为照片或纹理、哪些是加载后需演出故事的视觉元素、交付物、相机（默认不缩放不平移）。用户无法回答时作出合理假设并说明一行后继续。
- 真实来源：Figma 场景通过 REST API 和令牌读取节点树、边界、填充、效果、圆角，并渲染参考图；令牌存于安全存储，绝不打印、回显或提交。注意帧的绝对原点，图层位置为绝对边界减原点；图片下载需要重试并检查大小。仅有平面图时，如实告知哪些部分无法分离，不得把截图整体做动画来伪造保真。
- 图层导出：每个会动的元素以 3x PNG 单独导出，按渲染边界放置，覆盖父级裁剪、旋转、零宽高描边、蒙版模糊、实例子节点、线条描画、照片内嵌等特殊情况分别处理。展示场景中文本保持导出图层，不重打 HTML；网站场景文本用实时 HTML。保持 Figma 的 z 顺序，帧描边通常画在子元素之上，卡片描边作为独立叠加层。容器子元素需独立动时，用节点数据在 CSS 中重建容器（填充、圆角、内描边、效果），再分别导出子元素。阴影映射：单元素用 CSS box-shadow，组用 filter: drop-shadow()，并对照参考验证。画线动画可读取 strokeGeometry 轮廓自行写中心线，用描边路径作为蒙版，在 JS 时钟上动画 stroke-dashoffset。
- 背景不可变：设计下的照片或纹理属于设计本身，在引入、循环、溶解、缩放下都不得移动、模糊、缩放、淡出或改色；每个版本都保留它；导出原始图片而非渲染，按填充的缩放模式与变换应用为 CSS 背景；用 PSNR 对照验证（目标高于约 45 dB）。磨砂面板必须能看到照片，需为独立元素并注意无头 Chrome 的渲染条件。无法复现时先告知用户并询问，不得悄悄换成纯色。
- 布局判断：应用框架（侧栏与主体拼接为一单元）仅表面在空状态中即存在且不动，只有内部元素加载；独立卡片（便当、卡片组、部件）则卡片本身连内容一起淡入，空状态仅为背景。两种布局都要求每个容器按精确形状裁剪自身内容。
- 页面架构（展示）：单个自包含 HTML 文件，固定尺寸舞台并按视口缩放；图片内联为 base64 并去重。模式包括 ?still（精确帧、无动效）、?loop（与导出一样循环）、?capture（关闭 requestAnimationFrame，暴露 window.__start()、window.__tick(dt)、window.__lt 供录制器驱动时钟）。每个动画元素包裹为全舞台层 .u 并携带延迟；静态层保持合成稳定；统一由一个 JS 时钟驱动所有基于时间的动画，且基于循环时间而非墙钟，保证捕获确定性。
- 验证静帧：在动效工作前，以 2x 渲染 ?still 并与参考对比；轻度模糊后用 PSNR 检查整帧与每个容器（整体目标高于 35 dB，每容器高于 30 dB），并查看模糊放大的差异图以发现结构性错误。
限制
本技能不适用于产品交付内的交互动效（悬停、菜单、提示等），这类需求应使用产品动效技能。资料中未完整给出 Part B 与 Part C 及各检查项的细节，相关动效系统步骤与录制导出规范暂未提供。