从目的到落地motion-design-skill四级决策框架完整教程【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skillmotion-design-skill 是一个面向 AI 智能体的通用UI 动效设计原则包把 timing、easing、多元素编排choreography和迪士尼 12 条动画原理翻译成了界面动画的“导演思维”。它的核心是一套四级决策框架先回答“这个动效为什么存在”再依次确定运动个性、运动方向和落地属性。本文带你完整走一遍这条从目的到落地的决策流水线。为什么动效需要先想清楚再做直接让 AI 写动画最常见的翻车方式是所有元素同时线性运动、到处用淡入淡出、没有任何品牌性格。motion-design-skill 的解法是哲学先行、实现无关——在写任何一行代码之前先通过三个支柱和四级决策来锁定设计意图详见 core-philosophy.md支柱要回答的问题决定的参数情感意图观众应该感到什么easing、时长、幅度视觉叙事微故事是什么铺垫 → 动作 → 收束运动工艺如何让它可信物理感、次级运动、路径 记住一句话先定情绪再选属性。下面进入正题——四级决策框架。Level 1确定运动类别它在做什么框架的第一级是把动效归类。不同类别有不同的优先级完整对照表在 decision-framework.md类别适用场景Revealing显现内容出现Concealing隐藏内容消失Transitioning过渡状态/视图之间切换Emphasizing强调吸引注意力Responding响应对交互做出反应Ambient氛围背景氛围在归类之前框架还要求先回答三个前置问题目的提供反馈引导顺序营造氛围、受众高压场景要克制浏览场景可以更丰富、上下文忙碌的布局用简单动效留白多的页面可以大胆。Level 2选择运动个性它像谁第二级是为整个项目选定一个运动个性原型并始终贯彻。四种原型各自的时长、曲线、过冲幅度都有明确规定完整说明见 motion-personality.md原型时长曲线过冲关键词Playful 俏皮150-300msease-out-back10-20%有趣、灵动、可爱Premium 高级350-600mscubic-bezier(0.4,0,0.2,1)0%优雅、克制、奢华Corporate 商务200-400mscubic-bezier(0.2,0,0,1)0-3%干净、专业、仪表盘Energetic 高能100-250msease-out-expo15-30%动感、大胆、兴奋 默认规则UI 组件选 Corporate插画元素选 Playful。品牌动效身份只需锁定三个常量——一条签名曲线覆盖 80% 动画、三档时长快/标准/慢、一种入场模式。Level 3决定运动方向它往哪走运动方向本身就在说话。第三级决策依据方向传达的语义来选择见 decision-framework.md方向传达的含义向上成长、向往向下沉淀、完成向左回退、离开向右前进、抵达向外放大重要性、涌现向内缩小移除、关闭向心聚焦、汇聚离心分发、释放 实用经验前进类导航用向右/向外关闭类操作用向内/向下让运动方向和用户心智模型保持一致。Level 4选择落地属性它怎么实现前三级定完后第四级才轮到具体的动画属性、时长与缓动选型指南见 property-selection.md、时长速查见 timing-easing-tables.md属性选择——效果目标对应属性组合比如入场/离场 → 位移为主 透明度/缩放为辅状态变化 → 透明度 颜色。遵守简洁阈值1 个属性 直接2 个 精致3 个以上 可能过载。时长速查——元素类型时长Tooltip / 微反馈80-120ms按钮按压 / 开关120-180ms卡片入场 / 离场200-350ms弹窗 / 对话框300-400ms页面过渡400-600ms方向性缓动规则——入场用减速ease-out 家族、退场用加速ease-in 家族、屏内运动首尾平滑ease-in-out、循环氛围用正弦曲线。并且入场比退场长 30-50%——用户更关心出现了什么。实战5 步决策快速路径把四级框架压缩成一条日常执行路径出自 decision-framework.md目的反馈 → 短促 ease-out入场 → ease-out退场 → ease-in时长约为入场的 70%氛围 → 慢速正弦循环个性关键词匹配原型fun/bouncy → Playfulelegant/luxury → Premium属性取最小必要集合两个属性是甜点区时长查时长表再按距离和视觉重量调整缓动入 ease-out出 ease-in屏内 ease-in-out循环 sine 多元素场景还有两条三分之一法则任何运动超过 1/3 屏就要加中间关键帧3 个以上元素同时存在时同时活跃的不能超过 1/3stagger 总预算控制在 500ms 以内详见 choreography.md。交付前自检7 项验收清单motion-design-skill 要求动效交付前必须过检核心问题来自 quality-checklist.md目的功能清晰吗个性与品牌/上下文一致吗重复看 100 次还会舒服吗注意力尊重了用户的焦点吗层级强化了重要性排序吗层次主运动 次级运动 氛围层都齐了吗时长与元素类型匹配吗四条绝不触犯的红线空间位移禁用线性缓动重要状态变化禁止只用透明度运动不超过 1/3 屏不加关键帧三个运动层缺一不可。遇到机械感廉价感等问题可对照 troubleshooting.md 查动画坏味道与修复方案。上手方式与资料导航motion-design-skill 支持 40 智能体Claude Code、Cursor、Codex、GitHub Copilot 等在 AI 编码工具中安装后当你编写按钮、卡片、弹窗、加载态、页面过渡或品牌动效时会自动激活。典型提示词比如为这个卡片组件加一个俏皮的入场动画、为表单提交按钮创建 加载 → 成功 → 错误 的状态过渡。核心文件导航主入口与 8 步检查清单SKILL.md四级决策框架全文director/decision-framework.md四大个性原型与品牌身份director/motion-personality.md常用动效配方入场/退场、状态反馈、多元素patterns/时长/缓动速查表reference/timing-easing-tables.md 一句话总结motion-design-skill 的四级决策框架就是把我随手写了个动画变成我像动效导演一样做了决定——先定目的再定个性然后定方向最后才谈实现。【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从目的到落地：motion-design-skill四级决策框架完整教程
从目的到落地motion-design-skill四级决策框架完整教程【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skillmotion-design-skill 是一个面向 AI 智能体的通用UI 动效设计原则包把 timing、easing、多元素编排choreography和迪士尼 12 条动画原理翻译成了界面动画的“导演思维”。它的核心是一套四级决策框架先回答“这个动效为什么存在”再依次确定运动个性、运动方向和落地属性。本文带你完整走一遍这条从目的到落地的决策流水线。为什么动效需要先想清楚再做直接让 AI 写动画最常见的翻车方式是所有元素同时线性运动、到处用淡入淡出、没有任何品牌性格。motion-design-skill 的解法是哲学先行、实现无关——在写任何一行代码之前先通过三个支柱和四级决策来锁定设计意图详见 core-philosophy.md支柱要回答的问题决定的参数情感意图观众应该感到什么easing、时长、幅度视觉叙事微故事是什么铺垫 → 动作 → 收束运动工艺如何让它可信物理感、次级运动、路径 记住一句话先定情绪再选属性。下面进入正题——四级决策框架。Level 1确定运动类别它在做什么框架的第一级是把动效归类。不同类别有不同的优先级完整对照表在 decision-framework.md类别适用场景Revealing显现内容出现Concealing隐藏内容消失Transitioning过渡状态/视图之间切换Emphasizing强调吸引注意力Responding响应对交互做出反应Ambient氛围背景氛围在归类之前框架还要求先回答三个前置问题目的提供反馈引导顺序营造氛围、受众高压场景要克制浏览场景可以更丰富、上下文忙碌的布局用简单动效留白多的页面可以大胆。Level 2选择运动个性它像谁第二级是为整个项目选定一个运动个性原型并始终贯彻。四种原型各自的时长、曲线、过冲幅度都有明确规定完整说明见 motion-personality.md原型时长曲线过冲关键词Playful 俏皮150-300msease-out-back10-20%有趣、灵动、可爱Premium 高级350-600mscubic-bezier(0.4,0,0.2,1)0%优雅、克制、奢华Corporate 商务200-400mscubic-bezier(0.2,0,0,1)0-3%干净、专业、仪表盘Energetic 高能100-250msease-out-expo15-30%动感、大胆、兴奋 默认规则UI 组件选 Corporate插画元素选 Playful。品牌动效身份只需锁定三个常量——一条签名曲线覆盖 80% 动画、三档时长快/标准/慢、一种入场模式。Level 3决定运动方向它往哪走运动方向本身就在说话。第三级决策依据方向传达的语义来选择见 decision-framework.md方向传达的含义向上成长、向往向下沉淀、完成向左回退、离开向右前进、抵达向外放大重要性、涌现向内缩小移除、关闭向心聚焦、汇聚离心分发、释放 实用经验前进类导航用向右/向外关闭类操作用向内/向下让运动方向和用户心智模型保持一致。Level 4选择落地属性它怎么实现前三级定完后第四级才轮到具体的动画属性、时长与缓动选型指南见 property-selection.md、时长速查见 timing-easing-tables.md属性选择——效果目标对应属性组合比如入场/离场 → 位移为主 透明度/缩放为辅状态变化 → 透明度 颜色。遵守简洁阈值1 个属性 直接2 个 精致3 个以上 可能过载。时长速查——元素类型时长Tooltip / 微反馈80-120ms按钮按压 / 开关120-180ms卡片入场 / 离场200-350ms弹窗 / 对话框300-400ms页面过渡400-600ms方向性缓动规则——入场用减速ease-out 家族、退场用加速ease-in 家族、屏内运动首尾平滑ease-in-out、循环氛围用正弦曲线。并且入场比退场长 30-50%——用户更关心出现了什么。实战5 步决策快速路径把四级框架压缩成一条日常执行路径出自 decision-framework.md目的反馈 → 短促 ease-out入场 → ease-out退场 → ease-in时长约为入场的 70%氛围 → 慢速正弦循环个性关键词匹配原型fun/bouncy → Playfulelegant/luxury → Premium属性取最小必要集合两个属性是甜点区时长查时长表再按距离和视觉重量调整缓动入 ease-out出 ease-in屏内 ease-in-out循环 sine 多元素场景还有两条三分之一法则任何运动超过 1/3 屏就要加中间关键帧3 个以上元素同时存在时同时活跃的不能超过 1/3stagger 总预算控制在 500ms 以内详见 choreography.md。交付前自检7 项验收清单motion-design-skill 要求动效交付前必须过检核心问题来自 quality-checklist.md目的功能清晰吗个性与品牌/上下文一致吗重复看 100 次还会舒服吗注意力尊重了用户的焦点吗层级强化了重要性排序吗层次主运动 次级运动 氛围层都齐了吗时长与元素类型匹配吗四条绝不触犯的红线空间位移禁用线性缓动重要状态变化禁止只用透明度运动不超过 1/3 屏不加关键帧三个运动层缺一不可。遇到机械感廉价感等问题可对照 troubleshooting.md 查动画坏味道与修复方案。上手方式与资料导航motion-design-skill 支持 40 智能体Claude Code、Cursor、Codex、GitHub Copilot 等在 AI 编码工具中安装后当你编写按钮、卡片、弹窗、加载态、页面过渡或品牌动效时会自动激活。典型提示词比如为这个卡片组件加一个俏皮的入场动画、为表单提交按钮创建 加载 → 成功 → 错误 的状态过渡。核心文件导航主入口与 8 步检查清单SKILL.md四级决策框架全文director/decision-framework.md四大个性原型与品牌身份director/motion-personality.md常用动效配方入场/退场、状态反馈、多元素patterns/时长/缓动速查表reference/timing-easing-tables.md 一句话总结motion-design-skill 的四级决策框架就是把我随手写了个动画变成我像动效导演一样做了决定——先定目的再定个性然后定方向最后才谈实现。【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考