【研发类-前端开发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优化性能无障碍访问尊重用户的运动偏好设置模块化组件编写可重用的组件性能优先避免持续动画昂贵属性注意事项限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少必需的输入、权限、安全边界或成功标准请停止并请求澄清

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

相关推荐

VSCode安装PlatformIO IDE环境(ESP32)

纯血鸿蒙诞生、大模型降价、《黑神话·悟空》全球成功……属于我们共同的关键瞬间 | 融云 2024 年回顾

大气层系统完全指南：从零开始掌握任天堂Switch自制固件

更多资讯

如何用 douyin-downloader 批量下载抖音无水印视频，并按作者与日期自动归档

Android Studio Profiler 性能分析实战：CPU、内存、网络、能耗排查指南

Flue Valkey 持久化实战：用 @flue/redis 适配器把 Agent 会话状态接入 Valkey

Tandoor 相关工具与生态导览：recipe-scrapers 深度集成与周边应用盘点

VMD最佳模态数怎么选？基于中心频率相近原则的MATLAB自动定阶法

MATLAB实现极化码CA-SCL译码器的完整指南

今日更新

基于MATLAB的CRI显色指数计算：从SPD光谱到Ra的完整流程

JSP+Servlet+MySQL博客系统源码部署与优化全攻略

蜂窝调度算法 MATLAB 实现：比例公平、轮询与最大 C/I 对比

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？