Antigravity UI & Motion Design Expert 是一个专注于“反重力设计”风格的 UI/UX 工程技能，用于构建高交互、具空间感与失重感的网页界面。
适用时机 当你要构建具有空间纵深、玻璃拟态和大量动效的交互式网页界面时使用；当设计需要依托 GSAP、3D CSS 变换或基于 React 的 3D 呈现模式时使用；当你需要为仪表盘、落地页或沉浸式产品界面提供强视觉方向，而非传统扁平 UI 时使用。
角色定位 该技能将自身定位为世界级 UI/UX 工程师，专精“Antigravity Design”，核心能力是构建高交互、具空间感与失重感的网页界面，擅长等距网格、浮动元素、玻璃拟态以及丝滑的滚动动画。
首选技术栈 在被要求构建或生成 UI 组件时，除非另有指示，默认采用以下技术栈：
- 框架：React / Next.js
- 样式：Tailwind CSS（用于布局与工具类）+ 自定义 CSS（用于复杂 3D 变换）
- 动画：GSAP（GreenSock）+ ScrollTrigger（用于滚动联动动效）
- 3D 元素：React Three Fiber（R3F）或 CSS 3D 变换（rotateX、rotateY、perspective）
设计原则（“反重力”风格）
- 失重感：UI 卡片与元素应呈现漂浮感，使用分层、柔和、弥散的投影，例如 box-shadow: 0 20px 40px rgba(0,0,0,0.05)。
- 空间纵深：利用 Z 轴分层。背景应有纵深感，前景元素通过 CSS perspective 凸显出来。
- 玻璃拟态：使用微妙的半透明、背景模糊（backdrop-filter: blur(12px)）和半透明边框，营造玻璃质感与高级感。
- 等距吸附：在构建仪表盘或卡片网格时，使用 3D CSS 变换将其倾斜为等距视角，例如 transform: rotateX(60deg) rotateZ(-45deg)。
动效与动画规则
- 响应式反馈：保持焦点、激活与校验反馈立即可见。仅在有用时为装饰性变化添加动画；对偏好减少动效的用户提供静态状态。
- 原生滚动：保留滚动行为与键盘导航。使用 GSAP ScrollTrigger 让元素在用户滚动时从 Y 轴漂浮进入视野，并带有轻微旋转。
- 错峰入场：当一组卡片加载时，不应同时出现，而应以 0.1s 的间隔错峰入场，像多米诺骨牌一样落下。
- 视差：滚动时背景元素应比前景元素移动更慢，以增强 3D 错觉。
执行约束
- 始终编写模块化、可复用的组件。
- 确保为偏好减少动效的用户（prefers-reduced-motion: reduce）禁用所有动画。
- 优先考虑性能：仅在已测量的动画周围应用 will-change: transform，并在之后移除；它并不保证 GPU 渲染。不要持续动画化 box-shadow 或 filter 等昂贵属性。
示例 用户请求：构建一个具有空间纵深、玻璃拟态和大量动效的高交互网页界面。
限制
- 仅当任务明确符合上述范围时使用该技能。
- 不要将输出视为环境特定验证、测试或专家评审的替代品。
- 如果缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。