Design for AI

Estilo Maximalismo: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de maximalismo. Também chamado de web maximalista, mais é mais, anti-minimalismo, design de sobrecarga visual. cíclico; onda na web 2019-2023 (sites de marcas Gen Z, moda, música).

Traços

  • tudo em camadas: padrões sobre fotos sobre tipografia sobre blocos de cor
  • paletas brilhantes que se chocam, cinco ou mais cores ao mesmo tempo
  • famílias tipográficas misturadas (serifa display + grotesca + script + mono) em tamanhos extremos
  • composições densas, elementos sobrepostos, adesivos rotacionados, texto em marquee
  • texturas: grão, meio-tom, scans, fita, rabiscos feitos à mão
  • muito movimento: marquees, trocas no hover, seguidores de cursor, faixas com rolagem automática
  • ainda precisa de uma grade subjacente, ou lê como quebrado

Paleta

#ff3cac rosa quente, #ffe600 amarelo, #2b00ff azul elétrico, #00ff85 verde ácido, #1a1a1a tinta, #fff5e6 base creme

Tipografia

Anton ou Bebas Neue para blocos de display, Instrument Serif itálico para contraste, Space Mono para labels, Caveat para rabiscos; tamanhos de 11px a 200px, pesos extremos

Faça

  • construa sobre uma grade real de 12 colunas e depois quebre-a deliberadamente em três ou quatro lugares
  • limite o movimento a elementos que se repetem (marquee, ticker) mais trocas no hover
  • use overlays de textura (grão, meio-tom) para colar as camadas que se chocam

Evite

  • não deixe as cores caírem para o pastel; o choque é o ponto
  • não use uma única família tipográfica
  • não esqueça uma zona calma para a ação de verdade (formulário, botão de compra)

Conhecido por: Gucci (campanhas 2019-2021), Spotify Wrapped, drops Nike By You, relançamento da Bratz

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

Construa o site em estilo maximalista barulhento. Base creme #fff5e6 com tinta #1a1a1a, e pelo menos cinco preenchimentos que se chocam usados com generosidade: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. A tipografia mistura Anton a 160px em caixa alta no hero, Instrument Serif itálico a 40px nos subtítulos, Space Mono 13px em caixa alta para labels e Caveat para anotações rabiscadas à mão. Layout numa grade de 12 colunas, depois sobreponha: um selo adesivo rotacionado (-6deg) sobre a imagem do hero, uma foto sangrando por baixo da manchete, uma faixa marquee de largura total em #ffe600 rolando a 40s linear infinite. Adicione um overlay de grão (SVG feTurbulence, opacity 0.12) na página inteira e um padrão de meio-tom atrás de uma seção. Sombras deslocadas duras 8px 8px 0 #1a1a1a, sem raio. O hover troca a imagem por uma segunda imagem. Mantenha um bloco calmo para o formulário de cadastro: creme, uma cor, botão grande.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo maximalista barulhento. Base creme #fff5e6 com tinta #1a1a1a, e pelo menos cinco preenchimentos que se chocam usados com generosidade: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. A tipografia mistura Anton a 160px em caixa alta no hero, Instrument Serif itálico a 40px nos subtítulos, Space Mono 13px em caixa alta para labels e Caveat para anotações rabiscadas à mão. Layout numa grade de 12 colunas, depois sobreponha: um selo adesivo rotacionado (-6deg) sobre a imagem do hero, uma foto sangrando por baixo da manchete, uma faixa marquee de largura total em #ffe600 rolando a 40s linear infinite. Adicione um overlay de grão (SVG feTurbulence, opacity 0.12) na página inteira e um padrão de meio-tom atrás de uma seção. Sombras deslocadas duras 8px 8px 0 #1a1a1a, sem raio. O hover troca a imagem por uma segunda imagem. Mantenha um bloco calmo para o formulário de cadastro: creme, uma cor, botão grande.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.