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外部依赖
| 类型 | 依赖 |
|---|---|
| package | GSAP 缓动函数名（power2.out / power3.out / expo.out / sine.inOut）——本件把缓动选择写成判据，实现落在 GSAP 生态；除此外不点名任何 CLI、端点或远程包 |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 纯判据、无执行工具，落地依赖另外两件 skill — 本件不含命令与脚本；要真改主题并验证，需要叠加 hyperframes-scene-builder（改源与渲染）与 render-qa-and-surgical-changes（抽帧与主题扫描）。单独加载只会得到「应该怎么做」而无法闭环验证。
- 参考图对齐依赖读图能力，弱视觉模型下清单难以执行 — 十项对齐清单（对象数/相对位置/尺度/字重/线宽/圆角/背景暖度/阴影柔度/标签位置/末帧可读性）要求逐项比对图像，对无视觉能力或弱视觉模型的环境不可操作，且文档未给替代流程。
- 品牌资产保护是「规则」而非「机制」 — 禁止给 logo 或产品录屏改色写在文档里，但主题扫描工具 scripts/scan_theme_colors.py 只按颜色白名单扫文本文件，无法识别某段 hex 属于 logo；若操作者不遵守规则，工具不会拦截。
- 默认值与「企业高级感」的绑定带有取向性 — 暖白底 + 单强调色 + 克制动效被当作默认，暗色与霓虹与高能量被列为禁止默认——对需要暗色品牌或高能量剪辑的项目，使用者必须显式覆盖这些默认，否则会得到与品牌不符的「通用高级感」。
- 动效词汇复用可能压制叙事差异 — 「重复一套小词汇让多场景连贯」在多场景系列里成立，但在需要强节奏变化的片型（UGC、广告）里可能显得单调；文档允许用户显式要求高能量，但默认方向偏克制。
风险提醒：蓝色，知晓即可。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 或高能量剪切的片型——需显式覆盖默认方向；④ 期望「一键改主题」的自动化（本件是判据与搜索清单，实际扫描与替换依赖仓库脚本与人工核对）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 motion-design-systems.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent39a1199550b8d94b…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库saranambiar / saranambiar/hyperframes-video-agent-skills
Stars48
最近推送2026-06-14
本 skill commit
f6b043d9fd许可Apache-2.0（仓库根 LICENSE 为 Apache License Version 2.0；GitHub API license.spdx_id = Apache-2.0）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。