LanceSkill - Guía Premium de UI/UX y Diseño de Juegos

Guía Premium de UI/UX y Diseño de Juegos (Premium UI/UX & Game Design)

Este skill tiene como objetivo guiar al agente de IA para que, al diseñar interfaces web, aplicaciones o juegos, evite la salida predeterminada "simple, monótona y con estética de ingeniero", y produzca productos profesionales con un aspecto moderno, capas visuales refinadas y una experiencia de interacción fluida (Micro-interactions).

---

1. Estética Visual y Sistema de Diseño (Design System & Aesthetics)

🎨 Rechazar Colores Planos (Color Palette)

• Colores prohibidos: Nunca uses #FF0000 (rojo puro), #00FF00 (verde puro), #0000FF (azul puro), #FFFF00 (amarillo puro).
• Paleta seleccionada (Semantic Colors):
  • Fondo y texto: Usa gris pizarra oscuro (Deep Slate, ej. #0B0F19, #1E293B) o negro mate extremo, combinado con blanco crema de alto contraste pero suave (#F8FAFC).
  • Color primario (Primary): Usa índigo (#6366F1), verde aurora (#10B981), violeta (#8B5CF6), rosa degradado.
  • Colores de estado: Error con coral suave (#EF4444), éxito con verde esmeralda (#34D399).

✍️ Tipografía Moderna y Jerarquía Tipográfica (Typography)

• Carga de fuentes: Siempre carga fuentes modernas desde Google Fonts, por ejemplo:
  • UI/Cuerpo: Inter o Plus Jakarta Sans.
  • Títulos/Números: Outfit o Cabinet Grotesk.
• Contraste de pesos (Font Weights): Títulos con 700 u 800, subtítulos 500/600, cuerpo 400. Crea jerarquía visual mediante el grosor de la fuente, no solo el tamaño.

🔮 Profundidad Espacial y Efecto de Vidrio Esmerilado (Depth & Glassmorphism)

• Diseño de esquinas redondeadas: Botones con radio de al menos 8px a 12px; tarjetas con 16px a 24px.
• Vidrio esmerilado (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);
  

• Sombras suaves (Box Shadows): Usa sombras multicapa y sutiles para crear una sensación de elevación, evitando sombras negras duras de una sola capa:

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

---

2. Micro-interacciones Fluídas y Efectos Dinámicos (Micro-interactions & Motion)

La sofisticación de la interfaz proviene de la "retroalimentación y el movimiento". Una interfaz sin animaciones de transición se siente rígida.

✨ Dinamismo en Botones y Componentes Interactivos (Button Interactions)

• Transiciones suaves: Todos los estados Hover/Focus/Active deben incluir una transición suave:

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

• Elevación al Hover y Resplandor: Al pasar el ratón, la tarjeta se eleva ligeramente, la sombra se profundiza o el borde se ilumina.

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

• Feedback de presión al hacer clic (Press Feedbacks):

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

🌀 Carga y Transiciones (Transitions & Loaders)

• Pantalla esqueleto (Skeleton Screen): Para datos cargados de forma asíncrona, diseña siempre una pantalla esqueleto con un parpadeo suave, en lugar del texto rígido "Cargando...".
• Animaciones SVG refinadas: Si se necesita un Spinner, usa iconos SVG ligeros rotados con CSS, combinados con un efecto degradado.

---

3. Normas Específicas de UI/UX para Juegos (Game UI/UX Guidelines)

⏱️ Reloj de Juego y Control Fluido (Game Loop & Controls)

• Separar física y renderizado: Usa requestAnimationFrame para el renderizado y procesa con un paso de tiempo fijo.
• Suavizado de controles: Si se usan sensores para controlar el juego, aplica un filtro de paso bajo o interpolación a los datos para evitar vibraciones en los componentes.

💥 Jugosidad y Feedback Táctil (Game Juice & Tactile Feedback)

• Feedback de puntuación/éxito:
  • Agrandar la fuente y hacerla rebotar (transform: scale(1.2) con animación bounce).
  • Efecto de partículas.
  • Números que flotan hacia arriba y se desvanecen.
• Feedback de daño/fracaso:
  • Sacudida de pantalla (Screen Shake).
  • Parpadeo rojo.
  • Animación de sacudida (Shake animation).

📺 Configuración de Interfaz y HUD (Heads-Up Display)

• Diseño responsivo a pantalla completa sin parallax.
• Máscara semitransparente oscurecida, los menús emergentes aparecen con animaciones de Scale-up o Slide-in.

---

4. Flujo de Trabajo de Desarrollo y Normas de Implementación (Implementation Workflow)

1. Diseñar antes de implementar: Antes de escribir código, dibuja un boceto de la disposición en ASCII/Markdown.
2. Rechazar placeholders: No uses datos de prueba como "Lorem Ipsum"; los iconos deben ser siempre SVG (ej. Lucide icons).
3. Gestionar colores del tema con CSS Variables de forma centralizada.