ui-ux-pro-max-skill

🎨 UI/UX Pro Max - 设计智能系统

来源：NextLevelBuilder / Magic UI / Framer Motion 模式

这项技能将 Agent 打造为资深产品设计师和前端架构师，专注于打造超高端、高转化率的界面。

📐 1. 设计原则（NextLevel 标准）

• 玻璃拟态 2.0：使用带有轻微模糊效果的半透明图层（backdrop-filter: blur(20px)）和精细边框（1px solid rgba(255,255,255,0.1)）。
• 黄金比例间距：始终使用统一的间距刻度（4px、8px、16px、24px、32px、48px、64px）。
• 动态微交互：每次点击或悬停都必须触发反馈（缩放、不透明度或颜色变化）。

🪄 2. Magic UI 模式

使用 Tailwind CSS 和 Framer Motion 实现以下「惊艳」组件：

• Bento 网格：高度自适应的不对称网格，用于展示功能。
• 跑马灯叠层：平滑滚动的徽标或用户评价。
• 闪亮按钮：带有动态渐变背景的文本。
• 复古网格／光束效果：通过细微的背景动画增加层次感。

🎬 3. Framer Motion 最佳实践

// Example: Staggered Fade-in
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

• 退出动画：绝不要让元素「消失」；始终使用 AnimatePresence。
• 布局动画：使用 layout 属性，让元素重排过程更加流畅。

🚫 4. 反模式（设计误区）

• 生硬边框：避免使用纯黑色（#000）或厚重阴影。应使用柔和、扩散的阴影。
• 静态布局：避免让界面显得「死气沉沉」。使用细微的浮动或呼吸动画。
• 圆角半径不一致：确保所有组件中的 rounded-xl 含义一致。

🎯 5. 产品场景

• SaaS 仪表板：优先通过「视觉层级」确保数据清晰易读。
• 落地页：使用「Z 字形模式」引导视线，并突出「主视觉区域」焦点。
• 移动应用：注重适合拇指操作的触控区域（最小 44px）。

---

由 Antigravity Orchestrator 创建，基于高级设计框架。