Moko: plataforma de soporte al cliente

Moko sustituye las áreas cotidianas donde vive 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 área 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.

Dashboard de Moko, dark mode. Barra de KPIs con conversaciones abiertas, pendientes, tiempo medio de primera respuesta y CSAT. Panel de SLA en riesgo con tickets incumplidos. Lista de conversaciones recientes. Panel de disponibilidad del equipo. Barra de top tags. — Dashboard. Cada turno arranca aquí: KPIs, incumplimientos de SLA, actividad reciente y disponibilidad del equipo en una sola pantalla.

Inbox de Moko en dark mode, layout de tres paneles. El panel izquierdo tiene los contadores por estado y los filtros por canal. El panel central lista las conversaciones con avatares, asuntos, previews e iconos de canal. El panel derecho muestra el hilo activo con asunto, estado, prioridad, canal, barra del cliente, tarjeta AI summary, burbujas de mensajes y un composer con toggle entre respuesta pública y nota interna. — Inbox. Tres paneles que comparten un único teclado. J y K se mueven entre conversaciones, R enfoca la respuesta, E resuelve y pasa a la siguiente, ? abre el cheatsheet.

Página de tickets de Moko en dark mode. Header con campo de búsqueda y chip de filtro por estado. Tabla con asunto, cliente, badge de estado, prioridad, canal y fecha de actualización en dieciocho filas. — Tickets. Una tabla plana con todas las conversaciones, con el mismo vocabulario de estado, prioridad y canal que se usa en toda la app.

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 optimistic, 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.

Clientes. Plan, CSAT histórico, último contacto, con búsqueda y chips de filtro compuestos en una sola query.

Admin de la knowledge base de Moko en dark mode. Header con búsqueda, chips de filtro por estado Publicado y Borradores, y chips de filtro por categoría. Botón nuevo artículo. Tabla con título, categoría, badge de estado, número de visualizaciones, porcentaje de utilidad y fecha de actualización. — Knowledge base, lado admin. La misma página gestiona borradores y artículos publicados. Clic en una fila para abrir el editor.

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 inmediato. El mismo esquema 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. Mismo back-end para los dos.

Página de macros de Moko en dark mode. Campo de búsqueda y botón Nueva macro. Lista de seis macros con shortcut tags como /refund y /done. Cada fila muestra una preview inline del body, con iconos de editar y eliminar. — Macros. Respuestas predefinidas con shortcut tags, preview inline e inserción con un clic desde el composer del inbox.

Modal de edición de macro de Moko. Formulario con campo nombre, shortcut opcional, textarea para el body y un variable picker que propone nombre del cliente, nombre completo, empresa, email e ID del ticket. Botones Cancelar y Guardar cambios. — Editor de macros. Nombre, shortcut, body y un variable picker que inserta placeholders que el composer del inbox expande al enviar.

Las macros no son un menú de respuestas rápidas, son un sistema de templating ligero. Las variables se resuelven desde el ticket y el cliente en vivo 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.

Página de informes de Moko en light mode. Selector de rango con 7d, 30d, 90d. Barra de KPIs con abiertos, pendientes, resueltos, no asignados, tiempo medio de primera respuesta y CSAT. Debajo: gráfico de área del volumen de tickets con dos series, donut por canal, barras por estado y barras de la distribución CSAT. — Informes, light mode. Área de volumen, donut por canal, barras por estado, distribución de CSAT. Cada gráfico toma los colores del design system, así la paleta sigue el tema.

Hub de ajustes de Moko en light mode. Cuatro tile cards: Workspace (nombre, email de soporte, región, branding), Equipo (agentes, roles, disponibilidad), Política de SLA (objetivos de respuesta y resolución, horario laboral), Integraciones (Slack, Gmail, Twitter y más). — Hub de ajustes, light mode. Workspace, equipo, política de SLA e integraciones. Cada tile abre su propia página.

Cada pantalla 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.

En números, y en cómo lo hicimos.

En números

8Áreas entregadasInbox, tickets, CRM, KB, informes, macros, ajustes, portal
5Shortcuts de tecladoInbox de power user con help overlay
4Tipos de gráficoTodos vinculados a los tokens del design system
0Valores hardcodedCada color y estilo pasa por los tokens

Stack

Next.js16
React19
TypeScript
TanStack Query
recharts
react-markdown

Moko es el estándar con el que trabajamos.

Si estás construyendo un SaaS que necesita el mismo cuidado en cada área que tocan tus clientes y tu equipo, entonces hablemos.

Hablemos