当静态界面已经"卷到头"，真正区分高级感与AI廉价感的，是动效——按钮按下的回弹、列表逐项涌入的错峰、滚动时元素的视差呼吸。本期（Round 2 前端设计专题）跳出已被反复评测的样式令牌、组件生产与"去AI味"审美赛道，聚焦一条更细却更高溢价的支线：**前端动效与运动设计（Motion Design）**。通过对 skills.sh 市场在 motion / animation / css-animation 维度的全量检索，本期筛选出 10 款装机量可观或原理扎实的动效类技能，并对其中 7 款进行深度拆解。核心发现：动效赛道已形成"**词汇—规范—生成—审查—三维**"五段式生态闭环，HeyGen 的 HyperFrames 家族以近 42 万累计装机垄断"生成端"，Emil Kowalski 与 LottieFiles 则分别把守"词汇/审查"与"原理/教学"两端。 ## 本期评测范围与装机总览 | # | 技能 | 作者/仓库 | 装机量 | 定位 | 综合评分 | |---|------|-----------|--------|------|----------| | 1 | web-design-guidelines | vercel-labs/agent-skills | 454.5K | 动效与交互**规范审查** | ★★★★☆ | | 2 | remotion-to-hyperframes | heygen-com/hyperframes | 159.7K | Remotion→HTML动效迁移 | ★★★★ | | 3 | hyperframes-animation | heygen-com/hyperframes | 93.9K | 动效知识**总集**（规则+蓝图） | ★★★★★ | | 4 | motion-graphics | heygen-com/hyperframes | 88.9K | 动效图形编排 | ★★★★ | | 5 | css-animations | heygen-com/hyperframes | 72.7K | CSS关键帧**适配模式** | ★★★★ | | 6 | stitch/remotion | google-labs-code/stitch-skills | 33.1K | 谷歌系动效草图 | ★★★ | | 7 | review-animations | emilkowalski/skills | 26.8K | 动效代码**审查** | ★★★★☆ | | 8 | animation-vocabulary | emilkowalski/skills | 16.3K | 动效**词汇反查** | ★★★★ | | 9 | threejs-animation | cloudai-x/threejs-skills | 9K | 三维/骨骼动画 | ★★★★ | | 10 | motion-design | lottiefiles/motion-design-skill | 4.3K | 动效**原理与教学** | ★★★★★ | > 评分维度：功能完整度 25% / 上手难度 20% / 变现潜力 25% / 训练营适用性 15% / 社区活跃度 15%。 ## 深度评测：七款动效引擎拆解 ### 1. web-design-guidelines —— Vercel 官方动效规范的"裁判员" **来源**：`vercel-labs/agent-skills`，装机 45.5 万，本期体量之冠。 **安装**：`npx skills add vercel-labs/agent-skills@web-design-guidelines` 它不生产动效，只裁决动效。SKILL.md 的核心机制是"每次审查前用 WebFetch 拉取最新规则"——规则源指向 `vercel-labs/web-interface-guidelines` 的 `command.md`，覆盖交互（interactions）、动画（animations）、布局、内容与无障碍五大类。你只需说一句"review my UI"，它便以极简的 `file:line` 格式吐出违规点。 - 功能完整度 ★★★★：审查维度齐全，但本质是"只读审计器"，不做生成。 - 上手难度 ★★★★：近乎零门槛，触发词自然（"review my UI" / "check accessibility"）。 - 变现潜力 ★★★：规则本身开源免费，直接收费难；但可封装为"设计合规审计 SaaS"或 CI 卡点。 - 训练营适用性 ★★★★★：最佳教学锚点——用一份权威规则集告诉学员"什么是对的"。 - 社区活跃度 ★★★★★：Vercel 官方背书，45 万装机，规则库持续更新。 **与竞品对比**：Emil Kowalski 的 `review-animations` 是其"垂直精简版"——只审动效、但审美门槛更高、更主观。两者可叠加：web-design-guidelines 守"对错底线"，review-animations 拔"工艺上限"。 ### 2. hyperframes-animation —— HeyGen 的动效知识总集 **来源**：`heygen-com/hyperframes`，装机 9.4 万。 **安装**：`npx skills add heygen-com/hyperframes@hyperframes-animation` 官方描述点明它的野心："**All motion knowledge in one skill**"。它把动效知识切成两层——`rules`（原子配方，单个动效怎么做）与 `blueprints`（多步蓝图，一段完整的动效序列怎么编排）。配合 HyperFrames "写 HTML/CSS/JS 即可渲染视频"的范式，一个 prompt 就能产出"10 秒产品介绍片：标题淡入 + 产品图回弹入场 + CTA 滑入"。 - 功能完整度 ★★★★★：是本期信息密度最高的单体技能，规则+蓝图双层结构覆盖从单元素到多元素编排。 - 上手难度 ★★★：需先理解 HyperFrames 的"HTML 即视频"心智模型，对纯前端开发者略有认知成本。 - 变现潜力 ★★★★：动效片头、产品演示、社媒动图都是高单价交付物，可直接接单。 - 训练营适用性 ★★★★：原子配方天然适合"一节课教一个动效"的节奏。 - 社区活跃度 ★★★★：9.4 万装机，HeyGen 持续投入。 **适用性提醒**：它横跨"前端动效"与"视频内容"两端。若你的目标是纯网页内微交互，需搭配 `css-animations`；若目标是可交付的视频资产，它本身就是终点。 ### 3. css-animations —— 最贴近前端日常的动效砖块 **来源**：`heygen-com/hyperframes`，装机 7.3 万。 **安装**：`npx skills add heygen-com/hyperframes@css-animations` 定位是"HyperFrames 的 CSS 动画适配器"，落地到最朴素的 CSS 关键帧——`@keyframes`、`animation-delay`、缓动函数、错峰延迟。这是所有动效技能中"前端味"最纯的一个：不依赖任何运行时框架，产出即标准 CSS。 - 功能完整度 ★★★★：覆盖 CSS 动画主路径，但高级效果（弹簧物理、滚动联动）需借助框架。 - 上手难度 ★★★★：CSS 是前端通识，几乎零额外学习成本。 - 变现潜力 ★★★：单独售卖价值有限，更适合作为组件库的"增值层"打包出售。 - 训练营适用性 ★★★★：教学 CSS 动画的优质素材库。 - 社区活跃度 ★★★★：7.3 万装机，依托 HyperFrames 流量。 **与竞品对比**：相比 Framer Motion / GSAP 类技能，它的优势是"零依赖、可移植到任意项目"；劣势是无法表达复杂物理动效。把它当作"动效地基"最为稳妥。 ### 4. animation-vocabulary —— 把"那个弹一下"翻译成专业术语 **来源**：`emilkowalski/skills`，装机 1.6 万。 **安装**：`npx skills add emilkowalski/skills@animation-vocabulary` 一个精巧的反查词典。用户用模糊语言描述动效——"popover 打开时那个弹一下""iOS 拉过头弹回来的感觉"——它返回精确术语：**Pop in**、**Rubber-banding**、**Stagger**、**Morph**、**Shared element transition**，并附带消歧（Morph vs Crossfade vs Shared element transition）。SKILL.md 明确强调"用于命名，而非设计或构建"。 - 功能完整度 ★★★：功能窄但极致，是动效领域的"翻译插件"。 - 上手难度 ★★★★★：描述感受即得术语，无需任何技术背景。 - 变现潜力 ★★：单点工具难以直接收费，但能显著降低团队动效沟通成本。 - 训练营适用性 ★★★★★：建立"动效素养"的第一课，术语是所有讨论的基础。 - 社区活跃度 ★★★：1.6 万装机，背靠 Emil Kowalski 个人品牌。 **训练营亮点**：它是"动效扫盲"的最佳开场——先让学员会说术语，再谈如何实现。这种"词汇先行"的教学法在动效这种高度依赖感觉的领域尤其有效。 ### 5. review-animations —— 给动效代码"挑刺"的工艺质检员 **来源**：`emilkowalski/skills`，装机 2.7 万。 **安装**：`npx skills add emilkowalski/skills@review-animations` 对照 Emil Kowalski 的"设计工程"工艺标准，审查现有动效代码。它的切入点很实务：动效回归会让界面"变慢、变分散、变不可访问"——所以它不仅看"动得对不对"，更看"动得累不累、会不会触发前庭不适（vestibular）"。这恰好命中 `prefers-reduced-motion` 这类常被忽视的无障碍红线。 - 功能完整度 ★★★★：审查维度专业，兼顾工艺与可访问性。 - 上手难度 ★★★★：指向代码即得审查结论。 - 变现潜力 ★★★：可包装为"动效 QA 订阅服务"，按页面/组件计费。 - 训练营适用性 ★★★★★：用真实案例讲"为什么这个动效是坏动效"，比讲好动效更有冲击力。 - 社区活跃度 ★★★：2.7 万装机。 **与 web-design-guidelines 的分工**：后者是"通用规范裁判"，本技能是"动效专项教练"——一个判对错，一个抠手感。 ### 6. motion-design（LottieFiles）—— 动效的"迪士尼原理教科书" **来源**：`lottiefiles/motion-design-skill`，装机 4300。 **安装**：`npx skills add lottiefiles/motion-design-skill@motion-design` 装机量最低，却是**理论最完整**的一档。SKILL.md 直接引入迪士尼动画十二原则，并改造为 UI 场景的决策树与"三支柱"框架——情感意图（该让用户感受到什么）、视觉叙事（微故事的起承转合）、运动工艺（物理感与次级运动）。配套 8 步清单、时长速查表、缓动族（entrance=decelerate / exit=accelerate）、四种 Motion Personality 原型（Playful / Premium / Corporate / Energetic）。兼容 CSS、Framer Motion、GSAP、Lottie、Spring。 - 功能完整度 ★★★★★：本期"道"的层面最深，从情绪到原型到时长全覆盖。 - 上手难度 ★★★：概念密度高，需要一定设计审美底子才能用好。 - 变现潜力 ★★★★："品牌动效身份（brand motion identity）"是高溢价咨询品类。 - 训练营适用性 ★★★★★：现成的课程骨架——三支柱、原型、清单即可拆成一整门课。 - 社区活跃度 ★★：4300 装机偏低，但 LottieFiles 是矢量动效领域头部品牌，可信度无虞。 **最大价值**：它把"凭感觉"的动效决策，结构化成可教授、可复用的方法论。装机量与质量严重倒挂，是被低估的宝藏。 ### 7. threejs-animation —— 三维动效的进阶天梯 **来源**：`cloudai-x/threejs-skills`，装机 9000。 **安装**：`npx skills add cloudai-x/threejs-skills@threejs-animation` 进入 WebGL 维度。讲解 Three.js 动画系统的三大件——`AnimationClip`（关键帧数据容器）、`AnimationMixer`（在根对象上播放）、`AnimationAction`（控制单段播放），涵盖关键帧动画、骨骼动画、形变目标（morph targets）、动画混合与程序化运动（`Math.sin(elapsed)` 驱动）。 - 功能完整度 ★★★★：覆盖三维动画主干，足以驱动 GLTF 角色与场景。 - 上手难度 ★★：Three.js + WebGL 学习曲线陡峭，门槛是七款中最高。 - 变现潜力 ★★★★：三维 Hero 区、产品配置器、沉浸式落地页是高端溢价项目。 - 训练营适用性 ★★★：适合作为进阶模块，需较长课时。 - 社区活跃度 ★★★：9000 装机，社区维护。 **定位**：它是动效生态的"天花板"——当二维 CSS 不够用、需要真正震撼的视觉时才入场。与 `motion-design` 搭配可实现"原理 + 三维落地"的高端组合。 ## 动效技能生态分类思维导图 ```mermaid mindmap root((前端动效技能生态)) 词汇层(命名与沟通) animation-vocabulary 模糊描述→精确术语 Stagger/Morph/Rubber-banding 规范层(对错底线) web-design-guidelines Vercel官方规则集 无障碍与交互合规 原理层(方法论) motion-design 迪士尼十二原则 三支柱与Motion原型 生成层(从提示到动效) hyperframes-animation 规则+蓝图双层 css-animations 零依赖CSS关键帧 motion-graphics 多元素编排 审查层(工艺质检) review-animations 慢/分散/不可访问 三维层(进阶) threejs-animation 骨骼与形变目标 ``` ## 推荐排行榜 **按使用场景** - 想让团队"会说动效"：① animation-vocabulary - 想守住界面合规底线：① web-design-guidelines ② review-animations - 想从零系统学动效：① motion-design ② hyperframes-animation - 想快速产出可交付动效资产：① hyperframes-animation ② css-animations - 想做高端三维体验：① threejs-animation **按变现潜力** 1. **hyperframes-animation**（★★★★）——动效片头/产品演示可直接接单，单价高、交付快。 2. **threejs-animation**（★★★★）——三维沉浸式项目溢价最高，但交付周期长。 3. **motion-design**（★★★★）——"品牌动效身份"咨询，一次设计多次复用。 4. **review-animations**（★★★）——动效 QA 订阅服务，可标准化计费。 **按训练营适用性** 1. **motion-design**（★★★★★）——现成的课程骨架，三支柱即可成课。 2. **web-design-guidelines**（★★★★★）——权威规则集，最佳"什么是对的"教学锚点。 3. **animation-vocabulary**（★★★★★）——动效扫盲第一课。 4. **review-animations**（★★★★★）——用反面案例教学，记忆点强。 **本期最优"装机组合"建议**：日常前端工作流装 `web-design-guidelines + css-animations + animation-vocabulary`（覆盖规范、生成、沟通）；内容创作者加 `hyperframes-animation`；教学者必装 `motion-design`。 ## 延伸观察 动效赛道的真正壁垒不在"会不会写 `transition`"，而在于三层能力的叠加：**会命名（vocabulary）→ 懂原理（motion-design）→ 能审查（review）**。HeyGen 用生成端垄断了流量入口，但 LottieFiles 与 Emil Kowalski 在原理与工艺两端留下的教学空间，恰恰是付费课程与训练营最易落地的切口。对于想切入"前端动效"的从业者，建议先从"词汇 + 原理"建立认知壁垒，再叠加"生成 + 三维"做交付——这条路径既能教、又能卖、还能避开与样式/组件赛道的正面内卷。 ## 参考来源 1. [heygen-com/hyperframes — Write HTML. Render Video](https://github.com/heygen-com/hyperframes) — HyperFrames 动效技能家族官方仓库，含 hyperframes-animation、css-animations、motion-graphics 等技能源 2. [Web Interface Guidelines — Vercel](https://vercel.com/design/guidelines) — Vercel 官方 Web 界面规范，web-design-guidelines 技能的规则源 3. [emilkowalski/skills — Skills for Design Engineers](https://github.com/emilkowalski/skills/) — animation-vocabulary 动效词汇反查与 review-animations 动效审查技能源 4. [Taste Skill — The Anti-Slop Frontend Framework](https://www.tasteskill.dev/) — Leonxlnx 动效与高端视觉设计技能家族文档，覆盖 motion / typography 方向 5. [Improving frontend design through Skills — Claude by Anthropic](https://claude.com/blog/improving-frontend-design-through-skills) — Anthropic 官方对 frontend-design 与动效（purposeful motion）的设计哲学说明 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。