Claude Code装上这套网页动画技能，GSAP/SVG/Lottie全搞定

做网页的时候，想加个丝滑的动画效果，是不是经常卡在「代码怎么写」上？

以前这个问题只能找前端，但现在 Claude Code + 设计师友好的动画技能，可以让你直接用自然语言驱动动画效果——GSAP 时间线、SVG 路径动画、Lottie 播放、Glassmorphism、毛玻璃效果……全都能搞定。

这是什么？

Web Animation Skills 是 iart.ai 出品的一个开源技能包，专门给 Claude Code 装上网页动画能力。GitHub ⭐ 28，MIT 协议，完全免费。

一个主包内置 9 个子技能，按需安装，不需要全塞进去：

• gsap-web：GSAP 时间线 + ScrollTrigger + SplitText + Flip + Lenis 平滑滚动联动
• 60fps-animation：只动 transform/opacity、干掉布局抖动，实打实 60/120fps
• page-transition-animation：Next.js App Router 路由过渡动画，含 AnimatePresence exit bug 修复
• accessible-animation：分级处理 prefers-reduced-motion，不是粗暴删动画，而是优雅降级
• micro-interaction：hover/点击反馈、toggle、toast、drawer，用 Framer Motion + CSS 实现
• glassmorphism：Apple「液态玻璃」效果，backdrop-filter 面板 + 边缘高光 + 动态镜面反射
• svg-animation：SVG 笔画绘制、路径形变、沿路径运动、动态图标和渐变滤镜
• lottie-animation：跨平台 Lottie/dotLottie 播放、控制、主题化和导出
• ascii-animation：终端/Canvas/Three.js 里把图片/视频/3D 转 ASCII 动态效果

怎么安装？

一条命令全装：

npx skills add iart-ai/web-animation-skills

或者用 Claude Code 插件市场：

/plugin marketplace add iart-ai/web-animation-skills
/plugin install web-animation-skills

只想装某一个子技能也可以：

npx skills add iart-ai/web-animation-skills --skill gsap-web

使用示例

装好后直接用自然语言：

• 「用 GSAP 做一个随滚动推进的英雄区动画，时间线和 ScrollTrigger 联动」
• 「我的 CSS 动画有点卡顿，帮我优化到 60fps」
• 「给这个 SVG logo 做一个笔画逐渐绘制的入场动画」
• 「我的 Next.js App Router 页面切换动画，exit 动画不触发，帮我修一下」
• 「做一个 Apple 风格的毛玻璃面板，带动态镜面高光」

谁适合用？

做官网、H5 落地页、产品展示站的设计师和前端开发者。尤其是：需要大量动效但不想在代码细节里陷进去的团队，以及想用 AI 加速动效实现的工作流。

它是 iart.ai 14 个开源技能包的一员，家族里还有视频、3D、动效字体等全套解决方案——这次先单独推荐这个，因为网页动画是设计师日常接触最多的场景之一。

GitHub：https://github.com/iart-ai/web-animation-skills

GitHub: https://github.com/iart-ai/web-animation-skills