ui-ux-pro-max-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

🎨 UI/UX Pro Max - Design Intelligence System

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

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.

来源: NextLevelBuilder / Magic UI / Framer Motion Patterns

本技能可将Agent转变为资深产品设计师与前端架构师，专注于超高端、高转化率的界面设计。

📐 1. Design Principles (NextLevel Standards)

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

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).

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

🪄 2. Magic UI Patterns

🪄 2. Magic UI 模式

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.

使用Tailwind CSS & Framer Motion实现以下“惊艳”组件：

Bento网格: 高响应性、非对称网格，用于展示功能。
跑马灯覆盖层: 平滑滚动的logo或客户评价。
光泽按钮: 带有动态渐变背景的文本按钮。
复古网格/光束效果: 微妙的背景动画，增加层次感。

🎬 3. Framer Motion Best Practices

🎬 3. Framer Motion 最佳实践

javascript

// 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.

javascript

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

退出动画: 绝不让元素“突然消失”；务必使用
```
AnimatePresence
```
。
布局动画: 使用
```
layout
```
属性实现元素的平滑重排。

🚫 4. Anti-Patterns (Design Sins)

🚫 4. 反模式（设计禁忌）

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.

生硬边框: 避免纯黑色（#000）或厚重阴影。使用柔和、扩散的阴影。
静态布局: 避免界面显得“死气沉沉”。使用微妙的悬浮或呼吸动画。
不一致的圆角: 确保
```
rounded-xl
```
在所有组件中的含义一致。

🎯 5. Product Scenarios

🎯 5. 产品场景

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.

SaaS仪表盘: 以“视觉层级”为优先，确保数据清晰可读。
着陆页: 使用“Z型模式”引导视线，突出“Hero区域”焦点。
移动应用: 专注于“拇指友好”的触摸目标（最小44px）。

由Antigravity Orchestrator创建 - 基于高端设计框架。