用途:该技能将 Emil Kowalski 的设计工程理念编码为可复用的审查与构建指南,聚焦 UI 打磨、组件设计与动画决策,帮助判断界面为何“感觉好”。
主要能力:提供动画决策框架(是否该动画、目的、缓动、时长),组件构建原则(按钮按压反馈、避免从 scale(0) 进入、popover 原点感知、tooltip 跳过延迟、用 CSS transition 而非 keyframes、用 blur 掩盖过渡瑕疵、@starting-style 进入动画),CSS transform 技巧(translateY 百分比、scale 缩放子元素、3D 变换、transform-origin、clip-path 动画),以及手势与拖拽交互(动量关闭、边界阻尼、指针捕获、多点触控保护)。审查 UI 代码时必须输出含 Before/After/Why 列的 markdown 表格。
使用方式:在审查或构建界面时按框架逐项判断;缓动优先使用自定义曲线,如 --ease-out: cubic-bezier(0.23, 1, 0.32, 1);弹簧动画可用 useSpring(来自 framer-motion)。
适用场景:组件库、交互细节打磨、动画性能与感知优化、手势交互设计。
限制:资料未提供安装命令、收费与平台信息;部分浏览器特性(如 @starting-style)需考虑兼容回退。