12 estilos de diseño web aplicados a la misma página

Brutalismo, minimalismo, glassmorfismo, liquid glass, bento grid y siete más, sobre la misma landing. Cambia de estilo, personalízalo y copia el prompt que la construye así.

1. Brutalismo

Viene de la arquitectura de hormigón visto de los años 50 y llegó a la web como reacción a las plantillas pulidas: bordes negros, sombras duras sin desenfoque, mayúsculas y colores planos que no piden permiso. La versión que usan Gumroad o Figma se llama neobrutalismo y es esta.

Funciona cuando quieres que se te recuerde y tu público aguanta algo de ruido: herramientas para creadores, portfolios, lanzamientos. El mando alarga la sombra dura, de 4 a 20 píxeles.

2. Minimalismo

Quitar hasta que no quede nada que quitar. Sin rellenos ni sombras, una serif fina, una línea de un píxel para separar, las fotos en blanco y negro y el doble de aire del que te parece normal.

Es el más difícil de hacer bien, porque no hay adorno que tape un mal espaciado. El mando calienta el blanco hacia el color del papel.

3. Neofuturismo

La ciencia ficción hecha interfaz: fondo casi negro, un solo neón, esquinas biseladas, una monoespaciada de telemetría en mayúsculas y una rejilla de fondo.

Le va a lo técnico: IA, cripto, infraestructura, videojuegos. El mando gira el tono del neón.

4. Glassmorfismo

Paneles de cristal esmerilado sobre manchas de color. Se puso de moda en 2020 con macOS Big Sur, y tiene una regla que casi todo el mundo se salta: sin color detrás, el cristal no se ve.

El mando cambia el desenfoque, de 4 a 40 píxeles. Bájalo del todo y verás por qué el cristal con poco desenfoque no se lee.

5. Maximalismo

Más es más. Serif enorme en cursiva, cada tarjeta de un color, rayas y lunares de fondo, sombras dobles y nada recto del todo. Es la respuesta a diez años de webs blancas iguales.

La trampa: el botón de pedir financiación se tiene que seguir encontrando en un segundo. El mando gira toda la paleta a la vez, fotos incluidas.

6. Claymorfismo

Plastilina. Pasteles, todo muy redondo y un volumen que sale de tres sombras a la vez: una por fuera que lo levanta y dos por dentro que lo inflan.

Encaja en productos amables: apps para niños, bancos para gente que no es de finanzas, onboardings. El mando sube y baja el volumen.

7. Liquid Glass

El material que Apple sacó en 2025 con iOS 26: cristal casi transparente que **refracta** lo que tiene detrás, un brillo en el canto y todo en cápsula. Detrás hay una foto fija para que el cristal tenga algo que doblar.

La refracción de verdad solo la pinta Chrome, con un filtro SVG; Safari y Firefox se quedan con el desenfoque. El mando cambia cuánto se tuerce lo de detrás.

8. Bento Grid

Cajas de tamaños distintos que encajan sin huecos, como una fiambrera japonesa. Lo pusieron de moda las presentaciones de Apple y hoy está en media landing de SaaS.

Aquí cada sección de la página pasa a ser una caja gris redondeada, y lo de dentro, cajas blancas más pequeñas. El mando cambia el hueco entre cajas.

9. UI espacial

visionOS: ventanas de cristal flotando delante de tu salón, con sombras largas que las separan del fondo. Está pensada para unas gafas, pero se está colando en la web.

El mando gira las tarjetas de los lados hacia el centro, como si rodearan tu campo de visión, y alarga su sombra.

Los tres siguientes no estaban en la lista, pero sin ellos no se entienden los otros nueve.

10. Neumorfismo

Todo del mismo color que el fondo y moldeado en él: una sombra clara arriba a la izquierda y otra oscura abajo a la derecha. Fue el boom de Dribbble en 2020 y el abuelo del claymorfismo.

Se ve precioso y se usa fatal, porque un botón que solo se distingue por el relieve no se distingue. El mando sube el relieve.

11. Skeuomorfismo

Copiar el mundo real: lino de fondo, barras de aluminio cepillado, papel con bisel, piel cosida y botones de gel azul. La cifra de la calculadora sale en una pantallita de cristal líquido. Era el iPhone de antes de 2013, y el Liquid Glass es, en el fondo, su vuelta.

El mando sube el brillo del gel.

12. Diseño suizo

El estilo tipográfico internacional de los años 50: rejilla estricta, grotesca negrita alineada a la izquierda, filetes negros y un rojo. Casi todo el diseño web serio desciende de aquí.

El mando enseña las doce columnas, para que veas que todo arranca y acaba en una.

Cuál elegir

Ninguno es mejor que otro. El minimalismo y el suizo venden lo caro; el brutalismo y el maximalismo, lo que quiere que se le recuerde; el cristal y lo espacial, lo que quiere parecer de mañana.

Tres preguntas y, al final de cada rama, el estilo que le va a tu proyecto
Tres preguntas y, al final de cada rama, el estilo que le va a tu proyecto

Elige uno, copia su prompt y que tu agente lo aplique entero. Mezclar tres a la vez es justo lo que hace que una web parezca hecha con IA.