利用 AI 构建具有空间感与玻璃拟态的 Antigravity UI

解决传统扁平化 UI 的单调感：引导 AI 运用 3D 变换、GSAP 动画和玻璃拟态设计，打造具有“失重感”和深度空间感的沉浸式 Web 界面。

为什么需要这个技能

传统的扁平化设计（Flat Design）虽然简洁，但在构建高端落地页、数字化仪表盘或沉浸式产品界面时，缺乏视觉冲击力和层次感。

“Antigravity Design”（失重设计）的核心在于打破二维页面的局限。通过模拟物理空间的深度、光影的通透感以及流畅的非线性动画，可以显著提升产品的高级感和用户的交互体验。本技能将 AI 转化为一名资深的 UI/UX 工程师，使其能够精准输出符合现代审美且性能优化的 3D 交互代码。

适用场景

• 高端产品落地页：需要通过 3D 滚动效果吸引用户注意力。
• 沉浸式管理后台：将枯燥的数据卡片转化为具有等轴侧视角（Isometric）的 3D 空间布局。
• 创意交互组件：构建具有玻璃拟态（Glassmorphism）质感且支持平滑过渡的 UI 元素。
• 空间感 UI 实验：需要利用 Z 轴层级和视差滚动来增强视觉深度。

核心工作流

1. 定义视觉基调：设定“失重”原则，要求 AI 使用扩散阴影（Diffused Shadows）和 Z 轴层级来创造浮动感。
2. 配置技术栈：默认采用 React/Next.js + Tailwind CSS，并引入 GSAP 处理滚动联动动画，使用 CSS 3D Transforms 实现空间变换。
3. 实施玻璃拟态：通过 backdrop-filter: blur() 和半透明边框构建玻璃质感，确保元素在深色或复杂背景上依然清晰。
4. 注入动态细节：
   • 拒绝瞬时跳转：所有状态切换必须带有至少 0.3s 的平滑过渡。
   • 交错加载：卡片组进入时采用 stagger 动画，像多米诺骨牌一样依次落下。
   • 视差增强：背景元素与前景元素以不同速度移动，模拟真实 3D 深度。
5. 性能优化：强制使用 will-change: transform 将渲染交给 GPU，并为开启“减少动态效果”模式的用户禁用动画。

下载和安装

下载 antigravity-design-expert 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐