前两天逛GitHub Trending那会，瞅见一个仓库才两天的功夫就揽了两千星，名字起得那叫一个直截了当，diffusionstudio/lottie，描述更是毫不掩饰，借助Claude Code或者Codex去生成能够直接拿到线上用的Lottie动画。
我那时候心里就琢磨，估计又是个套壳的demo吧，AI搞动画这种事儿我可见得太多了，搞出来的玩意乍一瞧还凑合，真要塞进实际项目里压根就没法用，帧率根本达不到标准，JSON体积直接原地爆炸，导出的时候还得仰赖特定的运行时环境。
谁知道我把skill装好试着跑了下，本打算弄个加载动画，就随手给了一句prompt，等了差不多四十秒吧，浏览器弹出了预览页面，一个带着渐变色旋转圆弧的loading动画就在那儿转悠起来了，帧率死死钉在60fps，背景还是透明的，JSON文件才23KB。我顺手把那个JSON扔进手头现成的React项目里头，依靠lottie-web进行加载，完全零适配，跑起来的效果跟After Effects导出来的压根没啥两样。
这档子事儿让我重新琢磨了一番，AI到底能干些啥活儿这个老问题，估摸着又往前迈了一小步。
先来说说Lottie是个啥，毕竟不是谁天天都跟动效打交道。简单来讲，Lottie就是Airbnb在2017年弄出来的一套动画格式，核心路数就是把After Effects里的动画导出成一个JSON文件，接着各个平台凭借对应的解析器去渲染，文件极其微小，矢量还无损，这也解释了为啥几乎所有的App里你瞧见的那些loading、点赞、下拉刷新动画，底层十有八九都是Lottie。lottie-web单单一个仓库在GitHub上就有三万两千星，由此可见这个生态盘子有多庞大。
不过Lottie一直有个让人脑袋疼的毛病，制作门槛实在是高得离谱，你非得会操作After Effects不可，还得把Bodymovin插件装上，还得搞明白Lottie JSON的结构限制，可不是啥AE特效都能顺利导出的，做完了还得去调试，调完了还得进行压缩，这套流程走下来几个小时算是打底的。设计师弄出一版，开发集成的时候察觉颜色不对劲或者动画节奏有偏差，打回去修改，来回折腾个三四轮，一个简简单单的loading动画就能把一天时间给耗光。
这正是diffusionstudio/lottie想要干掉的痛点，它干的活儿其实并不繁杂，就是把一套完完整整的Lottie JSON编写规范给打包成了一个skill，你运用一行命令装上，npx skills add diffusionstudio/lottie，然后在Claude Code或者Codex里头直接跟AI讲你需要啥动画，AI就会依照那个skill里的规范帮你生成一份契合Bodymovin格式的JSON，并且自动搭建起一个本地预览页面，你能在浏览器里实时瞧见效果，修改了prompt重新生成的话，预览页面也会跟着全自动刷新。
这对AI而言听着是件挺顺理成章的事儿，不就是写个JSON嘛，但核心的难点就在于，Lottie的JSON结构极其错综复杂，一个简简单单的圆形旋转动画都得写上十几层嵌套，每一层包含transform、包含keyframe、包含easing曲线，keyframe的值还分好几种格式，固定值运用{k：value}，动态值运用{a：1, k：[keyframes]}，easing曲线又是三阶贝塞尔的标准化参数，要是差上一个字段渲染立马就炸或者出现静默失真。要是没有一份精确的规矩供你参照，AI十有八九会瞎编字段名，搞出来的JSON要么解析直接报错，要么动画压根就不是你想要的样子。
所以说这套skill的核心价值就体现在这儿了，它并非让AI凭空想象去写Lottie，而是递给AI一本极其详尽的实操手册，从顶层的v、fr、ip、op、w、h这些必填字段，到每一类layer该咋写，transform的animated和static属性各自的格式，shape的itm数组该咋嵌套，细化到多段贝塞尔曲线的偏移量计算该咋处理，统统都写死了，AI只要照着这本手册来操作，产出的JSON基本上就能达到生产级标准。
我试着抛出几个不同的prompt，一个是「苹果风格的渐变描边路径揭示动画」，一个是「球形弹跳物理模拟」，还有一个是「带粒子拖尾的logo入场」。头一个的效果明显比另外两个要好，因为我给了一个具体的SVG路径当作参考，skill的prompt指南里头明明白白说了，提供SVG或者真实数据来做grounding效果会出色得多，光凭嘴空口描述搞出来的东西容易发飘。这一点其实挺反直觉的，不少人以为AI搞动画就该彻头彻尾从零开始天马行空，但实际效果却告诉你，你非得给它抛出锚点才行，越是把具体的路径数据、颜色值、尺寸参数喂给它，弄出来的玩意越靠谱。第二个物理弹跳也还凑合，缓动曲线选用了弹性回弹，瞅着挺自然。第三个粒子拖尾就略微差点意思了，Lottie本身并不支撑真正的粒子系统，AI运用了大量的小圆点图层来做模拟，结果帧数太多导致JSON体积飙升到了200KB，不太具备实用性但也勉强算能看。
这事儿有意思的地方可不单单是动画本身好看与否，而是它指向了一个更为宏大的趋势，AI coding agent正在从一款帮你敲代码的工具，转变成一个帮你搞定特定领域专业工作的系统。
你瞧这个skill的本质到底是啥，它其实是一份领域知识的高度浓缩，一个资深动效工程师耗费五年光阴摸透的Lottie JSON坑点与技巧，被提纯成了一个结构化的prompt文件，任何一个拿到这份skill的coding agent，立马就能产出达到专业段位的Lottie动画，压根不需要它去理解After Effects，也不需要它懂什么动画原理十二条，它只要拥有规范就足够了。skills这种模式真正强悍的地方就在于此，它把专业能力从人的身上给剥离开来，封装成了能够随意分发的知识包。
况且这个项目背后的人也值得去留意一番，diffusionstudio是YC F24批次的公司，干的是AI驱动的视频编辑工具这行，创始人Konstantin早先在德国一家大厂捣鼓信号处理设备，另一位创始人Matthias此前搞的是AI视频处理创业公司，他们自己本身就是吃动效和视频这碗饭的，心里门清这个痛点到底有多痛。更有意思的在于William Candillon也参与了贡献，这人搞React Native的肯定都认识，YouTube上那个「Can it be done in React Native」系列就是他捣鼓出来的，GitHub上八千多号粉丝，还是React Native Skia的核心贡献者，他既然参与进来了，便说明这个项目在React Native生态圈里是被郑重对待的，绝非闹着玩。
当然啦眼下这套东西也有着显著的局限，头一个就是复杂动画依然搞不定，Lottie自身的渲染能力摆在那儿有天花板，诸如3D变换、路径变形、高级masking这些，AI写出来的JSON能不能正确渲染全凭运气，况且有些效果Lottie格式压根就不支撑，你就是让AI写它也写不出来呀。另一个毛病在于生成的JSON体积把控，我自己试的那几个例子，简单动画维持在20-50KB倒还好，稍微复杂一丢丢就直奔100KB往上走了，搁在移动端这可不算小，要是你想在首屏加载这种场景拿来用，还得再去琢磨琢磨优化策略。还有一点极容易被忽视，prompt工程本身反倒变成了新的瓶颈，你描述得越是精确效果就越是好，但能够精确描述动画的人本来就有动效制作底子，那对于纯小白而言，从「我想要一个好看的加载动画」跨越到给出一个能跑出满意结果的prompt之间，还隔着一段距离，这段距离目前也没啥好法子去缩短，只能仰仗社区慢慢沉淀出一些prompt模板了。
不过话又说回来，就算存在这些局限，这事儿的意义早就摆在那了，以往你要搞出一个Lottie动画，设计→导出→调试→集成，整条链路里头太多环节得仰赖人，如今整条链路硬生生被压缩成了一句话，你只需讲出你要啥，中间的过程统统甩给AI和它的skill去办。
我最近老是在琢磨一个问题，AI究竟在替代啥，说替代创造力实在太宽泛了，我觉得更为确切的说法应该是，AI正在替代那些需要经验积累却不需要创意点缀的专业步骤，Lottie JSON的结构性编写就属于典型的此类活计，你得摸清格式，你得晓得哪些属性写岔了会翻车，这些全凭经验攒下来的硬核知识，压根不需要你迸发啥灵感。反倒是真正渴求创造力的部分，什么样的动画风格契合你的产品，什么节奏感能让用户觉得舒坦，什么样的小细节能够传递品牌调性，这些AI暂时还搭不上手。
因而眼下比较妥当的用法是，先把你心之所想的动画风格、节奏、情绪统统盘算清楚，具体的JSON编写活儿直接甩给AI去干，就如同你当下写代码一般，架构设计和业务逻辑归你把控，体力活交由AI帮你搞定。生成的JSON文件径直扔到任何支撑Lottie的平台上便能跑起来，Web端选用lottie-web，React Native选用lottie-react-native或者Shopify的Skottie模块，iOS选用Lottie-Swift，Android选用lottie-android，Flutter同样也有lottie包，基本上把所有主流技术栈都覆盖全了，绝不会因为换了个平台又得重新去搞动画。
工具地址就在github.com/diffusionstudio/lottie，MIT开源协议，妥妥的完全免费，装上这么一个skill就能上手把玩，要是你日常项目里头会用到Lottie，又或者说你一直惦记着搞点动画效果却被After Effects的门槛挡在外头，这个着实值得拿来试上一试。
就这些啦，既然都瞅到这儿了，要是觉得还挺对胃口，顺手点个赞，在看，转发三连呗，要是想第一时间接到推送，也可以给我赏个星标⭐～
多谢你的阅读，咱们下回见。
作者 AISet
