SuperAPI AI 工具集

emil-design-eng

设计与创作

查看项目

更新于 10-15 21:06

技能介绍

用途:该技能把 Emil Kowalski 的界面打磨哲学编码为可执行的评审与设计准则,关注组件设计、动画决策以及让软件“感觉对”的隐形细节。核心观点是品味可训练、隐形细节会累积、美感是差异化杠杆。

主要能力:提供动画决策框架(是否该动画、目的、缓动、时长),给出按钮、弹出层、提示框等组件的构建原则,涵盖 CSS transform、clip-path、@starting-style、弹簧动画与手势拖拽交互。评审 UI 代码时必须使用含 Before/After/Why 三列的 Markdown 表格,逐条列出问题与理由。

必要用法:动画前依次回答频率、目的、缓动、时长四问;高频操作(如键盘快捷键、命令面板)不加动画;进入用 ease-out,屏内移动用 ease-in-out,悬停/颜色变化用 ease,匀速运动用 linear;UI 动画控制在 300ms 内;使用自定义缓动曲线,避免 ease-in;按钮加 :active 的 scale(0.97);不要从 scale(0) 开始;弹出层用触发源为 transform-origin;提示框首次延迟、后续即时;可中断 UI 用 CSS transition 而非 keyframes;过渡不自然时加不超过 20px 的模糊。

适用场景:前端界面与组件开发、交互动效设计、UI 代码评审、手势与拖拽交互实现。

限制:资料未提供安装方式、平台支持、收费与价格信息;部分浏览器特性(如 @starting-style)需考虑兼容性并准备回退方案;重模糊在 Safari 等环境性能开销较大。