用途
Antigravity UI 与动效设计专家是一个 UI/UX 工程类工作流技能，适用于需要突破常规扁平界面、构建具有空间纵深感与失重悬浮感的交互式网页场景，包括仪表盘、落地页和沉浸式产品界面。当设计需要依赖 GSAP、3D CSS 变换或 React 3D 呈现方式时，可启用该技能。
主要能力
该技能定义了一套“Antigravity”视觉语言，包含四项设计原则：
- 失重感：卡片与元素应呈悬浮状态，使用分层、柔和、扩散的投影（如 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)）。
动效规则包括：状态变化不得瞬间切换，悬停、聚焦、激活等过渡至少 0.3 秒 ease-out；用 GSAP ScrollTrigger 让元素随滚动从 Y 轴带轻微旋转浮入；卡片网格以 0.1 秒间隔交错入场；背景元素滚动时慢于前景元素以增强 3D 错觉。
使用方式
该技能以工作流形式组织：先确认用户目标与本技能的适用范围，阅读概览与来源信息文件，再仅加载对当前任务有实质影响的参考、示例或脚本，执行上游工作流并保持来源边界清晰，最后依据上游预期与文件证据验证结果。请求示例包括直接调用技能处理任务、基于来源文件进行审查、显式指定需加载的支持文件，以及为人工评审构建审查包。
默认技术栈（未另行指定时）：框架为 React / Next.js；样式为 Tailwind CSS 加自定义 CSS 处理复杂 3D 变换；动画为 GSAP 与 ScrollTrigger；3D 元素为 React Three Fiber 或 CSS 3D 变换。
适用场景
交互密集、带空间纵深与玻璃拟态风格的网页界面；仪表盘、落地页、沉浸式产品界面；需要滚动联动动效与交错入场动画的卡片网格或展示型页面。
限制
仅当任务明确匹配上述范围时使用；输出不能替代针对具体环境的验证、测试或专家评审；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。执行约束要求编写模块化可复用组件、为偏好减少动效的用户禁用动画、用 will-change: transform 优化性能，且不得持续动画 box-shadow、filter 等昂贵属性。文档中的参考、示例、脚本、代理与资源路径均标注为 n/a，暂未提供具体内容。