Pixel2Motion Skill：把 Logo 从静态图变动画视频的 AI 技能包
Pixel2Motion Skill：把 Logo 从静态图变动画视频的 AI 技能包
Pixel2Motion 是一个专注于 Logo 动效生成的 Claude Code / Codex Skill，能将 PNG、JPG、WebP 或截图形式的像素 Logo 转换为平滑的 SVG 矢量图形，再生成符合迪士尼十二动画原则的品牌动效，输出为独立 HTML 动效展示、GIF/视频预览和量化运动 QA 证据。整个流程覆盖「像素→矢量→动画」三阶段，无需设计师即可完成 Logo 从静态图到品牌动图的完整生产链路。该项目 2026 年 6 月上线 GitHub，截至 2026-08-30 已有 2,128 颗 Star、183 个 Fork，8 月底持续更新，在 Logo 动效这一细分场景中暂无直接竞争对手。
核心能力围绕两个维度的融合展开：矢量化工夫与动画编排纪律。矢量化阶段不追求像素拟合度，而是以「最低复杂度可编辑几何」为硬门槛，确保输出的 SVG 结构是「可动画的」，而非「看起来像的」。运动编排阶段则以迪士尼十二动画原则为框架，从品牌调性词（如「swift、precise、confident」）推导出时间轴、缓动函数和原子运动单元，最终动画必须精确落回 QA 验证过的静态矢量帧（「Final Frame Contract」），保证动效展示与品牌标识物完全吻合。
Pixel2Motion 在 GitHub 社区获得真实关注。截至 2026-08-30，项目共斩获 2,128 颗 Star、183 个 Fork，创建于 2026 年 6 月 12 日，最近一次提交为 2026 年 8 月 30 日，上线两个多月保持高频迭代。GitHub 主页提供交互式动效展示 Gallery（https://nolangz.github.io/pixel2motion/），配套商业服务 Pixel2Motion.com 也已上线。该项目目前未被国内主流 Skill 发文渠道系统性推荐，属于「安静爆量」型仓库。
GitHub 仓库：https://github.com/nolangz/pixel2motion
项目作者为 GitHub 用户 @nolangz，目前已开源两个关联项目：主项目 pixel2motion（Logo 矢量+动画）以及配套项目 pixel2svg-html（纯 SVG HTML 输出）。作者在项目中明确标注了「质量门槛」：几何接受标准为「任何平滑边缘不得出现像素级阶梯、抖动或噪点」，将工程 QA 思维引入创意流程，是其区别于普通 AI 生成工具的核心差异点。
Pixel2Motion 的本质是一个 SKILL.md 加 Python 脚本组合的工作流系统。SKILL.md 定义了完整的方法论：像素源分析→运动简报撰写→矢量复杂度分级（从基础图元→复合布尔→少曲线解析路径→平滑轮廓→描摹路径，按需升级）→动画编排→输出物生成（SVG + HTML + motion_spec.md + QA 证据文件）。
具体而言，处理流程分为四个阶段：
Phase 1：像素源分析。读取图像尺寸、模式、Alpha 通道、前景/背景颜色；识别语义部件（标识图形 vs 文字、字母、点、飘带、容器、负空间），每个部件对应动画中的独立 Actor。
Phase 2：运动简报（先于几何处理）。确定品牌运动个性词（3 个，如「swift、precise、confident」），从视觉语言推导时间轴刻度和缓动函数；明确使用场景（片头/开场 1200–2000ms、头部揭示 300–800ms、加载状态循环、悬停微交互 150–300ms）；规划各部件运动顺序和揭示模式。简报写入 motion_spec.md，后续所有参数均可溯源。
Phase 3：矢量拟合（复杂度递增）。从最简单的图元（圆形、椭圆、矩形、线条、简单弧）开始，逐级升级：图元组合→少曲线解析路径→平滑轮廓路径→描摹路径。唯一升级条件是「几何结构不匹配」，而非「像素抗锯齿不够」。输出 logo.svg（静态可编辑矢量）和拟合过程 QA 证据（outputs/fit_iterations/*.png + overlay_progress_strip.png）。
Phase 4：动画编排与输出。按运动简报生成动画时间轴表、缓动函数和原子运动单元；输出 logo_motion.html（独立 JS 渲染，支持回放/慢速/加速控制台和 QA 钩子）和 motion_spec.md；输出一组量化运动 QA 证据（outputs/motion_frames/*.png + motion_strip.png）。
项目提供了丰富的配置参数和引用文档，包括运动个性词→参数的映射规则（references/motion-personality.md）、揭示模式参考（references/reveal-patterns.md）、封闭变量宽度丝带拟合方案（references/ribbon-fitting.md + scripts/fit_ribbon_centerline.py），以及 Disney 十二动画原则的具体应用指南。对于需要生成品牌动效但没有 AE/PR 经验的开发者，Pixel2Motion 将完整的动画制作知识封装为可执行的工作流指令。
安装与基本调用
安装方式为直接克隆仓库到本地：
git clone https://github.com/nolangz/pixel2motion.git
cd pixel2motion
核心调用通过 Claude Code 或 Codex 完成，Agent 读取 SKILL.md 后自动执行完整流程。Python 脚本位于 scripts/ 目录，矢量拟合核心脚本为 scripts/fit_ribbon_centerline.py（用于自交丝带拟合）。交互式展示页面提供了多个已完成 Logo 的动效 Gallery，包括 Horizon、Continuum、Focus、N、CueRecord 等案例，每项均标注了默认时间轴时长。
使用场景与目标人群
适用场景包括：品牌片头/Splash Screen 动效、Logo 揭示动画（reveal）、加载状态循环动效、悬停微交互、品牌 SVG 图标动效。目标用户群体为：独立开发者/创业团队（需要品牌动效但无专职设计师）、AI Coding Agent 深度用户（将设计任务纳入 AI 工作流）、需要快速生成 Logo 动效用于营销材料的内容创作者，以及希望将 Pixel2Motion 集成到自动化设计流水线的产品团队。
输入与输出案例
输入（示例 1）：用户提供一个 PNG 格式的公司 Logo 图片，要求生成品牌揭示动画。
处理流程：Agent 分析像素源识别语义部件→撰写运动简报（如「confident、minimal、deliberate」）→从基础几何开始拟合 SVG，输出 logo.svg→按简报参数编排动画，输出 logo_motion.html（含回放控制台）→同时输出 motion_spec.md（记录完整运动参数）和 fit_iterations/*.png（几何 QA 证据）。
输出：logo.svg（矢量文件，可导入 Figma/AI/Sketch）+ logo_motion.html（独立 HTML，可直接嵌入产品落地页）+ motion_spec.md + 量化 QA 证据文件组。
输入（示例 2）：用户提供一个含自交丝带（S 形、无限符号形）的手绘风格 Logo，要求生成连续循环动画。
处理流程：Agent 调用 ribbon-fitting 方案（references/ribbon-fitting.md + scripts/fit_ribbon_centerline.py）拟合中心线骨架，解决自交点的路径分割问题→按丝带宽度轮廓重建→输出闭式变量宽度 SVG→编排 split-fill 绘制动画，生成含尖端光泽（tip glint）效果的 HTML 动效展示。
输出：丝带形 logo.svg（含精确宽度轮廓）+ logo_motion.html（含自交路径绘制动画和连续循环模式）+ 运动 QA 证据。
Pixel2Motion 的核心价值在于填补了「AI 生成 Logo 静态图」到「专业品牌动效」之间的工程鸿沟。它不是简单调用 Midjourney 生成图，而是将矢量设计原理、迪士尼动画原则和量化 QA 流程固化为可执行、可审查的工作流，让 AI Coding Agent 也能交付达到品牌级标准的 Logo 动画。对于追求完整 AI 工作流的团队，这是一个值得加入技能库的稀缺工具。
评论区
登录后可评论。