Le pides a la IA una landing page y te devuelve lo mismo que a todo el mundo: fondo blanco, tipografía de sistema, un degradado morado, tres tarjetas con íconos. Le dices "hazlo más bonito" y te da otra versión igual de genérica.
El problema no es el prompt. Es que le estás pidiendo que invente dirección creativa desde cero, y ahí es donde cualquier modelo cae en su promedio. Dale una referencia concreta y el resultado cambia por completo, sin que tú aprendas nada de diseño.
Estos son los cinco sitios de los que saco referencias, y el método para convertirlas en algo que la IA pueda ejecutar.
Por qué una referencia gana a diez adjetivos
"Limpio", "moderno", "premium" y "minimalista" no significan nada operativo. Cada modelo los interpreta hacia su propio estilo de casa, y por eso todos los diseños generados terminan pareciéndose.
Una referencia real, en cambio, trae decisiones tomadas: una paleta con valores exactos, una escala tipográfica, un ritmo de espaciado, una jerarquía. Eso sí es ejecutable. La IA es excelente aplicando un sistema visual y mala inventándolo.
Cómo se le pasa una referencia
El error es pegar la captura y decir "hazme algo así". Lo que funciona es pedirle primero que extraiga el sistema y solo después que construya. Dos pasos, siempre:
Te paso capturas de un sitio que me gusta. NO copies su contenido
ni su marca. Extráeme su sistema de diseño:
1. Paleta: los hex de fondo, texto, acento y bordes.
2. Tipografía: qué familias, qué tamaños relativos entre título,
subtítulo y cuerpo, qué pesos, cuánto interlineado.
3. Espaciado: la unidad base y el ritmo vertical entre secciones.
4. Bordes y sombras: radios y profundidad, con valores.
5. Qué hace que se vea caro: nómbrame las tres decisiones
concretas, no adjetivos.
Devuélvemelo como una lista de tokens de diseño lista para
aplicar. Si algo no lo puedes determinar de la imagen, dilo en
lugar de adivinar.Con esa salida en la mano, la segunda instrucción es construir tu página aplicando esos tokens a tu contenido. El resultado ya no se ve hecho con IA, porque el criterio visual no salió de la IA.
El paso que todo mundo se salta: elegir la referencia por rubro, no por gusto. Un portafolio de fotógrafo es precioso y es pésima referencia para un dashboard de finanzas. Busca sitios de empresas que se parezcan a la tuya en densidad de información y en tipo de decisión que toma el usuario, no en lo bonito que se ven.
Los 5 sitios
1. Mobbin mobbin.com
Capturas de pantallas reales de apps y sitios en producción, organizadas por patrón: onboarding, checkout, paywall, estados vacíos, configuración. No es inspiración abstracta, es cómo empresas que facturan resolvieron una pantalla específica.
Para quién: el mejor para producto y SaaS. Si estás diseñando un flujo y no una portada, empieza aquí.
2. Land-book land-book.com
Una galería enorme de landing pages, filtrable por industria y por estilo. La ventaja sobre las galerías de premios es que aquí abundan las páginas comunes y corrientes que sí convierten, no solo las piezas experimentales.
Para quién: cualquiera que esté armando una página de venta y necesite ver diez soluciones al mismo problema antes de elegir.
3. Awwwards awwwards.com
El extremo ambicioso: animación, tipografía experimental, dirección de arte fuerte. Casi nada de lo que hay ahí lo vas a copiar tal cual, y ese no es el punto. Sirve para robar una idea —una transición, un tratamiento tipográfico, un uso de color— y meterla en algo por lo demás sobrio.
Para quién: cuando tu problema es que todo lo que produces se ve correcto y aburrido.
4. Typewolf typewolf.com
Sitios catalogados por las tipografías que usan, con las combinaciones identificadas. La tipografía es lo que más rápido delata un diseño hecho con IA, porque los modelos caen siempre en las mismas familias de sistema. Aquí sacas la alternativa concreta.
Para quién: el arreglo de una sola línea con mayor retorno. Cambia la tipografía y la mitad del problema de "esto se ve genérico" desaparece.
5. SiteInspire siteinspire.com
Curaduría estrecha y filtros por tipo de sitio y por estilo. Es el más útil cuando ya sabes qué buscas: en vez de scrollear inspiración indefinida, filtras por categoría y sales con tres referencias en diez minutos.
Para quién: quien no tiene tiempo de navegar y necesita cerrar la decisión hoy.
El movimiento que multiplica esto
No traigas una referencia. Trae tres, de sitios distintos, y pídele al modelo que te proponga cuatro direcciones visuales combinándolas —cada una con su paleta, su tipografía y una frase de justificación— antes de construir nada.
Eliges una y solo entonces le dices que la ejecute. Esa pausa es la diferencia entre dirigir el diseño y aceptar el primero que salió. Y funciona igual para una landing, una presentación de inversión o el reporte mensual que le mandas a tu cliente.
Si quieres el método completo para desarmar un sitio ajeno y quedarte con su sistema, está en cómo robarle el diseño a cualquier sitio web con IA. Y si lo que te pasa es que todo te sale con la misma cara, la causa está explicada en por qué tus diseños siempre se ven hechos con IA.
El error de siempre
Guardar cien referencias y no usar ninguna. Los tableros de inspiración se llenan y se abandonan.
Lo que sí funciona es tener tres referencias fijas por proyecto, con sus tokens ya extraídos y guardados en un archivo. Cuando llega el siguiente entregable no vuelves a navegar: abres tu archivo, se lo pasas a la IA y construyes. La dirección creativa se decide una vez, no cada vez.