Premium UI/UX & Game Design Guide

What does UX & Game Design Guide do?

This skill guides AI agents to break free from "plain, monotonous, engineer-aesthetic" default outputs when designing web pages, application interfaces, or games, producing professional-grade products with modern aesthetics, rich visual layers, and smooth interactive experiences (micro-interactions).

---

1. Visual Aesthetics & Design System

🎨 Refuse Dull Colors (Color Palette)

• Avoid Pure Colors: Absolutely avoid using #FF0000 (pure red), #00FF00 (pure green), #0000FF (pure blue), #FFFF00 (pure yellow).
• Curated Tones (Semantic Colors):
  • Backgrounds & Text: Use deep slate gray (Deep Slate, e.g., #0B0F19, #1E293B) or extreme matte black, paired with high-contrast but soft off-white (#F8FAFC).
  • Primary Colors: Use indigo (#6366F1), aurora green (#10B981), violet (#8B5CF6), or gradient rose red.
  • State Colors: Use soft coral red (#EF4444) for errors, emerald green (#34D399) for success.

✍️ Modern Typography & Font Hierarchy

• Font Loading: Always load modern fonts from Google Fonts, for example:
  • UI/Body: Inter or Plus Jakarta Sans.
  • Headings/Numbers: Outfit or Cabinet Grotesk.
• Font Weight Contrast: Use 700 or 800 for headings, 500/600 for subheadings, 400 for body text. Create visual hierarchy through font weight rather than just font size.

🔮 Spatial Depth & Glassmorphism

• Border Radii: Buttons should have at least 8px to 12px radius; cards 16px to 24px.
• Glassmorphism:

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  

• Soft Shadows: Use multi-layered subtle shadows to create a floating effect, avoiding harsh single-layer black shadows:

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 
              0 1px 3px rgba(0, 0, 0, 0.02);
  

---

2. Smooth Micro-interactions & Motion

The sophistication of a UI comes from "feedback and motion." An interface without transition animations will feel stiff.

✨ Button & Component Dynamics

• Smooth Transitions: All Hover/Focus/Active states must include a smooth transition:

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  

• Hover Lift & Glow: On mouse hover, cards should slightly lift, shadows deepen, or border edges glow.

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(99, 102, 241, 0.4);
  }
  

• Press Feedbacks:

  .button:active {
    transform: scale(0.96);
  }
  

🌀 Loading & Transitions

• Skeleton Screens: For asynchronously loaded data, always design a smooth shimmering skeleton screen instead of a harsh "Loading..." text.
• Refined SVG Animations: If a spinner is needed, use lightweight SVG icons with CSS rotation and gradient effects.

---

3. Game UI/UX Specific Guidelines

⏱️ Game Loop & Smooth Controls

• Separate Physics & Rendering: Use requestAnimationFrame for rendering and process with a fixed time step.
• Control Smoothing: If using sensors for game control, apply low-pass filtering or interpolation to the data to prevent jitter.

💥 Feedback & Game Feel (Juice)

• Score/Success Feedback:
  • Scale up font with a bounce (transform: scale(1.2) with bounce animation).
  • Emit particle effects.
  • Numbers float upward and fade out.
• Damage/Failure Feedback:
  • Screen Shake.
  • Red Flash.
  • Card Shake animation.

📺 Interface Layout & HUD

• Full-screen, non-parallax, responsive layout.
• Semi-transparent dark overlay, menus appear with scale-up or slide-in animations.

---

4. Development Workflow & Implementation Rules

1. Design Before Implementation: Before writing code, draft the layout using ASCII/Markdown sketches.
2. No Placeholders: Do not use "Lorem Ipsum" or similar test data; always use SVG icons (e.g., Lucide icons).
3. Centralized Theme Colors with CSS Variables.