用途:这是一份面向 Web 界面的 UI/UX 最佳实践指南,包含 152 条规则、分为 12 个类别,按影响程度排优先级,用于指导自动化代码审查与代码生成。
适用时机:实现或审查动画(CSS 过渡、Motion/Framer Motion);在弹簧、缓动曲线与不做动画之间取舍;处理 AnimatePresence 与退出动画;编写使用伪元素或 View Transitions API 的 CSS;为界面添加音频反馈或程序化声音;构建变形图标组件;为动态内容做容器宽高动画;依据认知心理学(菲茨定律、希克定律、米勒定律)设计界面;实现预测性预取以提升感知性能;设置排版、OpenType 特性或数字格式。
规则类别与优先级:动画原则(CRITICAL,前缀 timing-、physics-、staging-);时序函数(HIGH,spring-、easing-、duration-、none-);退出动画(HIGH,exit-、presence-、mode-、nested-);CSS 伪元素(MEDIUM,pseudo-、transition-、native-);音频反馈(MEDIUM,a11y-、appropriate-、impl-、weight-);声音合成(MEDIUM,context-、envelope-、design-、param-);变形图标(LOW,morphing-);容器动画(MEDIUM,container-);UX 定律(HIGH,ux-);预测性预取(MEDIUM,prefetch-);排版(MEDIUM,type-);视觉设计(HIGH,visual-)。
使用方式:阅读各规则文件获取详细说明与代码示例,例如 rules/timing-under-300ms.md、rules/spring-for-gestures.md、rules/ux-doherty-under-400ms.md、rules/type-tabular-nums-for-data.md。每个规则文件包含:为何重要的简要说明、错误代码示例及解释、正确代码示例及解释。完整编译文档见 AGENTS.md。
限制:资料未提供安装命令、收费方式、平台支持范围与具体效果数据。