SuperAPI AI 工具集

design-motion-principles

设计与创作

查看项目

更新于 10-16 01:08

技能介绍

用途:这是一个动效与交互设计技能,供 AI 编程助手在构建组件或审查动画时调用。它把 Emil Kowalski(克制与速度)、Jakub Krehel(成品打磨)、Jhey Tompkins(创意实验)三种动效哲学作为“镜头”,按项目语境加权,而不是到处套用同一种风格。

主要能力:两种模式。Create 模式先做项目语境发现与镜头加权,再生成带动效的交互组件(React、Framer Motion、CSS 或 HTML),并应用合适的配方、无障碍与性能默认值。Audit 模式先侦察项目,做动效缺口分析(找出该动效却没动效的 UI),对照反 AI 套路清单检查,提出镜头加权建议,输出带品牌的 HTML 报告或终端 Markdown 报告。触发语如“Add animation to this modal”“Audit the motion design”等,歧义时技能会主动询问。

使用方式:安装命令为 npx skills add kylezantos/design-motion-principles,兼容 Claude Code、Cursor、Windsurf 等 AI 编程助手。Audit 模式默认将 HTML 报告写入 motion-audits/ 并在浏览器打开;加 --terminal 可改为内联 Markdown。可用 MOTION_AUDIT_NO_BROWSER=1、MOTION_AUDIT_TERMINAL=1 调整默认行为,无需配置文件。

适用场景:生产力工具/仪表盘以 Emil 为主、Jakub 为辅;儿童教育类应用以 Jakub 为主、Jhey 为辅;营销站点以 Jhey 为主、Jakub 为辅。

限制:所有行为由项目语境驱动;报告内容与镜头加权依赖对项目的侦察,具体框架与平台支持范围以实际技能为准。该技能是对上述设计师理念的解读,未获其本人背书。以 MIT 许可发布。缺失事实(如收费、价格细节)暂未提供。