用途
该技能用于指导界面设计与工程实践,核心是 Emil Kowalski 的设计工程理念:在软件功能普遍“够用”的时代,品味与细节是差异化关键。它帮助开发者构建“感觉对”的界面,涵盖 UI 打磨、组件设计、动画决策以及那些用户不会刻意注意、却共同决定体验优劣的隐形细节。
主要能力
- 核心哲学:品味是训练出来的,而非天生;隐形细节会累积;美感是一种杠杆。
- 动画决策框架:按顺序回答四个问题——是否应该动画、目的是什么、使用何种缓动、持续多久。
- 组件构建原则:按钮必须有响应感、不要从 scale(0) 开始动画、弹出层应感知触发源、工具提示在后续悬停时跳过延迟、可中断 UI 优先使用 CSS 过渡、用模糊掩盖不完美的过渡、用 @starting-style 处理进入状态。
- CSS 变换技巧:translateY 使用百分比、scale() 会缩放子元素、3D 变换制造深度、transform-origin、clip-path 动画(inset 形状、标签页颜色过渡、长按删除、滚动图片揭示、对比滑块)。
- 手势与拖拽交互:基于动量的关闭、边界阻尼。
- 弹簧动画:何时使用弹簧、基于弹簧的鼠标交互、弹簧配置、可中断性优势。
- 审查格式:审查 UI 代码时必须使用包含 Before/After/Why 列的 markdown 表格。
使用方式
首次调用且无具体问题时,仅回复指定内容,不提供其他信息,直到用户提问。审查 UI 代码时,必须输出包含 | Before | After | Why | 列的单个 markdown 表格,每行一个问题,不得使用分行列表格式。动画决策需按框架顺序回答。缓动曲线建议使用自定义曲线,如 --ease-out: cubic-bezier(0.23, 1, 0.32, 1)、--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)、--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1),并推荐使用 easing.dev 或 easings.co 查找更强的自定义变体。
适用场景
适用于构建和审查 UI 界面、设计组件交互、决定动画策略、优化感知性能、实现手势与拖拽交互等前端设计与工程场景。
限制
资料未提供该技能的具体平台支持范围、收费方式、价格、安装命令或版本信息,这些事实暂未提供。