Las UIs generadas por IA se saltan los estados vacíos — pide cada estado en el prompt
La IA construyó el camino feliz de tu UI. Tus usuarios viven en el camino triste. Pídele a un asistente de código "un dashboard con una lista de pedidos" y obtendrás una pantalla hermosa — para el único caso en el que los datos cargaron al instante, la lista tiene 8 filas ordenadas y nada falló. Los usuarios nuevos ven un vacío en blanco. Las redes lentas ven un destello de nada. Las peticiones fallidas ven silencio. Nada de eso estaba en el prompt, así que nada de eso está en el código.
Estados, no casos borde
Toda vista basada en datos tiene al menos cinco estados, y solo uno es "feliz":
- Carga (loading) — la petición está en vuelo.
- Vacío (empty) — la petición tuvo éxito y devolvió cero elementos.
- Error — la petición falló.
- Parcial / desborde (overflow) — demasiado contenido: 10,000 filas, un nombre de 300 caracteres, un título que ocupa tres líneas.
- Ideal — el estado de la captura de pantalla. El único que la IA construye de forma confiable.
No son casos borde; son la experiencia por defecto de los usuarios nuevos (vacío), de los usuarios móviles (carga) y de todos tarde o temprano (error). La guía de Nielsen Norman Group sobre estados vacíos es directa: un contenedor en blanco deja al usuario sin saber si la app está rota, cargando o esperándolo — un estado vacío bien diseñado comunica el estatus, enseña y enlaza a la siguiente acción.
Pídelos explícitamente — cada vez
El arreglo cuesta una oración. Agrégala a cada prompt de UI:
Build the orders table. For every data-driven component, implement
all of: (1) a loading state with skeleton placeholders that reserve
the final layout's space, (2) an empty state with one line of copy
and a primary action, (3) an error state with a human-readable
message and a Retry button, (4) sensible handling of overflow —
long strings truncate with ellipsis, lists over 50 items paginate.Reglas prácticas por estado:
| Estado | Muestra | Evita |
|---|---|---|
| Carga | Skeleton con la forma del layout final | Un spinner centrado en el vacío |
| Vacío | 1 línea de texto + una acción de "crear/importar" | El texto pelado "No data" |
| Error | Qué falló, en palabras humanas, + botón Retry | Un stack trace crudo o nada |
| Desborde | Truncado, reglas de salto de línea, paginación | Un layout que se rompe a los 200 caracteres |
Skeletons: reserva el espacio
Los estados de carga no son solo decoración — evitan saltos de layout. La guía de CLS de web.dev lo dice sin rodeos: reserva el espacio suficiente por adelantado (placeholder o skeleton UI) para que el contenido cargado no empuje la página; un buen puntaje de Cumulative Layout Shift es 0.1 o menos. La investigación de NN/g sobre skeleton screens agrega calibración: los skeletons valen la pena en cargas de página completa de aproximadamente 2–10 segundos; por debajo de ~1 segundo son innecesarios, y pasados ~10 segundos una barra de progreso les gana a ambos. Prefiere skeletons estáticos sobre los que brillan, y haz que el skeleton coincida con el layout real — mismas alturas de tarjeta, mismos anchos de columna — o solo moviste el reflow de lugar.
Movidas de usuario avanzado
- Haz de los estados una definición de terminado. Agrega "los cinco estados implementados" a los criterios de aceptación en tu archivo de tareas o en instrucciones de proyecto estilo CLAUDE.md, para que cada componente generado herede el requisito sin re-promptear.
- Exige un arnés que fuerce estados. Pide a la IA que también genere un toggle de desarrollo o historias de Storybook que fuercen cada estado (
?state=empty,?state=error). Si no puedes renderizar un estado a demanda, no puedes revisarlo. - Prueba el camino triste con datos tristes. Alimenta fixtures con cero filas, 10,000 filas, strings de 300 caracteres y emojis. Los bugs de desborde nunca aparecen con
["Alice", "Bob"]. - Roba patrones de copy de los design systems. La documentación del componente EmptyState de Shopify Polaris es una especificación lista: explica el beneficio, una acción primaria clara, lenguaje simple. Apunta a tu IA a un patrón como ese en vez de dejar que improvise.
- Nunca colapses el espacio reservado. web.dev advierte que quitar el espacio de un placeholder causa tanto salto de layout como insertar contenido — los estados de error y vacío deben ocupar la misma caja que ocupó el skeleton.
Recursos
- Designing Empty States in Complex Applications: 3 Guidelines — Nielsen Norman Group
- Skeleton Screens 101 — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev
- Optimize Cumulative Layout Shift — web.dev
- Componente EmptyState — Shopify Polaris
¿Construyendo una funcionalidad con IA? Yeda AI diseña, audita y entrega sistemas LLM de producción.