1实现原理 · 为什么它能做到
先立视觉系统再动画：背景与光照、主色与中性色、字体与字阶、组件材质、阴影风格、动效语言、禁用外观——七项在动手前必须定义。
skills/motion-design-systems/SKILL.md
Define these before animating:
这里在做什么：把「视觉方向」变成一份可执行的系统清单，避免一边写动画一边改色改字阶造成的反复返工。
无品牌系统时给出一组保守默认（暖白底、黑主文字、单强调色、柔和阴影、保守圆角、大量负空间、直接标注、少装饰），并显式禁止另一组默认（蓝紫渐变、霓虹线、暗色科幻仪表盘）。
skills/motion-design-systems/SKILL.md
Do not default to blue/purple gradients, neon lines, or dark sci-fi dashboards.
这里在做什么：这是本 skill 最像「品味判据」的地方——把「AI 默认长相」写进禁止清单，用负向清单替代空泛的「要有品味」。
动效词汇表小而重复（相机推/擦、路径绘制、材质缩放、模糊转清晰、高光扫过、微光、粒子漂移、轻持留），并说明重复同一套小词汇让多场景连贯。
skills/motion-design-systems/SKILL.md
Repeating a small motion vocabulary makes multi-scene videos feel coherent.
这里在做什么：把多场景一致性归因到词汇复用而非单个镜头炫技，是系列视频观感统一的工程化做法。
缓动白名单（power2.out / power3.out / expo.out / sine.inOut）与禁用清单（bounce/rebound、霓虹、科幻 HUD、通用 SaaS 讲解套路）并列，除非用户明确要求。
skills/motion-design-systems/SKILL.md
- Use ease curves that settle naturally: `power2.out`, `power3.out`, `expo.out`, `sine.inOut`.
这里在做什么：把「高级感」翻译成具体的缓动函数选择与禁用项；references/premium-motion.md 进一步给出「通常失败」的做法。
图表叙事有固定揭示顺序：轴与标签先立框 → 线从左向右画 → 点只在曲线到达时出现 → 标签贴近被描述对象（除用户要求否则不用图例）→ 差距填充在两条曲线都使差距成立之后出现。
skills/motion-design-systems/SKILL.md
- Points appear only when the line reaches them.
这里在做什么：把数据故事的时间顺序写死，避免预先标点、提前填充、后补图例这类让观众跟不上的常见错误（references 的 Failure Modes 逐条对应）。
换主题是一次搜索工程而不是改一个变量：要扫 CSS 变量、裸 hex、RGB/RGBA、SVG fill/stroke、canvas/WebGL 常量、inline 样式、被复制的起始/carryover 帧；并且不动 logo、产品录屏、真实产品截图与用户参考图。
skills/motion-design-systems/SKILL.md
Do not recolor logos or product-demo footage unless explicitly requested.
这里在做什么：把主题清理的搜索面完整列出，并把不该染的对象单列——品牌片最容易造成事故的一步。
「不高级」的归因有先后顺序：先查尺度 → 间距 → 颜色一致性 → 动效时序 → 最后才是字体，并直接给出结论式判断。
skills/motion-design-systems/SKILL.md
Most "not premium" complaints come from oversized elements, too many colors, or uncontrolled motion.
这里在做什么：把主观抱怨转成可排查的清单与优先级，避免一被说「不够高级」就去换字体。
2核心能力
01可复用组件库模式：玻璃卡/面板、logo 行、CTA 锁定组合、表格框、图表轴-线-标签-节点-gap 填充、球体/环/粒子/角色标签；用 CSS 自定义属性或 JS 常量参数化，避免硬编码一次性颜色
02主题 token 与清理清单：给出可直接用的 :root token 样例（暖白底 #f7f3ec、墨黑 #111111、强调橙 #ef6f22、玻璃填充与描边），并列出搜索目标与排除对象
03参考图对齐清单（10 项）：对象数量、相对位置、尺度、字重、线宽、圆角、背景暖度、阴影柔度、标签位置、末帧可读性
04卡片与版式尺寸纪律：显式定义尺寸、标题层级与卡片层级分开、卡片比直觉更小、给字幕留位、末帧带字幕再测一遍、避免卡片套卡片、避免需要图例才能懂的图表标签
05图表叙事参考（叙事顺序、紧贴曲线的标注规则、五条失败模式与六个必抽证明帧）
06高级动效参考：有效做法（慢速相机漂移、前后景视差、材质浮现、路径描线、主动画落定后的微光、活着的保持帧）与通常失败的做法（物理对象用纯透明度揭示、通用 SaaS 面板、暗色霓虹 HUD、与叙事无关的大装饰）
07视觉 intake 清单（受众与语境、品牌色与禁用色、片型：产品演示/发布片/UGC/广告/企业讲解、参考图是精确末帧还是氛围参考、要克制还是高能量、字体是否必须匹配既有品牌）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | GSAP 缓动函数名（power2.out / power3.out / expo.out / sine.inOut）——本件把缓动选择写成判据，实现落在 GSAP 生态；除此外不点名任何 CLI、端点或远程包 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: （本 skill 目录内无脚本）按文档由宿主在项目内改组件/组合文件与主题 token、并抽取证明帧；具体命令落在 hyperframes-scene
- 本地工作目录: 文件读写与工件输出: 项目内组件/组合文件的改动（CSS 自定义属性、token、SVG fill/stroke、渐变、阴影）
审计说明： 。skill 目录内只有 SKILL.md 与三份 references（纯指令，无可执行文件）；行为面是本地读写（改项目内组件/组合/主题 token、抽证明帧）与对参考图的视觉判读，不调用任何 CLI、不联网、不读凭证，符合蓝档「仅本地读写」。**没有把素材送外部服务**：全量扫描本 skill 目录内无 http(s):// 端点、无 fetch/requests、无 token/env 读取；本件甚至是全族唯一不点名任何 CLI 与端点的一件（唯一出现的库语义是 GSAP 缓动函数名）。九件同族 skill 判级口径一致：目录内只有 SKILL.md（+ references），行为面是本地读写与本地 CLI，无端点、无凭证、无素材外发。
5第二遍独立确认
- [ok] 「零外部依赖」是否成立 — 目录扫描无 URL、无 CLI 名、无包名引用（仅出现 GSAP 缓动函数名，属实现建议而非调用）。这是本族唯一连本地 CLI 都不点名的 skill。
- [ok] 默认视觉系统与禁止项是否都可判定 — 默认值是具体对象（暖白底、黑主文字、单强调色、柔和阴影、保守圆角、大量负空间、直接标注），禁止项是具体风格（蓝紫渐变、霓虹线、暗色科幻仪表盘、卡片套卡片、需要图例的标签）——可勾选，不依赖主观裁量。
- [ok] 缓动白名单是否与 GSAP 实际函数名一致 — power2.out / power3.out / expo.out / sine.inOut 均为 GSAP 标准 ease 名称（格式为 <ease>.<type>），可原样传给 ease 参数。
- [ok] 三份 references 是否都被 SKILL.md 点名且存在 — SKILL.md 点名 references/premium-motion.md 与 references/theme-tokens.md 以及 references/chart-storytelling.md；三份文件在 pin 内均存在，无悬空引用、无未点名文件。
- [discrepancy] 「用 proof frame 验证主题变更」是否有可执行支撑 — SKILL.md 只要求用受影响场景与下一场景承载帧的 proof frame 验证，未点名抽帧工具；实际抽帧在仓库层 scripts/extract_proof_frames.py 与同族 render-qa-and-surgical-changes 里。只加载本件时验证动作缺少具体命令（设计层与工具层分离的必然结果，非缺陷但需注意）。
- [ok] 与 hyperframes-scene-builder 是否有重复或冲突判据 — 本件的规则全部是视觉与动效语言层面（色、材质、缓动、图表揭示顺序、尺寸），未涉及组合根、时间线注册、渲染命令等实现契约；scene-builder 也只提共享设计 token 放在文件顶部，二者互补不冲突。
6结论
适合： 适合：需要「视觉方向」而不只是「能渲出来」的场合——设视觉系统与 token、做玻璃拟态与高级动效、做图表与数据叙事、做 CTA 与 logo 行或表格框组件、清理主题色、按参考图匹配末帧、以及在多场景间维持品牌一致性。也适合作为产品发布片、企业讲解片、演示片的审美基线。
不适合： 不适合：① 需要具体实现契约与渲染命令（走 hyperframes-scene-builder）；② 没有参考图或品牌约束、只想快速出草稿的场景（本件的 intake 前置成本较高）；③ 需要暗色、霓虹、科幻 HUD 或高能量剪切的片型——需显式覆盖默认方向；④ 期望「一键改主题」的自动化（本件是判据与搜索清单，实际扫描与替换依赖仓库脚本与人工核对）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload motion-design-systems.tar.gz
sha256:
Option B · Copy Guide for Agent39a1199550b8d94b…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit f6b043d9fd.