Impeccable 动画指南为 AI 设计工作流编写有目的、克制且可无障碍访问的 motion【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本篇文章是 Impeccable 设计技能中animate命令对应的完整操作指南。它以 skill/reference/animate.md 为骨架结合仓库内的 craft-floor.md、delight.md、polish.md 等关联参考文档以及 foundation/src/css/scan.rs 等检测器源码讲解如何在 Web 与原生界面中为 motion 找到工作、确立动效论点motion thesis、选择有意义的材质、校准时序与缓动、按运行时实现并最终通过无障碍与性能验证。读完你会获得一套可直接执行的动效决策框架与验收清单并在最后交给impeccable polish完成终审。animate 命令在 Impeccable 工作流中的位置Impeccable 是仓库根目录skill/SKILL.src.md定义的一套设计技能通过impeccable verb命令如craft、shape、critique、polish、animate驱动。在命令表中animate的定位是Enhance — Add purposeful animations and motion — 参考文档 reference/animate.md配套的命令元数据位于 skill/scripts/command-metadata.json其中animate的描述为Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.使用场景用户提到添加动画、过渡、微交互、动效设计、悬停效果或希望界面更有生命力。也就是说animate不是给页面加动画的通用指令而是先审查、后增强先判定当前界面里哪些地方配得上 motion再只在这些地方注入有目的的运动。这个基调贯穿整篇参考文档——动效的默认态度是克制而不是堆砌。与它相邻的两个命令需要分清边界delightreference/delight.md负责品牌个性与情感时刻其中对于需要创作的 motion加载 animate.md即动效是 delight 的实现手段之一polishreference/polish.md是终审流程animate文档的收尾明确写着当 motion 赢得了自己的位置交给{{command_prefix}}impeccable polish做最后一遍检查。开场原则motion 解释关系而非装饰参考文档的第一句就划定了边界Additional context needed: performance constraints.需要补充的上下文性能约束。这句话是运行该参考文档时的输入条件动效决策高度依赖目标设备的性能预算因此在开始之前要尽可能确认运行环境与性能上限无法从现有信息推断时再向用户提问。紧接着是整份文档的题眼Use motion to explain state, relationship, and hierarchy, or to create one authored moment the surface has earned. Decoration without purpose is animation debt.motion 只被允许做两件事解释状态、关系与层级——用户需要看懂发生了什么、它和别的元素什么关系、谁更重要创造一个页面配得上的、经过作者刻意编排的时刻——这是focal moment焦点时刻的雏形。反之没有目的的装饰被直接定性为animation debt动画债。这个债务观与 craft-floor.md 的 Motion 检查项一脉相承one authored moment, not scattered effects and not one identical entrance on every section一个作者时刻而不是零散效果、也不是每个区块都套同一个入场动画。按访客模式决定 motion 的分量Impeccable 用四种访客模式Visitor mode命名一个界面面向的访客成功形态见 SKILL.src.md。animate文档按模式给出了 motion 的不同权重模式motion 的定位Persuade Experience说服 体验motion 可以承载品牌声音优先做一个排练过的焦点序列而不是在每个区块重复 revealOperate Read操作 阅读motion 服务于反馈、状态与连续性例行过渡必须快速不能强迫用户等待整页加载的编排Nativeios/android/adaptive遵循 ios.md 或 android.md 的 Motion 章节包括平台自身的 Reduce Motion 行为不使用下面的 Web 工具在 Persuade/Experience 界面上motion 是voice声音的一部分可以做文章在 Operate/Read 界面上motion 是feedback反馈必须让位给任务速度。而原生平台iOS/Android则完全交给平台规范——例如 ios.md 的 Motion 章节要求系统转场push 滑动、sheet 升起、dismiss 反向优先自定义转场不得对抗导航模型且必须遵循 iOS 的 Reduce Motion用 crossfade 代替视差与大幅滑动android.md 也要求 Material 化之外在 iPhone 硬件上仍然兑现 iOS 的系统保证safe-area、Reduce Motion、edge-swipe back。Web 端的那套 CSS/JS 工具在原生路径上不适用。Find the job先找出 motion 的工作找活干是执行animate的第一步检查现有的 motion 语言、交互状态、目标设备与性能预算然后只找那些 motion 能发挥作用的点acknowledge an action确认一个动作被响应make a state change or spatial relationship legible让状态变化或空间关系变得可读preserve continuity through navigation or layout change在导航或布局变化中保持连续性direct attention at a meaningful moment在重要时刻引导注意力embody the selected visual world体现所选视觉世界。只有当某个材料性约束无法推断时才提问不要因为页面某个静态区域存在就去动画它。这句do not animate a static area merely because it exists是反堆砌的核心指令——先审查、再增强的顺序在这里落地。Set the motion thesis先写计划再动手在实现之前写下一份简短计划包含四个要素Focal moment焦点时刻唯一值得作者刻意编排的序列或交互如果有的话Continuity连续性需要被解释的状态、布局或导航变化Feedback反馈需要被确认的控件与结果Budget预算哪些效果可能昂贵、它们多久运行一次。文档特别强调The focal moment must come from this product and surface concept——焦点时刻必须来自这个产品与这个界面的概念。一个通用的 fade-and-rise、hover lift、视差层或滚动 reveal不是论点。这呼应了 delight.md 中Derive the treatment from product mechanism and visual world, not a stock catalog的要求素材必须源自产品机制与视觉世界而不是现成目录。Choose material by meaning让属性承载语义transform与opacity是可靠的基础但不是全部调色板。参考文档按过渡要传达什么来选属性要传达的语义可用的材质Continuity and relationship连续性与关系共享元素shared-element动效、FLIP 式 transform、View Transitions、有意的空间位移Focus and depth焦点与深度有界的模糊bounded blur、filter、backdrop、光照或阴影变化Reveal and composition揭示与构图mask、clip-path、裁剪、受控遮挡Material and energy材质与能量颜色、渐变位置、纹理、扭曲或 shader 效果当视觉世界与运行时支持时State and feedback状态与反馈让因果关系不容误解的最小变化两个纪律不要为了奇观而叠加技巧——One strong material idea, carried through the focal sequence and quiet supporting states, is usually enough一个强大的材质想法贯穿焦点序列与安静的支持状态通常就足够了。craft-floor.md 也把 blur、backdrop-filter、clip-path、mask 和 shadow 明确纳入调色板前提是保持流畅。兄弟元素错峰sibling stagger只在列表以列表身份出现时适用——需要给总延迟设上限并且永远不要把每个滚动区块都重新解释成错峰列表。这条不要给每个滚动区块都做 stagger与 craft-floor.md 的not one identical entrance on every section是同一原则的两面重复的入场动画恰恰是 AI 生成界面最典型的 slop 信号。Timing and easing用时长表达距离与后果参考文档给出的时长对照表需要完整继承时长典型用途100–150 ms即时反馈150–300 ms例行状态变化300–500 ms布局、遮罩或视图过渡500–800 ms经过刻意编排的焦点入场三条配套规则出场比入场更快Exit faster than entrance使用自然的减速曲线例如cubic-bezier(0.16, 1, 0.3, 1)传达自信的到达——这正是 craft-floor.md 提到的exponential ease-out曲线的具体形态也是 Impeccable 的测试夹具 motion.html 中正面示例animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1)使用的曲线不要习惯性使用 bounce 或 elastic 曲线——负面示例 motion.html 中的animation: bounce-keyframe 1s infinite正是要拦截的弹跳动画。最后一句值得反复强调Long feedback feels like latency——过长的反馈在用户感知中就是卡顿。这也是为什么 Operate/Read 模式要求例行过渡必须快。Implement to the runtime按运行时选择实现手段参考文档把 Web 实现手段按用途分层CSS transitions 与 keyframes用于声明式的状态与有界的序列Web Animations API 或项目现有的动效库用于中断interruption、编排与动态值View Transitions 或共享元素技术当跨状态的连续性是核心诉求滚动驱动动效scroll-driven motion只有当滚动关系本身承载意义时才使用且必须有稳健的降级方案不要为一个现有技术栈能干净表达的效果引入依赖。实现纪律同样明确默认状态保持内容可见——即使脚本失败页面也不能因此被隐藏避免随手动画布局驱动属性width、height、top、left、margin——改用 FLIP、transform 或 grid 技术。这条与 optimize.md 中Avoid casual animation of layout-driving properties以及avoid animations that cause layout shifts的规则完全一致把 blur、filter、shadow、canvas、shader 工作限定在隔离区域bounded regions只在已知动画期间使用will-change不要全局声明在目标视口与设备上实测而不是假设 transform 就一定快——Measure on target viewports and devices rather than assuming transform means fast。Accessibility and control尊重用户的运动偏好无障碍部分是 motion 的硬性验收项尊重自动播放与声音偏好任何非必要的循环动画在离开屏幕或隐藏时必须停止每个 Web 动画都需要一条prefers-reduced-motion路径且必须提供有意的替代方案移除或减少空间位移spatial movement同时保留承载意义的 opacity、color 与状态过渡关键认知是Reduced motion means fewer and gentler animations, not disabling all motion——减少动效不等于禁用全部动效确认动作的反馈必须仍然可读。这条原则在检测器源码层面有直接对应crates/foundation/src/css/scan.rs中的strip_reduced_motion_blocks函数会定位media (prefers-reduced-motion: reduce)块并剥离其内容源码注释标明它对应 JS 的checks.mjs#stripReducedMotionBlocks说明 Impeccable 的质量检测机制本身就把 reduced-motion 区块当作一个需要专门解析、单独看待的 CSS 结构。原生路径上同样要求遵循平台行为iOS 的 Reduce Motioncrossfade 代替视差与大幅滑动见 ios.md、Android 的系统 Reduce Motion 设置见 android.md。Verify七项验收清单实现完成后参考文档要求逐项核对焦点动效特定于所选的视觉世界与界面不是换一个产品也能原样套用每个辅助动画都在解释反馈、状态或关系中断与重复使用行为正确动画被再次触发、被打断时应正常桌面、移动与键盘路径仍然可用prefers-reduced-motion路径减少了位移但没有抹掉有意义的反馈或状态变化昂贵效果在目标设备上保持流畅移除某个动画会损失意义或作者性格而不仅仅是损失装饰。最后一条是克制的最终裁决如果一个动画可以被删掉且什么都不损失那它从一开始就不该存在。这也与 delight.md 的验证项去掉装饰后界面仍然快速且不言自明相互印证。与质量底线Craft floor的呼应skill/reference/craft-floor.md 在Verify部分对 Motion 给出了同一套底线的压缩表达可以作为动效完成的快速自查Motion: 一个作者时刻而不是零散效果也不是每个区块同一个入场从已可见的默认状态做指数级 ease-out材质调色板要突破 transform 与 opacity——blur、backdrop-filter、clip-path、mask、shadow 在保持流畅时都属于调色板。此外craft-floor.md 的gemini段落有一条专门针对动效的反模式Never animate an image on hover, directly or through its parent——图片不是动作目标给容器做反馈。这可以看作对找活干的补充hover 动画的目标应该是可交互的控件而不是图片本身。完整流程一瞥把上面各节串起来一次animate的执行路径是确认性能约束与运行环境必要时提问按访客模式Persuade/Experience 还是 Operate/Read或原生平台路径确定 motion 的分量检查现有动效语言、交互状态与目标设备找出 motion 真正的工作Find the job写下 motion thesis焦点时刻、连续性、反馈、预算按语义选择材质连续性/深度/揭示/能量/反馈不叠加技巧按时长表与缓动曲线校准时序出场快于入场按运行时实现CSS 优先WAAPI 处理中断View Transitions 处理跨状态连续性避免布局属性动画与不必要的依赖落实prefers-reduced-motion替代路径并保持默认状态内容可见逐项跑完七项验收清单确认 motion 配得上自己的位置后交给impeccable polish做最终质量收尾。如果处理的是原生界面ios/android/adaptive步骤 3 之后直接进入对应平台参考文档的 Motion 章节遵循平台转场与 Reduce Motion 行为Web 工具链不参与。结论animation debt 与赢得动画回到文档开头的题眼motion 要么解释状态、关系与层级要么创造一个页面配得上的作者时刻——其余都是动画债。Impeccable 对动效的全部约束按模式定位、先写论点、材质承载语义、时长表达后果、reduced-motion 有意的替代、移除即损失的验收都在为同一件事服务让 AI 生产界面里的每一个动画都赢得自己的位置。当你确认动效已经赢得位置就把它交给 polish.md 定义的最后一遍检查而在整个过程中craft-floor.md 的质量底线会兜住一个作者时刻、指数级 ease-out、材质超越 transform/opacity这些机械性红线让你把精力留给方向而非重复踩坑。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable 动画指南：为 AI 设计工作流编写有目的、克制且可无障碍访问的 motion
Impeccable 动画指南为 AI 设计工作流编写有目的、克制且可无障碍访问的 motion【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本篇文章是 Impeccable 设计技能中animate命令对应的完整操作指南。它以 skill/reference/animate.md 为骨架结合仓库内的 craft-floor.md、delight.md、polish.md 等关联参考文档以及 foundation/src/css/scan.rs 等检测器源码讲解如何在 Web 与原生界面中为 motion 找到工作、确立动效论点motion thesis、选择有意义的材质、校准时序与缓动、按运行时实现并最终通过无障碍与性能验证。读完你会获得一套可直接执行的动效决策框架与验收清单并在最后交给impeccable polish完成终审。animate 命令在 Impeccable 工作流中的位置Impeccable 是仓库根目录skill/SKILL.src.md定义的一套设计技能通过impeccable verb命令如craft、shape、critique、polish、animate驱动。在命令表中animate的定位是Enhance — Add purposeful animations and motion — 参考文档 reference/animate.md配套的命令元数据位于 skill/scripts/command-metadata.json其中animate的描述为Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.使用场景用户提到添加动画、过渡、微交互、动效设计、悬停效果或希望界面更有生命力。也就是说animate不是给页面加动画的通用指令而是先审查、后增强先判定当前界面里哪些地方配得上 motion再只在这些地方注入有目的的运动。这个基调贯穿整篇参考文档——动效的默认态度是克制而不是堆砌。与它相邻的两个命令需要分清边界delightreference/delight.md负责品牌个性与情感时刻其中对于需要创作的 motion加载 animate.md即动效是 delight 的实现手段之一polishreference/polish.md是终审流程animate文档的收尾明确写着当 motion 赢得了自己的位置交给{{command_prefix}}impeccable polish做最后一遍检查。开场原则motion 解释关系而非装饰参考文档的第一句就划定了边界Additional context needed: performance constraints.需要补充的上下文性能约束。这句话是运行该参考文档时的输入条件动效决策高度依赖目标设备的性能预算因此在开始之前要尽可能确认运行环境与性能上限无法从现有信息推断时再向用户提问。紧接着是整份文档的题眼Use motion to explain state, relationship, and hierarchy, or to create one authored moment the surface has earned. Decoration without purpose is animation debt.motion 只被允许做两件事解释状态、关系与层级——用户需要看懂发生了什么、它和别的元素什么关系、谁更重要创造一个页面配得上的、经过作者刻意编排的时刻——这是focal moment焦点时刻的雏形。反之没有目的的装饰被直接定性为animation debt动画债。这个债务观与 craft-floor.md 的 Motion 检查项一脉相承one authored moment, not scattered effects and not one identical entrance on every section一个作者时刻而不是零散效果、也不是每个区块都套同一个入场动画。按访客模式决定 motion 的分量Impeccable 用四种访客模式Visitor mode命名一个界面面向的访客成功形态见 SKILL.src.md。animate文档按模式给出了 motion 的不同权重模式motion 的定位Persuade Experience说服 体验motion 可以承载品牌声音优先做一个排练过的焦点序列而不是在每个区块重复 revealOperate Read操作 阅读motion 服务于反馈、状态与连续性例行过渡必须快速不能强迫用户等待整页加载的编排Nativeios/android/adaptive遵循 ios.md 或 android.md 的 Motion 章节包括平台自身的 Reduce Motion 行为不使用下面的 Web 工具在 Persuade/Experience 界面上motion 是voice声音的一部分可以做文章在 Operate/Read 界面上motion 是feedback反馈必须让位给任务速度。而原生平台iOS/Android则完全交给平台规范——例如 ios.md 的 Motion 章节要求系统转场push 滑动、sheet 升起、dismiss 反向优先自定义转场不得对抗导航模型且必须遵循 iOS 的 Reduce Motion用 crossfade 代替视差与大幅滑动android.md 也要求 Material 化之外在 iPhone 硬件上仍然兑现 iOS 的系统保证safe-area、Reduce Motion、edge-swipe back。Web 端的那套 CSS/JS 工具在原生路径上不适用。Find the job先找出 motion 的工作找活干是执行animate的第一步检查现有的 motion 语言、交互状态、目标设备与性能预算然后只找那些 motion 能发挥作用的点acknowledge an action确认一个动作被响应make a state change or spatial relationship legible让状态变化或空间关系变得可读preserve continuity through navigation or layout change在导航或布局变化中保持连续性direct attention at a meaningful moment在重要时刻引导注意力embody the selected visual world体现所选视觉世界。只有当某个材料性约束无法推断时才提问不要因为页面某个静态区域存在就去动画它。这句do not animate a static area merely because it exists是反堆砌的核心指令——先审查、再增强的顺序在这里落地。Set the motion thesis先写计划再动手在实现之前写下一份简短计划包含四个要素Focal moment焦点时刻唯一值得作者刻意编排的序列或交互如果有的话Continuity连续性需要被解释的状态、布局或导航变化Feedback反馈需要被确认的控件与结果Budget预算哪些效果可能昂贵、它们多久运行一次。文档特别强调The focal moment must come from this product and surface concept——焦点时刻必须来自这个产品与这个界面的概念。一个通用的 fade-and-rise、hover lift、视差层或滚动 reveal不是论点。这呼应了 delight.md 中Derive the treatment from product mechanism and visual world, not a stock catalog的要求素材必须源自产品机制与视觉世界而不是现成目录。Choose material by meaning让属性承载语义transform与opacity是可靠的基础但不是全部调色板。参考文档按过渡要传达什么来选属性要传达的语义可用的材质Continuity and relationship连续性与关系共享元素shared-element动效、FLIP 式 transform、View Transitions、有意的空间位移Focus and depth焦点与深度有界的模糊bounded blur、filter、backdrop、光照或阴影变化Reveal and composition揭示与构图mask、clip-path、裁剪、受控遮挡Material and energy材质与能量颜色、渐变位置、纹理、扭曲或 shader 效果当视觉世界与运行时支持时State and feedback状态与反馈让因果关系不容误解的最小变化两个纪律不要为了奇观而叠加技巧——One strong material idea, carried through the focal sequence and quiet supporting states, is usually enough一个强大的材质想法贯穿焦点序列与安静的支持状态通常就足够了。craft-floor.md 也把 blur、backdrop-filter、clip-path、mask 和 shadow 明确纳入调色板前提是保持流畅。兄弟元素错峰sibling stagger只在列表以列表身份出现时适用——需要给总延迟设上限并且永远不要把每个滚动区块都重新解释成错峰列表。这条不要给每个滚动区块都做 stagger与 craft-floor.md 的not one identical entrance on every section是同一原则的两面重复的入场动画恰恰是 AI 生成界面最典型的 slop 信号。Timing and easing用时长表达距离与后果参考文档给出的时长对照表需要完整继承时长典型用途100–150 ms即时反馈150–300 ms例行状态变化300–500 ms布局、遮罩或视图过渡500–800 ms经过刻意编排的焦点入场三条配套规则出场比入场更快Exit faster than entrance使用自然的减速曲线例如cubic-bezier(0.16, 1, 0.3, 1)传达自信的到达——这正是 craft-floor.md 提到的exponential ease-out曲线的具体形态也是 Impeccable 的测试夹具 motion.html 中正面示例animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1)使用的曲线不要习惯性使用 bounce 或 elastic 曲线——负面示例 motion.html 中的animation: bounce-keyframe 1s infinite正是要拦截的弹跳动画。最后一句值得反复强调Long feedback feels like latency——过长的反馈在用户感知中就是卡顿。这也是为什么 Operate/Read 模式要求例行过渡必须快。Implement to the runtime按运行时选择实现手段参考文档把 Web 实现手段按用途分层CSS transitions 与 keyframes用于声明式的状态与有界的序列Web Animations API 或项目现有的动效库用于中断interruption、编排与动态值View Transitions 或共享元素技术当跨状态的连续性是核心诉求滚动驱动动效scroll-driven motion只有当滚动关系本身承载意义时才使用且必须有稳健的降级方案不要为一个现有技术栈能干净表达的效果引入依赖。实现纪律同样明确默认状态保持内容可见——即使脚本失败页面也不能因此被隐藏避免随手动画布局驱动属性width、height、top、left、margin——改用 FLIP、transform 或 grid 技术。这条与 optimize.md 中Avoid casual animation of layout-driving properties以及avoid animations that cause layout shifts的规则完全一致把 blur、filter、shadow、canvas、shader 工作限定在隔离区域bounded regions只在已知动画期间使用will-change不要全局声明在目标视口与设备上实测而不是假设 transform 就一定快——Measure on target viewports and devices rather than assuming transform means fast。Accessibility and control尊重用户的运动偏好无障碍部分是 motion 的硬性验收项尊重自动播放与声音偏好任何非必要的循环动画在离开屏幕或隐藏时必须停止每个 Web 动画都需要一条prefers-reduced-motion路径且必须提供有意的替代方案移除或减少空间位移spatial movement同时保留承载意义的 opacity、color 与状态过渡关键认知是Reduced motion means fewer and gentler animations, not disabling all motion——减少动效不等于禁用全部动效确认动作的反馈必须仍然可读。这条原则在检测器源码层面有直接对应crates/foundation/src/css/scan.rs中的strip_reduced_motion_blocks函数会定位media (prefers-reduced-motion: reduce)块并剥离其内容源码注释标明它对应 JS 的checks.mjs#stripReducedMotionBlocks说明 Impeccable 的质量检测机制本身就把 reduced-motion 区块当作一个需要专门解析、单独看待的 CSS 结构。原生路径上同样要求遵循平台行为iOS 的 Reduce Motioncrossfade 代替视差与大幅滑动见 ios.md、Android 的系统 Reduce Motion 设置见 android.md。Verify七项验收清单实现完成后参考文档要求逐项核对焦点动效特定于所选的视觉世界与界面不是换一个产品也能原样套用每个辅助动画都在解释反馈、状态或关系中断与重复使用行为正确动画被再次触发、被打断时应正常桌面、移动与键盘路径仍然可用prefers-reduced-motion路径减少了位移但没有抹掉有意义的反馈或状态变化昂贵效果在目标设备上保持流畅移除某个动画会损失意义或作者性格而不仅仅是损失装饰。最后一条是克制的最终裁决如果一个动画可以被删掉且什么都不损失那它从一开始就不该存在。这也与 delight.md 的验证项去掉装饰后界面仍然快速且不言自明相互印证。与质量底线Craft floor的呼应skill/reference/craft-floor.md 在Verify部分对 Motion 给出了同一套底线的压缩表达可以作为动效完成的快速自查Motion: 一个作者时刻而不是零散效果也不是每个区块同一个入场从已可见的默认状态做指数级 ease-out材质调色板要突破 transform 与 opacity——blur、backdrop-filter、clip-path、mask、shadow 在保持流畅时都属于调色板。此外craft-floor.md 的gemini段落有一条专门针对动效的反模式Never animate an image on hover, directly or through its parent——图片不是动作目标给容器做反馈。这可以看作对找活干的补充hover 动画的目标应该是可交互的控件而不是图片本身。完整流程一瞥把上面各节串起来一次animate的执行路径是确认性能约束与运行环境必要时提问按访客模式Persuade/Experience 还是 Operate/Read或原生平台路径确定 motion 的分量检查现有动效语言、交互状态与目标设备找出 motion 真正的工作Find the job写下 motion thesis焦点时刻、连续性、反馈、预算按语义选择材质连续性/深度/揭示/能量/反馈不叠加技巧按时长表与缓动曲线校准时序出场快于入场按运行时实现CSS 优先WAAPI 处理中断View Transitions 处理跨状态连续性避免布局属性动画与不必要的依赖落实prefers-reduced-motion替代路径并保持默认状态内容可见逐项跑完七项验收清单确认 motion 配得上自己的位置后交给impeccable polish做最终质量收尾。如果处理的是原生界面ios/android/adaptive步骤 3 之后直接进入对应平台参考文档的 Motion 章节遵循平台转场与 Reduce Motion 行为Web 工具链不参与。结论animation debt 与赢得动画回到文档开头的题眼motion 要么解释状态、关系与层级要么创造一个页面配得上的作者时刻——其余都是动画债。Impeccable 对动效的全部约束按模式定位、先写论点、材质承载语义、时长表达后果、reduced-motion 有意的替代、移除即损失的验收都在为同一件事服务让 AI 生产界面里的每一个动画都赢得自己的位置。当你确认动效已经赢得位置就把它交给 polish.md 定义的最后一遍检查而在整个过程中craft-floor.md 的质量底线会兜住一个作者时刻、指数级 ease-out、材质超越 transform/opacity这些机械性红线让你把精力留给方向而非重复踩坑。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考