关于 site-motion-excellence-director
面向设计师和开发者的网站与应用动效规划技能，涵盖动效规格、运行时选择、减少动态效果的方案及实现前验证。
主要功能
- 01规划动效目的与节奏
- 02静态画面审查关卡
- 03运行时选择指引
- 04减少动态效果方案
- 05浏览器与移动端检查
适用场景
- 01规划网站或应用动画
- 02为功能选择动效运行时
- 03准备动效交接与质量检查
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/site-motion-excellence-director确认已加载。
详细介绍
网站动效卓越指导
在为网站或应用添加大量动效前，使用此技能。
工作流
- 明确品牌、路由、受众和用户的首要任务。
- 在动画开始前定义第一眼应看到的内容。
- 说明动效的目的：引导、揭示、解释、确认、比较、彰显品牌或促成转化。
- 通过静帧关卡。
- 编写节拍序列：铺垫、触发、主要动作、辅助动作、停留、最终状态。
- 选择能保留设计意图的最轻量运行时。
- 在同一轮中指定减少动态效果时的行为。
- 只有在规格明确后才开始实现。
- 通过浏览器截图、移动端、减少动态效果设置以及视频／帧证明进行验证。
- 使用卓越关卡评分。
运行时规则
- 简单状态变化、悬停／焦点状态、骨架屏和低风险内容揭示，使用 CSS。
- 组件编排、布局过渡、元素进出场以及 React 滚动效果，使用 Motion for React。
- 固定、滚动联动、吸附、SVG／Canvas 或复杂定制时间线，使用 GSAP ScrollTrigger。
- 交互式矢量状态机，使用 Rive。
- 可移植的非交互式矢量循环动画，使用 Lottie／dotLottie。
- 仅当 3D 是核心内容且经过视觉验证时，才使用 Three.js。
- 渲染视频、社交媒体变体、产品说明视频，以及媒体中精确的文本／布局，使用 Remotion。
- 仅将 Grok/imagegen/Veo/Sora/Luma/Runway/Higgsfield 用于素材生成，之后在实际环境中完成制作和 QA。
品味规则
- 动效是随时间展开的视觉层级。
- 不要为效果欠佳的静帧添加动画。
- 让一个对象成为主角。
- 用静止形成对比。
- 重复出现的任务动效要简短、克制。
- 不要将精确的产品文字嵌入生成的图片或视频中。
- 将移动端视为独立的编排场景。
- 若没有减少动态效果时的行为设计，绝不发布重要动效。
必需规格
大量网站动效请使用 templates/site-motion/SITE_MOTION_SPEC.md。
交付前请使用 rubrics/site-motion-excellence-gate.md。
输出格式
返回：动效主旨、第一眼内容诊断、静帧评估、动效映射、运行时选择、减少动态效果方案、实现任务、所需 QA 证明，以及卓越评分。
评论
支持 Markdown