Design for AI

Estilo Maximalismo: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para maximalismo. También llamado web maximalista, más es más, anti-minimalismo, diseño de sobrecarga visual. cíclico; oleada web 2019-2023 (sitios de marcas Gen Z, moda, música).

Rasgos

  • todo en capas: patrones sobre fotos sobre tipografía sobre bloques de color
  • paletas brillantes que chocan, cinco o más colores a la vez
  • tipografías mezcladas (serif display + grotesk + script + mono) a tamaños extremos
  • composiciones densas, elementos solapados, pegatinas rotadas, texto en marquesina
  • texturas: grano, semitono, escaneos, cinta adhesiva, garabatos a mano
  • mucho movimiento: marquesinas, cambios en hover, seguidores de cursor, tiras con auto-scroll
  • sigue necesitando una retícula de fondo, o se lee como roto

Paleta

#ff3cac rosa chicle, #ffe600 amarillo, #2b00ff azul eléctrico, #00ff85 verde ácido, #1a1a1a tinta, #fff5e6 base crema

Tipografía

Anton o Bebas Neue para bloques de display, Instrument Serif cursiva para contraste, Space Mono para etiquetas, Caveat para garabatos; tamaños de 11px a 200px, pesos extremos

Haz

  • construye sobre una retícula real de 12 columnas y luego rómpela a propósito en tres o cuatro sitios
  • limita el movimiento a los elementos que se repiten (marquesina, ticker) más los cambios en hover
  • usa superposiciones de textura (grano, semitono) para pegar las capas que chocan

Evita

  • no dejes que los colores caigan al pastel; el choque es la gracia
  • no uses una sola tipografía
  • no olvides una zona tranquila para la acción real (formulario, botón de compra)

Conocido por: Gucci (campañas 2019-2021), Spotify Wrapped, drops de Nike By You, relanzamiento de Bratz

Semilla CSS
:root {
  --bg: #fff5e6;
   --fg: #1a1a1a;
   --accent: #ff3cac;
   --accent2: #ffe600;
   --accent3: #2b00ff;
   --radius: 0;
   --shadow: 8px 8px 0 #1a1a1a;
   --font: 'Anton',sans-serif
}
Prompt

Construye el sitio en estilo maximalista ruidoso. Base crema #fff5e6 con tinta #1a1a1a y al menos cinco rellenos que choquen, usados con generosidad: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. La tipografía mezcla Anton a 160px en mayúsculas para el hero, Instrument Serif cursiva a 40px para subtítulos, Space Mono 13px en mayúsculas para etiquetas y Caveat para anotaciones garabateadas a mano. Layout sobre una retícula de 12 columnas y después solapa: una pegatina rotada (-6deg) sobre la imagen del hero, una foto que se cuela bajo el titular, una tira de marquesina a ancho completo en #ffe600 desplazándose a 40s linear infinite. Añade una capa de grano (SVG feTurbulence, opacity 0.12) por toda la página y un patrón de semitono detrás de una sección. Sombras desplazadas duras 8px 8px 0 #1a1a1a, sin radio. El hover cambia la imagen por una segunda imagen. Conserva un bloque tranquilo para el formulario de registro: crema, un color, botón grande.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo maximalista ruidoso. Base crema #fff5e6 con tinta #1a1a1a y al menos cinco rellenos que choquen, usados con generosidad: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. La tipografía mezcla Anton a 160px en mayúsculas para el hero, Instrument Serif cursiva a 40px para subtítulos, Space Mono 13px en mayúsculas para etiquetas y Caveat para anotaciones garabateadas a mano. Layout sobre una retícula de 12 columnas y después solapa: una pegatina rotada (-6deg) sobre la imagen del hero, una foto que se cuela bajo el titular, una tira de marquesina a ancho completo en #ffe600 desplazándose a 40s linear infinite. Añade una capa de grano (SVG feTurbulence, opacity 0.12) por toda la página y un patrón de semitono detrás de una sección. Sombras desplazadas duras 8px 8px 0 #1a1a1a, sin radio. El hover cambia la imagen por una segunda imagen. Conserva un bloque tranquilo para el formulario de registro: crema, un color, botón grande.

## Tokens
:root { --bg:#fff5e6; --fg:#1a1a1a; --accent:#ff3cac; --accent2:#ffe600; --accent3:#2b00ff; --radius:0; --shadow:8px 8px 0 #1a1a1a; --font:'Anton',sans-serif }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.