该技能定位为“做运动，而不是做装饰”，负责静态 UI 之上的动效、交互与生成图形层，面向通过 Claude Code 实现、以意图和审美进行指导的网页设计场景。资料未提供具体安装命令、收费方式与运行平台。
用途与核心理念
技能强调创意编程可以复用一个心智模型：循环、坐标、距离、时间、颜色，Canvas、WebGL 与 GSAP 只是同一套计算的不同运行位置。设计者负责意图与判断，实现与解释由 AI 完成；输入越具体，达到预期所需的轮次越少。按场景选择最低够用的层级，一个 WebGL 主视觉搭配其余 CSS 通常比全 3D 更出彩也更稳定。动效服务于内容，不能与内容争夺注意力，读者需要费力辨认文字即说明效果过强。未经实际运行观察的效果不得进入正式页面。
第一步：判断动效是否值得存在（强制）
在选层级前先过门槛：运动向用户传达了什么静态画面无法传达的信息；“好看”仅在品牌语境下成立且需明确说明。考虑用户看到该效果的频率：高频、预期内的交互应少动或不动，低频且有意义的时刻才值得动效。评估失败成本：慢设备、减少动态偏好、中断状态、快速点击。还要做移除测试：先构建静态版本，若移除后没有损失，就不应添加。若答案是否定，应一句话说明并提供更省成本的替代方案，而不是单纯拒绝；若“该有但太吵”，先减半时长、去掉一个属性、缩小幅度。
第二步：选择场景所需层级
- 层级 1：DOM / CSS / Framer Motion，用于淡入、位移、错峰、路由过渡、显现、悬停，成本低、可访问、利于 SEO。
- 层级 2：Canvas 2D，用于粒子、点场、生成噪声、鼠标响应线条，运行在 CPU，移动端数千粒子已有压力。
- 层级 3：WebGL（Three.js / 着色器），用于液态图像扭曲、海量粒子、3D 场景，包体大、需仔细处理移动端，GLSL 学习成本高。 原则是 CSS 或 Canvas 2D 能实现就不要升级到 WebGL。资料还提及 GSAP、Lenis、react-three-fiber、drei、postprocessing、Rive、Spline、Lottie 等工具，以及着色器相关的逐像素模型、形状函数、噪声/fBm/细胞噪声、图像位移、SDF/光线步进与调优词汇。
第三步：氛围编程循环
流程为：按提示词结构获取意图；在一次性路由（如 /lab 沙盒）构建隔离组件，不直接放入真实主视觉；运行 npm run dev 在浏览器查看；用具体词汇调整；获批后再集成到正式页面。提示词应包含意图与情绪、参考（链接、截图或站点名）、具体参数（速度、密度、鼠标影响半径、配色、幅度）、约束（移动端流畅、尊重减少动态、不影响文字可读性）、位置（主视觉背景、项目卡片悬停等）。调优词汇包括节奏（更慢/更快/带停顿/呼吸感）、密度（更密/更疏/更细/更重）、鼠标反应（影响半径更大/更微妙/带惯性/推或吸）、运动（更有机/更机械/带噪声/波浪状）、颜色（对比更强/偏向背景色/仅中心发光）、视觉权重（更低调/更主角/不与文字竞争）。配方涵盖平滑滚动、滚动显现、点场演化、悬停图像扭曲、漂浮 3D 物体。
第四步：防护栏
WebGL/canvas 组件需客户端渲染并动态导入、禁用 SSR；用 IntersectionObserver 在离屏时暂停循环；始终尊重 prefers-reduced-motion 并提供静态版本；dpr 上限设为 2 并在移动端降低密度；在顶部注释每个可调参数。悬停不等于触摸：若悬停揭示关键内容或 CTA，移动端必须提供明确的点击路径与可交互提示，并在真实触屏设备测试。
第五步：工艺筛选
进入用 ease-out、离开用 ease-in、重新定位用 ease-in-out，除进度条和微光外不用线性缓动。遵循 12 条动画原则（预备、跟随、舞台化、慢入慢出等），处理错峰与运动层级，明确不该动画的时刻。运行移除测试：注释动画看静态版十秒，说出用户少了什么信息；若描述的是“感觉平淡”而非用户损失，则问题在静态设计。效果不得抢走内容，标题永远优先。相关资料还涵盖 lerp/阻尼、噪声、最小数学、16ms 预算与动效伦理。
第六步：发布门槛
确认中端手机保持 60fps（每帧 16ms）；Three.js 等重库按页面懒加载；减少动态路径存在且未损坏；真实标题、文案与链接存在于 HTML 中，canvas/3D 文字对搜索引擎与屏幕阅读器不可见，WebGL 只作装饰；隐藏关键内容的悬停需有移动端点击路径；高频低新颖度交互不加动效；避免 transition: all，明确属性，用户可切换的元素用 transition 而非关键帧以便二次点击重定向。
常见陷阱
Next 中出现“window is not defined”，需“use client”加 ssr: false；手机卡顿多因密度过高或 dpr 未限制；包体膨胀需按页面懒加载；忽略可访问性会让持续运动引发不适；效果压过内容需回调；内容困在 canvas 中会丢失 SEO 与可访问性；悬停效果在触屏失效；动效会随提交逐次累积，需对新增效果重跑门槛。
与其他技能协作
ui-designer 负责静态视觉工艺与微动效（缓动曲线、悬停/按下/聚焦状态、普通 UI 的淡入或 50-80ms 错峰），动效如此小则交回该技能；本技能接管滚动驱动、canvas、WebGL、生成式等创意编程动效。ux-designer 负责流程、心理与可用性；design-system 负责设计令牌与组件基础设施；frontend-design 负责整体美学方向，本技能在其中构建运动。
绝对禁止
禁止不带“use client”与 ssr: false 发布 WebGL/canvas 组件；禁止离屏时继续运行动画循环；禁止跳过 prefers-reduced-motion；禁止 dpr 无上限或在移动端跑桌面密度；禁止把关键内容或 CTA 藏在无触摸路径的悬停后；禁止把真实内容或链接只放在 canvas/3D 中；禁止 CSS 或 Canvas 2D 可满足时上 WebGL；禁止未经运行观察就集成到正式页面；禁止除进度条和微光外使用线性缓动；禁止动画布局属性（width、height、top、left），只用 transform 与 opacity。