企业官网建设流程全解析

给代码库打个动效分数:Transitions.dev Agent如何自动检测11类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 Agent 是一个给 UI 动效打分的 AI 检测工具：它扫描你的代码库，输出一份 0-100 的动效分数（motion score），并自动检测 11 类常见的 UI 过渡动画问题——比如弹窗没有出场动画、hover 状态"咔哒"一跳、transition: all拖慢性能等。每个问题都会附上对应的修复配方，AI 还会以 diff 形式给出修改建议，经你确认后才应用。

动效分数是怎么算的？

和 ESLint 给代码质量找毛病类似，Agent 先遍历项目里所有 CSS、JSX、Vue、Svelte 等文件，然后按问题严重度扣分：

• major（严重）扣 8 分/条，如弹窗完全没有进出场动画
• warn（警告）扣 4 分/条，如transition: all、超过 1 秒的慢动画
• minor / info扣 1-2 分，如硬编码时长、时长不统一

每条规则都有扣分上限（如"慢动画"最多扣 16 分），避免一个问题把分数打穿。最终分数对应四个评级：

计分逻辑集中在 agent/lib/scan.mjs，扫描流程为：收集文件 → 运行规则 → 组件级审查 → 合并去重 → 计算分数。

11类UI过渡动画问题全解读

规则实现位于 agent/lib/rules.mjs，完整清单如下：

几个值得注意的"深挖"能力：

• 能穿透 CSS 变量：transition: opacity var(--menu-close)这种写法，扫描器会先收集全项目所有--xxx: 值声明，沿var()链解析，即使时长藏在 token 里也能揪出慢动画（见 agent/lib/rules.mjs 的collectCustomProps与resolveTimes）
• 懂 JS 里的 CSS-in-JS：对 JSX/TS 文件做字符串与注释标记，模板字符串里的内联 CSS 依然可扫描，而普通文案（如"transition: all"出现在提示语中）不会被误报
• transition: all会给出具体建议：不只是说"别用 all"，而是分析该元素各状态实际改变的属性，直接告诉你应该写哪几个属性名

组件识别：比规则匹配更进一步

光查 CSS 只能抓到"值不对"，Agent 还会回答"这个弹窗是不是根本没动画"。组件识别器（agent/lib/components.mjs）按 transitions.dev 技能库的方式审查项目：

1. 认出组件：从类名、元素（<dialog>）、ARIA 角色、组件名、Tailwind 工具类、Framer Motion 属性等线索，识别出 modal、dropdown、tooltip、toast、drawer、accordion、tabs、toggle、badge、skeleton 等 43+ 种组件（识别词表见 agent/lib/catalog.mjs）
2. 读懂它的动画：打开/关闭时长、缓动、缩放、位移、有无出场动画、动画了哪些属性
3. 与配方对比：每个组件对应库里一份标准配方（含可调节默认值），对比的是"按用途该用什么值"，而不是机械套数字——比如同一个 300ms，弹窗打开可以，弹窗关闭就该是 150ms

对比结果产出三种结论：off-scale（值不对）、recipe-mismatch（结构写错）、recipe-available（库里有现成方案）。扫描报告渲染在 agent/lib/report.mjs，终端输出带颜色的分数条，Markdown 版本则直接作为 PR 评论。

三条使用路径，总有一条适合你

① 命令行，一条命令出分数

npx transitions-agent # 扫描：动效分数 + 问题清单 + 推荐配方 npx transitions-agent fix # AI 生成修复 diff，确认后应用 npx transitions-agent fix --pr # 应用后自动开分支、建 PR

② GitHub Action：每个 PR 都有分数评论

npx transitions-agent init-ci一键接入，也可参考模板 agent/templates/transitions-agent.yml 手动配置。效果是：

• 每个 PR 自动附上动效分数评论（含识别出的组件与问题），随 push 原地更新
• 有待修问题时，自动开一个修进该 PR 分支的修复 PR——合并即应用，关闭即拒绝，永不触碰 main
• 可用min-score设为合并门禁，分数不达标直接卡住 PR

③ MCP Server：让你自己的 AI 来修

不想走托管服务？把 Agent 的 MCP Server 接进 Claude，你的助手即可获得扫描契约、修复指导和真实配方源码，修复跑在你自己的订阅上：

claude mcp add --transport http transitions-agent https://api.transitions.dev/v1/agent/mcp

相关实现：扫描 agent/lib/scan.mjs、修复服务 agent/worker/、技能定义 agent/skill/SKILL.md、CI 入口 agent/action/，完整文档见 agent/README.md。

安全模型：先看 diff，再谈修改

动效修复最怕"改着改着逻辑也变了"，Agent 用四道保险约束行为：

1. 修复先以 diff 呈现，没有你的确认，一个字节都不会写入
2. --pr只在新分支开 PR：团队评审、测试照常跑，由人合并
3. 一切基于 git：任何已合并的修复，一条git revert就能撤回
4. 只碰动效：修改范围限定在 CSS 过渡与动画守卫，绝不触碰业务逻辑

两种修复模式风险可控：polish（默认，免费）只做小改动——把数值挪到动效比例尺、补齐 hover 过渡、加上 reduced-motion 守卫；revamp（Business 计划）则进一步为识别出的组件装上库的标准配方，diff 更大，建议走 PR 评审。

总结

Transitions.dev Agent 把"动效好不好"这件主观的事变成了一条可量化、可门禁、可自动修复的流水线：一条命令拿到 0-100 动效分数，11 类规则定位问题，AI 以最小 diff 修复，全程 git 可回滚。对团队来说，接入 CI 后动效质量就和单元测试一样，成了每次 PR 的必答题。

【免费下载链接】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