尧图网页设计 
impeccable animate 指令深度解析为前端动效设定功能—材料—时间—可访问性四层约束的方法论【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文基于 impeccable 技能包中animate命令的参考文档 animate.md完整梳理该 AI 设计技能如何约束目的驱动的动效实践从访客模式下的动效策略分流、动效命题motion thesis的制定到时间/缓动取值表、按运行时选择实现技术以及prefers-reduced-motion可访问性路径。结合仓库内置的反模式检测器源码你能掌握一套可落地的动效设计工作流并理解每条设计约束背后的自动检测实现。1. animate 在 impeccable 技能体系中的定位impeccable 是一个让 AI 编码代理harness更擅长设计的设计语言技能包以 slash 命令的形式向 AI 编码助手注入结构化的设计工作流。在 SKILL.md 的 Commands 表中animate被归类为Enhance增强类别命令类别描述参考文档animate [target]EnhanceAdd purposeful animations and motionreference/animate.md当用户输入/impeccable animate target时技能的路由规则会加载该参考文档并逐节执行。文档开篇声明了它需要的额外上下文performance constraints性能约束并给出全篇的总纲用运动来解释状态、关系和层级或者为界面创造一个它挣得的、被精心编排的时刻。没有目的的装饰是动画债animation debt。这句话确立了整个 playbook 的立场动效不是功能完成后的点缀而是一种需要立项、论证、验收的工程行为。2. 访客模式Visitor Mode决定动效角色文档要求先按 impeccable 的模式概念分流动效策略。模式描述的是访客在这个界面上要成功完成什么Persuade Experience说服 体验动效可以承载品牌声音。优先做一个经过排练的焦点序列而不是反复出现的区块滚动浮现section reveals。Operate Read操作 阅读动效服务于反馈、状态与连续性。常规过渡保持快速不要让用户在页面加载编排中等待。Nativeios/android/adaptive遵循 ios.md 或 android.md 中的 Motion 章节包括平台的 Reduce Motion 行为不应用本文档下方的 Web 工具链。以 iOS 为例ios.md 的 Motion 章节给出两条约束使用系统过渡push 侧滑、sheet 升起、dismiss 反向重放入场以及尊重 Reduce Motion——用交叉淡入替代视差与大位移。这意味着animate在原生平台上是委托给平台参考文档而不是套用 Web 动效规则。3. Find the Job先找到动效的工作在写任何动效代码前文档要求检查现有动效语言、交互状态、目标设备与性能预算然后只在这些位置添加动效确认一个操作acknowledge an action让状态变化或空间关系变得可读在导航或布局变化中保持连续性在有意义时刻引导注意力体现所选的视觉世界the selected visual world。文档同时划定两条红线只在无法推断出实质性约束时才提问不要仅仅因为一个静态区域存在就给它加动画。4. Set the Motion Thesis动效命题四要素文档要求在实现前写一份简短的计划motion thesis包含四个字段要素含义Focal moment唯一值得作者式编排的序列或交互如果有的话Continuity需要被解释的状态、布局或导航变化Feedback需要被确认的控件与结果Budget哪些效果允许昂贵以及它们运行的频率关键判据是焦点动效必须来自本产品和该界面概念。文档明确列出反例——泛化的 fade-and-rise、hover 抬升、视差层、滚动浮现都不构成命题。这一判据与技能包反 AI 味设计的整体立场一致impeccable 的反模式检测器把大量生成器默认输出渐变文字、紫色渐变、发光阴影等列为缺陷动效领域的对应物就是这些无差别复用的模板动效。5. Choose Material by Meaning按语义选择动画属性文档指出 transform 和 opacity 是可靠的地基但不是整个调色板。应根据过渡要传达什么来选属性语义推荐材料连续性与关系shared-element 运动、FLIP 变换、View Transitions、有意的空间位移焦点与深度有界的 blur、filter、backdrop、光影变化揭示与构图mask、clip-path、裁切、受控遮挡材料与能量颜色、渐变位置、纹理、扭曲或 shader 效果当界面世界与运行时都支持时状态与反馈让因与果无可误解的最小变化两条配套纪律不为奇观堆叠技术。一个强的材料想法贯穿焦点序列与安静的支撑状态通常就够了。兄弟节点 stagger 只适用于列表以列表形态出现的场景且必须限制总延迟绝不把每个滚动区块都重新解释为交错列表。6. 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)不要反射性地使用 bounce 或 elastic 曲线。过长的反馈感起来像延迟Long feedback feels like latency。这条缓动禁令在仓库的检测器中有直接的机器可读对应。反模式注册表 antipatterns.mjs 定义了bounce-easing规则Motion 类别Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.其检测实现在 checks.mjs 的checkMotion中包含三层判定动画名匹配/bounce|elastic|wobble|jiggle|spring/i即命中Tailwind 类名animate-bounce命中解析所有cubic-bezier(x1, y1, x2, y2)若y1或y2超出[0, 1]区间代码阈值y1 -0.1 || y1 1.1 || y2 -0.1 || y2 1.1即判定为带过冲的弹跳曲线。对应测试夹具为 tests/fixtures/antipatterns/motion.html可复现该规则的命中行为。也就是说文档里不要用 bounce/elastic这句设计原则在 impeccable 体系内既是给 AI 代理的指令也是可以被自动检测器判失败的硬规则。7. Implement to the Runtime按运行时选择实现技术文档给出五条实现层选型规则CSS transitions 与 keyframes用于声明式状态与有界的序列Web Animations API 或项目已有的动效库用于需要中断interruption、编排sequencing与动态取值的场景View Transitions 或 shared-element 技术当状态间的连续性本身就是要点时Scroll-driven 动效仅当滚动关系本身承载意义时才使用且必须带健壮的降级不要为一个现有技术栈能干净表达的效果引入依赖。随后是一组性能护栏全部可直接作为代码评审清单默认状态下内容必须可见失败的脚本不能把页面藏起来避免随意动画化驱动布局的属性——width、height、top、left与 margin改用 FLIP、transform 或 grid 技术把 blur、filter、shadow、canvas 与 shader 工作限制在隔离区域内will-change只在已知动画期间应用在目标视口和设备上实测不要假设 transform 就一定快。其中第 2 条同样有检测器实现。checks.mjs 定义了布局过渡属性集合const LAYOUT_TRANSITION_PROPS new Set([ width, height, padding, margin, max-height, max-width, min-height, min-width, padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, margin-left, ]);只要元素的transition-property命中其中任意一项检测器就报出 antipatterns.mjs 中的layout-transition规则quality 类别Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations. 文档建议的grid 技术正是这条规则给出的替代方案之一。值得注意的是检测器的一个设计细节在评估内容是否被 reveal 动画隐藏之前它会先剥除media (prefers-reduced-motion: reduce)块见 checks.mjs即评估的是脚本正常路径下的默认渲染。这与本文第 8 节可访问性要求互为补充reduced-motion 分支是必需的但它不能被当作掩盖默认态即隐藏缺陷的手段。8. Accessibility and Control可访问性与控制文档对 Web 动效的可访问性给出三条硬要求尊重自动播放与声音偏好任何非必需的循环动画离开视口或隐藏时必须停止。每个 Web 动画都需要一条prefers-reduced-motion路径且替代方案是有意设计的移除或减弱空间位移但保留承载语义的透明度、颜色与状态过渡。对 reduced motion 的正确理解是更少、更温和的动画而不是禁用一切运动——确认操作成功与否的反馈必须保持可读。这条保留有语义的反馈原则与检测器的pulsing-dot规则形成有趣的呼应antipatterns.mjs 指出装饰性脉冲点模拟活性是反模式但保留脉冲动画给真正绑定实时变化数据的指示器。区别正在于运动是否承载真实信息——与reduced motion 保留语义反馈是同一个判据的两种表述。9. Verify交付前自检清单文档末尾的 Verify 章节是一个七项验收清单覆盖了设计意图 工程质量两个维度焦点动效对所选世界与界面是特异的specific不是模板套用每一个支撑动效都能解释反馈、状态或关系中断与重复触发行为正确桌面、移动与键盘路径均可用prefers-reduced-motion路径减弱了运动但没有抹掉有意义的反馈或状态变化昂贵效果在目标设备上依然流畅删掉某个动画后会失去的是意义或作者化特征而不只是装饰。最后一条是整篇文档的收束性测试一个通过全部检查的动效其存在是不可删除的。10. 与检测器规则生态的闭环把 animate.md 放回 impeccable 的完整工作流中看它的产出会被体系内的其他部件持续约束与验收反模式检测器npx impeccable的规则引擎核心实现在 cli/engine/ 目录内置了一组 Motion 类别规则可作为动效交付后的自动扫描依据规则 ID类别拦截对象bounce-easingslopbounce/elastic 缓动动画名、Tailwind 类、过冲 bezierpulsing-dotslop装饰性脉冲状态点blinking-cursorslopadvisoryhero 区的装饰性闪烁光标marqueeslop自动滚动跑马灯image-hover-transformslopadvisoryhover 时缩放/旋转图片layout-transitionquality动画化布局属性width/height/margin 等content-hidden-at-restqualityerror内容在静止态大面积不可见的失败 reveal这些规则对应的夹具如 tests/fixtures/antipatterns/motion.html、tests/fixtures/antipatterns/pulsing-dot.html、tests/fixtures/antipatterns/blinking-cursor.html均可作为回归测试参照。与 polish 的交接文档最后一句规定When motion earns its place, hand off to/impeccable polishfor the final pass。polish.md 的 triage 流程把visual and motion inconsistencies排在修复顺序的第 4 位功能性缺陷、缺失状态、流/层级/响应式漂移之后并在交互与状态章节明确要求Keep motion coherent, interruptible, and performant. Do not add animation merely to make polish visible——两个 playbook 对动效的纪律完全同向。11. 小结animate.md表面是一份 80 行左右的参考文档实质是把动效设计从加几个 transition提升为一个有四层约束的工程决策功能层Find the job motion thesis每个动效必须先回答它为哪个操作、状态或叙事服务材料层Choose material by meaning属性选择由语义驱动stagger 与焦点序列受预算约束时间层Timing and easing100–800 ms 四档基准表 减速曲线纪律bounce/elastic 被明文禁止并被检测器机器化执法运行层Implement Accessibility Verify按运行时选技术、布局属性不碰、默认态内容可见、prefers-reduced-motion路径保留语义反馈最终以删除它会失去意义作为验收判据。这套约束的价值在于它是可被验证的仓库内 cli/engine/registry/antipatterns.mjs 与 cli/engine/rules/checks.mjs 把其中多条原则翻译成了确定性检测规则tests/fixtures/antipatterns/ 提供了对应的可复现夹具。对于在 AI 编码代理协作下做前端动效的团队这份文档提供的不只是给 LLM 的 prompt而是一份可直接用于人工评审的动效验收标准。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 impeccable animate 指令深度解析：为前端动效设定“功能—材料—时间—可访问性“四层约束的方法论
impeccable animate 指令深度解析为前端动效设定功能—材料—时间—可访问性四层约束的方法论【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文基于 impeccable 技能包中animate命令的参考文档 animate.md完整梳理该 AI 设计技能如何约束目的驱动的动效实践从访客模式下的动效策略分流、动效命题motion thesis的制定到时间/缓动取值表、按运行时选择实现技术以及prefers-reduced-motion可访问性路径。结合仓库内置的反模式检测器源码你能掌握一套可落地的动效设计工作流并理解每条设计约束背后的自动检测实现。1. animate 在 impeccable 技能体系中的定位impeccable 是一个让 AI 编码代理harness更擅长设计的设计语言技能包以 slash 命令的形式向 AI 编码助手注入结构化的设计工作流。在 SKILL.md 的 Commands 表中animate被归类为Enhance增强类别命令类别描述参考文档animate [target]EnhanceAdd purposeful animations and motionreference/animate.md当用户输入/impeccable animate target时技能的路由规则会加载该参考文档并逐节执行。文档开篇声明了它需要的额外上下文performance constraints性能约束并给出全篇的总纲用运动来解释状态、关系和层级或者为界面创造一个它挣得的、被精心编排的时刻。没有目的的装饰是动画债animation debt。这句话确立了整个 playbook 的立场动效不是功能完成后的点缀而是一种需要立项、论证、验收的工程行为。2. 访客模式Visitor Mode决定动效角色文档要求先按 impeccable 的模式概念分流动效策略。模式描述的是访客在这个界面上要成功完成什么Persuade Experience说服 体验动效可以承载品牌声音。优先做一个经过排练的焦点序列而不是反复出现的区块滚动浮现section reveals。Operate Read操作 阅读动效服务于反馈、状态与连续性。常规过渡保持快速不要让用户在页面加载编排中等待。Nativeios/android/adaptive遵循 ios.md 或 android.md 中的 Motion 章节包括平台的 Reduce Motion 行为不应用本文档下方的 Web 工具链。以 iOS 为例ios.md 的 Motion 章节给出两条约束使用系统过渡push 侧滑、sheet 升起、dismiss 反向重放入场以及尊重 Reduce Motion——用交叉淡入替代视差与大位移。这意味着animate在原生平台上是委托给平台参考文档而不是套用 Web 动效规则。3. Find the Job先找到动效的工作在写任何动效代码前文档要求检查现有动效语言、交互状态、目标设备与性能预算然后只在这些位置添加动效确认一个操作acknowledge an action让状态变化或空间关系变得可读在导航或布局变化中保持连续性在有意义时刻引导注意力体现所选的视觉世界the selected visual world。文档同时划定两条红线只在无法推断出实质性约束时才提问不要仅仅因为一个静态区域存在就给它加动画。4. Set the Motion Thesis动效命题四要素文档要求在实现前写一份简短的计划motion thesis包含四个字段要素含义Focal moment唯一值得作者式编排的序列或交互如果有的话Continuity需要被解释的状态、布局或导航变化Feedback需要被确认的控件与结果Budget哪些效果允许昂贵以及它们运行的频率关键判据是焦点动效必须来自本产品和该界面概念。文档明确列出反例——泛化的 fade-and-rise、hover 抬升、视差层、滚动浮现都不构成命题。这一判据与技能包反 AI 味设计的整体立场一致impeccable 的反模式检测器把大量生成器默认输出渐变文字、紫色渐变、发光阴影等列为缺陷动效领域的对应物就是这些无差别复用的模板动效。5. Choose Material by Meaning按语义选择动画属性文档指出 transform 和 opacity 是可靠的地基但不是整个调色板。应根据过渡要传达什么来选属性语义推荐材料连续性与关系shared-element 运动、FLIP 变换、View Transitions、有意的空间位移焦点与深度有界的 blur、filter、backdrop、光影变化揭示与构图mask、clip-path、裁切、受控遮挡材料与能量颜色、渐变位置、纹理、扭曲或 shader 效果当界面世界与运行时都支持时状态与反馈让因与果无可误解的最小变化两条配套纪律不为奇观堆叠技术。一个强的材料想法贯穿焦点序列与安静的支撑状态通常就够了。兄弟节点 stagger 只适用于列表以列表形态出现的场景且必须限制总延迟绝不把每个滚动区块都重新解释为交错列表。6. 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)不要反射性地使用 bounce 或 elastic 曲线。过长的反馈感起来像延迟Long feedback feels like latency。这条缓动禁令在仓库的检测器中有直接的机器可读对应。反模式注册表 antipatterns.mjs 定义了bounce-easing规则Motion 类别Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.其检测实现在 checks.mjs 的checkMotion中包含三层判定动画名匹配/bounce|elastic|wobble|jiggle|spring/i即命中Tailwind 类名animate-bounce命中解析所有cubic-bezier(x1, y1, x2, y2)若y1或y2超出[0, 1]区间代码阈值y1 -0.1 || y1 1.1 || y2 -0.1 || y2 1.1即判定为带过冲的弹跳曲线。对应测试夹具为 tests/fixtures/antipatterns/motion.html可复现该规则的命中行为。也就是说文档里不要用 bounce/elastic这句设计原则在 impeccable 体系内既是给 AI 代理的指令也是可以被自动检测器判失败的硬规则。7. Implement to the Runtime按运行时选择实现技术文档给出五条实现层选型规则CSS transitions 与 keyframes用于声明式状态与有界的序列Web Animations API 或项目已有的动效库用于需要中断interruption、编排sequencing与动态取值的场景View Transitions 或 shared-element 技术当状态间的连续性本身就是要点时Scroll-driven 动效仅当滚动关系本身承载意义时才使用且必须带健壮的降级不要为一个现有技术栈能干净表达的效果引入依赖。随后是一组性能护栏全部可直接作为代码评审清单默认状态下内容必须可见失败的脚本不能把页面藏起来避免随意动画化驱动布局的属性——width、height、top、left与 margin改用 FLIP、transform 或 grid 技术把 blur、filter、shadow、canvas 与 shader 工作限制在隔离区域内will-change只在已知动画期间应用在目标视口和设备上实测不要假设 transform 就一定快。其中第 2 条同样有检测器实现。checks.mjs 定义了布局过渡属性集合const LAYOUT_TRANSITION_PROPS new Set([ width, height, padding, margin, max-height, max-width, min-height, min-width, padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, margin-left, ]);只要元素的transition-property命中其中任意一项检测器就报出 antipatterns.mjs 中的layout-transition规则quality 类别Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations. 文档建议的grid 技术正是这条规则给出的替代方案之一。值得注意的是检测器的一个设计细节在评估内容是否被 reveal 动画隐藏之前它会先剥除media (prefers-reduced-motion: reduce)块见 checks.mjs即评估的是脚本正常路径下的默认渲染。这与本文第 8 节可访问性要求互为补充reduced-motion 分支是必需的但它不能被当作掩盖默认态即隐藏缺陷的手段。8. Accessibility and Control可访问性与控制文档对 Web 动效的可访问性给出三条硬要求尊重自动播放与声音偏好任何非必需的循环动画离开视口或隐藏时必须停止。每个 Web 动画都需要一条prefers-reduced-motion路径且替代方案是有意设计的移除或减弱空间位移但保留承载语义的透明度、颜色与状态过渡。对 reduced motion 的正确理解是更少、更温和的动画而不是禁用一切运动——确认操作成功与否的反馈必须保持可读。这条保留有语义的反馈原则与检测器的pulsing-dot规则形成有趣的呼应antipatterns.mjs 指出装饰性脉冲点模拟活性是反模式但保留脉冲动画给真正绑定实时变化数据的指示器。区别正在于运动是否承载真实信息——与reduced motion 保留语义反馈是同一个判据的两种表述。9. Verify交付前自检清单文档末尾的 Verify 章节是一个七项验收清单覆盖了设计意图 工程质量两个维度焦点动效对所选世界与界面是特异的specific不是模板套用每一个支撑动效都能解释反馈、状态或关系中断与重复触发行为正确桌面、移动与键盘路径均可用prefers-reduced-motion路径减弱了运动但没有抹掉有意义的反馈或状态变化昂贵效果在目标设备上依然流畅删掉某个动画后会失去的是意义或作者化特征而不只是装饰。最后一条是整篇文档的收束性测试一个通过全部检查的动效其存在是不可删除的。10. 与检测器规则生态的闭环把 animate.md 放回 impeccable 的完整工作流中看它的产出会被体系内的其他部件持续约束与验收反模式检测器npx impeccable的规则引擎核心实现在 cli/engine/ 目录内置了一组 Motion 类别规则可作为动效交付后的自动扫描依据规则 ID类别拦截对象bounce-easingslopbounce/elastic 缓动动画名、Tailwind 类、过冲 bezierpulsing-dotslop装饰性脉冲状态点blinking-cursorslopadvisoryhero 区的装饰性闪烁光标marqueeslop自动滚动跑马灯image-hover-transformslopadvisoryhover 时缩放/旋转图片layout-transitionquality动画化布局属性width/height/margin 等content-hidden-at-restqualityerror内容在静止态大面积不可见的失败 reveal这些规则对应的夹具如 tests/fixtures/antipatterns/motion.html、tests/fixtures/antipatterns/pulsing-dot.html、tests/fixtures/antipatterns/blinking-cursor.html均可作为回归测试参照。与 polish 的交接文档最后一句规定When motion earns its place, hand off to/impeccable polishfor the final pass。polish.md 的 triage 流程把visual and motion inconsistencies排在修复顺序的第 4 位功能性缺陷、缺失状态、流/层级/响应式漂移之后并在交互与状态章节明确要求Keep motion coherent, interruptible, and performant. Do not add animation merely to make polish visible——两个 playbook 对动效的纪律完全同向。11. 小结animate.md表面是一份 80 行左右的参考文档实质是把动效设计从加几个 transition提升为一个有四层约束的工程决策功能层Find the job motion thesis每个动效必须先回答它为哪个操作、状态或叙事服务材料层Choose material by meaning属性选择由语义驱动stagger 与焦点序列受预算约束时间层Timing and easing100–800 ms 四档基准表 减速曲线纪律bounce/elastic 被明文禁止并被检测器机器化执法运行层Implement Accessibility Verify按运行时选技术、布局属性不碰、默认态内容可见、prefers-reduced-motion路径保留语义反馈最终以删除它会失去意义作为验收判据。这套约束的价值在于它是可被验证的仓库内 cli/engine/registry/antipatterns.mjs 与 cli/engine/rules/checks.mjs 把其中多条原则翻译成了确定性检测规则tests/fixtures/antipatterns/ 提供了对应的可复现夹具。对于在 AI 编码代理协作下做前端动效的团队这份文档提供的不只是给 LLM 的 prompt而是一份可直接用于人工评审的动效验收标准。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考