尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
把Transitions.dev技能装进Cursor和Claude Code:让AI自动生成32种产品级UI过渡
把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.devTransitions.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 dropdownshake 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开头,不会与其他技能冲突):指令作用典型说法transitions reveal列出全部 32 种过渡清单这个技能里有哪些过渡transitions review扫描项目,找出适合加过渡的位置(只报告不改代码)审查我的项目动效transitions apply自动匹配最佳过渡并安装,先给出一句话理由等你确认在这里加个过渡transitions refine把写死的时长/缓动替换为统一的运动令牌把动画时长对齐到令牌完整定义见 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

创建一个shell的执行工具(subprocess.run)

创建一个shell的执行工具(subprocess.run)

参数说明 shell=True:可以执行一段命令;False:执行一个集合的命令。 capture_output=True:用来捕获输出,不会自动打印到控制台;False:会直接输出结果。 完整代码 import subprocess import platform import shlexdef run_shell_command(command):try:shell_command =…

📅 2026/10/3 16:57:10
如何在PPT中插入LaTeX数学公式?SlideSCI三种方案详解:可编辑文字与SVG渲染

如何在PPT中插入LaTeX数学公式?SlideSCI三种方案详解:可编辑文字与SVG渲染

如何在PPT中插入LaTeX数学公式?SlideSCI三种方案详解:可编辑文字与SVG渲染 【免费下载链接】SlideSCI PPT插件,支持素材库、AI助手、一键添加图片标题,复制粘贴位置、一键图片对齐、一键插入Markdown(加粗、超链接等行…

📅 2026/10/3 16:57:10
晶格T3-T5全系列锡粉,用品质提升精密封装下限

晶格T3-T5全系列锡粉,用品质提升精密封装下限

在SMT贴片及芯片封装和光模块制造领域,锡粉作为锡膏核心原料,颗粒粒径、球形度及氧含量直接决定印刷效果与焊点可靠性。按照IPC标准,锡粉分为 T3 至 T10 共 8 个等级,粒径逐级细化,适配不同精密制造场景,晶…

📅 2026/10/3 16:57:10
MORE NEWS

更多资讯

📰

贝叶斯公式计算器:从原理到工程落地的Python实现

简介:这是一款面向统计学初学者、数据科学入门者及Python编程学习者的贝叶斯公式实践工具,聚焦于直观理解与动手计算后验概率这一核心难点。资源以Python实现为核心,封装了贝叶斯定理(P(A|B)P(B|A)P(A)/P(B))的完整计算…

📰

虚拟偶像舞蹈视频制作全流程:从动作生成到渲染合成的技术拆解

如果最近刷到过一条标题为《【AIRI】第一次跳mmj…有当偶像的潜质吗!》的视频,你大概率会被评论区的一句话击中:“这个角色也太有生命力了吧。”在很多观众眼里,这是一个虚拟偶像的预备役;但在开发者眼里,这…

📰

Hadoop实现商品推荐系统:MapReduce协同过滤实战

简介:本资源是一份面向高校大数据与分布式系统课程学习者的实践型课程设计项目,聚焦Hadoop平台下的商品推荐系统构建,解决电商场景中海量用户行为数据处理与个性化推荐落地问题。压缩包共19个文件,含10个Java核心业务与算法实现类…

📰

水稻稻穗YOLO数据集:6108张开箱即用训练图

简介:本资源是一套专为YOLO目标检测任务定制的水稻稻穗单类别数据集,面向农业AI初学者、计算机视觉入门者及YOLO模型实践者,解决稻穗图像识别与定位中缺乏高质量标注数据的问题,适用于智慧农业、作物监测等场景的模型训练与验证。…

📰

纯Python实现SMPLify人体三维参数化建模流水线

简介:本资源是一套基于Python实现的人体动作捕捉与三维重建的完整实践项目,面向计算机视觉、图形学方向的初学者与进阶学习者,尤其适合作为毕业设计、课程设计或工程实训的技术原型。项目深度整合SMPL人体参数化模型与SMPLify优化拟合流程&am…

📰

电脑玩手机游戏模拟器哪个好 电脑玩手机游戏什么模拟器好

手机屏幕尺寸有限,玩三国杀这类卡牌策略手机游戏时,武将技能描述密密麻麻,手牌一多手指点选就容易出错,因此想要一款电脑玩手机游戏模拟器,希望在大屏幕上获得更清晰的牌面信息和更精准的操作体验。想要一款好用的电脑…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬