用途:用于创建现代玻璃拟态(glassmorphism)界面效果,灵感来自 DesignCode UI,适合磨砂玻璃面板、半透明浮层、卡片、模态框与 Hero 区域等场景。
主要能力:提供基础玻璃效果写法,如 className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl",并支持叠加彩色阴影 shadow-xl shadow-primary/10。模糊等级分为 subtle(backdrop-blur-sm,用于干净背景上的浮层)、medium(backdrop-blur-md,用于卡片与模态框)、strong(backdrop-blur-xl,用于主表面)、maximum(backdrop-blur-3xl,用于 Hero 区域)。透明度层支持浅色模式 bg-white/80、深色模式 bg-black/40,以及基于 CSS 变量的自适应写法 bg-[var(--glass-bg)]。还包含多层玻璃堆叠(背景层模糊最强、中间层次之、内容层最弱)以营造景深,彩色玻璃(bg-primary/10、bg-accent/5 配彩色阴影),以及边框技巧(border-white/20 内发光、伪元素渐变边框)。
使用方式:以 Tailwind 类名直接应用到元素上。技能规定强制智能体工作流:实现前运行 fuse-ai-pilot:explore-codebase 检查现有玻璃模式,运行 fuse-ai-pilot:research-expert 查询最新 backdrop-filter 支持情况;实现后运行 fuse-ai-pilot:sniper 进行验证。验证清单包括:存在 backdrop-blur-*、半透明背景、细微边框、在渐变背景上可用、定义深色模式变体。
限制:资料未提供具体安装命令、收费信息或平台支持范围;效果依赖浏览器对 backdrop-filter 的支持,实际兼容性需自行确认。