Diseñar interfaces de streaming
La región de salida en streaming es el nuevo lienzo. Un manual práctico para diseñar UIs de streaming de IA como un modelo de interacción real, con cinco capas, análisis de productos reales, antipatrones y una auditoría previa al lanzamiento.
La respuesta en streaming es la superficie menos diseñada del software moderno. La mayoría de los equipos lanzó un hook de fetch en TypeScript, lo conectó a un div y lo llamó diseño de producto. El resultado es una máquina de escribir fingiendo ser una interfaz.
Streaming no es texto que aparece. Es un modelo de interacción con ritmo, pausas, comportamiento de scroll, controles de interrupción y señales de confianza. Un equipo que diseña solo el input ha lanzado medio producto. La región de salida es la otra mitad, y es donde la mayoría de los productos de IA están perdiendo al usuario.
Este texto es la versión operativa. Qué es realmente una UI de streaming, las cinco capas que toda buena interfaz incluye, análisis de productos reales, los antipatrones que matan superficies en producción y una auditoría previa al lanzamiento.
Una UI de streaming es una superficie, no un bucle de fetch
Una UI de streaming es la región completa desde la que el usuario lee mientras el modelo trabaja. El texto visible es solo una parte. La cadencia, el cursor, el comportamiento del scroll, los compromisos estructurales, los controles de interrupción y el estado posterior al stream son el resto.
La superficie tiene propiedades medibles. Tiempo al primer token. Cadencia de tokens. Compromiso estructural. Latencia de interrupción. Señal de finalización. Affordances posteriores al stream. Ignora cualquiera de ellas y el stream es un efecto secundario de una API, no un componente diseñado.
Cursor, Claude, v0, Lovable, Linear AI, Raycast AI. Ninguno trata el streaming como salida cruda de tokens. Cada uno lanza una superficie estructurada. Ese es el listón.
Las cinco capas de una gran superficie de streaming
Cinco capas, en el orden en que el usuario las vive. Una UI de streaming que lanza menos de cuatro está incompleta.
El tiempo al primer token es el momento en que el vacío se convierte en feedback. El ritmo de tokens es cómo se siente el stream una vez en marcha. El compromiso estructural es cómo la superficie maneja listas, tablas y código sin re-flow. Interrupción y edición es la vía de escape del usuario. La finalización es el momento en que el stream termina y el artefacto se vuelve interactivo. Salta cualquiera y el stream se pudre desde esa capa hacia arriba.
Capa 1: Tiempo al primer token
Los primeros 200 milisegundos deciden si el usuario confía en la superficie. Menos de 200 ms con una señal de feedback real se siente instantáneo. Pasados 800 ms sin feedback, el usuario ya está decidiendo que el producto está roto.
Las opciones son concretas. Un placeholder tipo skeleton que preasigna la región de salida. Un cursor parpadeante. Un indicador de puntos de escritura. Un prefijo en streaming donde una frase conocida como "Aquí tienes" aparece en 300 ms antes del contenido.
Los tres puntos de ChatGPT funcionan porque son honestos. El pulso en degradado de Claude es la mejora: una banda animada suave que indica que la superficie está viva sin comprometerse con contenido falso. Cursor renderiza una fina línea de cursor y un chip de estado que nombra lo que está pasando. En todos los casos el usuario mira algo dentro de 200 ms.
El vacío es el fallo. Una región en blanco que se cuelga 600 ms le enseña al usuario que la IA es algo que hay que esperar. Lanza el cursor antes de lanzar el modelo.
Capa 2: Ritmo de tokens
Los streams crudos de tokens son nerviosos. Un modelo que emite cuatro tokens, luego veinte, luego uno, parece una terminal con glitches aunque la entrega subyacente esté bien. El ritmo es una decisión de diseño.
La solución es una cadencia suavizada. Almacena en buffer los tokens entrantes durante 30 a 60 milisegundos y luego renderiza a un ritmo constante. El usuario lee entre 250 y 400 palabras por minuto, así que el objetivo es un stream que llegue a velocidad de lectura o ligeramente por encima, sin picos. Claude adoptó esta disciplina pronto.
Las primitivas de UI de streaming de Vercel en v0 llevan la misma idea: un bucle de render que desacopla la red de la actualización visual. El stream de tokens de la API es una capa. El stream visual es otra. Nunca deberían ser lo mismo.
El cursor importa. Un cursor que sigue el último token renderizado, con un suave desvanecimiento de estela, ancla la mirada. Sin él, el ojo del usuario salta por todas partes buscando dónde va el stream. El cursor de Cursor en su composer no es una coincidencia de nombre.
Capa 3: Compromiso estructural
La capa más difícil. La prosa plana es fácil. Un stream que se compromete con una lista, tabla, bloque de código o gráfico a mitad de respuesta es donde la mayoría de las superficies se rompen.
La versión ingenua es markdown como streaming. El renderizador parsea cada chunk, el layout se reflowea en cada commit, la lista se renumera, el bloque de código cambia de fuente a mitad del stream, la página salta. Cada reflow es un impuesto sobre la atención.
La versión correcta se compromete con la estructura en cuanto es detectable y luego hace fluir el contenido en el layout comprometido sin re-flow. Una lista reserva espacio en cuanto aparece el primer guion. Un bloque de código reserva un panel monoespaciado con el triple backtick. Una tabla compromete el número de columnas de inmediato. El streaming de diffs de Cursor es el caso de manual. El panel de diff reserva layout, las rutas de archivo llegan primero, las líneas individuales fluyen en filas preasignadas. El streaming consciente de la selección de v0 lleva el mismo patrón al lado del lienzo.
Las sugerencias estructuradas de Linear AI entregan compromiso sin mostrar nunca al usuario un estado de "cargando". La sugerencia llega como un objeto tipado, los campos se rellenan en orden de dependencia, el flujo de trabajo nunca se bloquea. Linear entrega trabajo, los demás entregan transcripciones.
Capa 4: Interrupción y edición
Una UI de streaming sin interrupción es hostil. El usuario ve al modelo escribir algo que ya sabe que está mal, y la única salida es cerrar la pestaña. No es un producto. Es una situación de rehenes con contador de tokens.
El botón de parar es el elemento más barato y de mayor impacto de la superficie. Visible desde el primer token, no después del token 100. Claude, Cursor, ChatGPT y v0 incluyen uno. La mayoría de las UIs de chat caseras lo olvidan.
La interrupción es el suelo. La edición es el techo. El patrón que la mayoría de los equipos aún no se ha ganado es la edición en vivo, donde el usuario revisa el prompt a mitad del stream y la superficie se reencamina. El aceptar y rechazar durante el streaming de Cursor es la versión lanzada más cercana. El usuario lee el diff mientras llega, acepta las partes que funcionan, rechaza las que no. Eso es un bucle de interacción real.
El regenerar de ChatGPT es el contraste. El botón sobrescribe la respuesta anterior y el usuario pierde la versión que le gustaba. Regenerar como sobrescritura es destructivo. Regenerar como rama es diseño. La superficie de historial de Claude lanza la rama.
Capa 5: Finalización y post-stream
El momento en que termina el stream es un momento de diseño. La mayoría de los productos lo tratan como nada. El stream se detiene, el cursor desaparece, el usuario mira un muro de texto preguntándose qué hacer después.
La materialización de artefactos de Claude es el estándar de oro. El texto en streaming recibe una señal de finalización discreta, y el panel de artefactos pasa de vista previa en streaming a superficie interactiva en el mismo compás. El usuario no ha "terminado de leer", ahora está "dentro del artefacto". La transición es todo el sentido.
El cambio de preview de v0 es la versión del lado del diseño. El código en streaming termina, el iframe de vista previa en vivo se recarga con el build final, aparece el botón de deploy. Tres estados, una transición, cero tiempo muerto.
El diff-to-accept de Cursor es el tercer patrón. El stream termina, el diff sigue editable, aceptar y rechazar permanecen, el archivo no se confirma hasta que el usuario lo dice. El stream terminó, la decisión no. Esa separación es lo que hace que la superficie se sienta como una herramienta en lugar de un log de chat.
La mala versión termina el stream y no entrega nada. El cursor deja de parpadear, la prosa se queda ahí, el usuario copia el texto a otra herramienta para usarlo de verdad. Un pipeline de copiar y pegar con un modelo acoplado.
Análisis de productos reales
Cursor combina composer en streaming con materialización de diffs. El composer hace streaming del plan, el panel de diff hace streaming del parche, aceptar y rechazar siguen activos, y el estado posterior es un diff pendiente que pertenece al usuario. Acierta en todas las capas.
Claude lanza ritmo de tokens suavizado e intercambio al panel de artefactos. Pulso en degradado antes del primer token, cadencia constante, materialización del artefacto al completar, historial de conversación con ramas. La superficie se siente diseñada porque cada transición lo fue.
v0 lanza streaming guiado por selección con vista previa en vivo. El usuario hace clic en una región del lienzo, el prompt se acota solo, el stream llega como código y como vista previa que se intercambia en el iframe. La finalización pasa el relevo a un botón de deploy.
ChatGPT es la línea base. Streaming de tokens con feedback de tres puntos, regenerar como sobrescritura, "ramificar desde aquí" como adición reciente. El estándar de la categoría, no el listón.
Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI y GitHub Copilot Workspace lanzan cada uno fragmentos. Vercel expone el selector de modelo en vivo durante el stream. Lovable ejecuta el patrón stream-a-app: el usuario ve cómo se construye su app en tiempo real. Computer Use hace streaming de capturas y traza de razonamiento en paralelo. Raycast hace streaming en una microsuperficie de paleta de comandos. Copilot Workspace lanza streaming de planificar y luego ejecutar con checkpoints.
Las cinco reglas
- Muestra feedback en menos de 200 milisegundos. Un cursor, un pulso, un punto de escritura, un prefijo en streaming. Cualquier cosa menos el vacío.
- Suaviza la cadencia. Haz buffer del stream de red, renderiza a velocidad de lectura, ancla el cursor. El jitter es un fallo de diseño, no una condición de red.
- Compromete la estructura sin re-flow. Reserva layout en cuanto se detecte una lista, tabla o bloque de código. Nunca reflowees.
- Lanza el botón de parar antes del token 100. Visible. Alcanzable. Un clic. Sin excepciones.
- Diseña el momento posterior al stream con el mismo cuidado que el stream. La finalización es un traspaso. El traspaso es el producto.
Los antipatrones que matan streams en producción
El spinner muerto. Un spinner gira mientras el modelo hace streaming detrás de una capa de render cerrada. Borra el spinner. Lanza el stream.
El jitter de tokens. Salida cruda de tokens, sin buffer, la cadencia oscila entre ráfagas y pausas. Suavízala.
El auto-scroll que pelea con el usuario. La página hace auto-scroll para seguir el stream mientras el usuario lee un párrafo anterior. Detecta el scroll manual y pausa el auto-scroll hasta que el usuario vuelva a anclarse. Claude y Cursor lo resuelven.
El error de no tener botón de parar. La interrupción enterrada en un menú de ajustes, o que aparece solo tras 30 segundos, o que no existe. Visible desde el primer token.
El stream que termina y deja al usuario mirando. Sin señal de finalización, sin siguiente paso. Diseña el post-stream.
El regenerar destructivo. La nueva respuesta sobrescribe la anterior, el usuario pierde la versión que le gustaba. Regenerar como rama, nunca como sobrescritura.
Markdown crudo como streaming. El renderizador reflowea en cada chunk, la página salta. Compromete la estructura una vez, haz stream en layout reservado.
Las soluciones son pequeñas. Las superficies que las lanzan se sienten de 2026. Las que no, se sienten como barras laterales de chat de 2022 conectadas a un modelo de 2026.
La auditoría de la superficie de streaming
Ejecuta esto en cualquier superficie de streaming de IA antes de lanzarla.
- Primer feedback. ¿La superficie muestra algo dentro de los 200 milisegundos tras enviar?
- Cadencia. ¿El stream de tokens está suavizado a velocidad de lectura, o es jitter crudo de red?
- Compromiso estructural. ¿La superficie reserva layout para listas, tablas y bloques de código antes de que llegue el contenido?
- Affordance de parada. ¿El botón de parar es visible desde el primer token, a un clic?
- Affordance de edición. ¿Puede el usuario revisar, aceptar o rechazar a mitad del stream?
- Diseño de la finalización. ¿El momento en que termina el stream pasa el relevo a un siguiente paso real?
- Artefacto post-stream. ¿La salida es interactiva tras el stream, o solo una transcripción congelada?
Una superficie que pasa las siete se siente como un componente diseñado. Una que falla tres o más se siente como un console log con un modelo acoplado. Esa brecha separa el diseño de producto nativo de IA de la IA añadida a posteriori.
Los equipos que lanzan superficies de streaming con este cuidado son los mismos que tratan las superficies de prompt como componentes reales del lado del input, y que diseñan para la latencia de la IA a nivel de sistema. Combínalo con estados vacíos, patrones de UI para agentes y señales de confianza para que la salida en streaming se gane la lectura.
FAQ
¿Qué es el diseño de UI de streaming?
El diseño de UI de streaming es la disciplina de dar forma a cómo aparece en pantalla la salida de la IA mientras el modelo la genera. Abarca el tiempo al primer token, la cadencia de tokens, el compromiso estructural, los affordances de interrupción y el artefacto posterior al stream. Una UI de streaming no es un textarea que se llena de texto. Es una superficie diseñada con propiedades medibles, y los productos que ganan ahora mismo la tratan así.
¿Por qué el streaming de tokens se siente distinto en cada producto?
Porque la cadencia es una decisión de diseño, no un resultado de red. Un stream crudo de tokens es nervioso. Un stream con buffer y suavizado llega a velocidad de lectura. Claude suaviza la cadencia con un bucle de render que desacopla la red de la actualización visual. ChatGPT se acerca más a la entrega cruda. Misma clase de modelo, distinta sensación de superficie.
¿Cuál es el error más común en UIs de streaming?
Lanzar un stream sin un botón de parar visible. El usuario ve al modelo escribir algo que sabe que está mal y no tiene salida. Otros fallos comunes: spinners muertos, auto-scroll que pelea con el usuario, regenerar destructivo, markdown crudo que reflowea en cada chunk y una finalización que no entrega a nada. Cada uno se arregla con un pequeño cambio de superficie.
Construye el stream como si fuera el lienzo
La región de salida en streaming es el nuevo lienzo. Los productos de IA viven o mueren según cómo se sienta esta superficie en los primeros 800 milisegundos y cómo se mantenga legible durante una respuesta de 30 segundos. La mayoría de los equipos la trata como una máquina de escribir. Los equipos que fijan el listón la tratan como infraestructura.
Lanza las cinco capas. Ejecuta la auditoría. Evita los antipatrones. El producto que sale al otro lado se siente como una herramienta en lugar de una barra lateral de chat que finge serlo.
Si quieres un equipo que lance superficies de streaming como componentes completos en lugar de bucles de tokens añadidos a posteriori, contrata a Brainy. Diseñamos UI de producto nativa de IA de principio a fin, desde el primer token hasta el artefacto posterior al stream, con las señales de confianza y los affordances de interrupción integrados antes de que el primer usuario pulse enviar.
Want a streaming surface that feels designed instead of bolted on? Brainy ships AI-native product UI end to end, from the first token to the post-stream artifact.
Get Started
