Transitions.dev

产品简介

Transitions.dev 是一个专门面向 AI 智能体的 UI 动效产品，官方定位就是"给 AI agent 用的 UI transitions"。它由四块拼成：43 个以上可直接落地的精修 CSS 过渡动效库、可视化组件构建器 Builder、能在真实项目里找出并修正卡顿动效的 Motion Agent，以及配套的 Motion Skill。GitHub 开源仓库收获 5400 星、248 次 Fork，工具链部分采用 MIT 许可。

核心能力

• 动效库：每个动效都给出可复制的独立 CSS 片段，用 :root 上的语义化 CSS 变量驱动，规则统一以 t-* 类名做命名空间隔离，并内置 @media (prefers-reduced-motion: reduce) 降级保护
• 命令行接入：npx transitions-dev add card-resize 可直接拉取单个动效，add --free 一次装齐全部免费动效，list 查看清单，付费动效通过浏览器登录后取用
• 智能体技能：npx skills add Jakubantalik/transitions.dev 即可把动效知识装进 Claude Code 等 Agent 工具
• Refine 实时调试：npx transitions-refine live 一条命令往运行中的应用注入时间轴与调参面板，点一下 Refine 就会让编码智能体把选中的 CSS/Motion 过渡对齐到动效令牌，或直接换成库里的现成动效，建议以可实时回滚的覆盖样式呈现；加上 --llm 参数还能接入 Cursor CLI

产品构成

Builder 负责把组件描述直接变成 HTML/CSS 或 React 代码，Motion Agent 则针对已有项目排查不合理的动效节奏，Motion Skill 则是给编码智能体用的知识包，三者共用同一套动效令牌体系。

配套资产

仓库自带交互 playground，可实时调节时长、位移与缓动曲线；技能内容由 index.html 经 build/extract.mjs 自动生成，保证与站点展示始终一致；另有 site.webmanifest、robots.txt、sitemap.xml 等 PWA 与 SEO 元数据。免费动效可直接取用，更完整的动效集合与 Builder 属于 Pro 版本。

许可说明

动效与技能可用于个人和商业项目并自由修改，唯一限制是不得把该动效库本身当作竞品库重新分发，命令行与智能体工具部分采用 MIT 许可。

适用人群

适合前端开发者与产品设计师，尤其是希望用 Agent 补齐动效设计能力、又不愿手抄 CSS 的团队。

官网链接

https://transitions.dev