Impeccableanimate实战让 AI 生成的界面动效既有目的、又有预算与降级路径【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable动效应用于解释状态state、关系relationship与层级hierarchy或用于创造产品真正值得拥有的某一个作者化瞬间authored moment。没有目的的装饰就是动效债务animation debt。本篇技术指南以 Impeccable 技能体系中animate命令的参考文档 skill/reference/animate.md 为主体讲解如何在基于 AI harness 生成与迭代的前端界面中为界面注入“有目的、有克制、可降级”的动效。读完你将掌握animate在整个命令流程中的定位与触发时机、按访问者模式Visitor mode做动效决策的方法、动效论点motion thesis的写法、材质—时序—缓动—运行时的完整选型规则以及prefers-reduced-motion与性能约束下的验收标准。一、animate在 Impeccable 命令体系中的位置在 Impeccable 的 Commands 表中见 skill/SKILL.src.mdanimate属于Enhance增强类目命令类目说明参考文档animate [target]Enhance为功能添加有目的的动画、微交互与动效提升可用性与愉悦感skill/reference/animate.md同一类目下还有colorize配色、typeset排版、layout间距与层级、delight个性与记忆点、overdrive突破常规边界等命令。animate的职责边界被刻意收窄它只负责“让动效有存在的理由”而不是把整个页面做得花哨。这与delight、overdrive有明显分工——后两者允许更大的表现自由而animate的参考文档开篇就给出了全文的道德约束动效应用于解释状态、关系与层级或用于创造界面真正配得上拥有的一次作者化瞬间没有目的的装饰即动效债务。从命令元数据 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.也就是说当用户提到“加动画、过渡、微交互、动效设计、hover 效果、让界面更有生气”时路由应把请求导向animate它产出的不是一段炫技代码而是一次围绕“这些动效是否被需要、是否承担语义”的设计审查与增强。值得注意的一个上下文要求animate.md文档以 **Additional context needed**: performance constraints.开头意味着在本参考流程启动前需要先收集目标设备与**性能预算performance budget**这一前置约束——后文所有关于“昂贵效果的使用频率”“在哪一层实现”的判断都依赖它。同时参考文档本身在仓库中以多份发布副本存在如 .kiro/skills/impeccable/reference/animate.md、plugin/skills/impeccable/reference/animate.md、skill/reference/animate.md内容一致仅模板占位符如{{command_prefix}}的写法略有差异本文统一以 skill/reference/animate.md 为准。二、先定模式Visitor mode 决定动效能走多远animate不要求你凭空发挥而是先依据表面的“访客模式”决定动效的表达强度。这是本流程的第一道闸门。Persuade Experience动效可以承载声音面向说服与沉浸类表面landing page、营销页、作品集、画廊动效motion可以承担叙事的声音。但参考文档给出的原则非常明确与其用一段段重复的区块 reveal滚动揭示不如只做一段精心编排rehearsed的焦点序列。即一个页面宁可有一段被认真“导演”过的核心动画也不要让每个区块都来一次淡入上浮的滚动揭示——那只会稀释焦点并制造大量同质化的动效噪音。Operate Read动效服务于反馈与连续在工具、仪表盘、编辑器、文档等以任务与阅读为主的表面上动效的角色被限定为三类反馈feedback、状态state、连续性continuity。具体要求常规转场必须足够快不能制造“页面加载 choreography”让用户等待用户正在完成任务时任何动画都不应该成为障碍。Nativeios/android/adaptive跟随平台而不是照搬 Web 手段当目标是原生平台时animate参考文档明确要求不要套用下面的 Web 工具链而是遵守 skill/reference/ios.md 或 skill/reference/android.md 中的 Motion 章节并落实平台的 Reduce Motion 行为。以 iOS 侧为例见 skill/reference/ios.md 的 Motion 小节系统级转场push 用滑动、sheet 用升起、dismiss 反向还原入场与导航模型相悖的自定义转场会令人迷失方向ruleios-motion-system-transitions尊重 Reduce Motion用 crossfade交叉淡化替代视差和大位移滑动ruleios-motion-reduce-motion。核心逻辑是原生平台已有成熟的系统动效语言和系统级无障碍偏好AI 生成的动效应“默认跟随平台”只在平台留给表达的空间内发挥——而不是把网页端的视差、悬浮抬升等习惯硬移植到原生 UI 上。三、Find the job先找出动效真正的工作岗位在动笔写任何 transition/animation 代码之前animate流程要求先巡视现状检查既有的动效语言、交互状态、目标设备与性能预算然后只在这些地方安排动效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动手前先写动效论点实现之前先用一段短计划short plan锁定方向四要素如下要素要回答的问题Focal moment焦点瞬间哪一个序列或交互值得被作者化如果有的话Continuity连续性哪些状态、布局或导航变化需要被“解释”清楚Feedback反馈哪些控件与结果需要被确认/回应Budget预算哪些效果可能昂贵它们多久运行一次文档对 thesis 的纯度提出了硬性要求焦点瞬间必须来自本产品与本节面surface的概念本身。一段通用的淡入上浮、hover 抬升、视差层或滚动 reveal都不构成一个 thesis。换句话说如果一段动效可以被原样复制到任何竞品首页上那它就不是 thesis。真正的 thesis 一定长在产品的独特性里——例如某个数据产品用共享元素动效把“筛选条件”和“结果图表”之间的因果讲清楚才是 focal moment。五、Choose material by meaning按“表达意义”选择动效材质transform与opacity是可靠的底座但不是全部调色板。参考文档要求按“这段转场想传达什么”来选择属性而不是先想好特效再硬凑含义想传达的语义对应材质与手法连续性 / 关系Continuity and relationship共享元素动效shared-element、FLIP 风格 transform、View Transitions、刻意设计的空间位移焦点 / 纵深Focus and depth有边界的模糊bounded blur、filter、backdrop、光照、阴影变化揭示 / 构成Reveal and compositionmask、clip-path、裁切、受控遮挡controlled occlusion材质 / 能量Material and energy颜色、渐变位置、纹理、形变、shader 效果——前提是世界观与运行环境支持状态 / 反馈State and feedback让“因与果”一目了然的最小变化两条实战铁律不要为炫技而堆叠手法Do not stack techniques for spectacle。通常一个强有力的材质主概念贯穿焦点序列并在安静的支撑状态中保持克制就足够了。兄弟元素错峰sibling stagger要谨慎只有当一组列表“作为列表整体出现”时才适合用 stagger且要为总延迟设上限——绝不要把每个滚动区块都重新诠释成一段错峰列表。stagger的隐藏成本是总时长随子项数量线性增长这在长列表与重复滚动 reveal 场景中极易踩中预算红线所以“cap the total delay”本质是一条性能纪律。六、Timing and easing用时长表达距离与后果时长不是玄学而是语义它应当表达这次变化的空间距离与后果严重程度。参考文档给出可直接照抄的分档表时长典型用途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)这类“先快后缓、轻松着地”的曲线适合自信的到达confident arrivals不要习惯性使用 bounce 或 elastic 曲线——弹跳只在极少数作者化瞬间成立作为默认反射就是噪音长反馈等于延迟Long feedback feels like latency一段 600ms 的“成功”动画在用户体感里就是 600ms 的等待。从工程角度可以补充cubic-bezier(0.16, 1, 0.3, 1)属于业界常用的“decelerate/exit 型 ease-out”曲线族——它把早期位移拉得很快接近终点时衰减明显既传达“干脆”又避免 overshoot。若你需要“精确停顿/序列化”则应该走向运行时的 Web Animations API见下节而不是硬拼多个过渡延时。七、Implement to the runtime按运行时选择实现手段参考文档给出了“从声明式到脚本化”的递进选型原则是先问当前技术栈能不能干净表达再决定是否引入依赖CSS transitions / keyframes用于声明式状态切换和有界的序列bounded sequencesWeb Animations API 或项目既有的动效库用于中断interruption、序列编排sequencing与动态取值View Transitions 或 shared-element 技术当“跨状态保持连续性”才是重点时使用scroll-driven motion滚动驱动动效仅当滚动关系本身承载意义时才使用且必须有稳健的降级方案不要为一个现有栈能干净表达的效果引入依赖。实现层的“反模式禁区”同样具体这些对应的是 AI 生成代码中最常见的性能与健壮性问题默认状态下内容必须可见失败的脚本不能把页面内容藏起来即不要依赖 JS 动画结束后才让元素可见避免随意动画化width、height、top、left、margin 等布局驱动属性它们会触发 layout/paint应改用 FLIP、transform 或 grid 方案把 blur、filter、shadow、canvas 与 shader 的工作限制在隔离区域内bound to isolated regions避免污染大面积渲染只在已知动画期间施加will-change用完即撤——常驻的will-change会持续占用合成层内存在目标视口与设备上实测而不是想当然地认为“用了 transform 就一定快”Measure on target viewports and devices rather than assuming transform means fast。结合 Impeccable 的整体节奏skill/SKILL.src.md 中“Verify in bounded passes”原则动效实现同样应遵循“构建—一次性检查—批量修复—收手”的有界循环而不是无限自我打磨。八、Accessibility and control无障碍与用户控制是硬门槛动效的无障碍不是事后补丁而是验收的硬性前置条件尊重自动播放与声音偏好任何非必要循环动画在离开视口或页面隐藏时都必须停止每条 Web 动画都需要一条prefers-reduced-motion路径且这条路径必须有有意的替代方案intentional alternative而不是简单animation: none。对 reduced motion 的语义参考文档给了一个容易被误读但极其重要的精确定义Reduced motion means fewer and gentler animations, not disabling all motion.减少动效是“更少、更温和”而不是“禁用一切动效”确认一次操作的反馈动画应当保持可读。换句话说状态切换的颜色、透明度、反馈动画通常仍可保留它们不依赖大位移真正被削减的是视差、大滑动、飘入等空间位移类效果。这一要求并非纸面规定——仓库的契约测试 tests/skill-reference.test.mjs 专门守护该文档的可达性条款断言参考文档的## Accessibility and control章节必须包含prefers-reduced-motion、not disabling all motion且## Verify章节必须覆盖 reduced-motion 校验。这意味着任何对参考文档的改动若削弱无障碍约定都会在测试层直接失败。九、Verify动效的验收清单参考文档给出 6 条收敛的验收标准可用作动效合入前的最终检查焦点动效focal motion特定于所选世界观与本节面——换一个产品/页面它就不成立每一个支撑动画supporting animation都在解释反馈、状态或关系而非装饰中断与重复使用行为正确动画被快速重复触发、中途被打断时表现正常桌面、移动端与键盘路径仍然可用prefers-reduced-motion路径减少了位移但没有抹掉有意义的反馈与状态变化昂贵效果在目标设备上保持流畅反过来想删除这段动画会让页面失去意义或作者化性格——如果删掉后什么也没损失它当初就不该存在。最后一条尤其反直觉好的验收不是“动画看起来顺不顺”而是“它是否不可删”。当一段动效真正赢得了自己的位置earns its placeanimate流程就结束剩余工作交接给/impeccable polish本命令在 skill/SKILL.src.md 的 Commands 表中对应polish [target]的最终质量检查做收尾打磨。十、总结animate 一页纸工作法先收预算约束performance constraints与模式判定Persuade/Experience 可大胆但收敛到一个 focal momentOperate/Read 只做反馈与连续性Native 跟随平台的 Motion 与 Reduce Motion先找岗位再谈手法只服务于确认操作、解释状态/空间关系、保持连续性、引导注意力、体现视觉世界这五类场景静态区域不存在“因为存在所以动一下”的理由先写 thesis 再写代码一段来自本产品的 focal moment continuity feedback budget通用淡入上浮不是 thesis材质按语义选连续性用共享元素/FLIP/View Transitions焦点用有界 blur 与光影揭示用 mask/clip-path能量用色彩纹理 shader一个主概念贯穿全局stagger 设总延迟上限时序用表格档位即时反馈 100–150ms、常规状态 150–300ms、布局/浮层转场 300–500ms、作者化入场 500–800ms退场快于入场默认cubic-bezier(0.16, 1, 0.3, 1)不默认弹跳实现看运行时声明式用 CSS 过渡/keyframes需要中断与序列用 WAAPI 或既有动效库跨状态连续性用 View Transitions不轻易加依赖默认态内容必须可见不动画化布局属性模糊阴影隔离区域will-change仅在动画期间使用无障碍是硬门槛非必要循环离屏即停prefers-reduced-motion走“更少更温和”而非全禁确认类反馈保持可读验收看可删性删掉会失去意义或作者化性格才说明动效真的该留在这个表面。对 AI harness 驱动的界面生产流程而言animate的价值在于把“加动效”从一次审美赌博变成一次有约束、可复核、可测试的工程决策——这也正是它作为 Enhance 类命令与其他任意发挥型命令最大的分野。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable `animate` 实战：让 AI 生成的界面动效既有目的、又有预算与降级路径
Impeccableanimate实战让 AI 生成的界面动效既有目的、又有预算与降级路径【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable动效应用于解释状态state、关系relationship与层级hierarchy或用于创造产品真正值得拥有的某一个作者化瞬间authored moment。没有目的的装饰就是动效债务animation debt。本篇技术指南以 Impeccable 技能体系中animate命令的参考文档 skill/reference/animate.md 为主体讲解如何在基于 AI harness 生成与迭代的前端界面中为界面注入“有目的、有克制、可降级”的动效。读完你将掌握animate在整个命令流程中的定位与触发时机、按访问者模式Visitor mode做动效决策的方法、动效论点motion thesis的写法、材质—时序—缓动—运行时的完整选型规则以及prefers-reduced-motion与性能约束下的验收标准。一、animate在 Impeccable 命令体系中的位置在 Impeccable 的 Commands 表中见 skill/SKILL.src.mdanimate属于Enhance增强类目命令类目说明参考文档animate [target]Enhance为功能添加有目的的动画、微交互与动效提升可用性与愉悦感skill/reference/animate.md同一类目下还有colorize配色、typeset排版、layout间距与层级、delight个性与记忆点、overdrive突破常规边界等命令。animate的职责边界被刻意收窄它只负责“让动效有存在的理由”而不是把整个页面做得花哨。这与delight、overdrive有明显分工——后两者允许更大的表现自由而animate的参考文档开篇就给出了全文的道德约束动效应用于解释状态、关系与层级或用于创造界面真正配得上拥有的一次作者化瞬间没有目的的装饰即动效债务。从命令元数据 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.也就是说当用户提到“加动画、过渡、微交互、动效设计、hover 效果、让界面更有生气”时路由应把请求导向animate它产出的不是一段炫技代码而是一次围绕“这些动效是否被需要、是否承担语义”的设计审查与增强。值得注意的一个上下文要求animate.md文档以 **Additional context needed**: performance constraints.开头意味着在本参考流程启动前需要先收集目标设备与**性能预算performance budget**这一前置约束——后文所有关于“昂贵效果的使用频率”“在哪一层实现”的判断都依赖它。同时参考文档本身在仓库中以多份发布副本存在如 .kiro/skills/impeccable/reference/animate.md、plugin/skills/impeccable/reference/animate.md、skill/reference/animate.md内容一致仅模板占位符如{{command_prefix}}的写法略有差异本文统一以 skill/reference/animate.md 为准。二、先定模式Visitor mode 决定动效能走多远animate不要求你凭空发挥而是先依据表面的“访客模式”决定动效的表达强度。这是本流程的第一道闸门。Persuade Experience动效可以承载声音面向说服与沉浸类表面landing page、营销页、作品集、画廊动效motion可以承担叙事的声音。但参考文档给出的原则非常明确与其用一段段重复的区块 reveal滚动揭示不如只做一段精心编排rehearsed的焦点序列。即一个页面宁可有一段被认真“导演”过的核心动画也不要让每个区块都来一次淡入上浮的滚动揭示——那只会稀释焦点并制造大量同质化的动效噪音。Operate Read动效服务于反馈与连续在工具、仪表盘、编辑器、文档等以任务与阅读为主的表面上动效的角色被限定为三类反馈feedback、状态state、连续性continuity。具体要求常规转场必须足够快不能制造“页面加载 choreography”让用户等待用户正在完成任务时任何动画都不应该成为障碍。Nativeios/android/adaptive跟随平台而不是照搬 Web 手段当目标是原生平台时animate参考文档明确要求不要套用下面的 Web 工具链而是遵守 skill/reference/ios.md 或 skill/reference/android.md 中的 Motion 章节并落实平台的 Reduce Motion 行为。以 iOS 侧为例见 skill/reference/ios.md 的 Motion 小节系统级转场push 用滑动、sheet 用升起、dismiss 反向还原入场与导航模型相悖的自定义转场会令人迷失方向ruleios-motion-system-transitions尊重 Reduce Motion用 crossfade交叉淡化替代视差和大位移滑动ruleios-motion-reduce-motion。核心逻辑是原生平台已有成熟的系统动效语言和系统级无障碍偏好AI 生成的动效应“默认跟随平台”只在平台留给表达的空间内发挥——而不是把网页端的视差、悬浮抬升等习惯硬移植到原生 UI 上。三、Find the job先找出动效真正的工作岗位在动笔写任何 transition/animation 代码之前animate流程要求先巡视现状检查既有的动效语言、交互状态、目标设备与性能预算然后只在这些地方安排动效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动手前先写动效论点实现之前先用一段短计划short plan锁定方向四要素如下要素要回答的问题Focal moment焦点瞬间哪一个序列或交互值得被作者化如果有的话Continuity连续性哪些状态、布局或导航变化需要被“解释”清楚Feedback反馈哪些控件与结果需要被确认/回应Budget预算哪些效果可能昂贵它们多久运行一次文档对 thesis 的纯度提出了硬性要求焦点瞬间必须来自本产品与本节面surface的概念本身。一段通用的淡入上浮、hover 抬升、视差层或滚动 reveal都不构成一个 thesis。换句话说如果一段动效可以被原样复制到任何竞品首页上那它就不是 thesis。真正的 thesis 一定长在产品的独特性里——例如某个数据产品用共享元素动效把“筛选条件”和“结果图表”之间的因果讲清楚才是 focal moment。五、Choose material by meaning按“表达意义”选择动效材质transform与opacity是可靠的底座但不是全部调色板。参考文档要求按“这段转场想传达什么”来选择属性而不是先想好特效再硬凑含义想传达的语义对应材质与手法连续性 / 关系Continuity and relationship共享元素动效shared-element、FLIP 风格 transform、View Transitions、刻意设计的空间位移焦点 / 纵深Focus and depth有边界的模糊bounded blur、filter、backdrop、光照、阴影变化揭示 / 构成Reveal and compositionmask、clip-path、裁切、受控遮挡controlled occlusion材质 / 能量Material and energy颜色、渐变位置、纹理、形变、shader 效果——前提是世界观与运行环境支持状态 / 反馈State and feedback让“因与果”一目了然的最小变化两条实战铁律不要为炫技而堆叠手法Do not stack techniques for spectacle。通常一个强有力的材质主概念贯穿焦点序列并在安静的支撑状态中保持克制就足够了。兄弟元素错峰sibling stagger要谨慎只有当一组列表“作为列表整体出现”时才适合用 stagger且要为总延迟设上限——绝不要把每个滚动区块都重新诠释成一段错峰列表。stagger的隐藏成本是总时长随子项数量线性增长这在长列表与重复滚动 reveal 场景中极易踩中预算红线所以“cap the total delay”本质是一条性能纪律。六、Timing and easing用时长表达距离与后果时长不是玄学而是语义它应当表达这次变化的空间距离与后果严重程度。参考文档给出可直接照抄的分档表时长典型用途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)这类“先快后缓、轻松着地”的曲线适合自信的到达confident arrivals不要习惯性使用 bounce 或 elastic 曲线——弹跳只在极少数作者化瞬间成立作为默认反射就是噪音长反馈等于延迟Long feedback feels like latency一段 600ms 的“成功”动画在用户体感里就是 600ms 的等待。从工程角度可以补充cubic-bezier(0.16, 1, 0.3, 1)属于业界常用的“decelerate/exit 型 ease-out”曲线族——它把早期位移拉得很快接近终点时衰减明显既传达“干脆”又避免 overshoot。若你需要“精确停顿/序列化”则应该走向运行时的 Web Animations API见下节而不是硬拼多个过渡延时。七、Implement to the runtime按运行时选择实现手段参考文档给出了“从声明式到脚本化”的递进选型原则是先问当前技术栈能不能干净表达再决定是否引入依赖CSS transitions / keyframes用于声明式状态切换和有界的序列bounded sequencesWeb Animations API 或项目既有的动效库用于中断interruption、序列编排sequencing与动态取值View Transitions 或 shared-element 技术当“跨状态保持连续性”才是重点时使用scroll-driven motion滚动驱动动效仅当滚动关系本身承载意义时才使用且必须有稳健的降级方案不要为一个现有栈能干净表达的效果引入依赖。实现层的“反模式禁区”同样具体这些对应的是 AI 生成代码中最常见的性能与健壮性问题默认状态下内容必须可见失败的脚本不能把页面内容藏起来即不要依赖 JS 动画结束后才让元素可见避免随意动画化width、height、top、left、margin 等布局驱动属性它们会触发 layout/paint应改用 FLIP、transform 或 grid 方案把 blur、filter、shadow、canvas 与 shader 的工作限制在隔离区域内bound to isolated regions避免污染大面积渲染只在已知动画期间施加will-change用完即撤——常驻的will-change会持续占用合成层内存在目标视口与设备上实测而不是想当然地认为“用了 transform 就一定快”Measure on target viewports and devices rather than assuming transform means fast。结合 Impeccable 的整体节奏skill/SKILL.src.md 中“Verify in bounded passes”原则动效实现同样应遵循“构建—一次性检查—批量修复—收手”的有界循环而不是无限自我打磨。八、Accessibility and control无障碍与用户控制是硬门槛动效的无障碍不是事后补丁而是验收的硬性前置条件尊重自动播放与声音偏好任何非必要循环动画在离开视口或页面隐藏时都必须停止每条 Web 动画都需要一条prefers-reduced-motion路径且这条路径必须有有意的替代方案intentional alternative而不是简单animation: none。对 reduced motion 的语义参考文档给了一个容易被误读但极其重要的精确定义Reduced motion means fewer and gentler animations, not disabling all motion.减少动效是“更少、更温和”而不是“禁用一切动效”确认一次操作的反馈动画应当保持可读。换句话说状态切换的颜色、透明度、反馈动画通常仍可保留它们不依赖大位移真正被削减的是视差、大滑动、飘入等空间位移类效果。这一要求并非纸面规定——仓库的契约测试 tests/skill-reference.test.mjs 专门守护该文档的可达性条款断言参考文档的## Accessibility and control章节必须包含prefers-reduced-motion、not disabling all motion且## Verify章节必须覆盖 reduced-motion 校验。这意味着任何对参考文档的改动若削弱无障碍约定都会在测试层直接失败。九、Verify动效的验收清单参考文档给出 6 条收敛的验收标准可用作动效合入前的最终检查焦点动效focal motion特定于所选世界观与本节面——换一个产品/页面它就不成立每一个支撑动画supporting animation都在解释反馈、状态或关系而非装饰中断与重复使用行为正确动画被快速重复触发、中途被打断时表现正常桌面、移动端与键盘路径仍然可用prefers-reduced-motion路径减少了位移但没有抹掉有意义的反馈与状态变化昂贵效果在目标设备上保持流畅反过来想删除这段动画会让页面失去意义或作者化性格——如果删掉后什么也没损失它当初就不该存在。最后一条尤其反直觉好的验收不是“动画看起来顺不顺”而是“它是否不可删”。当一段动效真正赢得了自己的位置earns its placeanimate流程就结束剩余工作交接给/impeccable polish本命令在 skill/SKILL.src.md 的 Commands 表中对应polish [target]的最终质量检查做收尾打磨。十、总结animate 一页纸工作法先收预算约束performance constraints与模式判定Persuade/Experience 可大胆但收敛到一个 focal momentOperate/Read 只做反馈与连续性Native 跟随平台的 Motion 与 Reduce Motion先找岗位再谈手法只服务于确认操作、解释状态/空间关系、保持连续性、引导注意力、体现视觉世界这五类场景静态区域不存在“因为存在所以动一下”的理由先写 thesis 再写代码一段来自本产品的 focal moment continuity feedback budget通用淡入上浮不是 thesis材质按语义选连续性用共享元素/FLIP/View Transitions焦点用有界 blur 与光影揭示用 mask/clip-path能量用色彩纹理 shader一个主概念贯穿全局stagger 设总延迟上限时序用表格档位即时反馈 100–150ms、常规状态 150–300ms、布局/浮层转场 300–500ms、作者化入场 500–800ms退场快于入场默认cubic-bezier(0.16, 1, 0.3, 1)不默认弹跳实现看运行时声明式用 CSS 过渡/keyframes需要中断与序列用 WAAPI 或既有动效库跨状态连续性用 View Transitions不轻易加依赖默认态内容必须可见不动画化布局属性模糊阴影隔离区域will-change仅在动画期间使用无障碍是硬门槛非必要循环离屏即停prefers-reduced-motion走“更少更温和”而非全禁确认类反馈保持可读验收看可删性删掉会失去意义或作者化性格才说明动效真的该留在这个表面。对 AI harness 驱动的界面生产流程而言animate的价值在于把“加动效”从一次审美赌博变成一次有约束、可复核、可测试的工程决策——这也正是它作为 Enhance 类命令与其他任意发挥型命令最大的分野。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考