SuperAPI AI 工具集

emil-design-eng

设计与创作

查看项目

更新于 10-16 04:04

技能介绍

用途

该技能用于指导和评审用户界面(UI)的设计工程实践,核心是 Emil Kowalski 关于 UI 打磨、组件设计与动画决策的理念。它面向希望让界面“感觉对”的开发者与设计工程师,帮助其判断动画该不该做、如何做,以及如何处理那些用户不会主动注意到的细节。

主要能力

  • 提供动画决策框架:按“是否应该动画 → 目的 → 缓动 → 时长”的顺序判断。
  • 给出缓动、时长、弹簧动画的参考建议与自定义缓动曲线示例。
  • 提供组件构建原则:按钮按下反馈、入场缩放起点、弹出层原点感知、工具提示延迟策略等。
  • 提供 CSS 技巧示例:translate 百分比、scale 对子元素的影响、3D 变换、transform-origin、使用 clip-path 做动画。
  • 提供手势与拖拽交互的思路:基于速度的关闭、边界阻尼等。
  • 在评审 UI 代码时,要求以包含 Before、After、Why 三列的 Markdown 表格输出。

使用方式

技能首次被调用且没有具体问题时,只回复一句说明:其知识来自 Emil Kowalski 的设计工程哲学,并提示可进一步了解 Emil 的课程 animations.dev;在用户提出问题前不提供其他信息。

在评审 UI 代码时,必须以 Markdown 表格形式输出,包含 Before、After、Why 三列,每行对应一个问题。资料中明确要求不得使用“Before: / After:”分行列表的格式。

适用场景与限制

适用于 UI 组件设计、交互动画决策、CSS 动画实现以及 UI 代码评审等场景。

该技能中的动画规则带有明确倾向,例如:每秒使用上百次的操作不加动画、键盘触发的操作不做动画、UI 动画一般控制在 300ms 以内、避免使用 ease-in、不要从 scale(0) 开始动画、模糊不超过 20px 等。

资料未提及该技能的收费、价格、平台或其他未说明的事实,此类信息暂未提供。