[分享创造] 做了个开源工具 Vibe Animation：对着 AI 说话就能做 GSAP 网页动画，能选中元素定向改

一句话看懂：开发者 Luogao 发布了一款名为 Vibe Animation 的开源工具，它通过 Claude Agent 理解自然语言指令，直接生成 GSAP 网页动画，并支持用户在画布上点选元素进行定向修改，解决了 AI 生成动画时“改一个元素就重写整个场景”的常见痛点。

事件核心：发生了什么

Vibe Animation 是一个基于 Vite + React 19 + TypeScript 构建的前端工具，后端使用 Express 和 WebSocket 进行混合通信，AI 部分基于 Anthropic 的 Claude Agent SDK 与 MCP 工具。它的核心能力是：用户用自然语言描述动画效果（例如“让这个 logo 弹跳着出现”），AI 自动生成对应的 GSAP 动画代码，并在浏览器内实时预览。最关键的设计是，用户可以直接在画布上选中某个元素，然后向 AI 发出类似“把那个圆放大”的指令——Agent 会通过预定义的 MCP 工具更新该元素配置，而不是重写全部场景。该工具还支持一键导出 MP4、GIF 或 JSON 格式。整个项目已在 GitHub 开源，并支持 Docker 自部署。

为什么重要

GSAP 是一个性能优秀的 Web 动画库，但学习曲线陡峭：时间轴、easing 函数、SVG 路径、stagger 等概念让初学者望而却步。此前市场上已有 AI 生成动画代码的尝试，但普遍存在上下文丢失问题——用户说“把那个圆放大”，AI 常常不知道“那个圆”指哪个，只能把整个场景代码重写一遍，导致迭代过程中逻辑混乱。Vibe Animation 通过让 AI 通过 MCP 工具操作配置结构而非直接修改代码，本质上建立了一层“可逆的、指向明确的”交互协议。这种做法不限于动画领域，对 AI 辅助设计工具的产品架构思路有参考价值：与其让 AI 自由生成代码，不如限定它在预设的抽象层里操作，从而保持可控性。

对用户/开发者/创作者的影响

对于动效设计师和前端开发者：该工具适合快速制作动效原型、短视频素材或复刻现有网站的 hero 动画场景。由于是开源方案，开发者可自行部署并二次定制。对于不熟悉 GSAP 的内容创作者：自然语言驱动的动画生成降低了入门门槛，但项目开发者明确表示目前距离“一键出片”还有距离，更适合有基础调试意愿的用户。另外，其浏览器端自研 GIF 编码器以及基于 mediabunny + WebCodecs 的 MP4 导出方案，也为想在浏览器中做视频导出的开发者提供了可参考的技术实现路径。

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。

值得关注的后续

一是产品迭代方向：目前该项目还在快速迭代中，能否从“动效原型工具”进化成更完整的动画创作平台，取决于其是否持续改进生成质量并补充更多动画模板。二是 MCP 工具模式是否会被其他 AI 辅助设计产品借鉴：这种“限制作恶范围”的 Agent 设计思路，可能推动更多设计工具采用类似的工具集架构。三是生态扩展：开源社区能否围绕它积累可复用的动画配置库，以及是否有其他 AI 模型（如 GPT-4o 或本地开源模型）被替换接入其 MCP 层，都是值得观察的变量。

来源：V2EX (创意工作者社区)