AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载导读本文围绕 agentic-awesome-skills 仓库中的antigravity-design-expert技能展开系统讲解 Antigravity Design反重力设计这一 UI/UX 工程范式——以空间纵深、失重悬浮、玻璃拟态与等距透视为核心视觉语言配合 GSAP 与 3D CSS Transform 打造高交互 Web 界面。读完本文你将掌握该技能的核心设计原则、动效规则、技术栈选型与执行约束并能直接落地一整套可运行的 React 组件与滚动动效示例。技能定位与适用场景antigravity-design-expert是 agentic-awesome-skills 仓库收录的一枚社区贡献的 UI/UX 工程技能其元信息见 SKILL.md将其描述为Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.在仓库的 catalog.json 中该技能被归类为category: design、risk: safe、source: community检索标签triggers包含antigravity、core、ui、ux、engineering、skill、glassmorphism等关键词。也就是说它是 AAS 技能库中负责视觉方向的专用技能之一与仓库中其他 UI 类技能如anti-ui-slop、anti-slop-design形成互补前者解决避免平庸 UI后者解决如何做出有空间感与动效的高级 UI。根据技能内When to Use的说明以下场景应当启用本技能正在构建具有空间纵深、玻璃拟态和动效浓重的高交互 Web 界面设计方案倾向于使用 GSAP、3D CSS transforms或基于 React 的 3D 呈现模式需要为仪表盘、落地页或沉浸式产品界面提供强烈的视觉方向而非传统平面 UI。反之如果任务只是常规的 CRUD 后台、表单密集型界面或对可访问性极其敏感的纯文本界面则不应启用本技能——这一点在技能末尾的Limitations中有明确要求详见后文使用边界一节。角色定位什么是反重力设计师技能的Role Overview将使用者定义为一个世界级的 UI/UX 工程师专精于 Antigravity Design反重力设计——即构建高交互、具有空间感、视觉上无重量的 Web 界面。其擅长的具体手段包括等距网格Isometric Grids悬浮元素Floating Elements玻璃拟态Glassmorphism丝般顺滑的滚动动画Buttery-smooth Scroll Animations。反重力这一名称的直观含义是界面元素不再像传统平面设计那样贴在屏幕上而是像处于零重力环境一样漂浮、分层、错落。设计者要思考的不是这个卡片放在哪一行而是这个卡片悬浮在三维空间的哪个深度层次。首选技术栈与选型逻辑技能为生成 UI 组件时规定了默认技术栈除非用户另有指示这直接决定了组件的写法与依赖层技术选型承担职责框架React / Next.js组件化与页面路由样式Tailwind CSS 自定义 CSSTailwind 负责布局与工具类复杂 3D transform 用自定义 CSS 精确控制动画GSAP ScrollTrigger时间线编排与滚动联动动效3D 元素React Three FiberR3F或 CSS 3D Transforms前者用于真正 3D 场景后者用于轻量的rotateX/rotateY/perspective透视效果选型逻辑值得注意技能刻意将布局与3D 变换分层——Tailwind 处理常规二维布局flex、grid、间距而所有涉及透视、旋转、Z 轴的复杂变换都落到手写 CSS 上避免 Tailwind 工具类难以表达三维上下文的问题。3D 方面则给了两档方案需要真实三维场景如产品展示、全景空间用 R3F仅需要卡片倾斜、等距透视等伪 3D效果时用 CSS 3D transforms 即可后者零依赖、性能更可控。四大设计原则营造反重力视觉氛围技能的Design Principles部分定义了四条核心原则它们是整个视觉体系的基石下面逐一展开。1. 失重悬浮WeightlessnessUI 卡片与元素应看起来浮在空中。实现手法是使用多层、柔和、弥散的投影而非生硬的大黑边阴影。技能给出的基准示例box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);这条规则的深层含义是阴影要宽而淡blur 半径大、透明度低、垂直偏移适中模拟元素悬浮在距背景一定高度时产生的漫反射光晕。实际落地时可以从该基准出发按层级递进浮得越高Z 值越大的元素阴影偏移与模糊越大、透明度越低从而建立悬浮高度的视觉阶梯。2. 空间纵深Spatial Depth充分利用 Z 轴分层背景要深前景元素要借助 CSSperspective从背景中弹出。实现纵深的基础是建立正确的 3D 上下文.scene { perspective: 1000px; /* 定义 3D 视场值越小透视越强 */ } .card { transform: rotateX(8deg) translateZ(40px); transform-style: preserve-3d; /* 允许子元素在 3D 空间中定位 */ }perspective的取值会显著影响观感1000px左右是接近人眼自然的透视取值越小如400px透视越夸张、变形越明显取值越大如2000px透视越平缓。设计时可将背景层、内容层、悬浮层分别放在不同 Z 值上形成多层景深。3. 玻璃拟态Glassmorphism使用微妙的半透明、背景模糊与半透明边框营造玻璃质感。技能给出的核心参数.glass { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); }三个参数缺一不可rgba背景提供通透感、backdrop-filter: blur()让玻璃后面的内容虚化产生折射错觉、半透明白色描边模拟玻璃边缘的高光。实践要点blur 值8px24px区间与背景透明度需要联调blur 越大背景可越透明同时应在supports (backdrop-filter: blur(1px))中提供降级方案因为旧版浏览器不支持backdrop-filter。4. 等距吸附Isometric Snapping构建仪表盘或卡片网格时用 3D transforms 将元素倾斜进等距透视。技能给出的经典变换.isometric { transform: rotateX(60deg) rotateZ(-45deg); }等距视角通过rotateX俯仰与rotateZ旋转组合实现使网格看起来像从固定角度俯视的乐高台面。实际使用中常见两个增强点外层再套一层transform-style: preserve-3d让内部元素图标、文字反向旋转立起来避免文字被压扁或叠加translateZ让每张卡片在等距网格中处于不同高度强化悬浮感。动效规则让界面活起来技能的Motion Animation Rules定义了四条硬性动效规范每一条都有具体的实现方式与性能含义。规则一永远不要瞬间跳变所有状态变化hover、focus、active必须平滑过渡技能规定最低0.3s ease-out.card { transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .card:hover { transform: translateY(-8px) scale(1.02); }ease-out缓动让元素起步快、收尾慢符合物体被施加力后减速停下的物理直觉也是悬浮感的关键来源。技能同时提示不要在transition中无差别包含box-shadow与filter因为它们是昂贵的绘制属性见下文执行约束。规则二克制的滚动接管Tasteful Scroll Hijacking使用 GSAP ScrollTrigger 让元素随滚动从 Y 轴飘入视野并伴随轻微旋转gsap.registerPlugin(ScrollTrigger); gsap.from(.float-in, { y: 80, // 从下方 80px 飘入 rotation: 6, // 轻微旋转增强动感 opacity: 0, duration: 1.0, ease: power2.out, scrollTrigger: { trigger: .float-in, start: top 85%, // 元素进入视口 85% 高度时触发 once: true, }, });克制二字是重点滚动动画应当作为叙事节奏的点缀而不是完全剥夺用户对滚动条的控制。start: top 85%这类提前量设置让动画在元素刚进入视口时就触发配合once: true避免来回滚动时反复播放。规则三错落入场Staggered Entrances卡片网格加载时不应同时出现而应按0.1s间隔依次入场像多米诺骨牌一样落下gsap.from(.grid .card, { y: 60, opacity: 0, duration: 0.6, ease: back.out(1.7), stagger: 0.1, // 每张卡片延迟 0.1s });stagger: 0.1是这条规则的核心参数它让 GSAP 自动为选择器集合中的每个元素计算错开的时间偏移。back.out(1.7)缓动会在动画结束时产生轻微回弹进一步强化落下的物理感。错落入场不仅适用于加载也适用于滚动触发、网格筛选结果切换等场景。规则四视差Parallax滚动时背景元素移动速度应慢于前景元素以强化 3D 错觉gsap.to(.parallax-bg, { yPercent: -30, // 背景只移动 30%形成速度差 ease: none, scrollTrigger: { trigger: .section, start: top bottom, end: bottom top, scrub: true, // 将动画与滚动位置绑定实现随滚随动 }, });scrub: true让动画进度直接由滚动位置驱动而非固定时长播放这是视差的标准实现方式。前景元素用yPercent: -100跟随正常速度或使用 ScrollTrigger 的y: 0 → -100背景用更小的百分比即可拉开层级速度差。执行约束工程化的质量底线技能的Execution Constraints部分规定了三条不可妥协的工程约束它们是炫技与可用性之间的护栏1. 模块化与可复用始终编写模块化、可复用的组件。动效逻辑应封装为独立组件/Hook如FloatingCard、useScrollReveal而非散落在页面代码中动画参数时长、缓动、延迟应抽成可配置 props 或设计令牌便于统一调整与维护。2. 尊重减少动效偏好必须为prefers-reduced-motion: reduce用户禁用动画。这是可访问性的硬性要求技能原文明确要求 Ensure all animations are disabledmedia (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }更精细的做法是在 JS 端检测偏好并跳过 GSAP 动画直接呈现最终状态即只渲染静态布局不执行入场动画。3. 性能优先对动画元素使用will-change: transform将渲染工作交给 GPU不要持续动画化昂贵属性如box-shadow与filter——它们会触发每帧的重绘paint导致掉帧。应坚持只动画化transform与opacity合成器属性阴影/模糊效果通过静态值或 CSS 变量在过渡终点一次性呈现。.animated-card { will-change: transform; /* 提示浏览器为 transform 建立合成层 */ transform: translateZ(0); /* 触发 GPU 合成的常见手段 */ }从示例到成品一套完整的反重力落地页组件技能文档以一条用户请求作为示例锚点Build a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI.下面给出一个融合上述全部规则的最小可运行组合示例React Tailwind GSAP演示如何将设计原则、动效规则与执行约束落到同一份代码中// FloatingCard.tsx —— 失重 玻璃拟态 等距倾斜的卡片组件 export default function FloatingCard({ title, children, index }: { title: string; children: React.ReactNode; index: number; }) { return ( div classNameisometric glass card style{{ transform: translateZ(${index * 20}px) }} h3{title}/h3 {children} /div ); }// Scene.tsx —— 3D 场景 GSAP 错落入场 视差背景 import { useLayoutEffect, useRef } from react; import gsap from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; gsap.registerPlugin(ScrollTrigger); export default function Scene({ cards }: { cards: { title: string; body: string }[] }) { const sceneRef useRefHTMLDivElement(null); useLayoutEffect(() { const ctx gsap.context(() { // 错落入场多米诺式依次落下 gsap.from(.card, { y: 60, rotation: 8, opacity: 0, duration: 0.7, ease: back.out(1.7), stagger: 0.1, }); // 视差背景滚动时慢速移动 gsap.to(.parallax-bg, { yPercent: -30, ease: none, scrollTrigger: { trigger: sceneRef.current, start: top bottom, end: bottom top, scrub: true }, }); }, sceneRef); return () ctx.revert(); // 卸载时清理动画与 ScrollTrigger }, []); return ( div ref{sceneRef} classNamescene relative overflow-hidden div classNameparallax-bg absolute inset-0 aria-hiddentrue / div classNamegrid gap-6 {cards.map((c, i) ( FloatingCard key{i} title{c.title} index{i}{c.body}/FloatingCard ))} /div /div ); }配套的 CSS融入设计原则.scene { perspective: 1000px; } .isometric { transform: rotateX(60deg) rotateZ(-45deg) rotateX(0deg); transform-style: preserve-3d; } .glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); } .card { box-shadow: 0 20px 40px rgba(0,0,0,0.05); will-change: transform; transition: transform 0.3s ease-out; } .card:hover { transform: translateY(-8px) scale(1.02); } media (prefers-reduced-motion: reduce) { .card, .parallax-bg { animation: none !important; transition: none !important; } }该组合完整覆盖了四原则perspective纵深、玻璃质感、失重阴影、等距倾斜、四条动效规则过渡不跳变、ScrollTrigger 飘入、stagger: 0.1错落、视差 scrub以及全部执行约束组件化、reduced-motion 降级、will-change 仅动画化 transform。使用边界与安全约束技能的Limitations部分明确了三条边界这也是技能设计上的自我约束仅在匹配范围内使用只有当任务明确符合本文开头When to Use描述的场景时才能启用本技能常规平面 UI、内容密集型企业应用不应使用。不能替代环境验证技能输出不等同于环境相关的验证、测试或专家评审的替代品。动效在不同浏览器、GPU 与低端设备上的表现差异很大交付前必须在目标环境实测尤其是backdrop-filter与大量合成层的性能。信息不足时主动澄清当所需输入、权限、安全边界或成功标准缺失时应停止并请求澄清而不是在假设下继续生成。此外SKILL.md 元信息中标注risk: safe即该技能本身不涉及高风险操作与仓库中标注critical的 CLI 编排、安全审计类技能不同它是纯前端设计/编码指导类技能。读者可在 catalog.json 中按id: antigravity-design-expert检索到其完整的分类、标签与触发词信息从而理解它在 AAS 技能检索体系中的定位同仓库的skills/目录下还存放着该技能的标准版本skills/antigravity-design-expert/SKILL.md二者内容一致可交叉对照。小结antigravity-design-expert为 UI 工程师提供了一套自洽的反重力设计方法论从失重、纵深、玻璃拟态、等距四大视觉原则出发以 GSAP/ScrollTrigger 驱动滚动动效与错落入场再以reduced-motion 降级 仅动画化 transform/opacity GPU 合成三条工程约束守住可用性与性能底线。实践中最关键的三条心法是阴影要宽而淡、透视要分层而设、动画只动合成器属性。将本技能与仓库中其他设计类技能如anti-ui-slop、ui-ux-pro-max组合使用可以在 AAS 生态中构建出既具沉浸感又经得起真实环境检验的高交互界面。赞分享AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载相关推荐用 competitor-analysis 技能跑通完整竞品分析从竞争格局扫描到差异化定位一站式指南用 competitor analysis 技能跑通完整竞品分析从竞争格局扫描到差异化定位一站式指南 pm skills https://link.gitcoAI 技能/插件插件系统需求管理foobox-cn foobar2000 主题安装、布局切换与常用设置完整指南foobox cn foobar2000 主题安装、布局切换与常用设置完整指南 foobox cn 是面向 foobar2000 的 DUI 皮肤配置基于UI组件calibre 电子书管理指南怎么转、怎么搜、怎么同步calibre 电子书管理指南怎么转、怎么搜、怎么同步 calibre 是一款免费开源的电子书管理工具Windows、Mac、Linux 三大平台都有。它把桌面应用CLI上一篇FanControl终极指南如何用免费软件彻底解决电脑风扇噪音问题下一篇如何使用TradingView MCP Jackson打造专属交易助手新手入门完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考