Transitions.dev Polish 技能详解如何把手写动画一键对齐动效令牌刻度【免费下载链接】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 的Polish 技能transitions-polish是一套专门打磨已有动效的 AI 编程技能它不新增动画而是扫描你项目里手写 CSS 的时长、距离、缩放、模糊、缓动五个维度把每个值对齐到 transitions.dev 的**动效令牌motion tokens**刻度上让散乱的300ms、cubic-bezier(...)变成统一可维护的var(--…)。它解决什么问题告别手感式调参大多数项目的动画都是手感式写出来的弹窗关闭用了300ms下拉菜单打开用了250ms某个图标切换又随手写了个cubic-bezier(0.22, 1, 0.36, 1)。单看都没错合在一起却节奏不统一、时快时慢用户会隐约觉得哪里不太顺却说不上来。Polish 技能的核心理念是按用法匹配而不是按最接近的数字匹配。一个300ms的弹窗关闭不该因为300 接近 350就换成--duration-medium而应该看它在做弹窗关闭这件事——对应的令牌是--duration-quick150ms。如果某个值对不上任何令牌的用途它就原样保留绝不硬凑。动效令牌五维刻度一览Polish 技能内置了一张和 transitions.dev 站点Motion tokens页一致的令牌表集中在_root.css里。把这些令牌复制到项目后任意位置都能用var(--…)引用。五大维度如下维度令牌示例含义时长 Duration--duration-quick150ms /--duration-fast250ms关闭用快、打开用慢缓动 Easing--ease-smooth-out表面类动效的默认曲线距离 Distance--distance-base8px平移多远才顺眼缩放 Scale--scale-large0.96大表面从更远处起步模糊 Blur--blur-medium3px给切换/滑动柔化关键规则值到底对不对由规则判定开/关不对称打开是邀请、关闭要让路。下拉/弹窗开 250ms → 关 150ms面板开 400ms → 关 350ms。页面滑动、标签切换、手风琴这类单一可逆动作则保持对称不要拆。悬停进 vs 出进要快而直接出可以软而有弹头像回位用--ease-bounce-strong。间隔与延迟每项目--duration-stagger40ms但总间隔要压在约 300ms 以内延迟只用来过滤误触 / 制造节奏永远不要延迟关闭或悬停移出。两个命令review 只报告polish 才落盘技能暴露了带命名空间的两个动词都以transitions开头避免与其他技能冲突完整说明见 SKILL.mdtransitions review扫描全项目含内联style、styled-components、Tailwind 任意值按文件输出应该改的值清单不改动任何代码。结尾提示运行transitions polish应用这些改动。transitions polish先复述 review 的扫描展示多少值会改、按文件分组 一条示例请求你确认后才把硬编码值替换成var(--…)引用保持 diff 尽量小。和 Refine 面板的联动单击即得令牌化建议当项目里装了 Polish 技能transitions.dev 的Refine 面板会自动把这些规则内联进每次Small refinement作业的提示词中做到零额外文件读取。面板细节见 refine/README.mdSmall refinements小打磨保留原过渡只按动效令牌给微调建议——正是 Polish 技能的场景Replace transition整段替换从库里换一整套过渡属于transitions-dev技能的地盘。上手三步把技能安装进项目与transitions-dev一起装或单独装令牌值已自述可独立审查导入一次_root.css令牌块让var(--…)生效运行transitions review先看清楚再transitions polish一键对齐。 小贴士transitions-dev的片段本身就带字面值不装令牌也能跑装上 Polish 技能后它们会被映射回共享刻度未来调参改一处即可。小结Polish 技能把让动画更顺这件靠手感的事变成一套可审查、可复现、可一键应用的令牌化流程按用法匹配令牌、遵守开/关不对称与悬停进出规则、用 review 和 polish 两步安全落盘。对新手来说它几乎是最快把散落 CSS 过渡驯服成统一动效体系的方式。更多可参考的目录skills/transitions-polish/、skills/transitions-dev/ 与 refine/。【免费下载链接】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），仅供参考
