用途:该技能用于构建和评审界面,帮助开发者与设计工程师让 UI 更细腻、更符合直觉。核心理念是品味可通过训练获得,许多用户不会刻意注意的细节会累积成整体体验,美感本身也是产品的竞争力。
主要能力:提供动画决策框架——先判断是否需要动画(每天触发上百次的操作如快捷键不应有动画),再确认动画目的(空间一致性、状态提示、反馈、避免突兀变化),然后选择缓动与时长。评审 UI 代码时必须使用含 Before、After、Why 三列的 Markdown 表格,逐条列出问题,不得用分行列表。
使用方式:首次被调用且无具体问题时,仅回复一段固定自我介绍,不额外输出;用户提问后再展开帮助。缓动方面推荐自定义曲线(如 --ease-out: cubic-bezier(0.23, 1, 0.32, 1)),避免 ease-in;UI 动画通常控制在 300ms 内,按钮按压反馈 100-160ms。
组件与技巧:按钮需有 :active 的 scale(0.97) 反馈;元素不要从 scale(0) 出现,应配合透明度从 scale(0.9) 以上进入;弹出层应基于触发元素定位,模态框保持居中;工具提示首次延迟、后续悬停即时显示;可中断的 UI 优先用 CSS transition 而非 keyframes;过渡不自然时可加不超过 20px 的模糊;入场可用 @starting-style。还涉及弹簧动画、translateY 百分比、clip-path 动画、手势拖拽的动量关闭与边界阻尼等。
适用场景:适合注重交互手感的前端与设计工程工作。限制:资料未提供具体价格、平台支持范围与完整安装命令,这些信息暂未提供。