Global Control: un CRM operativo conceptual con simulación en vivo y un copiloto de IA de demostración

VITON¹³ crea conceptos de producto para mostrar cómo aborda el software para empresas, no solo los sitios web. Global Control es el buque insignia de esa serie: un CRM operativo para empresas que reparten personas y pedidos entre ciudades, presentado a través de Northstar Logistics, una empresa de reparto ficticia con centros en Moscú, Dubái, Londres y Nueva York. La empresa, su gente, sus clientes y su dinero son inventados, y la demo lo dice en pantalla.

El encargo era un CRM premium en el que un responsable da de alta a empleados, reparte pedidos, los sigue, consulta indicadores y gráficos, descarga informes mensuales y anuales, recibe un aviso cuando alguien inicia sesión y trabaja con una IA que se adapta a la persona. Además tenía que ser una demo con la que cualquiera pudiera jugar: pulsarlo todo, crear sus propios pedidos y personas, y ver cómo reacciona la empresa.

El onboarding pregunta el nombre, el rol (propietario, responsable o empleado), el nombre de la empresa, el sector, el tamaño del equipo (de 8 a 30 personas), la moneda y un color de acento. Con esas respuestas, un generador con semilla construye el espacio: en la demo por defecto, 18 personas en cuatro centros, 22 clientes, unos 400 pedidos en 14 días y seis automatizaciones, con un historial generado detrás para que los informes mensuales y anuales siempre tengan datos. El sector cambia el vocabulario en toda la interfaz (entregas y repartidores, trabajos y técnicos, o pedidos y preparadores), el rol cambia la pantalla de inicio (dinero y crecimiento para el propietario, la cola de despacho para el responsable, «mi día» para el empleado) y el menú se reordena según lo que la persona usa de verdad. La simulación conecta y desconecta a personas con un aviso, trae pedidos nuevos, mueve a los repartidores por sus rutas y completa entregas, cada centro con su propia hora local.

Pedidos es un tablero con arrastrar y soltar entre estados y sobre personas, un anillo de SLA en vivo en cada tarjeta y un panel en el que el despacho con IA ordena al equipo por centro, carga, distancia, puntualidad y valoración, y explica por qué. Equipo da de alta a un empleado en cuatro pasos y termina con una credencial holográfica que se inclina bajo el cursor; unos segundos después de la invitación, la persona nueva «inicia sesión» y todo el equipo recibe el aviso. El mapa en vivo dibuja una ciudad procedural para cada centro, recorrida por los repartidores, y una vista global con la línea real entre el día y la noche. Los informes cubren un mes, un trimestre o un año y se descargan en PDF, generado por nuestro propio escritor de PDF mínimo, en CSV que Excel abre bien en los dos idiomas o en JSON. Las automatizaciones funcionan como flujos de nodos en vivo, y el editor convierte una regla escrita en inglés o en ruso en disparador, condiciones y acciones, y la reproduce sobre los últimos 14 días. Cada cliente tiene un índice de salud explicable.

El copiloto es lo que llamamos IA de demostración, y así lo rotula el producto: una capa de lenguaje en el dispositivo con tolerancia a erratas en inglés y ruso, 35 intenciones y extracción de entidades, que responde con cifras vivas del espacio de trabajo y actúa con las mismas funciones que una persona, desde repartir la cola hasta exportar un informe. Una capa proactiva propone, como mucho cada 45 segundos, salvar con un clic un pedido en riesgo, y ⌘K abre una paleta de comandos.

La aplicación está hecha con JavaScript y CSS sin framework, empaquetada con esbuild en una carpeta estática con direcciones relativas, así que funciona en cualquier ruta; en el portfolio vive en /demos/global-control/. Cada vista es un fragmento propio de carga diferida, 43 archivos en total, y three.js solo se carga para el globo de la intro, con un lienzo 2D de respaldo si falta WebGL. Un único almacén guarda el espacio de trabajo en localStorage; cada cambio pasa por un pequeño conjunto de acciones que emiten eventos, de modo que las vistas, la simulación, los avisos, el motor de automatizaciones y el copiloto reaccionan a los mismos hechos sin redibujar pantallas enteras. La simulación late una vez por segundo y los bucles de dibujo se detienen cuando una vista se cierra o la pestaña queda oculta.

Los datos salen de una semilla, así que las mismas respuestas dan la misma empresa: pedidos detallados de los últimos 14 días, un generador de historial para los días anteriores con patrones semanales y estacionales, y centros cuya actividad sigue su horario laboral local. Todas las cifras salen de un mismo conjunto de funciones (indicadores para cualquier periodo, series diarias y mensuales, una previsión de Holt con estacionalidad semanal, la puntuación del despacho), así que el panel, los informes, los archivos y el copiloto siempre coinciden. El escritor de PDF es nuestro: cada página del informe se dibuja en un lienzo y se incrusta como JPEG en un PDF 1.4 con su tabla de referencias cruzadas, así que el cirílico funciona sin más; el CSV lleva marca de orden de bytes y en ruso pasa al punto y coma y a la coma decimal, como espera Excel en ruso.

El diseño es una sala de control oscura con un tema de día al lado: Unbounded para las cifras grandes, Onest para el texto y JetBrains Mono para las etiquetas, todas alojadas en el propio servidor, paneles de línea fina, un solo color de acento que elige el visitante y movimiento en todas partes, desde titulares que aparecen letra a letra hasta cifras que cuentan, gráficos que se dibujan y un foco que sigue al cursor; quien pide menos movimiento ve los cambios al instante. Los dos idiomas están completos: 2045 textos de interfaz en cada uno, con reglas de plural y el vocabulario de cada sector.

El concepto funciona en /demos/global-control/ con nueve módulos, la intro y una paleta de comandos, en inglés y ruso. El 28 de septiembre de 2026 lo comprobamos nosotros mismos en Chrome headless, sobre una copia local servida con las cabeceras y la política de seguridad de contenido (CSP) de producción del portfolio: 13 rutas en anchos de escritorio y de móvil, los tres roles, la interfaz en ruso, la intro con el onboarding y las acciones principales (despacho con IA, un pedido nuevo, un alta hasta la credencial, seis preguntas al copiloto, ⌘K, una regla escrita con palabras, exportaciones a PDF y CSV) se ejecutaron sin errores de consola, sin infracciones de la CSP y sin peticiones fallidas. El informe mensual salió como un PDF válido de tres páginas y el CSV diario, con una fila por día.

El primer script, app.js, pesa 3,3 KB con gzip; los 43 archivos de JavaScript y la hoja de estilos suman 573 KB con gzip, de los que 138 KB son three.js para la intro. Una primera visita transfiere 528 KB en 25 peticiones. En la dirección pública, Lighthouse 13.5.0 (5 ejecuciones por dispositivo, medianas, en un MacBook con una carga media de 3 a 9) dio un rendimiento de 79 en móvil y de 97 en escritorio, accesibilidad 100 y buenas prácticas 100; en móvil, la puntuación la frena el mayor elemento pintado, el subtítulo de la intro, que aparece a los 3,7 s tras una breve carga.

Global Control es un concepto que VITON¹³ creó para mostrar su alcance, no un proyecto por encargo. Northstar Logistics, su gente, sus clientes, sus pedidos y su dinero son ficticios y se generan en el navegador del visitante: no hay cliente, ni usuarios, ni entregas reales, ni tráfico, ni ingresos, y nada de la demo está a la venta. Las invitaciones, los mensajes, los correos y los inicios de sesión son simulados, y ningún dato sale del navegador.

El copiloto, el despacho con IA, las previsiones y el editor de reglas son IA de demostración: análisis de intenciones, reglas y estadística en el dispositivo, no un modelo de lenguaje, así que no demuestran nada sobre cómo se comportaría un modelo en una operación real. La simulación comprime el tiempo. Todas las cifras son mediciones de laboratorio en Chrome headless, en un solo equipo y un solo día: los recorridos de prueba, sobre una copia local con las cabeceras de producción, y Lighthouse, sobre la dirección pública con un móvil simulado; no hubo pruebas con usuarios. Una versión de producción aún necesitaría servidor, cuentas y permisos, notificaciones reales, integraciones y protección de datos.

Cómo revisar el portafolio de un estudio web →