用途:这是一个 Agent Skill,把 AI 设定为“首席 UI/UX 架构师与动效编排者”,目标是产出接近高端机构水准的网页体验,强调触感纵深、空间节奏、微交互与流畅动效。
主要能力:定义禁用清单(如禁用 Inter、Roboto、Arial 等字体,禁用粗描边图标、通用 1px 灰边框、生硬投影、贴顶导航、对称三栏网格、线性过渡);提供“创意变化引擎”,从氛围纹理原型(Ethereal Glass、Editorial Luxury、Soft Structuralism)与布局原型(非对称 Bento、Z 轴层叠、编辑式分栏)中组合选择,避免重复同一版式。
组件与动效:要求卡片使用“双边框嵌套”结构(外壳 + 内芯,同心圆角);CTA 使用胶囊按钮与“按钮内按钮”尾随图标;动效使用自定义 cubic-bezier 曲线、磁吸悬停、错峰遮罩揭示、滚动入场淡入上移,并规定移动端折叠规则(768px 以下单列、w-full、px-4,使用 min-h-[100dvh])。
性能约束:只动画 transform 与 opacity,backdrop-blur 仅用于固定或粘性元素,噪点叠加仅用于 fixed 且 pointer-events-none 的伪元素,滚动揭示用 IntersectionObserver 或 Framer Motion 的 whileInView,禁止 window.addEventListener('scroll')。
使用方式:作为技能加载后,按执行协议依次进行静默选择原型、搭建背景与排版、用双边框构建 DOM、注入动效、输出 React/Tailwind/HTML 代码,并按预输出清单自检。
限制:资料未提供具体安装命令、价格、平台支持范围与效果数据,暂未提供。