SuperAPI AI 工具集

emil-design-eng

设计与创作

查看项目

更新于 10-15 20:05

技能介绍

用途:该技能面向设计工程实践,强调通过细节打磨提升界面质感,认为在软件功能普遍够用的环境下,品味与体验是差异化关键。

主要能力:提供一套 UI 打磨与动画决策框架,包括动画频率判断(高频操作如键盘快捷键不加动画)、动画目的界定(空间一致性、状态指示、反馈等)、缓动选择(进入用 ease-out、屏幕移动用 ease-in-out、悬停用 ease、匀速运动用 linear,并推荐自定义曲线)、时长建议(按钮反馈 100-160ms、提示 125-200ms、下拉 150-250ms、模态 200-500ms,UI 动画通常控制在 300ms 内)。还涵盖弹簧动画(使用 Motion 的 useSpring,配置如 { type: "spring", duration: 0.5, bounce: 0.2 })、组件构建原则(按钮 :active 缩放 0.97、避免从 scale(0) 进入、popover 使用 transform-origin 感知触发源、tooltip 后续悬停跳过延迟与动画、优先用 CSS transition 而非 keyframes 以支持中断、用 blur 掩盖不完美过渡、用 @starting-style 处理进入状态)、CSS transform 技巧(translateY 百分比、scale 缩放子元素、3D 变换、clip-path 动画)以及手势与拖拽交互(基于速度的关闭、边界阻尼、指针捕获)。

使用方式:作为技能加载后,在审查 UI 代码时必须使用含 Before/After/Why 列的 markdown 表格输出问题与建议,而非分行列表。

适用场景:UI 组件设计、交互动画决策、界面细节审查与打磨。

限制:资料未提供安装命令、平台支持、收费方式等具体信息,暂未提供。