Antes de empezar: sé que esta no es la lista completa. Si encuentras un framework que me falte, escríbeme a kevindelgadopagan@kevindelgadopagan.com con el framework y el estilo al que pertenece, y lo añado a este recurso. Juntos, con el tiempo, vamos a crear la verdadera referencia completa de estilos de diseño web.

¿Quieres crear la aplicación pero no sabes cuál debería ser el estilo visual para que le guste a tu público? Esto es una guía de diferentes estilos para que tú le puedas decir a la inteligencia artificial que use uno de estos frameworks o componentes.

Para el no técnico:

Framework = Es como un diccionario temático para que todos tus elementos sigan el mismo estilo y tu website se vea consistente.

Componente = Es una unidad singular, como un slider o una sección en particular que tiene tu página.

Por ejemplo, en esta página que tú estás mirando, arriba donde dice Kevin Delgado Pagán y están las diferentes secciones, eso es un componente que se le conoce como un Toolbar. Sin embargo, el framework de esta página es neobrutalism, y por eso el estilo de todos los botones es consistente.

Aquí tienes el listado, desde lo que es gratis a lo que se paga y las herramientas para diseñar, para que en tu próximo proyecto le sepas decir a la AI que utilice uno de estos frameworks o componentes.

Cada botón abre en otra pestaña.

Cómo usar los prompts: cada estilo de abajo termina con dos prompts para copiar y pegar. El primero es para empezar un proyecto nuevo en ese estilo. El segundo es para cambiarle la marca a un proyecto que ya tienes. Copia el que necesites y pégalo al final de lo que ya le estabas diciendo a tu agente de IA: Claude Code, Cursor, v0 o el que uses.

Nota: Claymorphism y skeuomorfismo son los dos huecos más grandes. No existe ninguna colección madura para ninguno de los dos. Glassmorphism también es un hueco parcial: las herramientas son excelentes, pero la colección de piezas nunca salió.

Cyberpunk / Sci-Fi HUD

Neón, interferencia, esquinas cortadas en ángulo, paneles tipo casco de piloto.

Bueno para: gaming, ciencia ficción, cripto y web3, lanzamientos de productos tecnológicos, portafolios.

Demo en vivo

SISTEMA ACTIVO

Neón sobre casi negro, esquinas cortadas y un brillo que se lee como panel de cabina.

Componentes

augmented-ui ↗ Repo de augmented-ui ↗ Uiverse ↗

Para quien te haga la página: augmented-ui es CSS puro con clip-path. CyberTechUI viene de un flujo de Figma a CSS. Algunas funciones de formas fallan en Firefox.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo cyberpunk / sci-fi HUD para este proyecto. Toma los componentes de augmented-ui (CSS puro, basado en clip-path) y de Uiverse en vez de escribir el estilo desde cero. Reglas de estilo: fondo casi negro, uno o dos colores de acento neón, esquinas cortadas en ángulo, bordes finos con brillo, títulos en mayúsculas condensadas o monoespaciado, paneles que se lean como tablero de cabina. Mantén el mismo ángulo de corte, la misma intensidad de brillo y el mismo acento en todas las pantallas. Incluye respaldos para Firefox, donde algunas funciones de formas fallan. No mezcles otros estilos visuales.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo cyberpunk / sci-fi HUD. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Añade augmented-ui y aplícalo a los paneles, tarjetas y botones que ya existen en vez de reconstruirlos. Pasa a una base casi negra con uno o dos acentos neón, esquinas cortadas y bordes con brillo. Añade un respaldo para Firefox donde las formas no se rendericen. Mantén los estados de foco visibles y el contraste del texto en WCAG AA. El neón sobre negro suele fallarlo. Lista lo que no hayas podido convertir en vez de eliminarlo.

Neobrutalismo

Bordes negros gruesos, colores fuertes, sombras duras y desplazadas.

Bueno para: portafolios, agencias creativas, marcas para público joven, sitios de marketing, productos independientes.

Demo en vivo

Ruidoso a propósito

Bordes negros gruesos y una sombra dura que nunca se difumina. Aprieta un botón y se mueve.

Frameworks

NeoBrutalism ↗ Neobrutalism.dev ↗ Neobrutal UI ↗

Para quien te haga la página: los tres son React + Tailwind. Neobrutalism.dev y Neobrutal UI son MIT. NeoBrutalism corre sobre Radix + Base UI, es compatible con el CLI de shadcn y trae soporte de servidor MCP y RTL. NeoBrutalism antes se llamaba RetroUI.

Es un estilo con personalidad fuerte. Le encanta a unos y le choca a otros. Si tu clientela es conservadora o mayor, piénsalo dos veces.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo neobrutalismo para este proyecto. Toma los componentes de una librería de neobrutalismo existente (neobrutalism.com, neobrutalism.dev o Neobrutal UI, las tres son React + Tailwind) en vez de escribir el estilo desde cero. Reglas de estilo: bordes negros gruesos de 2 a 4px, colores planos y saturados, sombras duras desplazadas sin difuminado, sin degradados, botones que se mueven al presionarlos. Mantén el mismo grosor de borde, el mismo desplazamiento de sombra y el mismo radio en todas las pantallas. No mezcles otros estilos visuales.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo neobrutalismo. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Sustituye los componentes actuales por equivalentes de una librería de neobrutalismo (neobrutalism.com, neobrutalism.dev o Neobrutal UI) conservando las mismas props y el mismo comportamiento. Aplica de forma consistente bordes negros gruesos, colores planos saturados y sombras duras desplazadas sin difuminado. Conserva los estados de foco, el contraste y la navegación con teclado. Lista lo que no hayas podido convertir en vez de eliminarlo.

Frutiger Aero, Y2K y Vaporwave

Frutiger Aero (2004–2013): Brillante y lustroso, degradados aqua y verdes, burbujas, agua. Piensa en Windows Vista.

Y2K: Futurismo cromado y metálico.

Vaporwave: Nostalgia retro-surrealista de los 80 y 90.

Bueno para: marcas de nostalgia, música, marketing para público joven, sitios creativos y experimentales.

Demo en vivo

Bienvenido de nuevo

Brillo mojado, degradado de aqua a verde y un reflejo en el borde de arriba. Energía Windows Vista.

Solo referencia

Frutiger Aero Archive ↗ frutiger-aero.org ↗ Comunidad CAN ↗ Aesthetics Wiki ↗

Para quien te haga la página: no hay librería. Se construye a mano con degradados, brillos y texturas.

Hueco: no existe ninguna colección de piezas. Todo es referencia visual.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo Frutiger Aero para este proyecto (la estética brillante de 2004 a 2013: degradados aqua y verde, brillo mojado, burbujas, agua, cielos abiertos). No existe ninguna librería de componentes para este estilo, así que constrúyelo a mano con CSS sobre una base neutral como shadcn/ui o Bulma. Reglas de estilo: degradados en capas, un reflejo especular brillante en el borde superior de cada superficie, redondeo generoso, sombras suaves, botones tipo cristal, fotografía de naturaleza o texturas de burbujas en los fondos. Mantén la misma dirección de degradado y el mismo tratamiento de reflejo en todos los componentes. No mezcles elementos planos ni brutalistas.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo Frutiger Aero. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. No hay librería para este estilo, así que aplica el estilo a los componentes actuales con CSS: degradados de aqua a verde, reflejo especular en el borde superior, redondeo generoso, sombras suaves y botones brillantes. Conserva el marcado y las APIs de los componentes tal como están. Cuida el contraste del texto (el brillo y las fotos de fondo dañan la legibilidad) y mantén visibles los estados de foco. Lista lo que no hayas podido convertir en vez de eliminarlo.

Retro OS

Recreaciones fieles de sistemas operativos viejos. Ventanitas, botones grises, la vibra de los 90.

Bueno para: portafolios, juegos, proyectos de nostalgia, hackathons, sitios de novedad.

Demo en vivo

Sin título - Bloc de notas

_ □ ✕

Gris con biseles, barra de título azul y botones que se hunden al hacer clic.

Frameworks

98.css ↗ XP.css ↗ 7.css ↗ PSone.css ↗ Lista retro-css ↗ Lista RetroCSS ↗

Para quien te haga la página: todos son CSS puro sin JavaScript, así que funcionan con cualquier framework. 98.css es MIT. XP.css extiende 98.css y 7.css extiende XP.css. También existen system.css, new-dawn, BOOTSTRA.386 y RPGUI.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo retro OS para este proyecto. Toma los componentes de 98.css, XP.css o 7.css (CSS puro, sin JavaScript, funcionan con cualquier framework) en vez de escribir el estilo desde cero. Escoge uno solo y quédate en esa época. Reglas de estilo: gris con biseles, barras de título con controles de minimizar y cerrar, bordes hundidos y levantados, tipografía del sistema, botones que se hunden al hacer clic, ventanas de diálogo en vez de modales modernos. No mezcles el gris de Windows 98 con el cristal de Windows 7. Asegúrate de que las áreas táctiles sigan siendo usables en celular, porque estas librerías asumen mouse.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo retro OS. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Añade 98.css, XP.css o 7.css y mapea los componentes actuales a sus clases (window, title-bar, field-row, button) en vez de reconstruirlos. Escoge una sola época de sistema operativo y aplícala en todas partes. Agranda las áreas táctiles para celular, porque estas librerías están hechas para mouse, y conserva los estados de foco y la navegación con teclado. Lista lo que no hayas podido convertir en vez de eliminarlo.

Pixel Art / 8-bit

Píxeles gordos, tipografía de 8 bits, la estética del Nintendo original.

Bueno para: juegos web, portales de juegos, portafolios retro, marketing juguetón.

Demo en vivo

JUGADOR 1 LISTO

Bloques gordos, sin suavizado, bordes hechos de cuadrados en vez de curvas.

Frameworks

8bitcn/ui ↗ NES.css ↗

Para quien te haga la página: NES.css es CSS puro y no trae sistema de acomodo, hay que combinarlo con Tailwind o Bulma. 8bitcn es React + Tailwind + shadcn, MIT.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo pixel art / 8-bit para este proyecto. Toma los componentes de 8bitcn/ui (React + Tailwind + shadcn, MIT) o de NES.css en vez de escribir el estilo desde cero. NES.css no trae sistema de acomodo, así que combínalo con Tailwind o Bulma si lo escoges. Reglas de estilo: bordes gordos hechos de bloques cuadrados en vez de curvas, sin suavizado, renderizado de imágenes pixelado, paleta retro limitada, tipografía de 8 bits solo para títulos y una tipografía legible para el texto de párrafo. Mantén la misma unidad de píxel en todas partes para que nada se vea a media escala. No mezcles otros estilos visuales.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo pixel art / 8-bit. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Sustituye los componentes actuales por equivalentes de 8bitcn/ui, o aplica las clases de NES.css sobre el marcado que ya existe, conservando las mismas props y el mismo comportamiento. Aplica bordes de bloques, paleta retro limitada y renderizado pixelado de forma consistente. Deja el texto de párrafo en una tipografía legible. Las fuentes de 8 bits no se leen en textos largos. Conserva los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Terminal / Hacker

Pantalla de línea de comandos. Monoespaciado, verde sobre negro, líneas de escaneo.

Bueno para: herramientas para desarrolladores, ciberseguridad, cripto, portafolios técnicos.

Demo en vivo

npm run deploy

Monoespaciado, verde fósforo, líneas de escaneo sobre el panel y un cursor que parpadea.

Frameworks

Terminal.css ↗ Repo de Terminal.css ↗

Para quien te haga la página: Terminal.css usa clases al estilo Bulma, unos 3KB. También existen Hacker.css, WebTUI y termcn (este último sigue el patrón de shadcn).

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo terminal / hacker para este proyecto. Toma los componentes de Terminal.css (clases al estilo Bulma, unos 3KB), WebTUI o termcn (patrón de shadcn) en vez de escribir el estilo desde cero. Reglas de estilo: monoespaciado en todo, verde fósforo o ámbar sobre casi negro, una capa sutil de líneas de escaneo, cursor de bloque parpadeante, prompts y salida de comandos como metáfora principal del acomodo, redondeo mínimo o nulo. Mantén el mismo color de acento y la misma familia tipográfica en todas las pantallas. Mantén el contraste en WCAG AA y no dejes que las líneas de escaneo laven el texto.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo terminal / hacker. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Añade Terminal.css, WebTUI o termcn y mapea los componentes actuales sobre esa librería en vez de reconstruirlos. Pasa todo a monoespaciado sobre una base casi negra con un solo acento fósforo, quita el redondeo y las sombras, y replantea los encabezados como prompts de comando. Deja las líneas de escaneo lo bastante sutiles para que el texto siga legible, y conserva los estados de foco y la navegación con teclado. Lista lo que no hayas podido convertir en vez de eliminarlo.

Brutalismo

Sin pulir, tipografía del sistema, contraste altísimo. Honestidad de anti-diseño.

Bueno para: arte y editorial, sitios que quieren hacer una declaración, portafolios experimentales.

Demo en vivo

ENERGÍA HTML CRUDO

Serif por defecto, negro sobre blanco, enlaces subrayados, cero redondeo. Nada está adornado.

Componentes

Proyectos en GitHub ↗ Uiverse ↗

Para quien te haga la página: no hay librería dominante. Topics brutalism y neobrutalism en GitHub. Se solapa con las librerías de neobrutalismo.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo brutalista (anti-diseño) para este proyecto. No hay librería dominante, así que toma elementos sueltos de Uiverse o de los topics brutalism y neobrutalism en GitHub y construye el resto a mano. Reglas de estilo: tipografía del sistema o serif por defecto, negro sobre blanco, enlaces subrayados, bordes visibles finos o gruesos, cero redondeo, sin sombras, sin degradados, sin adornos. El acomodo puede ser asimétrico y denso, pero todo debe seguir siendo legible y clicable. No añadas pulido, animación ni degradados.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo brutalista (anti-diseño). No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Desnuda el tema actual: quita redondeo, sombras, degradados y tipografías personalizadas, restaura los enlaces subrayados y pasa a negro sobre blanco con tipografía del sistema o serif por defecto. Conserva los componentes y el marcado actuales, solo quítales el estilo. Mantén los estados de foco y la navegación con teclado, y asegúrate de que los botones sigan pareciendo botones sin el adorno. Lista lo que no hayas podido convertir en vez de eliminarlo.

Claymorphism

Plastilina inflada. Esquinas redondeadas, sombras dobles con color, tonos pastel.

Bueno para: apps de niños, educación, juegos casuales, fintech amigable, herramientas creativas.

Demo en vivo

Qué bueno verte

Superficies pastel, redondeo gordo y sombra doble para que todo parezca hecho de plastilina.

Componentes y generadores

Mochi UI ↗ Generador de Hype4 ↗ Uiverse ↗ Claymorphism UI (Figma) ↗

Para quien te haga la página: Clay.css es la ruta más rápida en código (CSS puro, le añade el efecto a lo que ya exista). Mochi UI es React/Astro, MIT, v2.0 con más de 30 piezas, todavía experimental.

Hueco: no existe ninguna colección madura lista para producción. Cuenta con construir la mayoría desde cero.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo claymorphism para este proyecto. No existe ninguna colección madura lista para producción, así que construye sobre una base neutral como shadcn/ui y añade el efecto con Clay.css (CSS puro, se aplica a los elementos que ya existen); Mochi UI (React/Astro, MIT, experimental) cubre algunas piezas si encaja. Reglas de estilo: superficies pastel, radios de esquina muy grandes, sombra doble (una oscura por fuera y una clara por dentro) para que todo parezca hecho de plastilina, iconos redondeados suaves, espaciado amplio y juguetón. Mantén el mismo radio y el mismo par de sombras en todos los componentes. No mezcles elementos planos ni brutalistas.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo claymorphism. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. No hay librería madura, así que añade Clay.css o CSS equivalente y aplícalo a los componentes actuales en su sitio en vez de reconstruirlos. Pasa a superficies pastel, radios de esquina muy grandes y un par de sombras (oscura por fuera y clara por dentro) en cada elemento levantado. Mantén el contraste del texto en WCAG AA, porque pastel sobre pastel falla con facilidad, y conserva los estados de foco y la navegación con teclado. Lista lo que no hayas podido convertir en vez de eliminarlo.

Liquid Glass

Cristal que distorsiona lo que hay detrás y reacciona a la luz en tiempo real. El estilo que Apple estrenó en 2025.

Bueno para: apps del ecosistema Apple, productos de consumo premium.

Demo en vivo

Reproduciendo

Capas translúcidas con el borde superior iluminado y un brillo interno que dobla el color de atrás.

Componentes

liquid-glass-js ↗ Liquid Glass CSS ↗ Liquid Glass Kit ↗

Para quien te haga la página: el efecto usa filtros SVG feDisplacementMap. Liquid Glass CSS está en npm como @mael-667/liquid-glass-react. liquid-glass-js es WebGL en vanilla JS, un solo commit y sin paquete publicado.

Aviso legal: Liquid Glass CSS tiene licencia GPL-3.0, no MIT. Puede obligarte a publicar el código de tu página. Enséñale esta línea a tu programador antes de que la use.

El efecto completo solo corre bien en Chrome. En Safari y Firefox se ve a medias.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo Liquid Glass para este proyecto (el look que Apple estrenó en 2025). Toma los componentes de Liquid Glass CSS (en npm como @mael-667/liquid-glass-react) o de Liquid Glass Kit en vez de escribir el estilo desde cero. Revisa la licencia antes de instalar: Liquid Glass CSS es GPL-3.0 y puede obligar a publicar el código fuente de este proyecto. Avísame si eso choca con el proyecto antes de añadirlo. Reglas de estilo: paneles translúcidos en capas, borde superior iluminado, brillo interno suave, refracción real con filtros SVG feDisplacementMap. El efecto completo solo corre bien en Chrome, así que incluye un respaldo sólido o con desenfoque ligero para Safari y Firefox, y mantén legible el texto sobre el cristal.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo Liquid Glass. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Antes de instalar nada, confirma que la licencia encaja: Liquid Glass CSS es GPL-3.0 y puede obligar a publicar el código fuente de este proyecto. Aplica paneles translúcidos en capas, borde superior iluminado y brillo interno a las superficies que ya existen en vez de reconstruirlas, y añade un respaldo sólido o con desenfoque ligero para Safari y Firefox. Mantén el contraste del texto en WCAG AA sobre cualquier fondo, y conserva los estados de foco y la navegación con teclado. Lista lo que no hayas podido convertir en vez de eliminarlo.

Animado / Aurora / Gradiente Mesh

Movimiento al bajar por la página. Fondos que fluyen como aurora boreal, rayos, tarjetas que se inclinan.

Bueno para: landings de SaaS, startups, portafolios, lanzamientos de productos.

Demo en vivo

Lanza más rápido

El fondo se mueve en un ciclo lento y el título va relleno con un degradado en vez de color plano.

Frameworks

Aceternity UI ↗ Magic UI ↗ React Bits ↗ Cult UI ↗ Motion Primitives ↗

Generadores de fondos

Aurora Gradient ↗ Mesher ↗ FWD Tools ↗ SyntaxSnap Mesh ↗ SyntaxSnap Aurora ↗

Para quien te haga la página: Aceternity, Magic UI, Cult UI y Motion Primitives son React + Tailwind + Motion. Magic UI requiere Motion como dependencia par; React Bits no, y es el más liviano. React Bits es MIT + Commons Clause. Todos tienen versión Pro de paga.

El movimiento de más hace la página lenta y marea al visitante. Google penaliza las páginas lentas. Úsalo en la portada y poco más.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo animado / aurora / gradiente mesh para este proyecto. Toma los componentes de Aceternity UI, Magic UI, Cult UI, Motion Primitives o React Bits (todos React + Tailwind; React Bits es el más liviano porque no necesita Motion como dependencia par). React Bits es MIT + Commons Clause: sirve para construir un producto, no para revender la librería. Reglas de estilo: fondos de aurora o gradiente mesh que se mueven lento, títulos rellenos con degradado, revelados al hacer scroll, inclinación sutil de tarjetas al pasar el cursor. Concentra el movimiento fuerte solo en la portada y deja el resto estático, y respeta prefers-reduced-motion. Cuida el tamaño del bundle y la velocidad de la página.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo animado / aurora / gradiente mesh. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Añade componentes de Aceternity UI, Magic UI, Cult UI, Motion Primitives o React Bits y envuelve o sustituye las piezas de presentación que ya existen, conservando sus props y su comportamiento. Aplica los fondos de degradado en movimiento y los títulos con degradado solo en las páginas de marketing. Deja estáticos los dashboards, los formularios y las tablas de datos. Respeta prefers-reduced-motion, mantén el contraste legible sobre los degradados y reporta el impacto en el tamaño del bundle. Lista lo que no hayas podido convertir en vez de eliminarlo.

Glassmorphism

Paneles semitransparentes que dejan ver borroso lo que hay detrás, como un cristal de baño.

Bueno para: fintech, música y medios, secciones con foto de fondo, dashboards sobre imágenes.

Demo en vivo

Panel esmerilado

Una lámina semitransparente sobre un fondo con color. Fíjate en lo que le cuesta al texto seguir legible.

Generadores

css.glass ↗ Generador de Hype4 ↗ Guía de Superdesign ↗ Aether CSS ↗ Uiverse ↗

Para quien te haga la página: todo es CSS con backdrop-filter. No hay librería de componentes. Superdesign trae la receta con @supports como respaldo.

Advertencia: muy seguido el texto encima del cristal no se lee. Pide verlo en el celular, con la foto de fondo puesta, antes de aprobarlo.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo glassmorphism para este proyecto. No existe librería de componentes (todo es CSS con backdrop-filter), así que construye sobre una base neutral como shadcn/ui y genera la receta con css.glass o el generador de Hype4, siguiendo la guía de Superdesign. Reglas de estilo: paneles semitransparentes, desenfoque del fondo, un borde claro de 1px en los bordes superior e izquierdo, sombras suaves y un fondo con color o fotografía detrás del cristal. Incluye siempre un respaldo con fondo sólido para los navegadores donde backdrop-filter está desactivado. Prueba el contraste del texto en celular con el fondo real puesto. El texto sobre cristal muy seguido deja de leerse.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo glassmorphism. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. No hay librería, así que aplica el CSS basado en backdrop-filter a las tarjetas, paneles y navegación que ya existen en vez de reconstruirlos. Añade superficies semitransparentes, desenfoque, un borde claro arriba y a la izquierda, y un fondo con color detrás. Incluye un respaldo con fondo sólido y verifica el contraste del texto en WCAG AA en celular con la imagen de fondo real. Conserva los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Hand-Drawn / Sketch

Como si alguien hubiera dibujado los botones a mano con un marcador. Los trazos salen distintos cada vez.

Bueno para: bocetos y maquetas, educación, productos para niños, negocios creativos.

Demo en vivo

Borrador

Bordes temblorosos y tipografía de marcador, para que todo se lea como un boceto y no como pantalla final.

Componentes

Wired Elements ↗ Repo ↗

Para quien te haga la página: web components basados en RoughJS, MIT. Funcionan con React, Vue, Svelte o sin framework. Wrappers de React en rough-stuff/wired-elements-react. Estable, pero con poca actividad.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo hand-drawn / sketch para este proyecto. Toma los componentes de Wired Elements (web components basados en RoughJS, MIT, funcionan con React, Vue, Svelte o sin framework; los wrappers de React están en rough-stuff/wired-elements-react) en vez de escribir el estilo desde cero. Reglas de estilo: bordes temblorosos dibujados a mano que varían un poco en cada render, tipografía de marcador o manuscrita, fondo de papel blanco roto, sin rellenos, sin sombras, todo con pinta de borrador. La librería es estable pero tiene poca actividad, así que construye a mano con RoughJS cualquier componente que falte para que combine. Deja el texto de párrafo en un tamaño y grosor legibles.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo hand-drawn / sketch. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Sustituye los botones, campos, tarjetas y divisores actuales por equivalentes de Wired Elements conservando las mismas props y el mismo comportamiento, y construye a mano con RoughJS lo que le falte a la librería. Aplica tipografía de marcador o manuscrita en los títulos y un fondo de papel blanco roto. Deja legible el texto de párrafo, conserva los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Suizo, Editorial, Lujo, Memphis, Maximalismo, Kawaii y 3D

Suizo / Internacional: Rejilla estricta, Helvetica, minimalismo severo y ordenado.
Editorial / Revista: Composiciones tipográficas como una revista impresa.
Lujo: Tipografía serif elegante, dorado, mucho espacio vacío.
Memphis: Confeti geométrico de los años 80.
Maximalismo: Denso, ruidoso, todo lo contrario del minimalismo.
Kawaii: Tierno, pastel, japonés.
3D / Isométrico: Ilustraciones con volumen y perspectiva.

Bueno para: suizo → agencias y herramientas de diseño. Editorial → publicaciones y blogs. Lujo → moda, hospitalidad y belleza. Kawaii → niños y estilo de vida. 3D → producto y marketing.

Demo en vivo

Cinco estilos, lado a lado

Suizo

Editorial

Lujo

Memphis

Kawaii

Componentes

Uiverse ↗ shadcn/ui ↗

Para quien te haga la página: shadcn/ui + Tailwind, decisiones tipográficas fuertes y archivos DESIGN.md.

Hueco: ninguno tiene colección propia. Todo se construye a la medida.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo [ESCOGE UNO: suizo / editorial / lujo / Memphis / maximalismo / kawaii / 3D isométrico] para este proyecto. Ninguno tiene colección de componentes propia, así que construye sobre shadcn/ui + Tailwind y lleva el estilo por la tipografía, el espaciado, el color y la ilustración en vez de por piezas prefabricadas. Suizo: rejilla estricta, Helvetica o Inter, alineado a la izquierda, sin adorno. Editorial: columnas de revista, citas destacadas grandes, texto serif. Lujo: serif elegante, acentos dorados o metálicos apagados, muchísimo espacio en blanco. Memphis: formas geométricas tipo confeti de los 80 y colores primarios. Maximalismo: denso, en capas, ruidoso. Kawaii: pastel, muy redondeado, mascotas tiernas. 3D isométrico: ilustraciones con volumen y perspectiva. Escoge exactamente uno y aplícalo de forma consistente. No los mezcles.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo [ESCOGE UNO: suizo / editorial / lujo / Memphis / maximalismo / kawaii / 3D isométrico]. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. No existe librería para estos, así que conserva los componentes actuales y aplícales el estilo con tokens de diseño: escala tipográfica y familia de fuentes, escala de espaciado, paleta de color, tratamiento de bordes y radios, enfoque de ilustración. Escribe las reglas del estilo escogido en un DESIGN.md y aplícalas de forma uniforme en vez de ir pantalla por pantalla. Conserva el contraste, los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Neumorphism

Plástico suave hundido o levantado del fondo, todo del mismo color.

Bueno para: widgets de música y ejercicio, controles de casa inteligente, calculadoras. Solo como adorno.

Demo en vivo

Soft UI

Un solo color de fondo para todo. La profundidad sale solo de una sombra clara y una oscura.

Frameworks

Neumorphism UI ↗ ui-neumorphism ↗ SoftUI CSS ↗

Generadores

Neumorphism.io ↗ cssgen.org ↗ design.dev ↗ codeshack.io ↗ Generador de Hype4 ↗

Para quien te haga la página: Neumorphism UI es Bootstrap y MIT, 200 piezas gratis (themesberg/neumorphism-ui). ui-neumorphism es React. SoftUI CSS es CSS + JS, 77 piezas. Neumorphism.io es open source (adamgiebl/neumorphism).

Advertencia de accesibilidad: los botones casi no se distinguen del fondo. Gente mayor o con problemas de visión no va a saber dónde hacer clic. Úsalo para adornar, nunca para los botones importantes ni el menú.

Prompt: empezar un proyecto nuevo en este estilo

Usa el estilo neumorphism para este proyecto. Toma los componentes de Neumorphism UI (Bootstrap, MIT, 200 piezas gratis), ui-neumorphism (React) o SoftUI CSS, y genera los valores de sombra con neumorphism.io. Reglas de estilo: un solo color de fondo para todo, profundidad a partir de una sombra clara de un lado y una oscura del otro, radios grandes y suaves, sin bordes. Restricción crítica: este estilo falla rutinariamente las pruebas de contraste, así que úsalo solo en widgets decorativos. Dale a los botones principales, al menú y a los campos de formulario bordes reales o rellenos sólidos para que se vea que se pueden hacer clic. Nunca dejes que la sombra sea la única señal de que algo es interactivo.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto al estilo neumorphism. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Aplica el look suave y extruido a tarjetas, widgets y paneles decorativos usando Neumorphism UI, ui-neumorphism, SoftUI CSS o sombras generadas con neumorphism.io. Deja los botones principales, el menú y los campos de formulario con bordes visibles o rellenos sólidos. Este estilo falla las pruebas de contraste y la gente no distingue qué se puede hacer clic. Mantén los estados de foco claramente visibles y la navegación con teclado intacta. Lista lo que no hayas podido convertir en vez de eliminarlo.

Dark Mode y Neón

Paletas pensadas primero para fondo oscuro, con acentos y brillos de neón.

Bueno para: herramientas para desarrolladores, gaming, cripto, entretenimiento.

Demo en vivo

Todo bien

Estado del build

Base oscura, acento saturado y un brillo haciendo el trabajo que normalmente haría un borde.

Componentes

Temas de DaisyUI ↗ Uiverse ↗

Para quien te haga la página: no hace falta librería aparte. shadcn/ui, DaisyUI, Mantine y HeroUI ya traen modo oscuro de fábrica.

Prompt: empezar un proyecto nuevo en este estilo

Usa un diseño pensado primero para modo oscuro con acentos neón en este proyecto. No hace falta librería aparte: shadcn/ui, DaisyUI, Mantine y HeroUI ya traen modo oscuro de fábrica, y los temas de DaisyUI más Uiverse son buen punto de partida. Reglas de estilo: base casi negra o azul marino profundo, uno o dos colores de acento saturados, brillos haciendo el trabajo que normalmente hacen los bordes, elevación construida con capas de superficie más claras en vez de sombras. Evita el negro puro y el texto blanco puro. Usa tonos intermedios para reducir el halo. Define la paleta como tokens de diseño y mantén el contraste en WCAG AA en todas partes.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto a un diseño pensado primero para modo oscuro con acentos neón. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Usa el modo oscuro que ya trae la librería de componentes en uso (shadcn/ui, DaisyUI, Mantine o HeroUI) y cambia el tema por tokens de diseño en vez de sobrescribir CSS suelto. Pasa a una base casi negra o azul marino profundo con uno o dos acentos saturados y brillos en lugar de bordes, evitando el negro puro y el texto blanco puro. Mantén el contraste en WCAG AA, revisa gráficas, imágenes e iconos que asumían fondo claro, y conserva los estados de foco. Lista lo que no hayas podido convertir en vez de eliminarlo.

Bento Grid

La página dividida en cuadros de distintos tamaños, como una caja de bento japonesa.

Bueno para: portafolios, secciones de funcionalidades de SaaS, páginas de producto.

Demo en vivo

Panel

Ingresos

Usuarios activos

NPS

Bajas

Actividad semanal

Componentes y guías

BentoGrids ↗ Bento de Aceternity ↗ Guía de Superdesign ↗ Guía de Banani ↗

Para quien te haga la página: son patrones de CSS Grid con Tailwind. Cuidado con grid-auto-flow: dense.

Advertencia de accesibilidad: este estilo reordena los cuadros visualmente, pero el teclado sigue el orden original. Si los cuadros tienen enlaces, se rompe la navegación con teclado.

Prompt: empezar un proyecto nuevo en este estilo

Usa un acomodo de bento grid para este proyecto. Esto es un patrón de CSS Grid con Tailwind, no una librería. Usa el componente Bento Grid de Aceternity y la guía de Superdesign como referencia, y BentoGrids para ejemplos. Reglas de estilo: cuadros de distintos tamaños sobre una rejilla consistente, separaciones amplias, tarjetas redondeadas, un cuadro protagonista y exactamente una idea por cuadro. Mantén alineado el orden del DOM con el orden visual y ten cuidado con el auto-flow denso: reordena los cuadros visualmente mientras el foco del teclado sigue el orden del código, lo que rompe la navegación cuando los cuadros llevan enlaces. Haz que la rejilla colapse a una sola columna en celular.

Prompt: cambiarle la marca a un proyecto existente

Reestructura las secciones de funcionalidades o el dashboard de este proyecto en un acomodo de bento grid. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Reorganiza el contenido que ya existe en cuadros de distintos tamaños sobre un CSS Grid con separaciones consistentes y tarjetas redondeadas, una idea por cuadro, usando el Bento Grid de Aceternity o clases de grid de Tailwind. Mantén el orden del DOM igual al orden visual y evita el auto-flow denso donde los cuadros lleven enlaces, para que la navegación con teclado siga el orden visible. Colapsa a una sola columna en celular y conserva los estados de foco. Lista lo que no hayas podido convertir en vez de eliminarlo.

Flat Design y Material Design

Plano: sin profundidad, colores sólidos, formas simples. Material: el sistema de Google, con capas que se levantan y color fuerte.

Bueno para: apps de Android, empresas, herramientas de productividad.

Demo en vivo

Ajustes de cuenta

Barra de color, tarjeta que se levanta de la página y botones tipo píldora con espacio para el ripple.

Frameworks

MUI ↗ Material Web ↗ Vuetify ↗ Angular Material ↗

Para quien te haga la página: MUI (React), Material Web (web components oficiales de Google), Vuetify (Vue, 80+ piezas), Angular Material (Angular). La dirección vieja material.angular.io cambió a material.angular.dev.

Prompt: empezar un proyecto nuevo en este estilo

Usa Material Design para este proyecto. Toma los componentes de la librería que corresponda al framework del proyecto: MUI para React, Material Web para web components, Vuetify para Vue, Angular Material para Angular. Reglas de estilo: elevación con sombras en capas, un esquema de color definido con roles primario, secundario y de superficie, botones tipo píldora con retroalimentación de ripple, una escala de espaciado consistente de 4px y 8px, barra de aplicación y botón de acción flotante donde corresponda. Aplica el tema con el sistema de theming de la propia librería en vez de sobrescribir su CSS. No mezcles otros estilos visuales.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto a Material Design. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Sustituye los componentes actuales por equivalentes de la librería Material que corresponda a este framework (MUI, Material Web, Vuetify o Angular Material), conservando las mismas props y el mismo comportamiento. Define un tema con roles de color primario, secundario y de superficie y aplícalo con el sistema de theming de la librería en vez de sobrescribir CSS. Pasa el espaciado a una escala de 4px y 8px, conserva los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Propósito general

Bases neutrales, sin personalidad propia. Traen las piezas funcionando para que después les pongas encima el estilo que escogiste.

Bueno para: casi cualquier proyecto, como cimiento. Sobre todo si vas a manejar mucha información, formularios largos o tablas de datos.

Demo en vivo

Popular

Plan de equipo

Sin personalidad propia, a propósito. Espaciado correcto, bordes discretos, listo para que le pongas tema.

Frameworks

Uiverse ↗ shadcn/ui ↗ Mantine ↗ Ant Design ↗ HeroUI ↗ Chakra UI ↗ Radix UI ↗ Base UI ↗ Bootstrap ↗ Bulma ↗

Para quien te haga la página: shadcn/ui (React + Tailwind + Radix), Radix y Base UI (primitivos headless, Base UI es el sucesor), Mantine (120+ piezas, 70+ hooks), Chakra v3 (Panda CSS + Ark UI), Ant Design (React, data-dense), HeroUI (React Aria + Tailwind), Bootstrap y Bulma (CSS/JS), Uiverse (4,420 elementos copiables como HTML/CSS, Tailwind, React o Figma).

Prompt: empezar un proyecto nuevo en este estilo

Usa una librería de componentes neutral de propósito general como cimiento de este proyecto y ponle encima el estilo visual escogido. Escoge una sola y usa sus componentes para cada elemento de la interfaz: shadcn/ui (React + Tailwind + Radix), Mantine (120+ piezas, 70+ hooks), Ant Design (React, data-dense), HeroUI (React Aria + Tailwind), Chakra v3, Radix o Base UI para primitivos headless, o Bootstrap o Bulma para CSS/JS puro. No construyas a mano botones, campos, modales, tablas ni menús. Aplica el tema con tokens de diseño en vez de sobrescrituras sueltas, y conserva el comportamiento de accesibilidad que trae la librería.

Prompt: cambiarle la marca a un proyecto existente

Migra la interfaz de este proyecto a una sola librería de componentes neutral de propósito general. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Escoge una librería que encaje con este stack (shadcn/ui, Mantine, Ant Design, HeroUI, Chakra, Radix, Base UI, Bootstrap o Bulma) y sustituye los botones, campos, modales, tablas y menús hechos a mano por sus equivalentes, conservando las mismas props y el mismo comportamiento. Consolida el CSS disperso en los tokens de diseño de la librería. Conserva el comportamiento de accesibilidad, los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Minimalismo

Mucho espacio en blanco, pocos colores, tipografía clara, casi nada de adorno.

Bueno para: SaaS, dashboards, startups, blogs, consultorías, servicios profesionales, cualquier negocio que venda confianza.

Demo en vivo

Menos, pero mejor

Una línea, mucho aire y la tipografía haciendo todo el trabajo. Sin cajas, sin sombras, sin color.

Frameworks

DaisyUI ↗ shadcn/ui ↗ Pico.css ↗ Water.css ↗

Para quien te haga la página: DaisyUI (Tailwind), Pico.css y Water.css (CSS puro, sin clases), shadcn/ui (React + Tailwind + Radix). También existen Sakura, Simple.css, MVP.css, New.css, Missing.css, Tacit, Chota y Pure.css.

Es el estilo más barato de construir, porque hay más piezas ya hechas que en ningún otro.

Prompt: empezar un proyecto nuevo en este estilo

Usa un estilo minimalista para este proyecto. Toma los componentes de DaisyUI (Tailwind) o de shadcn/ui (React + Tailwind + Radix), o usa Pico.css o Water.css si te sirve mejor una base de CSS puro sin clases. Reglas de estilo: mucho espacio en blanco, un color de acento como máximo, una escala tipográfica clara que cargue con la jerarquía, líneas finas en vez de cajas, pocas o ninguna sombra, cero adorno. Mantén el espaciado en una sola escala consistente y reutiliza los mismos tres o cuatro tamaños de texto en todo el proyecto. No añadas degradados, brillos ni animación decorativa.

Prompt: cambiarle la marca a un proyecto existente

Cámbiale la marca visual a este proyecto a un estilo minimalista. No cambies funcionalidad, rutas, estado ni lógica de datos, solo la presentación. Conserva los componentes actuales y desnuda el tema: quita degradados, brillos, sombras pesadas y animación decorativa, reduce a un color de acento como máximo, cambia las cajas por líneas finas y aumenta el espacio en blanco. Consolida la escala tipográfica a tres o cuatro tamaños y pon el espaciado en una sola escala consistente. Conserva el contraste, los estados de foco y la navegación con teclado, y lista lo que no hayas podido convertir en vez de eliminarlo.

Premium (que paga)

Estos no son gratis. Los precios son de julio de 2026, verifica al comprar.

Liquid Glass iOS26 Kit: $14.99 ↗ CyberHack Terminal Kit: $2.49 ↗ Scribbly Wireframes: £8.87 ↗

Para quien te haga la página: el kit de Liquid Glass es Tailwind + HTML con constructor de código. CyberHack es HTML/CSS/JS y también está en itch.io a $1.99. Scribbly Wireframes son 50+ símbolos para Sketch. Varios frameworks gratis de arriba (NeoBrutalism, Aceternity, Magic UI, Cult UI, Motion Primitives, Neumorphism UI) también tienen versión Pro de paga.

Skills y guías de diseño para IA

Archivos de instrucciones que le enseñan a una herramienta de IA a construir un estilo, en vez de darte piezas ya hechas. Sirven sobre todo para los estilos marcados como hueco, donde no hay nada prefabricado.

Bueno para: cualquiera que esté construyendo con Cursor, Claude Code, v0 o herramientas parecidas.

Herramientas

designmd.app ↗ superdesign.dev ↗ typeui.sh ↗ Setproduct ↗ Hype4 Academy ↗ Generador de DESIGN.md ↗

Para quien te haga la página: son archivos SKILL.md y DESIGN.md. designmd.app tiene 461 archivos gratis. typeui.sh se baja con npx typeui.sh pull [estilo] y es freemium. Hype4 tiene plan PRO a $10/mes. DESIGN.md es una especificación abierta que nació del proyecto Stitch de Google.

Advertencias

Licencias: Liquid Glass CSS es GPL-3.0 (copyleft) y no sirve para proyectos comerciales cerrados. React Bits es MIT + Commons Clause: puedes construir productos, pero no revender la librería. El material de Figma suele requerir dar crédito.
Navegadores: los efectos de cristal líquido son prácticamente solo de Chrome. El cristal esmerilado viene desactivado por defecto en algunas configuraciones de Firefox. augmented-ui llega a cerca del 93% con respaldos.
Accesibilidad: el neumorphism y los estilos de cristal de bajo contraste fallan rutinariamente las pruebas de legibilidad. Pruébalos antes de lanzar.
Mantenimiento: Neobrutalism.dev sigue vivo pero con menos desarrollo. liquid-glass-js tiene un solo commit. Wired Elements está estable pero terminado. Mochi UI es experimental.
Sin verificar: liquidglass-kit.dev bloquea el acceso automatizado; no se pudo confirmar su contenido.
Modas: el minimalismo, el bento y el retro envejecen bien. Los estilos muy llamativos se ven viejos en dos o tres años.

Ayúdame a completarla

Sé que esta no es la lista completa. Si encuentras un framework que me falte, escríbeme a kevindelgadopagan@kevindelgadopagan.com con el framework y el estilo al que pertenece, y lo añado a este recurso. Juntos, con el tiempo, vamos a crear de verdad la referencia completa de estilos de diseño web.