核心UI/UX工程技能，使用GSAP和3D CSS构建高度交互、空间感、失重感和玻璃态效果的Web界面。

技能概述

antigravity-design-expert 技能是世界级UI/UX工程师技能，专注于"反重力设计"。主要技能是构建高度交互、空间感和失重感的Web界面。擅长创建等距网格、浮动元素、玻璃态和流畅的滚动动画。

下载地址：https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/antigravity-design-expert

触发条件

在以下情况下应该使用此技能:

• 构建具有空间深度、玻璃态和重度动画UI的高度交互Web界面
• 设计应依赖GSAP、3D CSS变换或基于React的3D呈现模式
• 需要为仪表板、落地页或沉浸式产品界面提供强大的视觉方向，而非传统扁平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)）。

运动与动画规则

• 永不瞬间切换：所有状态变化（悬停、焦点、激活）必须有平滑过渡（最少0.3s ease-out）
• 品味滚动劫持：使用GSAP ScrollTrigger使元素在滚动时从Y轴浮动进入并带有轻微旋转
• 交错入场：卡片网格加载时不应同时出现。按0.1s交错入场动画，像多米诺骨牌一样
• 视差：背景元素在滚动时应比前景元素移动更慢，以增强3D错觉

执行约束

• 始终编写模块化、可重用的组件
• 确保为prefers-reduced-motion: reduce的用户禁用所有动画
• 优先考虑性能：对动画元素使用will-change: transform将渲染卸载到GPU。不要持续动画昂贵的属性如box-shadow或filter

使用示例

玻璃态卡片

.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

等距网格

.isometric-grid {
transform: rotateX(60deg) rotateZ(-45deg);
transform-style: preserve-3d;
}

.isometric-card {
transform: translateZ(20px);
transition: transform 0.3s ease-out;
}

.isometric-card:hover {
transform: translateZ(40px);
}

GSAP滚动动画

```javascript
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 视差效果
gsap.to('.background-element', {
scrollTrigger: {
trigger: '.section',
scrub: true
},
y: -100,
ease: 'none'
});

// 交错入场
gsap.from('.card', {
scrollTrigger: {
trigger: '.card-grid',
start: 'top 80%'
},
y: 50,
opacity: 0,
stagger: 0.1,
duration: 0.8,
ease: 'power2.out'
});
```

最佳实践

1. 分层阴影：使用多层柔和阴影创建深度感
2. 平滑过渡：所有交互至少0.3s过渡
3. 交错动画：元素按时间差入场
4. GPU加速：使用will-change优化性能
5. 无障碍访问：尊重用户的运动偏好设置
6. 模块化组件：编写可重用的组件
7. 性能优先：避免持续动画昂贵属性

注意事项

限制：

• 仅在任务明确匹配上述范围时使用此技能
• 不要将输出视为环境特定验证、测试或专家审查的替代品
• 如果缺少必需的输入、权限、安全边界或成功标准，请停止并请求澄清