Impeccable 的 animate 命令：从运动论题到验证清单的前端动效实战工作流

Impeccable 的 animate 命令从运动论题到验证清单的前端动效实战工作流【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableanimate.md是 Impeccable 技能中animate [target]子命令的执行手册定义了“何时该加动画、加什么动画、用什么材质属性、按什么时长曲线落地以及如何验证动效达标”的完整方法论。读完本文你将掌握 Impeccable 对前端动效motion的完整判断框架运动论题motion thesis的制定、按语义选择动画材质、时长与缓动预算、面向运行时的实现选型、prefers-reduced-motion降级路径以及仓库中反模式检测器对这套规则的实现级佐证。animate 命令在技能体系中的定位Impeccable 是一个以“设计语言”驱动 AI 编码代理harness做出更好设计决策的技能包其核心入口是 SKILL.md其中 Commands 表把animate [target]归入Enhance类别职责是“Add purposeful animations and motion”添加有目的的动画与动效参考实现即本文主角 animate.md。从命令元数据 command-metadata.json 可以确认该命令的触发语义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.md并严格按其流程执行而不是凭感觉堆效果。该手册开头还声明了一项前置上下文要求——Additional context needed: performance constraints性能约束意味着执行动效工作前必须先了解目标端的性能预算。核心原则无目的的装饰是“动画债”animate.md的开篇给出全文的总纲Use motion to explain state, relationship, and hierarchy, or to create one authored moment the surface has earned. Decoration without purpose is animation debt.动效只有两类合法用途解释状态、关系、层级或制造一个界面已经“挣得”的、被精心创作的高光时刻。除此之外纯粹的装饰性动画被明确定义为“动画债”animation debt——它是需要偿还的技术债务而非资产。这条原则贯穿后文的选型、时长、验证全部章节。Visitor Mode按访客目标分流动效策略Impeccable 的 SKILL.md 定义了 Persuade / Operate / Read / Experience 四种访客模式visitor modeanimate.md的 “Visitor mode” 小节针对不同模式的动效授权差异做了分流Persuade Experience说服型 体验型动效可以承载表达语气。偏好一个排练过的高光序列one rehearsed focal sequence而不是反复出现的分节渐显repeated section reveals。Operate Read操作型 阅读型动效服务于反馈、状态与连续性。常规过渡必须快不要让用户在页面加载编排page-load choreography中等待。Nativeios/android/adaptive完全改走平台规则——遵循 ios.md 或 android.md 中的 Motion 小节包括平台的 Reduce Motion 行为不应用下文面向 Web 的工具链。两个原生参考文档中的 Motion 章节内容值得对照阅读ios.md使用系统转场push 侧滑、sheet 上滑、dismiss 反转入场自定义转场如果与导航模型对抗会造成迷失感必须尊重 Reduce Motion用交叉淡化crossfade替代视差和大距离滑动。android.md使用 Material 运动模式container transform、shared-axis、fade-through采用标准缓动与时长并遵循系统“移除动画”设置用交叉淡化或即时切换替代。这体现了animate.md的一个隐含判断动效不是自由创作而是受“访客在这个界面上要成功完成什么”约束的表达手段。Find the Job先找出动效的“工作”进入实现前animate.md要求先勘察四样东西既有的动效语言、交互状态、目标设备、性能预算。然后只在动效能真正发挥作用的地方动手判定标准是五问动效能否确认一次用户动作acknowledge an action能否让状态变化或空间关系变得可读legible能否在导航或布局变化中保持连续性continuity能否在有意义的时刻引导注意力能否体现所选的视觉世界visual world两条纪律随后给出只有在实质性约束无法推断时才向用户提问不要仅仅因为一个静态区域存在就给它加动画。这与 SKILL.md 的“bounded passes”验证哲学一脉相承——先判断必要性再谈执行。Set the Motion Thesis实现前先写运动论题animate.md要求在任何实现之前先写一份简短计划包含四个要素要素含义Focal moment高光时刻唯一值得被精心创作的序列或交互如果有的话Continuity连续性哪些状态、布局或导航变化需要被“解释”Feedback反馈哪些控件和结果需要被确认Budget预算哪些效果可以昂贵、它们多久运行一次紧接着是一条关键的否决条款高光时刻必须来自这个产品和这个界面自身的概念。泛泛的“淡入上移”fade-and-rise、悬停抬升hover lift、视差层parallax layer、滚动渐显scroll reveal都不构成论题。换句话说这四个最常见的“默认动画”被明确降格为素材而非设计决策——它们只有在被某个具体产品叙事认领之后才算数。Choose Material by Meaning按语义选择动画材质这是animate.md中最具操作性的部分之一。它先破了一个常见误区transform 和 opacity 是可靠的“地基”但不是整个调色板。属性的选择应由这次过渡想要传达的语义决定要传达的语义可选材质手段连续性与关系共享元素运动、FLIP 式 transform、View Transitions、刻意的空间位移焦点与深度有界的 blur、filter、backdrop、光效或阴影变化揭示与构图遮罩mask、clip-path、裁切、受控的遮挡材质与能量颜色、渐变位置、纹理、扭曲或 shader 效果前提是视觉世界与运行时支持状态与反馈让因果与结果一目了然的最小变化两条配套纪律不要为了壮观而堆叠技术。一个强材质想法贯穿高光序列与安静的辅助状态通常就足够了。兄弟级交错sibling stagger只适用于“列表以列表的方式出现”的场景且必须为总延迟设上限绝不要把每个滚入视口的分节都重新解释成交错列表。Timing and Easing用时长表达距离与后果animate.md给出了一张时长预算表要求时长表达“距离与后果”distance and consequence时长典型用途100–150 ms即时反馈immediate feedback150–300 ms常规状态变化routine state change300–500 ms布局、覆盖层或视图过渡layout, overlay, view transition500–800 ms刻意创作的高光入场deliberately authored focal entrance缓动方面的规则退场要比入场快Exit faster than entrance。使用自然的减速曲线表达“自信地抵达”推荐cubic-bezier(0.16, 1, 0.3, 1)不要出于习惯使用 bounce 或 elastic 曲线。过长的反馈体感上等同于延迟Long feedback feels like latency——这是把动效质量直接绑定到用户感知的表述。仓库佐证反模式检测器把这套规则编译成了可执行的检测仓库中的测试夹具 tests/fixtures/antipatterns/motion.html 正是上述规则的“可执行版”采用左列“应被标记 / 右列应通过”的双栏约定供设计反模式检测器配合 hooks.md 描述的编辑器 hook 自动运行验证应被标记should flag——与animate.md的禁令一一对应/* 弹性缓动animate.md 明令禁止“出于习惯使用 elastic 曲线” */ .elastic-transition { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* 布局属性过渡animate.md 要求避免驱动布局的属性 */ .width-transition { transition: width 0.3s ease; } .height-transition { transition: height 0.4s ease-out; } .padding-transition { transition: padding 0.2s linear; } .margin-transition { transition: margin 0.3s ease-in; } .max-height-transition { transition: max-height 0.5s ease; } /* 注释提示改用 grid-template-rows */应通过should pass——与animate.md的推荐一致/* 文档推荐的自然减速曲线 */ .fade-in-good { animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ease-out-expo { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* 安全属性transform / opacity / color / box-shadow 均为 GPU 加速或纯绘制 */ .transform-transition { transition: transform 0.3s ease-out; } .opacity-transition { transition: opacity 0.2s ease; } .shadow-transition { transition: box-shadow 0.2s ease; }从夹具内容可以看出文档中“避免动画width、height、top、left、margin”“不要用 bounce/elastic 出于习惯”这类文字规则在工程侧被落实为逐条的检测规则其中max-height过渡甚至附带了“改用grid-template-rows”的修复提示。另外hooks.md 中给出了一条豁免示例当弹性缓动本身是表现对象时比如一颗真的在弹跳的球可以通过ignore-value持久化一条带证据的窄范围豁免——这说明规则是严格但有出路的而非一刀切。Implement to the Runtime面向运行时选型animate.md给出五条技术选型原则每一条都是“按问题性质选工具”而不是“按流行度选库”CSS transitions 和 keyframes用于声明式状态与有界的序列Web Animations API 或项目已有的 motion 库用于需要中断interruption、排序sequencing和动态取值的场景View Transitions 或共享元素技术当“跨状态的连续性”本身就是表达重点时滚动驱动动效scroll-driven motion仅当滚动关系本身承载意义时才用且必须带健壮的回退fallback不要为一个现有技术栈就能干净表达的效果引入新依赖。随后是一组性能与健壮性纪律可以视为动效版的“防御性编码”默认状态下内容必须可见脚本失败不能把页面藏起来对滚动渐显这类“初始隐藏”模式是硬性约束避免随意动画驱动布局的属性width、height、top、left、margin改用 FLIP、transform 或 grid 技术blur、filter、shadow、canvas、shader 的昂贵工作必须限定在隔离区域bounded to isolated regions不要全局生效will-change只在已知动画期间应用不要常态化滥用在目标视口和设备上实测不要想当然地认为“用了 transform 就快”。Accessibility and Control可访问性不是补丁是设计的一部分animate.md的可访问性章节有三层要求尊重自动播放与声音偏好。任何非必要的循环动画在离屏offscreen或隐藏hidden时必须停止。每个 Web 动画都需要prefers-reduced-motion路径且降级方案必须是“有意的替代”而不是简单关掉。具体做法移除或减弱空间位移但保留承载意义的 opacity、颜色与状态过渡。对 reduced motion 的常见误解被直接纠正它意味着更少、更柔和的动画而不是禁用所有动效确认用户动作的反馈必须保持可读。这条规则与前面“Native 走平台 Reduce Motion”形成闭环Web 端用prefers-reduced-motion媒体查询iOS/Android 端用系统级 Reduce Motion 设置判定标准是统一的——动效让位于状态可读性但反馈不消失。Verify七项验收清单实现完成后animate.md给出一张逐项可勾选的验证清单高光动效是否特定于所选视觉世界和界面而不是通用模板每个辅助动画是否都在解释反馈、状态或关系中断与重复使用interrupted / repeated invocation时行为是否正确桌面、移动、键盘路径是否依然可用prefers-reduced-motion路径是否减弱了位移但没抹掉有意义的反馈或状态变化昂贵效果在目标设备上是否依然流畅最后一个反问式标准删掉某个动画你损失的是意义或创作性authored character还是仅仅失去了装饰若是后者该动画应当被移除——这正是开篇“animation debt”在验收环节的落地。通过验证后文档给出收尾动作当动效挣得它的位置时交接给/impeccable polish做最后一轮质量检查。对照 polish.md 中“Keep motion coherent, interruptible, and performant. Do not add animation merely to make polish visible”保持动效一致、可中断、高性能不要仅仅为了让打磨过程“可见”而添加动画的要求两条参考文档在动效问题上互相咬合animate负责“该不该加、加什么”polish负责“最终收口时动效是否依然克制”。如何调用与适用前提在已加载 Impeccable 技能当前版本见 SKILL.md frontmatterversion: 4.1.2的代理会话中直接以自然语言表达意图即可路由到该命令例如“给这个登录表单加一些有目的的动效”显式调用则是对应运行时中的/impeccable animate [target]形式[target]指向要增强的功能、页面或组件见 command-metadata.json 的argumentHint。适用前提与限制需要注意该命令针对前端界面动效Web 为主原生端改走平台文档SKILL.md 明确技能整体“Not for backend-only or non-UI tasks”。Web 工具链View Transitions、WAAPI 等的可用性取决于目标运行时的浏览器基线文档并未指定最低版本实际落地时以“目标视口与设备实测”为准。与polish的交接关系是流程约定而非自动触发验证通过后应主动执行 polish 收尾而不是期待系统自动完成。小结animate.md的价值不在于罗列“怎么做动画”的 API 技巧而在于提供一套可审计的决策框架以“解释状态/关系/层级”或“一个被挣得的高光时刻”为合法性门槛Find the Job → Motion Thesis以语义驱动材质选型Material by Meaning以时长表和缓动纪律约束表达Timing and Easing以运行时选型与性能边界保证可实现性Implement to the Runtime以prefers-reduced-motion和七项验收清单保证可访问与可交付Verify。而仓库中的 motion.html 反模式夹具、hooks.md 的豁免机制则证明这套方法论不止是散文——它被编译成了可自动运行的检测规则这正是 Impeccable“把设计语言变成 harness 能力”这一项目主旨The design language that makes your AI harness better at design在动效领域的具体体现。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考