Cómo diseñar una app atractiva con IA

Para conseguir una app con buen aspecto con IA, deja de pedirle que “la haga bonita” y empieza a darle lo que pediría un diseñador: dos o tres referencias que te gusten, una dirección de diseño con nombre y reglas concretas para tipografía, color y espacios. Luego construye una pantalla, ajústala hasta que quede bien y pide a la IA que aplique el mismo sistema al resto. Gran parte del “estilo IA” surge de prompts vagos que producen respuestas promedio; una entrada específica produce un diseño específico.

Por qué los diseños de IA se ven genéricos

Pide a una IA “un dashboard SaaS moderno y limpio” y te dará el punto medio estadístico de todos los dashboards que ha visto: la misma fuente sans-serif, un degradado de morado a azul, tarjetas redondeadas con sombras suaves, iconos tipo emoji dentro de círculos y un héroe centrado que dice “Tu flujo de trabajo, simplificado”. Ninguna de esas elecciones es mala por sí sola. El problema es que ninguna se eligió para tu producto.

El buen diseño consiste sobre todo en tomar decisiones. Tu trabajo es tomar el puñado de decisiones que dan carácter a la app, y dejar que la IA haga las miles de pequeñas de forma coherente.

Paso 1: reúne referencias antes de escribir el prompt

Dedica veinte minutos a reunir de dos a cuatro referencias: apps o sitios web cuyo aspecto encaje con tu producto. Buenas fuentes son los productos que ya usa tu público, las galerías de diseño y los sitios de empresas de sectores afines.

Para cada una, anota qué te gusta, con palabras sencillas:

• “Mucho espacio en blanco, contenido en una columna estrecha, etiquetas pequeñas en gris encima de números grandes.”
• “Tablas densas con divisores finos, sin sombras en las tarjetas, un solo color de acento para las acciones.”
• “Titulares grandes con serif, fondo blanco roto cálido, fotografía en lugar de ilustraciones.”

Después pasa esas descripciones a la IA y adjunta capturas si tu herramienta admite imágenes. Inspírate en las cualidades, no en el producto: copiar por completo el diseño, la marca o el texto de otra empresa supone un riesgo legal y de credibilidad.

Paso 2: elige una dirección de diseño y ponle nombre

Una dirección es una descripción breve del estilo. Le da a la IA un filtro para cada decisión que toma. Algunas que funcionan bien:

Incluye esto en el primer prompt, junto con para quién es la app:

Crea una app de reservas para un estudio de yoga independiente. Dirección de diseño: calmada y minimalista, como un horario impreso del estudio. Fondo blanco roto cálido, texto casi negro, un verde salvia apagado como acento para botones y estados seleccionados. Una serif para los títulos y una sans-serif limpia para el texto. Espacios generosos, sin degradados, sin sombras, sin emojis. Primero móvil.

Paso 3: define las reglas de tipografía, color y espacios

Estos tres aspectos aportan la mayor parte de la calidad visual. Ser explícito con ellos es la mejora más grande que puedes hacer.

Tipografía

• Una o dos tipografías. Una para títulos y otra para el cuerpo, o una familia en varios grosores.
• Una escala tipográfica. Unos pocos tamaños usados de forma coherente —por ejemplo 14, 16, 20, 28 y 40 px— en lugar de lo que elija cada componente.
• Texto de lectura cómodo. Alrededor de 16 px en la web, una altura de línea de unos 1,5 y una longitud de línea de 60 a 75 caracteres para textos largos.
• Jerarquía mediante grosor y tamaño, no color. Títulos más gruesos y grandes; el texto secundario más pequeño y de un gris más suave.

Color

• Sobre todo neutros. Los fondos, las superficies, los bordes y los grises del texto hacen la mayor parte del trabajo.
• Un color de acento para acciones y estados seleccionados. Un segundo solo si tiene una función clara.
• Colores semánticos para éxito, advertencia y error, y usados únicamente para eso.
• Contraste. WCAG 2 pide una relación de contraste de al menos 4,5:1 para el texto normal y 3:1 para el texto grande. El texto gris claro sobre blanco suele fallar; pide a la IA que lo compruebe.
• Modo oscuro, si lo quieres, diseñado con intención y no simplemente invertido.

Espacios y disposición

• Una escala de espacios como 4, 8, 12, 16, 24, 32, 48 y 64 px. Todo se ajusta a ella.
• Alineación. Los bordes quedan alineados; el contenido se sitúa en una cuadrícula o en una columna de ancho máximo coherente.
• Proximidad. Lo relacionado va junto y lo no relacionado, más separado. Esta regla sola corrige la mayoría de las pantallas saturadas.
• Menos contenedores. No todo necesita una tarjeta. Los bordes, divisores y el espacio en blanco suelen agrupar el contenido de forma más discreta.

Un prompt que monta el sistema una sola vez:

Antes de crear más pantallas, monta un pequeño sistema de diseño y úsalo en todas partes: una escala tipográfica de 14/16/20/28/40 px, altura de línea del cuerpo de 1,5, una escala de espacios de 4/8/12/16/24/32/48 px, neutros desde casi blanco hasta casi negro, un color de acento (#3F6B5A) solo para acciones principales, y rojo solo para errores. Botones, campos y tarjetas deben compartir el mismo radio de borde. Comprueba que todo el texto cumple el contraste WCAG AA.

Si trabajas con un creador que entiende el código, esto suele convertirse en tokens de diseño —variables CSS o un tema de Tailwind—, lo que significa que los cambios futuros se hacen en un solo lugar.

Paso 4: construye primero una pantalla como es debido

No generes doce pantallas para luego intentar arreglarlas todas. Elige la pantalla que más ven los usuarios —a menudo el dashboard o la lista principal— e itera hasta que esté bien. Después:

Usa el dashboard como referencia para todas las demás páginas: mismo encabezado, espacios, tamaños de texto, estilos de botón y estilo de tabla. Actualiza las páginas de Ajustes y Reservas para que coincidan.

Una pantalla de referencia terminada comunica tu gusto mucho mejor que cualquier adjetivo.

Paso 5: itera con peticiones pequeñas y concretas

Los comentarios a una IA funcionan como los comentarios a un diseñador junior: concretos, una zona a la vez, y claros sobre qué conservar.

Añade siempre qué conservar —“mantén todas las rutas, textos y funciones iguales”— para que un cambio visual no elimine funciones sin que te des cuenta. Y revisa cada cambio en una pantalla del tamaño de un teléfono antes de pedir el siguiente; consulta cómo crear una app web optimizada para móviles para ver qué es lo correcto en pantallas pequeñas.

Paso 6: los detalles que separan lo bueno de lo genérico

Una vez que la estructura es correcta, estas pequeñas cosas hacen que una app se sienta terminada:

• Estados vacíos. Lo que ve un usuario nuevo sin datos: una breve explicación y una acción clara, no una tabla en blanco.
• Estados de carga. Esqueletos con la forma del contenido, no spinners en todas partes.
• Estados de error. Mensajes en lenguaje sencillo junto al campo que causó el problema.
• Estados de hover, foco y pulsado en cada elemento interactivo: los anillos de foco importan para quien usa el teclado.
• Contenido real. Sustituye “Lorem ipsum” y “Juan Pérez” por textos y datos realistas; el contenido de relleno oculta los problemas de diseño.
• Iconos de un mismo conjunto, en uno o dos tamaños, con grosor de trazo constante.
• Imágenes con un propósito. Las fotos reales de tu producto, lugar o personas superan al stock genérico. Si usas imágenes de stock o generadas, mantén un estilo coherente.
• Textos. Las etiquetas cortas y concretas (“Reservar clase”, no “Enviar”) aportan tanta calidad percibida como cualquier color.

Errores comunes

• Rediseñar todo en un solo prompt. Las grandes reescrituras introducen regresiones. Ve página por página.
• Demasiados colores de acento. Si todo está destacado, nada lo está.
• Centrarlo todo. El texto centrado es difícil de escanear más allá de un titular; alinea a la izquierda la mayor parte del contenido.
• Texto pequeño y de bajo contraste que se ve elegante en un monitor grande e ilegible en un teléfono a plena luz.
• Decoración por encima de la jerarquía. Los degradados y las sombras no arreglan una pantalla en la que la acción más importante no es obvia.
• Olvidar la página de inicio. En muchos productos es la primera impresión; consulta cómo crear una landing page que convierta.

Para más patrones de prompts más allá del diseño, lee cómo escribir prompts para creadores de apps con IA. Si tu trabajo es el propio producto —un portafolio de diseño o fotografía—, cómo crear un sitio web de portafolio profundiza en la presentación.

Diseñar con Mythex

En Mythex describes el diseño en el chat, lo ves en la vista previa en directo y compruebas el marco del tamaño de un teléfono antes del siguiente cambio. La documentación tiene patrones breves para esto: prompts de diseño e interfaz sobre cómo nombrar lo que cambia y lo que se mantiene, y rediseñar tu interfaz para renovar una página a la vez sin perder funciones. Mythex también puede buscar fotos de stock o generar una imagen en el chat —una imagen principal, un fondo, una imagen para compartir— y colocarla en la app cuando lo pidas. Si un paso sale mal, vuelve al punto de control anterior. Explora las plantillas si prefieres partir de un diseño existente y ajustarlo.

Preguntas