让AI更懂设计:两个值得关注的Motion Design Skill仓库
AI 生成视频、动画、UI 动效的能力越来越强,但"懂设计"和"会执行"之间,还隔着一条巨大的鸿沟。
今天推荐两个 GitHub 上的开源项目,它们把 Motion Design 的专业知识封装成 AI Skill,让 AI Agent 在动手之前,先学会"像动画导演一样思考"。
一、LottieFiles/motion-design-skill — 通用动画设计原则
LottieFiles/motion-design-skill 是一个哲学优先、实现无关的动画设计知识库。它不教你写 CSS 或 GSAP,而是教 AI 理解 timing、easing、choreography 这些底层原理。
核心内容
| 模块 | 说明 |
|---|---|
| Core | 8步检查清单、动效人格原型、时长/缓动表、属性选择指南 |
| Philosophy | 三大支柱、迪士尼12原则UI化、情绪→动效映射、编排与叙事结构 |
| Patterns | 入场/退场动画、状态反馈(成功/错误/加载/悬停)、环境动效、多元素编排 |
| Reference | 时间/缓动速查表、属性选择指南、质量检查清单、常见问题排查 |
亮点
- 迪士尼12原则 UI 化:把传统动画的经典原则适配到数字界面场景
- 4种动效人格原型:Playful(活泼)、Professional(专业)、Energetic(energetic)、Calm(沉稳),帮助品牌建立统一的动效语言
- 跨平台兼容:支持 40+ AI Agent,包括 Claude Code、Cursor、Codex 等
安装方式
npx skills add LottieFiles/motion-design-skill二、Pluviobyte/video-production-skills — 视频制作技能库
Pluviobyte/video-production-skills 更偏向实战,提供从创意到成片的完整 AI 视频制作工作流,包含4个核心技能:
| 技能 | 阶段 | 用途 |
|---|---|---|
| ai-motion-director | 主题 → 动效语言 | 从主题/脚本生成运动隐喻、节拍图、组件路由、反PPT质检 |
| reference-video-replica-qc | 复刻循环 | 分解参考视频、复刻动效、组件化沉淀、像素级对齐验证 |
| dark-saas-magic-video | 风格化主视频 | 深色科技风 SaaS/AI 产品短片、工具发布、能力演示 |
| black-white-text-opener | 开场包装 | 纯黑背景+逐字打字效果+打字音效,适合教程/观点视频开头 |
核心理念
"每一次复刻都应该把这些动效整理成 HyperFrames / Remotion / React / CSS / SVG / GSAP 可以编写、组合和参数化的技术组件。"
这个项目的长远目标是把参考视频复刻转化为可文档化的动效组件库,让 AI 制作视频时不再是"生成一页页静态版式",而是能根据脚本内容自由组合开场、解释、列表、对比、CTA 等段落。
安装方式
# 列出可用技能
npx skills add https://github.com/Pluviobyte/video-production-skills --list
# 安装单个技能
npx skills add https://github.com/Pluviobyte/video-production-skills --skill ai-motion-director
npx skills add https://github.com/Pluviobyte/video-production-skills --skill reference-video-replica-qc两个项目的对比
| 维度 | LottieFiles/motion-design-skill | Pluviobyte/video-production-skills |
|---|---|---|
| 定位 | 动画设计原则与哲学 | 视频制作实战技能库 |
| 侧重点 | 底层原理、设计决策 | 工作流、组件化、QA质检 |
| 适用场景 | UI 动画、微交互、品牌动效 | 视频成片、SaaS产品短片、开场动画 |
| 技术栈 | 实现无关(CSS/GSAP/Framer均可) | HyperFrames / Remotion / React |
| Stars | 624 | 535 |
| License | MIT | 未标注 |
为什么值得关注
-
AI 需要设计常识:当前 AI 生成动画的问题不是技术不够,而是缺乏设计判断力——什么时候该快、什么时候该慢、元素之间如何配合。这些 Skill 填补了这块空白。
-
从"生成"到"编排":单个动画效果容易做,但多个元素的编排、叙事节奏、情感表达才是难点。这两个项目都提供了系统化的编排框架。
-
可复用的组件化思路:尤其是 Pluviobyte 的项目,把每次复刻沉淀为可复用组件,这才是 AI 视频制作的正确打开方式。
相关链接
- LottieFiles/motion-design-skill — 通用动画设计原则
- Pluviobyte/video-production-skills — AI 视频制作技能库
- Skills CLI — 管理 AI Skill 的命令行工具
如果你也在用 AI 做视频或动画,这两个仓库值得收藏。让 AI 先学会"像导演一样思考",再动手做效果,成品质量会完全不一样。