企业官网建设流程全解析

把Transitions.dev技能装进Cursor和Claude Code:让AI自动生成32种产品级UI过渡

【免费下载链接】transitions.devUI montion AI agent, a library of 43+ crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev

Transitions.dev 是一个开源的UI 动效 AI 技能 + 过渡动画库：它把 32 种经过精调的产品级 CSS 过渡（弹窗、下拉菜单、骨架屏、滑块标签、成功对勾等）打包成 AI 技能，一条命令即可装进 Cursor 和 Claude Code。装好后，你只需要用自然语言说一句"让弹窗平滑打开"，AI 就会自动匹配最合适的过渡、写入代码并带上无障碍保护。

32 种过渡:覆盖 Web 应用最常见的动效场景

这个技能不靠 AI 凭空发挥,而是内置了一个"动效目录":从卡片缩放、数字弹入、通知角标,到 AI 思考状态、流式文字、矩阵点阵加载器,几乎覆盖了产品界面里所有常见的动效需求。每个过渡都有独立的参考文档,例如 06-modal.md 记录了弹窗的时长、缩放值、缓动曲线和 JS 编排细节,全部基于真实产品调参,而非泛泛的模板。

技能的核心逻辑写在 SKILL.md:所有过渡都以t-*命名空间组织,使用语义化 CSS 变量,自带prefers-reduced-motion降级保护,零框架依赖——AI 生成后,你粘贴即用。

最快安装方法:一条命令装进 AI 编辑器

方式一:官方技能安装器(推荐)

npx skills add Jakubantalik/transitions.dev

该技能兼容 Claude Code、Cursor、GitHub Copilot、Codex 和 Gemini CLI,安装后 AI 自动识别触发词,比如"animate the dropdown""shake on invalid"等描述都会激活它。

方式二:手动安装到项目

如果想完全掌握文件位置,可以克隆仓库后把技能目录复制到项目的.claude/skills/(Claude Code)或项目规则目录(Cursor):

git clone https://gitcode.com/gh_mirrors/tr/transitions.dev

需要复制的内容就是 skills/transitions-dev/ 下的SKILL.md、32 个编号参考文档和全局变量文件 _root.css。

💡 除了 AI 技能,项目还提供终端 CLI:运行npx transitions-dev add --free可一次性把全部免费过渡拉进项目,详见 cli/README.md。

AI 如何选对过渡:内置决策规则,不靠猜

新手最容易担心"AI 会乱加动画"。这个技能在 SKILL.md 的决策规则 中定义了明确的匹配逻辑:

• 先看界面元素,再看动作:触发器上浮出小圆点 → 通知角标;从触发器长出的表面 → 下拉菜单;居中的覆盖层 → 弹窗;
• 两个候选时选轻的:能用卡片缩放解决就不用面板滑入,能用下拉就不用弹窗;
• 实在匹配不上就停下来:技能明确规定"不要猜",转而列出全部过渡让你选择。

4 个指令:从查询、审查到自动应用

装好技能后,可以直接对 AI 说(以下动词都以transitions开头,不会与其他技能冲突):

完整定义见 SKILL.md 的 Commands 章节。想直观看效果,可以打开仓库里的 example.html,它有"普通 AI 输出"与"装上技能后的输出"并排对比演示。

进阶:用 transitions-polish 打磨已有动画

如果项目里已经写了不少动画但节奏不一致,可以再加装附带的polish 技能skills/transitions-polish/SKILL.md。它只调不改,从时长、距离、缩放、模糊、缓动五个维度审查现有动效,核心原则写在文档第 13 行:"按用途匹配令牌,而不是按数字凑近"——一个 300ms 的弹窗关闭会映射到 150ms 的--duration-quick,因为两者用途相同。

配合 refine/,你还能在浏览器里直接点击界面上的动画让它"自动对齐令牌",无需改源码即可预览效果,详见 refine/README.md。

许可与适用人群

技能中的过渡可自由用于个人和商业项目、可修改、可交付给最终用户,唯一限制是不能把整个库当作竞品库再分发,条款见 LICENSE。对于刚上手前端的开发者、独立开发者,以及想让 AI 写出"更像产品而不是玩具"动效的团队,把它装进 Cursor 或 Claude Code,是你成本最低的一次动效升级。

【免费下载链接】transitions.devUI montion AI agent, a library of 43+ crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev