AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载这篇指南围绕仓库中skills/review-animations/SKILL.md展开讲解它作为唯一职责的动画审查技能如何工作从默认标记问题的审查姿态、十条不可妥协标准、升级触发清单到输出格式与精确数值字典。读完你既能拿它当 Agent 提示词模板也能把它提炼成一套可复用的动画 code review 检查表配合 STANDARDS.md 中的精确数值做到按值引用、不靠手感近似。一、定位一个只做动画审查的专项技能该技能在 SKILL.md 开头就声明了自己的边界它只做一件事——按高工艺标准审查动画与动效代码。它不写功能、不修无关 bug、不审查非动效代码如果被要求审查通用代码应当拒绝并指向通用审查技能。这种单职责设计是整个仓库的通用风格animate 只负责从零构建动画improve-animations 只负责全仓审计并产出可执行计划find-animation-opportunities 只负责寻找该动而没动的地方而review-animations只负责审查单个 diff 中的动效。README 中将其概括为基于我的规则以严格方式审查你的动画见 README.md。这种职责切分让每个技能都能把标准拉到极致不会因为多任务而稀释。二、审查姿态默认标记批准是挣来的原文档明确给出了审查者的心理模型你是一名对工艺有苛刻眼光的资深设计工程师。你的偏见朝向感觉对的动效而非仅仅能跑的动效。一个能工作但显得迟滞、从错误原点落地、触发过于频繁或掉帧的过渡是回归不是通过。默认标记问题。批准是挣来的不是默认的。这句话定义了与普通 code review 完全不同的默认值普通审查默认相信能跑就行这里默认怀疑每一个动效。基准来自 Emil Kowalski 的动画哲学而审查方法不可妥协的标准、升级触发、补救层级、分级输出、显式批准条件则借鉴了激进的代码质量审查流程。当一条结论需要精确数值时必须加载 STANDARDS.md 中的完整规则目录缓动曲线、时长表、弹簧配置、手势、clip-path、性能、无障碍而不是凭记忆近似。三、十条不可妥协标准每一处动画都被这样测量原文档强调diff 中的每一处动画都按这些标准测量违反即是一条 finding问题。动效必须有正当理由Justified motion每一处动画都必须回答为什么这里要动——空间一致性、状态指示、反馈、解释、或防止突兀变化。看起来很酷用在高频出现的元素上是 block拦截。STANDARDS.md 给出的合法目的正是这五类并补充It looks cool用在常看元素上不成立。与出现频率匹配Frequency-appropriate动效强度必须匹配用户多常看到它。键盘触发和每天 100 次的操作完全不动画每天十几次的操作只做减量动效偶尔出现的用标准动画罕见/首次出现才允许一点 delight。响应式缓动Responsive easing进入/退出元素必须用ease-out或强自定义曲线。UI 上用ease-in是 block——它延迟了用户最关注的那个瞬间。内置 CSS 缓动太弱应当使用自定义 cubic-bezier。UI 动画低于 300msSub-300ms UIUI 动画保持在 300ms 以内任何更慢的 UI 动效若无理由即算 finding。逐元素的时长预算在 STANDARDS.md 中给出。原点与物理正确Origin physical correctnesspopover/下拉/工具提示应从触发器transform-origin缩放而不是从中心。绝不要从scale(0)动画——应从scale(0.9–0.97) opacity 起步Modal 豁免保持居中。可中断性Interruptibility快速触发或手势驱动的动效toast、开关、拖拽必须可中断——用 CSS transition 或可从当前状态重新定位的弹簧而不是会从零重启的 keyframes。只用 GPU 属性GPU-only properties只动画transform和opacity。动画width/height/margin/padding/top/left或负载下的 Framer Motionx/y/scale简写是性能 finding。无障碍Accessibilityprefers-reduced-motion必须被尊重更温和而非归零——保留 opacity/color去掉位移。hover 动画必须被media (hover: hover) and (pointer: fine)门控。不对称进出Asymmetric enter/exit深思熟虑的动作按压、按住、破坏性确认动得慢系统响应要干脆。按压-释放或按住交互上的对称时序是 finding。一致性Cohesion动效要匹配组件的性格和整个产品的气质——俏皮的可以更有弹性仪表盘保持干脆。性格不匹配或本可用微妙模糊过渡衔接两个状态却用了突兀 crossfade是 finding。拿不准动效是否合适时最强的一招往往是删掉它。四、攻击性升级触发看到就硬性标记原文档列出了一份看到就硬性标记的清单它们是最高置信度的违规信号适合作为 grep 关键词直接扫代码transition: all无界属性动画scale(0)或没有初始 transform 的纯淡入进入任何 UI 交互上的ease-in刻意动画上使用过弱的内置缓动键盘快捷键、命令面板开关、或每天 100 次操作上的动画无陈述理由的 UI 时长 300ms触发器锚定 popover/下拉/工具提示上的transform-origin: centertoast、开关或任何快速添加/触发的元素上的 keyframes动画布局属性width/height/margin/padding/top/left页面繁忙时运行的 Framer Motionx/y/scaleprops在父元素上更新 CSS 变量来驱动子元素 transform样式重算风暴位移动效缺少prefers-reduced-motion处理未门控的:hover动效按压-释放或按住交互上的对称进出时序应该用 30–80ms stagger 却全部同时进入这 13 条几乎可以直接转化为自动化 lint 规则或 PR 评论模板——每条都是一个坏味道 判定的二元组合审查者无需纠结。五、补救偏好层级修复建议的先后顺序发现问题后提出修复建议时优先早的方案删掉动画高频 / 无目的 / 键盘触发减量——更短时长、更小 transform、更少动画属性修缓动——ease-in→ease-out/自定义曲线用强 cubic-bezier修原点/物理性——纠正transform-origin把scale(0)换成scale(0.95)opacity做成可中断——keyframes → transitions或手势驱动用弹簧移到 GPU——布局属性 →transform/opacity简写 → 完整 transform 字符串程序化 CSS 用 WAAPI不对称时序——放慢深思熟虑阶段加快响应打磨——用模糊遮罩 crossfade、分组加 stagger、进入用starting-style、活跃元素用弹簧无障碍与一致性——加 reduced-motion hover 门控调校以匹配组件性格这个层级的设计逻辑与十条标准一一对应先消灭不该动的再改善动得不对的最后才谈打磨。六、强制输出格式先表格后裁决原文档要求输出严格分两部分、按序排列。Part 1 —— 发现表必需一张 markdown 表格一行一个问题绝不使用 Before:/After: 列表形式。原文档给出的示例表也是仓库 emil-design-eng 中规定审查 UI 必须使用的同款格式BeforeAfterWhytransition: all 300mstransition: transform 200ms ease-out明确具体属性all会在 GPU 之外动画到非预期属性transform: scale(0)transform: scale(0.95); opacity: 0没有东西会从无中出现——scale(0)看起来像从哪冒出来的ease-inon dropdownease-out custom curveease-in延迟了用户最关注的瞬间显得迟滞transform-origin: centeron popovervar(--transform-origin)(Base UI)Popover 从触发器缩放而非中心modal 豁免Part 2 —— 裁决必需剩余评论按影响层级分组最高层级在前空的层级省略破坏感受的回归——迟滞的缓动、凭空出现、触发在高频/键盘操作上错过的简化——应该被删除或大幅缩减的动画性能——非 GPU 属性、掉帧风险、重算风暴可中断性与时序——本应使用 transition/弹簧却用了 keyframes本应对称的时序却不对称原点、物理性与一致性——错误原点、性格不匹配、突兀 crossfade无障碍——reduced-motion 与指针/hover 门控最后以显式决策收尾Block——任何破坏感受的回归、键盘/高频操作上的动画、UI 上的scale(0)/ease-in、或有简单 GPU 修复方案的非 GPU 动画。Approve——无破坏感受的回归、无明显的该删未删动效、时长与缓动在界限内、需要的地方已处理可中断性、reduced-motion 已尊重。结论必须具体并引用file:line需要数值曲线、时长、弹簧配置时从 STANDARDS.md 中精确取用而非近似。七、数值字典审查时的精确取值依据原文档中需要数值时查阅 STANDARDS.md的约定决定了审查结论必须落在精确值上。以下是该字典的核心内容频率决策表频率决策每天 100 次键盘快捷键、命令面板开关绝不动画每天十几次hover 效果、列表导航删除或大幅缩减偶尔modal、抽屉、toast标准动画罕见/首次引导、反馈、庆祝可以加 delight文档特别以 Raycast 为例它没有开关动画——对每天用几百次的东西来说这才是正确的。缓动决策顺序与强曲线进入或退出 →ease-out起始快感觉响应屏幕内移动/变形 →ease-in-outHover/颜色变化 →ease恒定运动跑马灯、进度条→linear默认 →ease-outUI 上绝不用ease-in。内置 CSS 缓动太弱应使用强自定义曲线STANDARDS.md 与 animate 技能共享同一组 token--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve (Ionic) */找不到的曲线应从知名缓动曲线资源如 easing.dev、easings.co挑选不要从零手搓。时长预算表元素时长按钮按压反馈100–160ms工具提示、小型 popover125–200ms下拉、选择器150–250msModal、抽屉200–500ms营销/解释性可以更长规则依然是UI 动画保持在 300ms 以下。180ms 的下拉比 400ms 的下拉感觉更响应转圈动画更快会让加载感觉更快实际时间相同第一个工具提示之后的后续工具提示应立即出现跳过延迟 动画会让整个工具栏感觉更快。物理性绝不scale(0)从scale(0.9–0.97)opacity: 0开始。原点感知的 popover从触发器缩放而非中心.popover { transform-origin: var(--transform-origin); }Base UI。Modal 豁免保持transform-origin: center。按钮按压反馈:active上transform: scale(0.97)transition: transform 160ms ease-out幅度保持在 0.95–0.98 的微妙范围。弹簧配置弹簧模拟物理所以感觉自然没有固定时长而是按参数收敛。用于带惯性的拖拽、活的元素如 Dynamic Island、可中断手势、装饰性鼠标追踪。// Apple 风格更易推理——推荐 { type: spring, duration: 0.5, bounce: 0.2 } // 传统物理更多控制 { type: spring, mass: 1, stiffness: 100, damping: 10 }bounce 保持在 0.1–0.3 的微妙范围大多数 UI 中避免 bounce留给拖拽消除和俏皮交互。弹簧被中断时保持速度keyframes 从零重启因此适合用户可能中途反转的手势。鼠标交互用useSpring插值而不是把值直接绑到鼠标位置直接绑定 生硬、无动量且仅限装饰性动效。可中断性CSS transition 可被中断并中途重新定向keyframes 从零重启。对快速触发的元素堆叠的 toast、开关transition 更顺滑/* 可中断——适合动态 UI */ .toast { transition: transform 400ms ease; } /* 不可中断——动态 UI 中避免 */ keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }无 JS 的进入用starting-style.toast { opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease; starting-style { opacity: 0; transform: translateY(100%); } }旧浏览器回退useEffect(() setMounted(true), [])data-mounted属性。不对称时序用户在做决定的地方放慢系统响应的地方放快.overlay { transition: clip-path 200ms ease-out; } /* release: fast */ .button:active .overlay { transition: clip-path 2s linear; } /* press: slow, deliberate */性能只动画transform和opacity——它们跳过布局/绘制并在 GPU 上运行padding/margin/height/width/top/left会触发全部三步渲染。不要用父元素上的 CSS 变量驱动子元素 transform——会为所有子元素重算样式。直接在元素上设置transformelement.style.setProperty(--swipe-amount, ${d}px); // bad: recalc on all children element.style.transform translateY(${d}px); // good: only this elementFramer Motion 简写不是硬件加速的x/y/scale通过 rAF 在主线程运行负载下掉帧应改用完整 transform 字符串motion.div animate{{ x: 100 }} / // drops frames under load motion.div animate{{ transform: translateX(100px) }} / // hardware acceleratedCSS 动画在负载下优于 JS——CSS 跑在主线程之外rAF 动画在浏览器加载/脚本/绘制期间会卡顿。预先确定的动效用 CSS动态/可中断动效用 JS。WAAPI兼顾 JS 控制与 CSS 性能硬件加速、可中断、无库依赖element.animate([{ clipPath: inset(0 0 100% 0) }, { clipPath: inset(0 0 0 0) }], { duration: 1000, fill: forwards, easing: cubic-bezier(0.77, 0, 0.175, 1) });Transforms 与 clip-pathtranslate百分比相对元素自身尺寸——translateY(100%)按元素自身高度移动Sonner/Vaul 定位 toast/抽屉的方式优于硬编码 px。scale()会同时缩放子元素字体、图标、内容——这恰好是按压反馈要的特性。3DrotateX/Ytransform-style: preserve-3d无 JS 实现纵深/轨道/翻转。clip-path: inset(t r b l)是强大的动画工具每个值从对应边向内吞噬用于滚动显现inset(0 0 100% 0)→inset(0 0 0 0)、按住删除遮罩、无缝 tab 颜色过渡、对比滑块。手势与拖拽动量消除不要要求跨过距离阈值——计算速度Math.abs(distance)/elapsedMs若 ~0.11即消除。一个轻扫应该足够。边界阻尼拖过自然边缘时移动量递减真实物体停止前会减速。指针捕获拖拽开始后捕获指针指针离开边界仍继续。多点触控保护拖拽开始后忽略额外触点if (isDragging) return——防止跳动。摩擦优于硬停允许带渐增阻力的过度拖拽而不是看不见的墙。遮罩不完美的 crossfade 与 stagger当 crossfade 在调好缓动/时长后仍显示两个重叠状态过渡期间加微妙的filter: blur(2px)把它们融合成一个感知上的变换。模糊保持在 20px 以下重模糊代价高尤其 Safari。分组进入用 stagger项间 30–80ms更长的延迟显得慢。stagger 是装饰性的——绝不能阻塞交互.item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; } .item:nth-child(2) { animation-delay: 50ms; } .item:nth-child(3) { animation-delay: 100ms; } keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }无障碍media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* keep opacity/color, drop transform-based motion */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* gate hover motion — touch fires false hovers on tap */ }const reduce useReducedMotion(); const closedX reduce ? 0 : -100%;Reduced motion 意味着更少、更温和的动画不是零——保留帮助理解的过渡移除位移/位置变化。调试审查中感受拿不准时推荐慢动作时长放大 2–5 倍或用 DevTools 动画检查器。检查颜色是否干净地过渡、缓动是否戛然而止、transform-origin是否正确、协调属性是否保持同步。逐帧Chrome DevTools Animations 面板可暴露协调属性之间的时序漂移。真实设备做手势抽屉、滑动——连上手机、用 IP 访问 dev server、用 Safari 远程调试。次日新鲜眼光——开发中不可见的瑕疵日后会浮现。一致性动效匹配组件性格俏皮的可以更有弹性专业仪表盘应干脆快速。Sonner 感觉对部分正是因为缓动、时长、设计乃至名字都在和谐一致——稍慢、用ease而非ease-out以显得优雅。进出列表的 opacity height 是试错出来的没有公式——调到感觉对为止。八、在仓库中的协同这套 bar 如何被复用review-animations的审查标准并非孤岛它在整个仓库中被反复引用emil-design-eng 把同一套决策框架频率 → 目的 → 缓动 → 时长 → 弹簧编码进主技能并强制要求审查 UI 时使用完全相同的 Before/After markdown 表格格式——与review-animations的 Part 1 一脉相承。animate 的 Never Ship 自查表skills/animate/SKILL.md逐条声明这些在review-animations中都是自动 block——构建技能要求一次通过审查把 review 标准前移成 build 标准。improve-animations 的execute plan调用会在隔离 worktree 中实现计划然后用review-animations的标准审查其 diff 并给出裁决skills/improve-animations/SKILL.md其审计类别也与审查标准完全对齐AUDIT.md 的八类目的与频率、缓动与时长、物理性与原点、可中断性、性能、无障碍、一致性与 token、错失机会。换句话说这个仓库把什么算好的动效收敛成一套统一 barreview-animations负责把关animate负责按它一次做对improve-animations负责按它审计全仓emil-design-eng负责把它的价值观沉淀为主哲学。无论你在哪个环节工作这套十条标准与 STANDARDS.md 的数值字典都是共同的裁决依据。九、直接可用把它变成你的动效审查工作流将这份技能落到实操最小可用流程是拿到 diff 后先跑一遍升级触发清单做快速扫描greptransition: all、scale(0)、ease-in、keyframes、width|height|margin|padding|top|left的 transition、prefers-reduced-motion、transform-origin对每一处动效问为什么动 / 多常被看到再对照频率表、缓动决策序、时长表给出精确的 Before → After 修复按影响层级组织裁决明确给出 Block 或 Approve所有数值一律引用 STANDARDS.md感受拿不准时不猜值而是把慢动作/逐帧/真实设备检查写进结论用次日新鲜眼光复核。当删掉它是最强修复时就删——这是这套审查哲学里最高频出现的答案。赞分享AI 技能设计系统前端【免费下载链接】skillsSkills for Designers and Engineers.项目地址https://gitcode.com/gh_mirrors/skill2/skills点击查看免费下载相关推荐open-slide 动画审查技能 review-animations十条非协商标准、升级触发与可落地的数值基准open slide 动画审查技能 review animations十条非协商标准、升级触发与可落地的数值基准 本指南围绕仓库中 .agents/skillReact Bits 动画评审方法学:十条不可妥协标准、升级触发器与一套高门槛的 Motion Code 审查框架React Bits 动画评审方法学:十条不可妥协标准、升级触发器与一套高门槛的 Motion Code 审查框架 本文以 react bits 仓库中的 re前端UI组件SurfSense 动画代码评审技能详解review-animations 的十条不可协商标准、升级触发器与 Block/Approve 输出流程SurfSense 动画代码评审技能详解review animations 的十条不可协商标准、升级触发器与 Block/Approve 输出流程 SurfS人工智能AI 应用后端AI Agent网页爬虫RAG深度研究MCP 服务前端上一篇如何用Python实现95%成功率的大麦自动抢票神器告别抢票焦虑的终极指南下一篇PHP-DDD-Cargo-Sample性能优化Doctrine查询优化与缓存策略实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考