🎨 UI/UX Pro Max - Design Intelligence System

Source: NextLevelBuilder / Magic UI / Framer Motion Patterns

This skill transforms the Agent into a Senior Product Designer & Frontend Architect specializing in ultra-premium, high-conversion interfaces.

📐 1. Design Principles (NextLevel Standards)

• Glassmorphism 2.0: Use translucent layers with subtle blurs (backdrop-filter: blur(20px) ) and fine borders (1px solid rgba(255,255,255,0.1) ).

• Golden Ratio Spacing: Always use a consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px, 64px).

• Dynamic Micro-Interactions: Every click/hover must have a reaction (scale, opacity, or color shift).

🪄 2. Magic UI Patterns

Implement the following "Wow" components using Tailwind CSS & Framer Motion:

• Bento Grids: Highly responsive, asymmetrical grids for feature showcasing.

• Marquee Overlays: Smoothly scrolling logos or testimonials.

• Shiny Buttons: Text backgrounds with moving gradients.

• Retro Grids / Beam Effects: Subtle background animations to add depth.

🎬 3. Framer Motion Best Practices

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

• Exit Animations: Never let elements "vanish"; always use AnimatePresence .

• Layout Animations: Use layout prop for smooth reshuffling of elements.

🚫 4. Anti-Patterns (Design Sins)

• Hard Borders: Avoid pure black (#000) or heavy shadows. Use soft, diffused shadows.

• Static Layouts: Avoid interfaces that feel "dead". Use subtle floating or breathing animations.

• Inconsistent Corner Radius: Ensure rounded-xl means the same thing across all components.

🎯 5. Product Scenarios

• SaaS Dashboards: Prioritize data clarity with "Visual Hierarchy".

• Landing Pages: Use "Z-Pattern" for eye-scanning and "Hero Section" focal points.

• Mobile Apps: Focus on "Thumb-friendly" touch targets (min 44px).

Created by Antigravity Orchestrator - Based on Premium Design Frameworks.