这个Skill让AI做动效网页终于不露怯了——电影级滚动、3D展示、品牌匹配全搞定

最近在翻 SkillsMP 的时候，发现了一个让我眼前一亮的 Skill——cinematic-motion。

做设计创意的同学都知道，”高级感”三个字说出来容易，做出来难。尤其是网页动效，很多 AI 工具能生成静态图，但一加动画就露怯——要么太机械，要么节奏乱。

这个 Skill 专门解决这个痛点。

它能做什么？

一句话：让你的 AI 直接输出电影级动效网页。

具体来说，它覆盖了这些场景：

• 滚动驱动叙事：GSAP ScrollTrigger、SplitText、视频进度条控制、视差、遮罩显出
• 3D 产品展示：R3F + Zustand 工作流，影棚灯光、模型切换、视频贴图
• 版式组合：bentogrid、瀑布流、跨行文字叠压
• 品牌到动效的映射：一个表格直接告诉你什么品牌类型该用什么缓动曲线、速度、密度

为什么有意思？

传统工作流里，你要同时懂设计、动效原理、代码实现三个领域，才能做出真正有质感的东西。

这个 Skill 把这些知识全部结构化了。它内置了一个 Brand-to-Motion Matrix，比如：

• 奢侈品/ Editorial 风格：用 expo.out，速度 800-1200ms，稀疏而克制，缓慢旋转的柔光
• 科技/创业公司：用 power2.out，200-400ms，快速弹性，高对比度锐利边缘
• 创意/Agency：用 back.inOut，400-800ms，密集但有序，动态打光

你不需要记参数，只需要告诉它你的品牌调性，它给你对应的技术方案。

适合谁用？

• UI/UX 设计师想快速验证动效概念
• 前端开发想给甲方 demo 级别的高保真原型
• AI 创业者想把动效能力接入 Agent 工作流

GitHub 仓库里已经有完整说明，Star 不多（目前 5 颗），说明还是个比较新的项目，但正因为新，它的思路很前沿——不是教你用某个工具，而是教你用 AI 思维去做动效设计决策。

戳这里去看完整内容：https://github.com/Kingdaddy007/my-os

GitHub: https://github.com/Kingdaddy007/my-os