design-motion-principles三大动效大师视角解析：Emil Kowalski、Jakub Krehel与Jhey Tompkins的风格差异与选型指南

【免费下载链接】design-motion-principlesA motion design skill with two modes — build interactive components with purposeful motion, or audit existing animations. Context-aware, per-designer guidance distilled from the published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins.项目地址https://gitcode.com/gh_mirrors/de/design-motion-principles点击查看免费下载design-motion-principles是一款面向 AI 编程助手的动效设计技能motion design skill它内置了 Emil Kowalski、Jakub Krehel、Jhey Tompkins 三位动效大师的设计视角能以Create创建组件和Audit审查动画两种模式为你的项目自动匹配最合适的动效风格。本文带你快速看懂三位大师的风格差异并给出一份可直接套用的选型指南。一、什么是 design-motion-principles这个项目的核心思路很特别它不是提供一套统一规则而是让你同时拥有三位真正意见相左的动效设计师。正如 README.md 中所说Emil 会砍掉 Jhey 想加的动画——这种建设性的张力正是它最有价值的地方。它提供两种工作模式详见 SKILL.md模式做什么工作流文件️Create从零构建带动效的交互组件React、Framer Motion、CSS、HTMLworkflows/create.mdAudit审查现有动效输出带循环演示的 HTML 报告workflows/audit.md安装也非常简单npx skills add kylezantos/design-motion-principles兼容 Claude Code、Cursor、Windsurf 等主流 AI 编程助手。二、三大动效大师风格速览一张表看懂差异项目用一张对比表概括了三位大师的核心差异摘自 emil-kowalski.md维度Emil KowalskiJakub KrehelJhey Tompkins风格定位克制与速度Restraint speed生产级打磨Production polish创意实验Creative experimentation灵魂拷问该不该做动画够不够细腻克制它能变成什么样招牌手法基于交互频率的决策模糊 透明度 位移CSS 自定义属性理想场景高频效率工具已上线的成熟应用学习与创意探索一句话记忆法用Emil 的框架决定动不动用Jakub 的技巧决定怎么动得漂亮用Jhey 的思路决定还能玩出什么花样。三、Emil Kowalski克制与速度——该不该动的裁判Emil 是 Linear 的设计工程师前 Vercel知名开源库 Sonner、Vaul 的作者。他的核心贡献不是怎么动而是知道什么时候不该动详见 emil-kowalski.md。频率法则交互越频繁动效越该少这是 Emil 最具代表性的频率门Frequency Gate交互频率建议罕见每月欢迎 delightful 的形变动画偶尔每天微妙、快速的动画高频每天上百次不带动画或瞬时切换键盘触发永远不带动画他的经典判断像 Raycast 这类全天候使用的工具零动画才是对的——目标明确的用户不期待被取悦他们要的是无摩擦的工作流。速度不可谈判UI 动画通常应保持低于 300ms。180ms 的动画会比 400ms 的更有响应感速度本身就在制造性能感知。拿不准时就选更快的。四、Jakub Krehel生产级打磨——够不够克制的质检员Jakub 的理念可以用一句话概括摘自 jakub-krehel.md最好的动画是让人察觉不到的动画。他的动效标准非常严苛若即若离——用户有意识地注意到动画本身就说明过头了生产就绪——为真实客户项目设计而不是为了演示情境适配——适配浅色模式、各种背景与真实内容他心中最高的赞美是这用起来真舒服而不是哇动画好酷Jakub 的招牌配方技巧使用场景入场三件套opacity translateY blur任何元素出现时模糊营造物质化的质感出场比入场更微妙用户注意力已经转移无需同等强度bounce: 0的弹簧动画生产环境默认bounce 0留给俏皮场景用阴影替代边框浅色模式下比实线边框更自然适用时机当你已通过 Emil 的关卡、确认该动之后交给 Jakub 把它打磨到生产水准。五、Jhey Tompkins创意实验——它还能变成什么样的探索者Jheyjh3yy是 CSS 与创意编码领域的推边界者。他的哲学是通过玩耍来学习详见 jhey-tompkins.md我过去想的是我想学 X怎么把它塞进 Y现在我想的是我想做出 Y能不能为此学 X几条反直觉的信念✅没有坏主意——再奇怪的灵感都先记下来随手记本要放在床头✅无用的 CSS 艺术在教真本事——画 CSS 艺术练出的 clip-path、border-radius、层叠上下文都能迁移到生产环境✅缓动曲线有人格——你不会给银行官网用 Elastic 缓动但儿童活力站点用它可能完美何时切换Jhey 自己给出的边界很清醒jhey-tompkins.md情境做法学新 CSS 特性 / 作品集 / 个人项目放飞创意客户项目切换到Jakub的生产打磨高频效率工具切换到Emil的克制六、选型指南按项目类型直接对号入座项目内置了一张上下文到视角的映射表SKILL.md两种模式都会先按你的项目类型确定主视角 副视角 选择性视角项目类型主视角副视角选择性视角效率工具Linear、Raycast 类EmilJakubJhey仅用于新手引导儿童应用 / 教育JakubJheyEmil高频游戏交互创意作品集JakubJheyEmil高频交互营销落地页JakubJheyEmil表单、导航SaaS 仪表盘EmilJakubJhey空状态页面移动端 AppJakubEmilJhey彩蛋式惊喜电商JakubEmilJhey商品展示对应的时间预算也有明确区分SKILL.mdEmil 主导的项目控制在300ms 以内180ms 为佳Jakub 主导的生产打磨为200-500msJhey 主导则服从效果本身。⚠️ 项目特别强调不要给时长一刀切封顶。一个儿童 App 里用 Emil 的 300ms 铁律、或在银行仪表盘里用 Jhey 的弹性动画都是上下文盲区——这正是 creation-gotchas.md 列出的典型失败模式。七、Audit 模式亮点揪出AI 味动效在 Create 模式之外Audit 模式自带一道反 AI-slop 质量门anti-checklist.md专门识别 AI 生成 UI 的动效指纹包括 脉冲发光指示点pulsing indicators 全页面模糊入场blur-everywhere entrances 万物 hover 放大hover-scale-on-everything 列表 stagger 滥用、工具型按钮弹跳弹簧等每个类别都配有频率启发式——单次有意使用不会误报全代码库同款动画才是问题所在。Audit 完成后默认会输出一份自包含的品牌化 HTML 报告每条 Critical / Important 结论旁都配一个自动循环的 CSS 演示让建议看得见而不是读代码模板参考 report-template.html。加上--terminal参数则可切换为终端内 Markdown 报告适合 CI 场景。八、快速上手与延伸阅读安装后直接用自然语言下达任务即可README.md构建给这个 modal 加一个精致的进出场动画审查审查这个代码库的动效设计请求含糊时技能会主动询问你走 Create 还是 Audit。推荐阅读路径技能总入口模式路由 三大师框架SKILL.md三位大师的完整决策框架emil-kowalski.md、jakub-krehel.md、jhey-tompkins.md全部动效配方库motion-cookbook.md无障碍规范prefers-reduced-motion强制要求accessibility.md性能优化GPU、will-change、布局抖动performance.md版本演进历史CHANGELOG.md总结design-motion-principles 的精髓是把三位大师的分歧变成了生产力Emil 管取舍Jakub 管质感Jhey 管惊喜而你项目所处的上下文决定了谁的权重最高。无论你是要给 SaaS 仪表盘提速还是为儿童应用加点乐趣它都能帮你在动手之前先问对问题——这或许才是动效设计最该被新手记住的一课。赞分享【免费下载链接】design-motion-principlesA motion design skill with two modes — build interactive components with purposeful motion, or audit existing animations. Context-aware, per-designer guidance distilled from the published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins.项目地址https://gitcode.com/gh_mirrors/de/design-motion-principles点击查看免费下载相关推荐Atmosphere EmuMMC 启动崩溃3步排查修复手册Atmosphere EmuMMC 启动崩溃3步排查修复手册 开机后屏幕卡住Atmosphere 的启动流程中断在 EmuMMC 加载阶段黑屏上弹出 Fa固件操作系统嵌入式系统编程goose 多任务编排选型指南Subagents 与 Subrecipes 的差异、决策框架与源码视角goose 多任务编排选型指南Subagents 与 Subrecipes 的差异、决策框架与源码视角 在 goose 中处理复杂项目时把工作拆成多个 AI人工智能大模型AI AgentAI 应用本地部署MCP ClientsMCP 服务工具调用桌面应用CLIts-jest 与 Babel 7 babel/preset-typescript 选型指南六大特性差异与源码级解析ts jest 与 Babel 7 babel/preset typescript 选型指南六大特性差异与源码级解析 导读 Babel 7 于 201测试开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考