AI 复刻网页动画，先学会自己挑错

让 agent 根据一张截图重建网页动画，常见结果是它猜一次就停。看着像，时间点未必对。Alvaro Cintas 分享了一个叫 reanimate 的免费 Claude Code skill，专门补上验证这一步。

它先录下原动画，再按你项目已有的技术栈重建，然后以同样方式录下复刻版，比较时序、缓动和像素。一般跑 2 到 5 轮修正，剩下没对上的部分会写进报告。

可以喂给它的输入包括：

• 在线网页 URL
• 屏幕录制
• mp4 或 gif
• Lottie 文件

输出不另起炉灶，写进项目已经用的 CSS、Framer Motion、GSAP 或 three.js。这个限制很实际。复刻动画最怕生成一段看起来能跑的代码，却和现有组件、构建流程、交互状态脱节。

动画难做的部分往往在时序和缓动。差 50ms，肉眼就能觉得不对劲。有网友提到，关键在录原版、重建、再录、逐帧比对这个流程，2 到 5 轮修正对需要反复改的落地页场景更划算。另一个建议是，发布前用 0.25 倍速并排播放原版和复刻版，再放到便宜手机上检查，掉帧会先暴露时序问题。

报告里列出还没对上的部分，是这套工具比较诚实的地方。有网友提醒，只追完美匹配分数，可能交付一个参数接近但观感不对的副本。

安装命令：

npx skills add NiazMorshed2007/reanimate -g

项目地址：github.com/reanimate

原推文：Alvaro Cintas