El modelo Fable 5 de Anthropic se lanza, es prohibido a los pocos días y luego regresa como el ave fénix[1]. Con él, revive la especulación sobre su espectacular UI/UX y su magia en el frontend. Así que puse a prueba su capacidad de generación en un solo intento usando Claude Design: ejecuté prompts de algunas interfaces comunes de apps y webs, mezclé UIs de referencia y analicé la calidad del código frontend para evaluar su lugar en el flujo de trabajo de un equipo de producto. Puedes juzgarlo tú mismo con mis ejemplos de UI creados por Fable 5.
Alerta de spoiler: En el juego del UI/UX, frente a Gemini 3.1 PRO y GPT 5.4, Fable 5 es el jefe final.
Alternativas gratuitas a Claude Design >
De Texto a UI con Fable 5
App de meditación minimalista (Móvil)
Prompt
"Diseña la pantalla de una app de meditación minimalista para móvil: UI calmada y espaciosa con gradientes suaves, un CTA principal para iniciar sesión, selector de duración de sesión y un rastreador de racha. Mantenla limpia, de baja estimulación, principalmente espacio en blanco."
Diseño obtenido
Tiempo requerido: ~3 minutos
Al escribir el prompt tenía en mente la UI de la app Calm. Pero Fable 5 la llevó a otro nivel de minimalismo. Cumple el brief casi a la perfección: gradientes suaves, CTA circular de respiración, selector de duración y pie de página con racha, todo presente. Los colores y la tipografía van alineados con la experiencia esperada. Pero va un paso más allá añadiendo una sutil animación. No lo pedí, pero no me molesta en absoluto.
Explora y edita la UI de Calm App con IA >
Dashboard SaaS maximalista (Escritorio)
Prompt
"Diseña un dashboard SaaS fintech denso para escritorio. Cargado pero organizado: navegación superior, barra lateral, tarjetas de KPI (ingresos, cuentas activas, volumen de transacciones, churn), un gráfico grande de ingresos/flujo de caja, tabla de transacciones recientes y un panel de notificaciones/alertas. Con muchos datos, múltiples widgets, densidad real de herramienta empresarial."
Diseño obtenido
Tiempo requerido: ~8 mins
Esta vez, Claude Design me hizo preguntas de aclaración como un típico AI UI Agent, así que debo hacer una aclaración: Fable 5 tuvo algo de ayuda para decidir su dirección creativa.
En cuanto al resultado, es realmente denso y grande, por eso tardó tanto, supongo. Se ve bastante corporativo pero bien curado y sin desorden. Sin embargo, noté algunos badges que podrían redimensionarse para encajar mejor con las tarjetas. Además, no se limitó a cumplir cada instrucción por separado; las sintetizó en un producto consistente, como lo haría un diseñador con buen gusto.
Explora y edita la UI de Fintech App por Banani AI >
Flujo de onboarding multipantalla
Prompt
"Diseña un flujo de onboarding multipantalla para una app de citas en versión móvil. Incluye: pantalla de bienvenida/propuesta de valor, subida de foto, información básica (nombre, edad, ubicación), selección de intereses/prompts y pantalla final de 'listo para deslizar'. Atrevido, moderno y con mucha energía."
Diseño obtenido
Tiempo requerido: ~5 mins
En esta ocasión, Claude Design también hizo preguntas creativas que respondí por Fable 5, pero con la clara intención de alejarlo de la típica idea de una UI estilo Tinder.
El prototipo multipantalla se ve increíble y está lleno de microinteracciones dinámicas. Todas las pantallas y componentes están ahí tal como se pidieron. El color, la tipografía, el copy, el flujo, todo implementado de forma profesional. Si tuviera que crear un MVP para esta app, quizás solo necesitaría usar herramientas de investigación UX con IA para obtener feedback real y pedirle a Fable 5 que rediseñe en base a eso.
Por ponernos minuciosos, creo que para lograr un toque creativo superior, Fable 5 podría haber creado una imagen en la pantalla de inicio y el logo podría haber sido un vector en lugar de solo una fuente estilizada.
De Captura a UI con Fable 5
Se suele usar una IA de screenshot-to-UI para editar una interfaz que ya nos gusta. Pero como el flujo de trabajo normal suele requerir usar ese diseño editado para crear pantallas nuevas, quería ver cómo Fable 5 lo entiende, edita y recombina. Para ello, subí capturas de la UI de Duolingo, le pedí que añadiera una nueva función y generara algunas imágenes, todo en dos pasos.
Prompt
“Paso 1 — Cambiar icono de barra de navegación:
Replica exactamente el sistema de diseño de esta captura de Duolingo. Reemplaza el icono de escudo/tabla de clasificación por un nuevo icono de 'Cultura' (un globo terráqueo simple o una postal), con el mismo grosor de línea y estilo que los demás. Deja todo lo demás intacto.
Paso 2 — Pantalla de la función:
Mismo sistema de diseño. Diseña la pantalla de 'Tarjetas de Cultura' que abre este icono: un feed con scroll de tarjetas, cada una con una foto real (calle, mercado, café, monumento) de un país de habla hispana, un texto breve relacionado con vocabulario y un botón de 'Practicar palabra'. Mantén el estilo de tarjeta y colores de Duolingo, pero dale el protagonismo a la foto."
Diseño obtenido
Tiempo requerido: ~12 mins (en dos intentos)
Lo primero que me llamó la atención: sin vectores ni imágenes en el primer intento. Mal. Sin embargo, Fable 5 sí replicó la estructura de Duolingo para encajar con el resto de la UI, creó el boceto de la nueva función y eligió un color muy acorde al universo Duo. Al pedirle explícitamente que corrigiera los detalles que faltaban, tardó unos ~6 mins más y añadió los vectores e imágenes. Curiosamente, parece haber obtenido las fotos de Wikimedia Commons en lugar de generarlas de la nada. Aunque los vectores no son una copia idéntica de los de Duolingo, supongo que esos elementos de la UI deberían subirse por separado.
(*Nota: Por cierto, en este punto me quedé sin créditos diarios en Claude. Vaya que Fable 5 consume bastante).
¿Vale la pena Figma Weave para generar assets de UI? >
Fidelidad al sistema de diseño en Fable 5
En 2026, el archivo Design MD es el nuevo estándar de brief. Para comprobar qué tan bien se ciñe Fable 5 a uno, subí las pautas de diseño de la UI de Airbnb y le pedí generar una app ficticia llamada ‘Deskbrb’ basada en las mismas reglas.
Prompt
"Usando como referencia el sistema de diseño de Airbnb adjunto, diseña una app móvil llamada DeskBrB. Es un marketplace tipo Airbnb para reservar escritorios de coworking y salas de reuniones por horas. Requiere 3 pantallas: Feed/búsqueda de inicio (con filtros y tarjetas de listados), Detalle de listado (fotos, servicios, precios, disponibilidad) y Perfil del vendedor (calificaciones, reseñas e insignias de verificación, imitando la estructura de confianza de Airbnb)."
Diseño obtenido
Tiempo requerido: ~5:30 mins
Este caso es interesante porque aquí actuó más como un PM riguroso que como un diseñador libre. Clavó los iconos, la tipografía y los bordes redondeados. Pero más importante aún, el layout y los componentes están tan logrados que cualquiera podría confundirlo con la UI original de Airbnb. Aquí se confirma de nuevo el límite de Fable 5 para generar/buscar imágenes, pero la UI/UX sigue siendo fabulosa.
Generador de Sistemas de Diseño con IA gratis >
Calidad del código frontend en Fable 5
El diseño web con Claude Fable 5 es solo la mitad de la propuesta como IA de producto; la otra mitad es la generación de código. Así que extraje el código de dos de los proyectos anteriores: la app de meditación (HTML/CSS/JS estándar) y DeskBrB (React + Tailwind modernos).
App de meditación: HTML/CSS/JS en un solo archivo
Sin frameworks y todo en un mismo archivo. Marcado semántico (header, footer, main), variables CSS para la paleta de colores, manejo de estado `aria-pressed` en el selector y respeto por la preferencia de movimiento reducido en la animación. Parece escrito por un developer que domina la accesibilidad por defecto.
App DeskBrB: React componentizado + Tailwind
Aquí es donde deja de parecer una herramienta de diseño exportando código básico para convertirse en el repositorio real de un equipo pequeño. 18 archivos. Componentes bien delimitados — `Button`, `StarRating`, `ListingCard`, `PhotoCarousel` —, cada uno reutilizable y dinámico mediante props.
La configuración de Tailwind implementa los tokens reales de Airbnb (rojo Rausch, escala de grises, sombras) tomados directo del Design MD. Incluso generó un README con los pasos de configuración para Vite. Y dado que la fuente Custom de Airbnb es de uso propietario, usó Inter por defecto y lo aclaró. Genial.
Análisis del resultado
En ambos ejemplos, la calidad del código de Fable 5 es sobresaliente, sin importar la escala o el stack. Incluye atributos de accesibilidad, estructura semántica y consistencia en los tokens de diseño que no son detalles aislados sino su estándar base. La fidelidad visual se traduce limpio al código. Es lo más cercano al handoff de un desarrollador frontend, superando a muchas IAs de diseño a código de 2026.
Prueba IA de diseño a código gratis >
Fable 5 vs Gemini vs GPT en UI
En 2026, los dos modelos de IA dominantes en UI/UX y frontend eran Gemini 3.1 PRO y GPT-5.4. Para medir el nivel de Fable 5, los enfrenté ejecutando el mismo prompt en los tres. Y para hacerlo más complejo, les pedí generar la interfaz móvil y web de escritorio de una misma pantalla de fintech.
Usé Fable 5 en Claude Design, e hize correr Gemini y GPT en Banani AI UI Designer.
Prompt (idéntico en los tres, sin referencias)
"Diseña una pantalla de app bancaria móvil llamada 'My Card' para el usuario final. Muestra una tarjeta de débito virtual, saldo, acciones rápidas, estadísticas de gastos y lista de transacciones recientes. Completa con datos y copys realistas. En cuanto a estética, busca un estilo oscuro, premium y sobrio. Superficies translúcidas y gradientes (estilo glassmorphism) con tipografía moderna y un único color de acento que resalte."
Rendimiento del diseño (los tres frente a frente)
Ver y editar diseño de Gemini 3.1 PRO | Ver y editar diseño de GPT 5.4
Los tres modelos hicieron preguntas adicionales (aunque el agente UI de Banani requirió menos guía). Los diseños de Banani se completaron en menos de 2 minutos (un minuto para móvil y otro para desktop), mientras que Fable 5 en Claude Design tomó unos 6 minutos.
En cuanto al diseño, los tres captaron perfecto el brief de móvil. Curiosamente, Fable 5 y GPT 5.4 prefirieron una combinación verde/negro, mientras que Gemini 3.1 PRO optó por morado/negro. El uso de fuentes, iconos y distribución es excelente en todos. Aun así, para mí, el efecto translúcido del Fable 5 tiene un acabado más premium. Su versión de escritorio organiza de forma más inteligente mucha información en una sola pantalla. Las otras dos son buenas, pero GPT omitió la barra de navegación lateral y Gemini se siente algo saturado.
Es una decisión difícil porque el nivel es altísimo, pero Fable 5 gana por detalles.
Diseña UI con Gemini o GPT gratis >
Veredicto: ¿Es Fable 5 bueno para UI/UX?
Sí, Fable 5 está en otro nivel para el diseño web. Su comprensión del brief, calidad visual y código generado son impecables. Puede crear vistas estáticas, micro-animaciones y prototipos dinámicos multipantalla. No obstante, consume muchos créditos de uso y es relativamente lento (al menos en Claude Design).
¡Si buscas una interfaz increíble con IA y un flujo rápido de diseño a código, empieza gratis con Banani! Soporta múltiples modelos (los últimos de Gemini y Claude), cuenta con integración profunda para Figma y exportación de HTML/CSS o conectores MCP en un clic.
Preguntas frecuentes sobre Fable 5 en UI/UX
¿Cómo usar Fable 5 en Claude Design?
Dentro de Claude Design, en la caja del prompt, verás el desplegable de modelos. Selecciona Fable 5 y define el nivel de esfuerzo que aplicará (de bajo a máximo).
¿Cómo exportar el código frontend de Fable 5 en Claude Design?
En el chatbot puedes pedirle directamente el código limpio del diseño en el lenguaje que necesites. O haz clic en la esquina superior derecha en Compartir → Enviar a Claude Code para obtener la carpeta de handoff lista para desarrollo.
¿Es buena la calidad de código frontend de Fable 5?
Sí, lo es. Al revisar múltiples archivos de código generados por Fable 5, he encontrado HTML/CSS/JS estructurado y accesible para elementos pequeños, y una arquitectura modular basada en componentes React + Tailwind para flujos completos. Listos para producción.
¿Puede Fable 5 generar imágenes para UI?
No de forma consistente. Durante las pruebas con Fable 5 para UI dentro de Claude Design, a pesar de insistar, NO generó imágenes nuevas; se limitó a enlazarlas desde Wikimedia Commons. Sin embargo, sí genera iconos vectoriales personalizados con prompts específicos.
