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.

14 · 20 · 28 px · el mismo gradiente

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.

Agendar martes 23, 10:00ConfirmarCambiar
280 px · fondo de acción, dos salidas

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

secuencia real de campaña · Reproducir la vuelve a contar

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).

CV

Camila Vidal

Lead · Instagram → WhatsApp

propuesta · un hilo, un canvas · el salto en mono sobre la línea separatoria

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…
  1. 01Leyó los últimos 12 mensajes del hilo
  2. 02Consultó el calendario del ejecutivo
  3. 03Verificó cupo del sábado a las 10:00
  4. 04Redactó la propuesta con el precio vigente
Confianza86%
la chispa pulsa mientras razona · el paso a paso se despliega

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

Confianza

Hola Camila — sí, el sábado tenemos cupo a las 10:00. ¿Te reservo la evaluación sin costo?

calendarioprecios
propuesta: la decisión con ciclo de vida · nada se envía sin el OK humano

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.

trabajando · propuesto · aplicado · la línea lleva el ciclo de vida

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ó

propuesta · toca una cita para abrir su fuente

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.

escucha fluye lento y respira · habla fluye rápido y las barras cargan la amplitud

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.

Analizando el historial del lead…
propuesta · el barrido vive solo mientras el estado es cierto

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.

Enriqueciendo 240 prospectos…0.0s
propuesta · los nodos cargan hacia la chispa · Terminar mata el movimiento

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.

Buscando y clasificando contra el ICP…
afinidad con el icp →evaluados 0 · calificados 0
propuesta · cada candidato se clasifica contra el ICP · el umbral está declarado

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.

  1. 01Leyó los últimos 34 mensajes del hilo
  2. 02Detectó intención: agendar esta semana
  3. 03Consultó la memoria del lead
  4. 04Encontró preferencia: sábados por la mañana
  5. 05Consultó el calendario del ejecutivo
  6. 06Descartó el jueves — sin cupo
  7. 07Verificó cupo del sábado a las 10:00
  8. 08Consultó la lista de precios vigente
  9. 09Confirmó: evaluación inicial sin costo
  10. 10Revisó el tono de los últimos mensajes
  11. 11Eligió registro: cercano, sin presión
  12. 12Redactó la propuesta
  13. 13Calculó confianza: 86%
  14. 14Dejó el borrador para aprobación
propuesta · sin caja — los extremos se disuelven según el scroll

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