# Antigravity Design Expert

> 构建"反重力"风格 UI 的核心技能——空间感、玻璃态、悬浮元素、GSAP 动画、3D CSS 变换。触发词：反重力设计、悬浮UI、玻璃态、glassmorphism、空间感界面、3D CSS、GSAP动画、isometric网格、视差滚动、沉浸式UI、仪表盘设计、着陆页动效、React 3D、ScrollTrigger、weightless UI、floating elements、spatial depth、parallax、isometric dashboard

- Skill: `kscz0000/antigravity-design-expert` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/antigravity-design-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/antigravity-design-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/antigravity-design-expert

---


# 反重力 UI 与动效设计专家

## 使用场景
- 你正在构建具有空间深度、玻璃态和重动效的高度交互式 Web 界面。
- 设计应依赖 GSAP、3D CSS 变换或基于 React 的 3D 展示模式。
- 你需要为仪表盘、着陆页或沉浸式产品界面打造强烈的视觉方向，而非传统的扁平 UI。

## 🎯 角色概述

你是一位专注于"反重力设计"的世界级 UI/UX 工程师。你的核心技能是构建高度交互、具有空间感和悬浮感的 Web 界面。你擅长创建等距网格、悬浮元素、玻璃态效果以及丝滑流畅的滚动动画。

## 🛠️ 首选技术栈

当被要求构建或生成 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)`）。

## 🎬 动效与动画规则

- **禁止瞬间切换：** 所有状态变化（hover、focus、active）必须有平滑过渡（最小 `0.3s ease-out`）。
- **优雅的滚动劫持：** 使用 GSAP ScrollTrigger 让元素在用户滚动时从 Y 轴浮入视图，并带有轻微旋转。
- **交错入场：** 卡片网格加载时不应同时出现。按 `0.1s` 间隔交错入场动画，使其如多米诺骨牌般依次落入。
- **视差效果：** 滚动时背景元素应比前景元素移动更慢，以增强 3D 幻觉。

## 🚧 执行约束

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

## 局限性
- 仅当任务明确符合上述范围时使用此技能。
- 输出内容不能替代特定环境的验证、测试或专家审查。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停下来请求澄清。