用途
该技能旨在将 Emil Kowalski 的设计工程理念转化为可执行的界面构建与审查指导，帮助开发者做出更注重细节与质感的 UI。首次被调用且用户未提出具体问题时，技能要求只回复一句声明，不提供其他信息，直到用户提问。之后即以具备工艺敏感度的设计工程师身份参与工作，强调“品味是训练出来的，而非天生”。
核心哲学
- 品味是可训练的：好的品味不是个人偏好，而是训练出的直觉，需要研究优秀作品、深究“为什么好”、持续练习。
- 不可见细节会累积：多数细节用户不会刻意注意，但当功能完全符合预期，用户会毫无停顿地继续操作，这正是目标。
- 美是杠杆：人们基于整体体验而非单纯功能选择工具，好的默认值与动画是真实差异点。
主要能力
动画决策框架
按顺序回答四个问题：
- 是否应动画化：根据频率决策——每天 100 次以上（键盘快捷键、命令面板开关）完全不做动画；每天数十次（悬停、列表导航）移除或大幅减少；偶发（模态、抽屉、提示）标准动画；罕见/首次（引导、反馈表单、庆祝）可增加愉悦感。永远不要为键盘触发的操作加动画。
- 目的是什么：有效目的包括空间一致性、状态指示、解释说明、反馈、防止突兀变化；若只为“看起来酷”且用户常看到，则不做。
- 使用何种缓动：进入→ease-out；屏幕上移动/变形→ease-in-out；悬停/颜色变化→ease；持续运动→linear；默认→ease-out。关键是要使用自定义缓动曲线，内置 CSS 缓动太弱，绝不在 UI 动画中使用 ease-in。
- 多快：按钮按压反馈 100-160ms；工具提示与小浮层 125-200ms；下拉与选择 150-250ms；模态与抽屉 200-500ms；营销/解释可更长。规则是 UI 动画应低于 300ms。
感知性能
快速旋转的加载指示器让加载感觉更快；180ms 的选择动画比 400ms 更灵敏；首个工具提示打开后，后续即时显示（跳过延迟与动画）让工具栏整体感觉更快。感知速度与实际速度同样重要。
弹簧动画
弹簧比基于时长的动画更自然，适合带惯性的拖拽、应感觉“有生命”的元素、可中途打断的手势、装饰性鼠标追踪。推荐 Apple 式配置 { type: "spring", duration: 0.5, bounce: 0.2 }，或传统物理配置 { type: "spring", mass: 1, stiffness: 100, damping: 10 }；弹跳保持微妙（0.1-0.3），多数 UI 场景避免弹跳。弹簧在被打断时保持速度，而 CSS 动画与关键帧会从零重启。鼠标交互中可使用 Motion（原 Framer Motion）的 useSpring 让数值变化带弹簧行为，而非立即更新。
组件构建原则
- 按钮必须有响应：在
:active上加transform: scale(0.97)，缩放保持微妙（0.95-0.98）。 - 绝不要从
scale(0)动画：起始用scale(0.9)以上并配合opacity，示例为transform: scale(0.95); opacity: 0。 - 浮层需感知来源：应自触发元素缩放进入，使用
transform-origin: var(--transform-origin)；例外是模态，保持居中。 - 工具提示：后续悬停跳过延迟与动画，示例包含
transition: transform 125ms ease-out, opacity 125ms ease-out;与[data-instant]时长为 0ms。 - 可打断 UI 优先用 CSS 过渡而非关键帧。
- 用模糊掩盖不完美过渡：交叉淡入淡出时添加
filter: blur(2px)，模糊保持在 20px 以下，Safari 中重模糊代价高。 - 使用
@starting-style驱动进入状态，浏览器支持不足时回退到data-mounted属性模式。
CSS 变换掌握
translateY使用百分比：百分比相对元素自身尺寸，如translateY(100%)按自身高度移动，优于硬编码像素。scale()也会缩放子元素，这是特性不是缺陷。- 3D 变换：
rotateX()、rotateY()配合transform-style: preserve-3d可实现环绕动画、掷硬币与深度效果。 - 每个元素都有变换锚点，默认为 center，应按触发元素位置设置。
clip-path 动画
clip-path: inset(top right bottom left) 定义矩形裁剪区域。可用于从左到右揭示覆盖层、标签页完美颜色过渡（复制标签列表、将副本样式设为激活态并裁剪、在切换时动画裁剪）、长按删除模式（激活时 2s linear 过渡到完全显示，松开时 200ms ease-out 弹回，并加 scale(0.97)）、滚动图片揭示、对比滑块等。
手势与拖拽交互
- 基于惯性的关闭：计算速度
Math.abs(dragDistance) / elapsedTime，若速度超过约 0.11 即关闭，无需拖过阈值。 - 边界阻尼：拖过自然边界时越拖移动越少。
使用方式
作为技能加载后，按其框架审查或编写 UI 代码。审查 UI 代码时必须使用 Before/After/Why 三列的 Markdown 表格，每行一个问题，Why 列简要说明理由；明确禁止使用分行 “Before:” / “After:” 的列表格式。
适用场景
适用于前端界面开发、组件设计、动画决策、UI 代码审查，以及任何追求交互细节与感知性能打磨的设计工程任务；示例涉及 Raycast 式无开关动画、Sonner 提示定位、Vaul 抽屉隐藏等。
限制
原始资料未提供该技能的安装命令、平台支持、收费信息或版本要求，这些内容暂未提供。