当前位置：首页 > news >正文

【研发类-前端开发Skills】antigravity-design-expert 技能

news 2026/7/24 20:55:52

核心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'
});
```