用途:MotionSpec 帮助 AI 编程代理与前端开发者创建可验证的网页动画,并检查页面已加载 CSS 中的动态无障碍候选问题,例如缺少 prefers-reduced-motion 防护、连续动画缺少暂停路径。它面向网页应用内的 UI 动画,不生成视频。
主要能力:
- 创建动画:选择目录中的原语,验证 JSON 规格,编译为原生 GSAP JavaScript 与 CSS;meta.target 仅接受 vanilla-gsap。
- 检查 CSS 动态效果:对 URL 进行静态审计,报告四类问题——缺少有效 prefers-reduced-motion 防护(WCAG 2.3.3)、动画属性非 transform/opacity、无限动画无暂停路径、<marquee> 或自动播放动态超过 5 秒(WCAG 2.2.2)。
- 防止回归:使用 CI 示例将结果与显式接受的基线比较,页面变差时门禁失败。
使用方式:本地 stdio MCP 通过 npx -y motionspec 暴露全部五个工具,无需 API 密钥。托管端点 https://api.motionspec.dev/mcp 提供无需密钥的 motion_catalog 与 motion_validate;托管的编译、审计与统计需要密钥。仓库也是 Claude Code 插件,包含 /motionspec:motion 与 /motionspec:audit <url> 技能,可用 claude --plugin-dir . 试用。审计命令为 motion audit <url>,--json 输出机器可读载荷(包含 ok、url、status、score、findings 等,score 在页面不可测量时为 null)。
限制:编译器保证白名单、注入防护、默认 reduced-motion、循环暂停路径与确定性输出。审计为静态 CSS 扫描,不检查内联 style、@import、CSS-in-JS、外部 JS 包、视频/GIF/Canvas、闪烁及运行时 JavaScript 动画;干净扫描不等于完整的无障碍或 WCAG 合规评估,也不构成 EN 301 549、Section 508 等法律框架的合规证明。审计范围限制为 12 个样式表、2 MB、8 秒。MCP 注册表标识为 io.github.MasterPlayspots/motionspec。更多安装与指南见 https://motionspec.dev/docs。