Inteligencia
Cómo se mueve el agente: conversa, piensa, propone — y la voz cuyo gradiente es el estado.
Dos definiciones: la esfera y la tarjeta de confirmación
De todo lo que el agente pone en pantalla, el preset del 2026-09-20 define dos cosas. El resto —qué dice, en qué orden, cuándo— es producto, y vive en las reglas de abajo.
La esfera de Amanda
Un círculo con un gradiente radial cuyo foco está arriba a la izquierda, en 32 % 28 %. Del claro al color de acción en el 52 %, y de ahí al navy profundo. No lleva borde, no lleva sombra y no gira.
Tres tamaños y ninguno más: 14 px cuando firma un mensaje, 20 px cuando marca su presencia, 28 px cuando es el sujeto. Es la cuarta de las cuatro cosas que gastan el azul.
La esfera
- Forma
- círculo · sin borde ni sombra
- Gradiente
- radial-gradient(circle at 32% 28%, claro, acción 52%, profundo)
- Claro · oscuro
- #9DBCFF
- Profundo · oscuro
- #0D2347
- Claro · claro
- #C6D6F2
- Profundo · claro
- #183E75
- Tamaños
- 14 · 20 · 28 px
La tarjeta de confirmación
Cuando el agente propone algo que necesita un sí, lo dice en una tarjeta de fondo navy con letra blanca y dos acciones: la que confirma en blanco sobre el navy, la que cambia en texto claro sin fondo.
Es el único bloque de la interfaz que se pinta entero del color de acción, y por eso es el único que puede pedir una decisión. Si dos cosas en la misma vista se ven así, una de las dos no estaba pidiendo nada.
La tarjeta
- Ancho
- 280px · radio 16 · relleno 12
- Fondo
- el color de acción del modo
- Texto
- blanco
- Confirmar
- fondo blanco · letra en el color de acción · pastilla
- Cambiar
- sin fondo · letra #DBE7FF · pastilla
- Cuántas por vista
- una
El agente se ve trabajar. Cada estado suyo — escribe, piensa, propone, habla — tiene una forma de moverse, y ninguna es decorativa.
Conversación: los mensajes llegan, el agente se ve escribir
Cada mensaje entra con la receta de entrada — sube 8px, una vez. Mientras el agente trabaja existen los tres puntos; desaparecen en el instante en que responde.
Las burbujas son cuadradas como todo el sistema: la del agente en azul suave con su firma mono, la de la persona en superficie sutil. El cierre comercial llega como recibo, no como mensaje.
Agente de Striker
WhatsApp · campaña activa
El hilo de un lead: cada canal declarado, cada evento visible
Así ve el ejecutivo a un lead: un solo hilo sobre un solo canvas. La consola no se disfraza del canal — el canal es un dato del mensaje, no un tema de la superficie, que es además la forma real de los datos. Cada burbuja lo dice junto a su hora: cualquier mensaje responde «¿dónde pasó esto?» sin buscar un encabezado.
Los eventos del sistema son tipografía, no tarjetas: puro mono sobre la línea separatoria. El recibo habla en gris; el salto de canal habla en tinta — «continúa en WhatsApp · el contexto viaja completo» — más fuerte por contraste, no por elevación. La continuidad de canal ya es real (Instagram → WhatsApp).
Camila Vidal
Lead · Instagram → WhatsApp
Pensando: el razonamiento se puede abrir
Cuando el agente razona, la chispa pulsa y la traza queda disponible — no un spinner opaco: pasos concretos que una persona puede auditar.
La confianza se declara con su número. Un agente que no muestra su trabajo no puede pedir que confíen en él.
Analizando el historial del lead…
- 01Leyó los últimos 12 mensajes del hilo
- 02Consultó el calendario del ejecutivo
- 03Verificó cupo del sábado a las 10:00
- 04Redactó la propuesta con el precio vigente
Aprobación: la persona decide con contexto
En Atención el agente no responde solo: propone. La tarjeta trae el borrador, las herramientas que usó como chips de procedencia, y su confianza — todo lo que la persona necesita para decidir en cinco segundos.
Aprobar es la acción primaria; editar es camino normal, no fracaso. El claim del producto vive aquí: el inbox nunca responde solo.
La decisión tiene ciclo de vida: aprobar o enviar con edición convierten el borrador en el mensaje enviado con su recibo; descartar lo resuelve en un recibo gris y nada se envía. En cuanto la persona decide, la tarjeta deja de pedir atención. Sin auto-aprobación con cuenta regresiva: sería inventar un modo que el producto no tiene.
El agente propone
Hola Camila — sí, el sábado tenemos cupo a las 10:00. ¿Te reservo la evaluación sin costo?
Coedición: el campo dice qué está haciendo el agente
Cuando el Supervisor reescribe un campo, la señal vive donde la persona está mirando. Trabajando recorre la línea; propuesto queda encendido esperando decisión; aplicado vuelve al reposo como un recibo breve.
El campo en trabajo es readOnly, nunca disabled. El contenido sigue legible y seleccionable, pero ninguna tecla se pierde cuando llega la reescritura. Reduced motion conserva los tres estados sin el barrido.
Procedencia: cada dato señala su fuente
La traza muestra cómo pensó; la procedencia muestra de dónde salió cada afirmación. Es el mismo borrador de la tarjeta de aprobación, con cada dato apuntando a su fuente — memoria, calendario, precios — y cada fuente con su edad.
La confianza se declara con su número; la procedencia, con su origen. Juntas son la razón completa para creerle al borrador, auditable en dos segundos.
Striker · borrador
Hola Camila — sí, el sábado tenemos cupo a las 10:00. La evaluación inicial es sin costo. ¿Te la reservo?
Contexto que usó
Voz: el gradiente es el estado
La presencia de voz es el círculo del agente con la familia navy→profundidad→ultramarino fluyendo — puro, sin ícono adentro. Escuchando, la malla deriva lenta y el orbe respira. Hablando, fluye rápido con más remolino.
El movimiento ES la información: se detiene en el instante en que el estado termina.
Estado en texto: el brillo es el pulso
Cuando el estado vivo necesita palabras — «Analizando…», «Escribiendo…» — el texto lleva un barrido ultramarino sobre gris: el sistema diciendo «sigo en esto». Es la excepción sancionada aplicada al texto: el loop es el dato.
El estado termina y el barrido muere en ese instante — el resultado es texto normal, quieto. Con prefers-reduced-motion el brillo no existe: queda gris, estático.
Trabajo largo: la señal es el loader
Para el trabajo largo — enriquecer una lista, correr la prospección — el loader no es un spinner genérico: son los cinco nodos de la Señal Calificada encendiéndose en onda hacia la chispa. La marca ya cuenta esta historia: el equipo destila señal; el agente es la señal destilada.
La etiqueta lleva el barrido de estado y el tiempo transcurrido se declara en mono tabular — un trabajo que dice cuánto lleva nunca parece colgado. Al terminar, el movimiento muere y la marca queda completa: el resultado, quieto.
Prospección visible: el mapa de la búsqueda
Cuando la prospección corre, el trabajo se ve: cada candidato que la búsqueda encuentra aparece en el mapa y se clasifica al instante contra el ICP. Lo que pasa el umbral se enciende ultramarino — señal. Lo que no, se atenúa — ruido. Es la marca corriendo en producción: destilar señal.
Los números acompañan en mono tabular — evaluados, calificados — y el umbral es una línea declarada, no un misterio del modelo. Termina la búsqueda y el movimiento muere: queda el mapa quieto con sus cuentas finales.
Hilos largos: el borde es un desvanecimiento
Una traza o un hilo largo no se encajona. El campo con scroll anuncia que hay más disolviendo sus extremos sobre el canvas: la regla de no-cajas aplicada al overflow.
El desvanecimiento es consciente del scroll donde el motor lo permite — arriba solo existe cuando hay contenido arriba. No es movimiento, es longitud: no depende de reduced-motion.
- 01Leyó los últimos 34 mensajes del hilo
- 02Detectó intención: agendar esta semana
- 03Consultó la memoria del lead
- 04Encontró preferencia: sábados por la mañana
- 05Consultó el calendario del ejecutivo
- 06Descartó el jueves — sin cupo
- 07Verificó cupo del sábado a las 10:00
- 08Consultó la lista de precios vigente
- 09Confirmó: evaluación inicial sin costo
- 10Revisó el tono de los últimos mensajes
- 11Eligió registro: cercano, sin presión
- 12Redactó la propuesta
- 13Calculó confianza: 86%
- 14Dejó el borrador para aprobación
Un loop sólo existe mientras una condición real sigue viva
La regla del sistema es que nada se repite: las entradas suceden una vez y los reveals no vuelven. Hay dos condiciones sancionadas: trabajo en curso y atención humana pendiente. En ambas, el loop es el dato.
Dos condiciones para acogerse a la excepción: el movimiento muere en cuanto el estado deja de ser cierto, y desaparece completo bajo prefers-reduced-motion.
- Mensaje
- entrada · +8px · una vez
- Escribiendo
- tres puntos · 1.1s · solo mientras trabaja
- Pensando
- chispa pulsa 1.6s · traza auditable
- Aprobación
- propone → decide → recibo
- Campo trabajando
- línea corre · readOnly
- Campo propuesto
- línea azul 2px · espera decisión
- Campo aplicado
- recibo 2.4s · vuelve al reposo
- Escucha / habla
- malla 0.35 · 1.4 + barras
- Canal del mensaje
- junto a la hora · en cada burbuja
- Evento silencioso
- recibo · línea + mono
- Salto de canal
- mono en tinta · línea separatoria
- Procedencia
- cita numerada → fuente + edad
- Estado en texto
- barrido 2s · muere con el estado
- Trabajo largo
- señal → chispa · tiempo tabular
- Mapa de búsqueda
- ultramarino = señal · umbral declarado
- Hilo largo
- fade 28px · sin borde
- Reduced motion
- todo estado vivo se apaga