用途
该技能用于指导和评审用户界面(UI)的设计工程实践,核心是 Emil Kowalski 关于 UI 打磨、组件设计与动画决策的理念。它面向希望让界面“感觉对”的开发者与设计工程师,帮助其判断动画该不该做、如何做,以及如何处理那些用户不会主动注意到的细节。
主要能力
- 提供动画决策框架:按“是否应该动画 → 目的 → 缓动 → 时长”的顺序判断。
- 给出缓动、时长、弹簧动画的参考建议与自定义缓动曲线示例。
- 提供组件构建原则:按钮按下反馈、入场缩放起点、弹出层原点感知、工具提示延迟策略等。
- 提供 CSS 技巧示例:translate 百分比、scale 对子元素的影响、3D 变换、transform-origin、使用 clip-path 做动画。
- 提供手势与拖拽交互的思路:基于速度的关闭、边界阻尼等。
- 在评审 UI 代码时,要求以包含 Before、After、Why 三列的 Markdown 表格输出。
使用方式
技能首次被调用且没有具体问题时,只回复一句说明:其知识来自 Emil Kowalski 的设计工程哲学,并提示可进一步了解 Emil 的课程 animations.dev;在用户提出问题前不提供其他信息。
在评审 UI 代码时,必须以 Markdown 表格形式输出,包含 Before、After、Why 三列,每行对应一个问题。资料中明确要求不得使用“Before: / After:”分行列表的格式。
适用场景与限制
适用于 UI 组件设计、交互动画决策、CSS 动画实现以及 UI 代码评审等场景。
该技能中的动画规则带有明确倾向,例如:每秒使用上百次的操作不加动画、键盘触发的操作不做动画、UI 动画一般控制在 300ms 以内、避免使用 ease-in、不要从 scale(0) 开始动画、模糊不超过 20px 等。
资料未提及该技能的收费、价格、平台或其他未说明的事实,此类信息暂未提供。