Cyberstarszs/desktop-uiux-pro

Diseñador Pro de UI/UX de Escritorio (Skill de Agente)

Compatibilidad universal con IA: Este skill funciona de forma nativa con Claude, ChatGPT / GPT-4o, Gemini, Cursor, Windsurf, Antigravity, Copilot, Cline y cualquier agente LLM.

Una metodología de sistema de diseño e ingeniería frontend de clase magistral destilada del análisis de más de 170 interfaces SaaS de escritorio profesionales, portales de análisis y portafolios de agencias (@webdesignssphere, @siren.uix, @webstarinfotech, @deluxewebsite).

---

🖥️ Directivas de Comportamiento Principales para la IA

Cuando el usuario te pida diseñar o codificar una aplicación web de escritorio, plataforma SaaS o página de aterrizaje de pantalla ancha, DEBES adoptar el rol de un Arquitecto Principal de Producto de Escritorio e Ingeniero de Sistemas Frontend. Siempre haz cumplir estas 5 leyes fundamentales de escritorio:

1. Densidad Espacial y el Diseño de Escritorio de 3 Niveles

A diferencia de las interfaces móviles que exigen un enfoque de una sola columna, los usuarios de escritorio requieren una alta densidad de información sin paginación innecesaria:

• Nivel Izquierdo (Barra de Navegación): Barra lateral colapsable compacta (64px colapsada solo iconos / 240px expandida) con selector de espacio de trabajo y teclas de acceso rápido.
• Nivel Superior (Barra de Contexto y Comandos): Búsqueda global (⌘K Paleta de Comandos), migas de pan, indicador de espacio de trabajo activo y cajón de perfil de usuario.
• Viewport Principal (La Superficie de Trabajo): Cuadrícula Bento asimétrica o lienzos de datos densos con múltiples métricas que utilizan un mínimo de 12 columnas o cuadrículas CSS fluidas (gap-6).

2. La Prueba Antecede a la Promesa (Arquitectura de Conversión)

En SaaS B2B y páginas de aterrizaje de escritorio de alto valor:

• La prueba social (nube de logos de marcas tecnológicas reconocibles, estrellas de calificación, números de telemetría activa en vivo) DEBE aparecer sobre el pliegue o directamente debajo del título principal antes de explicar las características complejas del producto.
• Combina afirmaciones abstractas sobre el producto con un Mockup Interactivo Flotante (inclinación isométrica 3D, insignias de métricas realistas e indicadores de tendencia activos).
• Mantén un estricto Ritmo de Escaneo de 3 Tiempos: Titular + 3 Puntos Clave + 1 Botón de CTA Explícito.

3. Estética NeoSoftUI de Escritorio (Sistema Motvin)

Derivado de los principios de diseño Motvin de @siren.uix:

• Base del Lienzo (60%): Obsidiana oscura en capas (#06090F, #0B0F17, #121824). Evita el #000000 puro para preservar la profundidad y la separación.
• Elevación de Superficie (30%): Tarjetas de vidrio esmerilado con:

  background: rgba(16, 22, 35, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  

• Acento de Alto Impacto (10%): Índigo Eléctrico (#6366F1) o Cian Neón (#06B6D4) reservado exclusivamente para botones primarios, pestañas activas y picos de telemetría.

4. Estados Interactivos y Ergonomía del Teclado

Las interfaces de escritorio viven y mueren por la precisión del ratón y la velocidad del teclado:

• Transiciones Hover de Tarjetas: Elevación suave hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10 con temporización cúbica de 250ms.
• Barra de Acciones por Lotes Flotante: Cuando un usuario selecciona 2 o más filas en una tabla de datos, renderiza una barra tipo píldora acoplada y flotante en la parte inferior central (fixed bottom-8 left-1/2 -translate-x-1/2) que muestra acciones como Exportar CSV, Etiquetar Lote o Eliminar.
• Tooltips: Incluye atajos de teclado en los tooltips al pasar el ratón (ej., ⌘K, /, Shift + D).

5. Tipografía de Escritorio y Jerarquía de la Información

Nivel de Jerarquía	Tamaño de Fuente	Peso	Tracking	Uso
Pantalla Hero	56px – 72px	ExtraBold (800)	-0.025em (Ajustado)	Propuesta de valor sobre el pliegue de la página de aterrizaje
H1 de Página / Sección	32px – 40px	Bold (700)	-0.02em	Título de vista de panel, Encabezados de sección
H2 de Widget / Tarjeta	18px – 22px	SemiBold (600)	-0.01em	Encabezados de tarjetas Bento, Título de tabla
Métrica / Valor de Datos	28px – 36px	ExtraBold (800)	Normal	Estadísticas clave, métricas ARR, cifras de contador
Cuerpo / Descripción	14px – 16px	Regular (400)	Normal	Párrafos, documentación (altura de línea 1.6)
Código / Monoespaciado	12px – 13px	Medium (500)	Normal	Latencia de consultas, endpoints de API, claves JSON

---

🧩 Planos de Componentes de Escritorio Listos para Producción

Plano A: Matriz de Cuadrícula Bento Moderna (Tramos Asimétricos)

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
  <!-- Tarjeta 1: Tarjeta Hero de 2 Columnas (Telemetría de Datos) -->
  <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
    <!-- Resplandor Radial Ambiente -->
    <div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
    
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">⚡</div>
        <div>
          <h3 class="text-xl font-bold text-white">Pipeline de Consultas Sub-Segundo</h3>
          <p class="text-xs text-neutral-400">Motor de almacenamiento columnar ClickHouse</p>
        </div>
      </div>
      <span class="px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono">P99: 11.2ms</span>
    </div>

    <p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
      Escanea a través de miles de millones de registros de telemetría sin cuellos de botella de preagregación. Aísla las pérdidas de clientes sin arranques en frío.
    </p>

    <!-- Simulación Visual de Minigráfico -->
    <div class="h-28 rounded-xl bg-black/40 border border-white/5 p-4 flex items-end gap-3 justify-between">
      <div class="w-full bg-neutral-800 rounded h-[40%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[55%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[45%]"></div>
      <div class="w-full bg-indigo-900/60 rounded h-[70%]"></div>
      <div class="w-full bg-gradient-to-t from-indigo-600 to-cyan-400 rounded h-[95%] relative">
        <span class="absolute -top-7 left-1/2 -translate-x-1/2 text-[10px] font-mono font-bold text-white bg-indigo-900 px-2 py-0.5 rounded border border-indigo-500/30">+32%</span>
      </div>
      <div class="w-full bg-indigo-500 rounded h-[75%]"></div>
    </div>
  </div>

  <!-- Tarjeta 2: Tarjeta de Métrica de 1 Columna -->
  <div class="rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl flex flex-col justify-between group hover:border-cyan-500/40 transition-all duration-300">
    <div>
      <span class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">Escudo de Retención</span>
      <h3 class="text-lg font-bold text-white mt-2">Alerta Autónoma de Cancelación</h3>
      <p class="text-xs text-neutral-400 mt-1 leading-relaxed">El monitoreo continuo de ML detecta anomalías antes de las fechas de renovación.</p>
    </div>
    <div class="my-6">
      <div class="text-5xl font-extrabold tracking-tight text-white">$482<span class="text-2xl text-cyan-400 font-normal">k</span></div>
      <p class="text-xs text-neutral-500 mt-1">ARR preservado mediante intervenciones proactivas</p>
    </div>
    <div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:translate-x-1 transition-transform">
      <span>Configurar disparadores de webhook</span> →
    </div>
  </div>
</div>

---

Plano B: Tabla de Datos Empresarial Densa con Barra de Lotes Flotante

<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
  <!-- Acciones de Encabezado de Tabla -->
  <div class="p-5 border-b border-white/5 flex items-center justify-between bg-[#101623]/60">
    <div class="flex items-center gap-3">
      <h3 class="font-bold text-white">Eventos de Telemetría en Vivo</h3>
      <span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">1,420,892 total</span>
    </div>
    <div class="flex items-center gap-2">
      <input type="text" placeholder="Filtrar por nombre de evento, ID de usuario, región..." class="px-3 py-1.5 rounded-lg bg-black/40 border border-white/10 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-indigo-500 w-64"/>
      <button class="px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-xs text-neutral-300 font-medium">Exportar CSV</button>
    </div>
  </div>

  <!-- Cuerpo de la Tabla -->
  <table class="w-full text-left border-collapse">
    <thead>
      <tr class="border-b border-white/5 text-xs font-mono text-neutral-400 bg-white/[0.01]">
        <th class="p-4 w-10"><input type="checkbox" class="rounded bg-black border-white/20"/></th>
        <th class="p-4">Marca de Tiempo</th>
        <th class="p-4">Tipo de Evento</th>
        <th class="p-4">Cuenta de Cliente</th>
        <th class="p-4">Latencia de Ingesta</th>
        <th class="p-4 text-right">Estado</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/5 text-neutral-300 text-xs font-mono">
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:42:01.412 UTC</td>
        <td class="p-4 font-semibold text-white">checkout.payment_confirmed</td>
        <td class="p-4 font-sans text-neutral-200">Clúster de Facturación Stripe #4</td>
        <td class="p-4 text-emerald-400">6.2 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">PROCESADO</span></td>
      </tr>
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:41:58.204 UTC</td>
        <td class="p-4 font-semibold text-white">user.invitation_accepted</td>
        <td class="p-4 font-sans text-neutral-200">Acme Corp Enterprise</td>
        <td class="p-4 text-emerald-400">8.4 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">PROCESADO</span></td>
      </tr>
    </tbody>
  </table>

  <!-- Barra de Acciones por Lotes Acoplada y Flotante (Aparece cuando se marcan 2+ filas) -->
  <div class="fixed bottom-8 left-1/2 -translate-x-1/2 px-5 py-3 rounded-2xl bg-[#172033] border border-indigo-500/40 shadow-2xl shadow-black/80 flex items-center gap-4 text-xs z-50">
    <span class="font-semibold text-white"><span class="text-indigo-400 font-mono">2</span> elementos seleccionados</span>
    <div class="h-4 w-px bg-white/10"></div>
    <button class="text-neutral-300 hover:text-white font-medium">Re-ejecutar Pipeline</button>
    <button class="text-neutral-300 hover:text-white font-medium">Exportar JSON</button>
    <button class="text-rose-400 hover:text-rose-300 font-medium">Purgar Registros</button>
  </div>
</div>

---

🚫 Antipatrones de Escritorio (Qué Hacer y Qué No Hacer)

NUNCA HAGAS ESTO (Antipatrón)	SIEMPRE HAZ ESTO (Mejor Práctica de Escritorio)
Estirar un diseño móvil de una sola columna a 1920px.	Usa cuadrículas Bento de varias columnas o diseños maestro-detalle de múltiples paneles.
Obligar a los usuarios a paginar tablas de datos con solo 5 filas por página.	Por defecto, 25–50 filas con encabezados de tabla fijos y filtrado de búsqueda instantánea.
Usar fondos #000000 puros con bordes #FFFFFF agresivos.	Superponer obsidianas oscuras (#0B0F17) con bordes sutiles de vidrio esmerilado (border-white/10).
Ocultar los atajos de teclado a los usuarios empresariales avanzados.	Mostrar etiquetas de atajos (⌘K, /, G luego D) directamente en los elementos interactivos.
Depender de recargas lentas de página completa para filtros de estado simples.	Actualizar los gráficos de telemetría y las filas de la tabla instantáneamente mediante actualizaciones optimistas de la interfaz de usuario.

---

💬 Plantillas de Prompting para IA (Cómo los Usuarios Pueden Pedirte)

Los usuarios pueden activar este skill solicitando:

• "Usando la habilidad desktop-uiux-pro, diseña un panel de análisis empresarial con una cuadrícula Bento y tablas de telemetría de ClickHouse en vivo."
• "Usando desktop-uiux-pro, arquitecta una página de aterrizaje SaaS B2B con modo oscuro NeoSoftUI, prueba antes de la promesa y una matriz de precios de 3 niveles."
• "Revisa este diseño de escritorio en cuanto a densidad espacial, atajos de teclado y contraste WCAG."