Moko: plataforma de soporte al cliente

Moko sustituye las interfaces cotidianas donde trabaja un equipo de soporte al cliente. Inbox, detalle de ticket, clientes, knowledge base, informes, macros, ajustes y portal del cliente. El brief era entregar cada interfaz con el mismo nivel de acabado, con un design system que mantiene unido todo el producto y una calidad de interacción que aguanta cuando el agente trabaja directamente desde el teclado.

El inbox es la página más importante. El composer alterna entre respuesta pública y nota interna con un cambio de color que hace inequívoco el modo antes de enviar. Los cambios de estado son optimistas, con rollback. Las etiquetas y la prioridad se editan inline, nunca en un diálogo. Una tarjeta AI summary aparece sobre los hilos con tres o más mensajes y muestra sentimiento, contexto del plan y un siguiente paso sugerido. Un refresh con un clic regenera la sugerencia cuando el agente quiere otro ángulo.

Los clientes traen su historia consigo. El perfil 360 combina una barra de stats con la lista completa de tickets y un editor de custom fields que añade, edita y elimina inline con feedback optimista. La misma forma alimenta el drawer del inbox, así un agente que abre una conversación ya ve plan, ubicación, CSAT histórico y los últimos tickets del cliente sin salir del hilo.

La knowledge base son dos productos en uno. El admin es un CMS para contenido de soporte con categorías, borradores y estado publicado. El lado público, servido en /help, es un layout estilo marketing con hero search, cards de categoría y TOC por artículo. Ambos lados leen los mismos datos.

Las macros no son un menú de respuestas rápidas, son un sistema de templating ligero. Las variables se resuelven con los datos en vivo del ticket y del cliente en el momento en que el agente inserta la macro, así la misma plantilla parece escrita para la persona del otro lado. La combinación de macros, AI summary y edits inline es lo que convierte el inbox de una lista en un espacio de trabajo.

Cada interfaz sale en light y dark desde el primer commit. Todo el producto es token-driven: nada de colores hardcoded, nada de font weight hardcoded, nada de inline style. El design system carga la paleta, la escala tipográfica, los radius y los elevation en ambos temas. Gráficos y badges leen de los mismos tokens que los botones, así un cambio de tema nunca miente sobre qué es interactivo.

Lo que ha aportado el trabajo, en números y en planteamiento.