这款Skill让页面变化有迹可循

为界面设计添加有目的的动画效果。

Impeccable 的 animate 是为界面设计并实现动效的 Skill。它帮助 AI 用运动说明状态、位置关系和操作反馈,让用户看清刚才的动作带来了什么变化。

比如列表布局改变时,元素直接消失再出现,可能让人找不到原来的位置。恰当的移动能保留前后关系;按钮操作后的反馈,则应该尽快确认结果,不让人为了看动画等下去。

它先检查已有动效语言、目标设备和性能限制,再决定哪些地方值得动、用什么方式实现。简单状态变化可以用现有样式能力,复杂的打断和时序才考虑相应工具,不为每个效果都增加依赖。

实现以后还要试快速重复操作、途中改变状态,以及减少动态效果的系统偏好。原生应用有对应的平台指导,网页则有自己的实现与验证路径。给它明确的交互任务,比一句“全站加点动画”更能得到有用的结果。

分类:设计创作

来源仓库:pbakaus/impeccable

适合用来做什么

  • 请帮我设计一个按钮的动画效果。
  • 我们如何为这个界面添加过渡动画?

安装 animate

npx skills add https://www.iskills.cc/skills/pbakaus/impeccable/animate/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 animate 的用途与原始说明

浏览全部 Skill 指南