design-audit

用途

Design Audit 是 genjutsu 流水线中的最终检查点，由 /genjutsu:paint 在流水线末端加载。它的职责是扫描代码库，发现动效缺口（motion gaps）、无障碍（a11y）违规、性能问题以及不一致之处。

通过对项目执行一系列 grep 命令来检测缺失的动画，包括：

未包裹 AnimatePresence 的条件渲染（{show && <Component />} 或三元渲染）：每次条件挂载/卸载都需要退出动画支持。
没有 transition 的 hover 状态：每条 :hover 规则都必须在基础选择器上有对应的 transition，瞬时状态翻转会显得像坏掉了。
没有交错（stagger）的动态列表：通过 .map() 渲染的列表应让入场交错进行，同时弹出显得廉价。
没有 transition 的样式变化：内联样式变化（如动态背景、颜色）需要 CSS transition 或 motion 包裹。
没有对应退场的入场：Framer Motion 的 initial + animate 在 AnimatePresence 内时都应有 exit 属性。

减少动效（强制项）：一个有动画的项目必须至少有一个与其技术栈匹配的全局处理。提供 Web（prefers-reduced-motion）、SwiftUI/UIKit（accessibilityReduceMotion 等）、Compose（LocalAccessibilityManager 等）三组 grep。若在有动画的项目中三者均为零结果，即为严重违规。
对比度 4.5:1：使用浏览器 DevTools、npx pa11y <url> 或 Lighthouse 检查；渐隐文本在 0.4 以上每个不透明度都必须保持可读。
焦点可见：任何 outline: none 都必须搭配自定义 :focus-visible 样式，否则为 WCAG 失败。
语义化 HTML：每个 <div onClick> 或 <span onClick> 必须是 <button>、<a>，或具备 role="button" + tabIndex + onKeyDown。
装饰性动画的 ARIA：纯装饰性动画（背景粒子、环境动效、Lottie 插画）必须加 aria-hidden="true"。

布局抖动：动画化布局属性（width/height/top/left/right/bottom/margin/padding）会每帧触发布局重排，应改用 transform: translate/scale 与 opacity。
过多绘制触发：will-change 应少用且限定范围；若超过约 5 个元素长期使用，GPU 内存成本会超过收益，应动态应用。
动画库体积成本：使用 source-map-explorer 或 vite-bundle-visualizer 检查实际影响。参考体积（gzip 后）：framer-motion ~30KB、GSAP ~25KB、popmotion ~5KB、纯 CSS = 0KB。移动端原生第三方动画库通常增加 500KB–2MB（Lottie iOS ~600KB、Lottie Android ~900KB、Rive iOS ~1.5MB、Rive Android ~2MB），而 Compose / SwiftUI 原生动画为 0KB。若项目只用淡入、滑动和弹簧动画，原生 API 已足够。
requestAnimationFrame vs setTimeout：动画循环必须使用 requestAnimationFrame，setTimeout/setInterval 会造成掉帧且不会在后台标签页暂停。

时长一致性：良好设计的项目最多使用 3-5 个不同时长（如 0.15、0.25、0.35、0.5）；若出现 15 个不同值，应抽取为 motion tokens 文件。
缓动清单：跨 Web、SwiftUI、Compose 三套 grep 清点缓动值。所有技术栈规则一致：设计系统中最多 3-5 个命名缓动；散落随机值即为视觉不一致，应集中为命名 token。
入场/退场对称性：入场时长 >= 退场时长（绝不能相反）；入场用 ease-out，退场用 ease-in；入场有完整编排（translate + opacity + scale），退场更简单（仅 opacity 或 opacity + 轻微 scale）。快速的退场、缓慢的入场是正确的；反过来是错的。

Compose（Android / 多平台）：使用 Layout Inspector 检查重组、Macrobenchmark 测量帧时序（目标 60fps 下每帧 <16.67ms，120fps 下 <8.33ms）、Modifier.recomposeHighlighter() 检查重组次数、生成 Baseline Profiles、验证自定义组件的 Modifier.semantics。
SwiftUI（iOS / macOS）：使用 Instruments Time Profiler 识别动画热路径（目标为零帧超过 16.67ms）、Instruments Hitches Instrument、GPU Frame Capture、验证 .accessibilityLabel / .accessibilityHint、在 200% 动态字体下测试、在开启 Reduce Motion 下测试。
Web：使用上述现有清单（Lighthouse、Chrome DevTools Performance 等）。

该技能通常由 genjutsu 流水线在 /genjutsu:paint 阶段末端自动加载，对代码库按上述检查项运行对应的 grep 与工具命令，然后按严重级别输出结果。

发现项按严重程度组织：

Critical（发布前必须修复）：缺少 prefers-reduced-motion 处理、无键盘支持的可点击 div、outline: none 无 :focus-visible 替代、动画化布局属性。
Important（当前迭代修复）：无 AnimatePresence 的条件渲染、无 transition 的 hover 状态、装饰性动画缺少 aria-hidden、动画循环使用 setTimeout、时长不一致（>8 个唯一值）。
Nice-to-have（待办）：无交错动画的列表、无 transition 的内联样式、过多 will-change、入场/退场不对称（方向错误）、动画库体积超出实际使用所需。

适用于使用 Framer Motion / CSS 动画 / SwiftUI / Compose 等技术栈、需要对动效、无障碍、性能与一致性做系统性审查的前端或移动端项目。

关于收费、价格、具体平台支持范围等事实，原始资料暂未提供。