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

核心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滚动动画javascriptimport { 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});最佳实践分层阴影使用多层柔和阴影创建深度感平滑过渡所有交互至少0.3s过渡交错动画元素按时间差入场GPU加速使用will-change优化性能无障碍访问尊重用户的运动偏好设置模块化组件编写可重用的组件性能优先避免持续动画昂贵属性注意事项限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少必需的输入、权限、安全边界或成功标准请停止并请求澄清