Nexus UI Architect

🎨 Nexus UI Architect

Misión

Garantizar que cada vista de Platform AI Solutions funcione perfectamente tanto en dispositivos móviles (iPhone SE/14 Pro) como en monitores Desktop (1080p/4k), manteniendo la estética "Premium Deep Tech" de Nexus.

🛠️ Herramientas y Stack

• Framework: React 18 + Vite.
• Styling: Tailwind CSS (Strict Utility-First).
• Iconografía: lucide-react.
• Animaciones: CSS Nativo (animate-pulse, animate-fade-in).

📐 Estrategia de Diseño Responsivo

1. Mobile First (Base)

Diseñamos pensando en pantallas verticales estrechas.

• Container: w-full px-4.
• Tipografía: Textos legibles (min 14px), H1 grandes pero ajustados.
• Touch Targets: Botones de mínimo 44x44px.
• Navegación: Menú hamburguesa o Bottom Bar para mobile. Sidebar colapsable.

2. Puntos de Quiebre (Breakpoints)

• md: (768px): Tablets. Pasar de 1 col a 2 cols.
• lg: (1024px): Laptops. Mostrar Sidebar fija. Main Layout 3-5 cols.
• xl: (1280px): Desktop. Layout espacioso.

3. Patrones Comunes de Adaptación

Grillas

// Mobile: 1 columna | Desktop: 4 columnas
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

Elementos Ocultos

// Solo visible en mobile
<div className="block lg:hidden">...</div>

// Solo visible en desktop
<div className="hidden lg:block">...</div>

Modales y Drawers

• Mobile: Full screen o Bottom Sheet.
• Desktop: Dialog centrado con backdrop blur.

📋 Checklist de Auditoría UI (Por Página)

1. Overflow Horizontal: Verificar que nada rompa el ancho de la pantalla en mobile. (overflow-x-hidden en root).
2. Alturas Fijas: Evitar h-screen en mobile por las barras del navegador. Usar dvh o min-h.
3. Legibilidad: Contraste suficiente en textos sobre fondos oscuros/glass.
4. Espaciado: Márgenes laterales (px-4 o px-6) para que el contenido no pegue al borde.
5. Interacción: Estados :hover solo en desktop. :active para feedback táctil en mobile.

💾 Snippets de Oro (Nexus Design System)

Glass Card (Universal)

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-xl">
  ...
</div>

Botón de Acción Principal (Responsive)

<button className="w-full lg:w-auto bg-accent hover:bg-accent-hover text-white px-6 py-3 rounded-xl font-bold transition-all active:scale-95 shadow-lg shadow-accent/20">
  Acción
</button>

Contenedor de Página Estándar

<div className="min-h-screen bg-gray-900 text-white p-4 lg:p-8 overflow-x-hidden">
  <div className="max-w-7xl mx-auto">
     {/* Contenido */}
  </div>
</div>

🚨 Protocolo de Corrección

1. Analizar: Abrir la vista y simular viewport mobile (375px).
2. Identificar Roturas: Textos cortados, scroll horizontal indeseado, botones inalcanzables.
3. Aplicar Clases Utilitarias: Usar className de Tailwind para corregir (flex-col en mobile, flex-row en desktop).
4. Verificar: Probar en Desktop para asegurar que no se rompió la experiencia grande.