甲方给了张PNG就想让我做动效？这个开源Skill接住了

你有没有遇到过这种情况——甲方给了一个 PNG Logo，让你”弄个动效”？

手上有的是一张位图，放大糊、改色难、做动效基本没戏。丢给设计师，设计师说”这图不行，得要源文件”。然后陷入僵局。

Pixel2Motion 就是来解决这个局面的。

它的核心逻辑分两步：第一步，把位图变成干净的矢量 SVG——不是那种自动描边出来满是锯齿的垃圾路径，而是低复杂度、可编辑、真正能用于生产的矢量文件。第二步，给这个 SVG 写动画——用迪士尼12条动画原理，把静态 logo 变成有性格的品牌动效。

输出不只是动图。它会给你：

• logo.svg — 最终静态矢量文件
• logo_motion.html — 独立可运行的 HTML 动效展示，带播放控制
• motion_spec.md — 动效规范文档（性格词、时间线、缓动曲线）
• QA 证据截图——几何拟合过程、动画帧检查

整个过程是”先结构再动”——先让 logo 变成可以被动画的形状，而不是硬给位图加 keyframe。出来的动效是真正专业的，不是那种抖一抖就算”动效”。

安装方式：

claude install-skill nolangz/pixel2motion

或者手动：mkdir -p .claude/skills/pixel2motion && curl -o .claude/skills/pixel2motion/SKILL.md https://raw.githubusercontent.com/nolangz/pixel2motion/main/SKILL.md

GitHub 星数 1.6K，MIT 协议，最近还在活跃更新。适合品牌设计师、前端开发、以及任何需要把 Logo 变活但手里只有位图的人。

GitHub 仓库 →

GitHub: https://github.com/nolangz/pixel2motion