Durante veinticinco años el trabajo de diseñar una web ha consistido en decidir de antemano qué verá el usuario. Se dibujan las pantallas, se aprueban, se programan y a partir de ahí todo el mundo ve lo mismo. Si hay personalización, lo que cambia es el orden o el contenido de unas piezas que también estaban dibujadas de antemano.

Una interfaz líquida rompe ese supuesto. La pantalla no existe hasta que alguien la necesita. Se genera en el momento, en función de quién pregunta, qué quiere y en qué situación está. No es que se reordene: es que las piezas se producen ahí.

El término lleva un tiempo circulando entre quienes investigan interfaces generativas, y ha vuelto con fuerza al aparecer los agentes: cuando el usuario deja de operar la pantalla y empieza a pedir un resultado, la pantalla deja de ser el producto y pasa a ser una consecuencia.

Este artículo explica el concepto y después el vocabulario entero, término a término, porque la mayor parte de la confusión viene de mezclar cosas que no son lo mismo.

Qué es exactamente una interfaz líquida

Una definición corta y utilizable:

Una interfaz líquida es aquella cuya forma no está fijada en el diseño, sino que se compone en el momento de uso a partir de la intención del usuario, el contexto y los datos disponibles.

Las tres palabras que hacen el trabajo son forma, momento de uso y intención. Si la forma estaba decidida antes, no es líquida. Si se compone al cargar pero siempre igual, tampoco. Y si no parte de lo que el usuario quiere conseguir, es otra cosa con otro nombre.

Los tres escalones, que se confunden constantemente

Interfaz estática. Se diseña una vez y se sirve igual a todo el mundo. La inmensa mayoría del comercio electrónico funciona así, y funciona bien.

Interfaz adaptativa o personalizada. Los mismos componentes, mostrados u ordenados según reglas o según un modelo de recomendación. Cambia el relleno; el molde es el mismo. Aquí está casi todo lo que hoy se vende como personalización.

Interfaz líquida o generativa. Los propios componentes se producen bajo demanda. Ante la misma consulta, dos personas distintas pueden recibir dos pantallas que no se parecen, porque lo que necesitan no se parece.

La diferencia práctica entre el segundo y el tercer escalón es quién decide la forma: en el adaptativo la decidió un diseñador y una regla la selecciona; en el líquido la decide un modelo dentro de unos límites que sí puso el diseñador.

Qué tiene que ver esto con los agentes

Todo, y conviene entender por qué, porque no es evidente.

Un agente es un programa que recibe un objetivo y ejecuta pasos para conseguirlo. Cuando el cliente le dice a su asistente «búscame unas botas impermeables por menos de ciento veinte euros y cómpralas si hay talla», ese cliente ha dejado de navegar. Ya no va a ver tu menú, ni tu banner, ni tu filtro lateral.

Eso abre dos frentes a la vez, y son dos trabajos distintos:

Hacia fuera, la tienda tiene que ser operable por una máquina. Catálogo legible, precios y disponibilidad fiables, un camino de compra que un agente pueda recorrer. De esto va el comercio agéntico, y hoy ya se puede medir si tu tienda está lista o no.

Hacia dentro, lo que el usuario ve deja de ser una web y pasa a ser una respuesta. Ahí aparecen las interfaces líquidas: cuando lo que hay que mostrar depende de lo que se ha pedido, dibujar de antemano todas las pantallas posibles deja de tener sentido.

Dicho de otra forma: la experiencia agéntica es el marco, y la interfaz líquida es una de las formas que toma cuando hace falta enseñar algo. Escribimos sobre el marco en qué es una Agentic Experience.

Glosario

Ordenado de lo general a lo técnico. Cada entrada responde a una pregunta que nos han hecho de verdad en reuniones.

Interfaz líquida

La que se compone en el momento de uso a partir de la intención, el contexto y los datos. No tiene una forma canónica que se pueda enseñar en una presentación, y eso es exactamente lo que la hace incómoda de vender y de aprobar.

Interfaz generativa

Se usa casi como sinónimo. El matiz: «generativa» pone el acento en quién produce la pantalla —un modelo—, y «líquida» en cómo se comporta —no tiene forma propia, adopta la del recipiente—. En una conversación técnica dirás generativa; en una con negocio, líquida se entiende antes.

Interfaz efímera

La que se construye para un uso concreto y se descarta. Nadie la vuelve a ver, ni siquiera el mismo usuario. Tiene una consecuencia práctica que sorprende: no se puede depurar mirándola después, hay que guardar cómo se generó.

Interfaz adaptativa

Componentes fijos que se muestran u ordenan según reglas. No es una interfaz líquida, aunque se venda como tal. La prueba para distinguirlas: si puedes listar todas las pantallas posibles, es adaptativa.

Agente

Un programa que recibe un objetivo, decide los pasos y los ejecuta usando herramientas. La palabra se ha estirado hasta significar cualquier cosa; el criterio útil es si decide y actúa o si solo responde. Un chatbot que contesta preguntas no es un agente.

Experiencia agéntica (AX)

El diseño de lo que ocurre cuando el usuario delega el objetivo en lugar de operar la interfaz. Incluye qué se le pregunta, qué se le enseña, cuándo se le pide permiso y cómo se le devuelve el control. Es el equivalente a la experiencia de usuario cuando el usuario no está pulsando.

Delegación

El cambio de fondo. El usuario pasa de ejecutar pasos a encargar un resultado. Cambia lo que hay que diseñar: ya no son pantallas, son puntos de decisión. Dónde se pregunta, dónde se avisa y dónde se para.

Intención

Lo que el usuario quiere conseguir, por debajo de lo que ha escrito. «Necesito algo para la boda de mi hermana en septiembre» contiene una ocasión, una fecha y un presupuesto implícito. Extraerla bien es la mitad del trabajo, y equivocarse en ella produce interfaces impecables que no sirven.

Contexto

Todo lo que rodea a la petición y no está dicho: quién es, qué ha comprado antes, en qué dispositivo está, si es cliente o no, si hay stock. En una interfaz líquida el contexto no es un extra de personalización: es materia prima de la pantalla.

Superficie de confirmación

La pantalla mínima que aparece cuando el agente necesita que un humano diga que sí. Es el componente más importante de todo esto y el que menos se piensa: es donde se para una compra equivocada. Debe enseñar exactamente lo que se va a hacer, en el idioma del usuario, sin obligar a leer.

Herramienta (tool)

Cada capacidad concreta que el modelo puede invocar: buscar en el catálogo, comprobar stock, añadir al carrito, calcular un envío. Diseñar para agentes consiste en buena medida en decidir qué herramientas expones y con qué límites.

Llamada a herramienta (tool calling)

El mecanismo por el que el modelo, en vez de escribir texto, pide que se ejecute una de esas funciones con unos argumentos. Es lo que separa un asistente que habla de uno que hace.

MCP (Model Context Protocol)

Un estándar abierto para que un modelo descubra y use herramientas y datos de un sistema sin integración a medida para cada caso. En la práctica: la forma de decirle a cualquier asistente qué sabe hacer tu tienda, sin escribirlo una vez por asistente.

Esquema

La descripción formal de qué datos entran y salen de cada herramienta o componente. Sin esquemas no hay interfaz líquida fiable, porque el modelo no puede componer lo que no sabe describir. Es la parte aburrida y es la que decide si esto funciona.

Componente parametrizable

Una pieza de interfaz ya construida y probada —una ficha de producto, una tabla comparativa, un selector de talla— que el modelo puede rellenar y colocar, pero no reinventar. Es el punto medio más razonable hoy: la forma la controlas tú, la elección y el contenido los decide el modelo.

Renderizado por el modelo

El escalón siguiente: el modelo devuelve directamente la estructura de la pantalla. Da mucha libertad y trae de vuelta todos los problemas que el diseño resolvió en veinte años —jerarquía, accesibilidad, coherencia—, así que hoy se usa poco fuera de producto interno.

Barandillas (guardrails)

Los límites dentro de los cuales el modelo puede moverse: qué puede enseñar, qué no puede prometer, qué no puede hacer sin permiso, qué precios son inamovibles. En una interfaz líquida el diseño se ejerce sobre todo aquí.

Determinismo

Que ante la misma entrada salga siempre lo mismo. Los modelos no lo son, y eso choca con cómo se prueba el software. La salida práctica no es exigir determinismo, es fijar lo que sí tiene que serlo: el precio, el stock, las condiciones, el pedido.

Trazabilidad

Guardar por qué se generó lo que se generó: qué se pidió, qué contexto había, qué herramientas se llamaron, qué se enseñó. Sin esto no hay soporte posible cuando un cliente diga que vio otra cosa. Es el equivalente al registro de pedidos, y hoy casi nadie lo tiene.

Latencia percibida

Una pantalla que se genera tarda más que una servida. La diferencia entre que se note y que no está en enseñar algo útil mientras se compone, no en un girador. Es un problema de diseño, no de infraestructura.

Accesibilidad generada

Si la pantalla la compone un modelo, el contraste, el orden de lectura y las etiquetas también. La única forma de que esto no se degrade es que la accesibilidad esté en los componentes y en las barandillas, no en la revisión final de un diseñador que ya no puede revisar cada pantalla porque son infinitas.

Interfaz para máquinas

La cara de tu web que consumen los agentes: feeds, APIs, datos estructurados, archivos de descripción como llms.txt. No la ve nadie y decide si un asistente puede recomendarte o comprarte. Es la parte del comercio agéntico que se puede empezar hoy mismo.

Comercio agéntico

La compra hecha por un agente en nombre de una persona. Cambia quién es tu visitante y por tanto qué hay que optimizar: deja de ser la foto y pasa a ser el dato.

Diseño por especificación

Escribir con precisión qué tiene que ocurrir antes de construirlo. Con interfaces fijas era una buena práctica; con interfaces que se generan solas es la única forma de tener control, porque lo que escribes en la especificación es literalmente lo que el modelo va a poder hacer.

Las preguntas que siempre salen

¿Esto sustituye al diseñador?

Cambia lo que diseña. Deja de dibujar pantallas y pasa a definir componentes, límites y puntos de decisión. Es más parecido a diseñar un sistema que a diseñar una página, y exige más criterio, no menos.

¿Cómo se prueba algo que cambia cada vez?

No se prueba la pantalla, se prueban las reglas. Se fijan casos de entrada, se comprueba que la salida cumple las condiciones —que el precio es el correcto, que no promete plazos que no existen, que la confirmación aparece— y se revisa una muestra a mano. Es control de calidad estadístico, no captura de pantalla.

¿Y la marca?

Vive en los componentes y en el tono, no en la maqueta. Si tu identidad depende de que el titular esté a la izquierda, no sobrevive a esto. Si depende de la tipografía, del color, del lenguaje y de cómo tratas al cliente, sobrevive perfectamente.

¿Sirve esto hoy en una tienda de verdad?

Parcialmente, y conviene decirlo sin adornos. Lo que ya funciona: exponer bien el catálogo para que los agentes lo entiendan, componer pantallas con piezas existentes según lo que el cliente pide, y las superficies de confirmación. Lo que todavía es terreno de laboratorio: dejar que un modelo dibuje libremente la pantalla de compra.

¿Por dónde se empieza?

Por la parte que no se ve, que además es la que ya tiene retorno: comprobar si un agente puede leer tu catálogo, entender tus precios y completar una compra. Eso se mide en días y no exige tocar el diseño. Lo demás va después.

Lo que nosotros hacemos con esto

En Pango llevamos el asunto por dos caminos que no se mezclan. Uno es la preparación de la tienda para que la operen agentes, que es trabajo concreto sobre catálogo, datos y compra. El otro es el diseño de la experiencia cuando el cliente delega, que es donde entran las interfaces líquidas y donde todavía hay más laboratorio que manual.

Si te están vendiendo lo segundo sin haber hecho lo primero, pregunta por el orden.