01 功能说明
了解 pixel2motion 的位图转 SVG 标志重建、交互式入场、几何叠加对比和逐帧动效检查。
pixel2motion 从位图标志出发，将其拆成可独立运动的部件，先重建为可编辑 SVG 几何，再编排入场。平滑边缘、正确负空间和忠实轮廓，比逐像素匹配原截图中的抗锯齿更重要。
输出包含静态标志、交互 HTML 动效样稿和检查证据。最终帧约定连接两个阶段：动画必须落在同一已验证标志上。重播、慢放和速度控制让编排可检查，时间戳钩子则让智能体检查复杂交叉和交接。
预期交付物
检查源图，区分图形标志与字标，并选择使用场景。拟合几何前记录品牌气质和入场顺序。
先尝试基本形状和少量平滑曲线，再增加路径复杂度。比较渲染叠加图、放大检查边缘；源文件把 IoU 当诊断指标，而非通用通过线。
围绕稳定部件标识编排动效，再检查预备动作、主体动作、交叉和落定。使用同一浏览器和视口，将动画最终帧与静态状态比较。
02 适用场景
提供能获得的最佳位图标志，说明显示尺寸、背景和入场场景。编排前先检查静态 SVG 几何，因此保留原图用于叠加比较。
03 关键决策
语义化 SVG 部件让智能体可以修改弧形图案或字标，无需重新描摹整张图。
针对风险时间窗截图，可发现等间距帧表可能漏掉的停滞与跳变。
同一渲染流程的比较，可确认动态标志最终停在已认可静态标志的位置。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
提供最高质量标志图片，包括预期背景和透明度。
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 pixel2motion，根据提供的 PNG 标志制作简短网站片头。保留字标比例、负空间和原色。把圆形图案、小圆点和字标拆成可定位的 SVG 部件，提出两秒内落定的克制入场。交付静态 SVG、交互 HTML 样稿、动效规范和检查图片。动画前放大检查边缘，密集采样圆点交接，并将最终帧与静态状态比较。如果几何无法在拟合预算内通过，明确标记剩余缺陷。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
将位图标志重建为平滑 SVG，并检查编排好的 HTML 入场动画。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md