Claude装上这个Skill，SVG图标直接动起来

做过设计的同学都知道，SVG 图标最让人头疼的不是画出来，而是——动起来。

路径描边动画、形状渐变 Morphing、图标打勾/加载动画……这些在 Figma 里点点鼠标能做，但要把逻辑「代码化」交给 AI 输出，很多 Skill 要么直接摆烂生成一堆乱码 path data，要么根本不懂 SVG 动画的基本原理。

直到我刷到这个 SVG Animations Skill。

它能做什么

简单说，这是一个专攻 SVG 动效的 Claude Skill。Claude 装了它之后，能理解并输出：

• 路径绘制动画（Path Drawing）—— 让 SVG 描边自己「画」出来，经典的 hand-draw 效果
• 形状 Morphing—— 两个不同路径之间平滑过渡，不是简单淡入淡出
• 动画图标—— 加载状态、打勾完成、菜单展开收起，用 SVG + CSS/JS 实现
• 数据可视化动效—— 图表进场、曲线绘制、柱状图增长

底层用的是 Framer Motion 和 GSAP，这两个是目前做 UI 动画最主流的库，技能文档里对两者的适用场景做了说明，不会混用乱来。

为什么值得装

SVG 是设计师和前端之间的「中间语言」—— 设计稿导出来是 SVG，但要让图标真正动起来，过去要么靠设计师手动导出 GIF/JSON，要么前端对照着改 path data。

这个 Skill 把中间那段路填平了。跟 Claude 说「给我做一个搜索图标的 loading 动画」，它会直接输出带完整 path 数据的可运行代码，而不是丢给你一句「请使用 stroke-dasharray 属性」。

另外一个亮点是它的 分辨率无关性—— SVG 本来就是矢量的，做出来的动效在任何屏幕上都不会糊，尤其适合做 logo 动画、产品彩页和展示页面。

怎么装

一行命令搞定：

npx skills add https://github.com/thelobbi/claude --skill svg-animations

装完跟 Claude 说你的需求就行，不需要记任何 API。

适合谁

UI 设计师、动效爱好者、前端开发做 landing page 都适合。尤其是那些想用代码实现 Figma 效果的设计师——过去只能靠经验硬调，现在可以直接问 Claude，边生成边学。

GitHub 星标不多（20 ⭐），但这个方向足够细分、足够实用，值得放进工具箱。

https://github.com/thelobbi/claude

GitHub: https://github.com/thelobbi/claude