Design for AI

Estilo Zine / colagem: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de zine / colagem. Também chamado de design de zine, colagem punk, web recorta-e-cola, estética DIY, estilo xerox, estilo riso. zines punk dos anos 1970, riot grrrl dos anos 1990; uso na web de 2017 em diante (música, moda, publicação independente).

Traços

  • imagens recortadas com bordas brancas irregulares, papel rasgado, grão de fotocópia
  • tipografia de bilhete de resgate: fontes, tamanhos e caixas misturados numa única manchete
  • fita, grampos, adesivos, carimbos, notas manuscritas por cima do impresso
  • preto e branco de alto contraste com uma ou duas tintas riso (rosa fluorescente, azul, laranja)
  • o layout ignora a grade: sobreposto, rotacionado, empilhado
  • pontos de meio-tom e camadas de cor desregistradas
  • movimento: revelações no hover, trocas de imagem, leve tremor; nada suave

Paleta

#f1efe7 papel, #111111 tinta, #ff48b0 rosa riso, #0078bf azul riso, #ff6c2f laranja riso, #ffe800 amarelo riso

Tipografia

Anton ou Bebas Neue (caixa alta condensada), Special Elite ou Courier Prime (máquina de escrever), Permanent Marker ou Rock Salt (marcador), Oswald; misture pelo menos três nas manchetes; corpo em Courier Prime 16px

Faça

  • dê a cada imagem uma borda recortada irregular: clip-path polygon com 10-14 pontos desiguais, mais uma borda branca de 4-6px
  • desregistre as camadas de cor: duplique uma manchete em rosa riso, deslocada 3px, mix-blend-mode multiply
  • mantenha uma grade escondida por baixo para a colagem ainda se alinhar a algo

Evite

  • não limpe; o alinhamento perfeito mata
  • não use mais de duas tintas riso por página
  • não use cinzas sutis; só preto, papel e tinta

Conhecido por: Zines riot grrrl, Sniffin' Glue, pôsteres da era Sub Pop, Nowness (parcial), Rough Trade

Semente CSS
:root {
  --bg: #f1efe7;
   --fg: #111111;
   --accent: #ff48b0;
   --accent2: #0078bf;
   --radius: 0;
   --tape: rgba(255,255,255,0.55);
   --grain: 0.12;
   --font: 'Anton',sans-serif;
   --font-type: 'Courier Prime',monospace
}
Prompt

Construa o site como uma colagem de zine punk. Papel #f1efe7 com um overlay de grão de fotocópia (SVG feTurbulence a opacity 0.12, mix-blend-mode multiply), tinta #111111, só duas tintas riso: rosa #ff48b0 e azul #0078bf. As manchetes misturam Anton a 96px em caixa alta, Special Elite a 40px e Permanent Marker a 56px na mesma linha, palavras rotacionadas entre -4deg e 5deg; corpo em Courier Prime 16px. Duplique cada manchete em #ff48b0, deslocada 3px para a esquerda e 2px para baixo, mix-blend-mode multiply, para o desregistro. As imagens são preto e branco com efeito de meio-tom (overlay de padrão de pontos radial-gradient a 4px), recortadas com clip-path polygon (12 pontos desiguais) e borda branca de 5px, levemente rotacionadas, sobrepondo umas às outras e ao texto. Adicione tiras de fita (retângulos rgba(255,255,255,0.55), rotacionados) e um selo de carimbo em #0078bf. Os botões são retângulos pretos com texto Anton branco e uma borda inferior rasgada. Sem raio, sem sombras, sem easing suave; o hover troca as imagens instantaneamente.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como uma colagem de zine punk. Papel #f1efe7 com um overlay de grão de fotocópia (SVG feTurbulence a opacity 0.12, mix-blend-mode multiply), tinta #111111, só duas tintas riso: rosa #ff48b0 e azul #0078bf. As manchetes misturam Anton a 96px em caixa alta, Special Elite a 40px e Permanent Marker a 56px na mesma linha, palavras rotacionadas entre -4deg e 5deg; corpo em Courier Prime 16px. Duplique cada manchete em #ff48b0, deslocada 3px para a esquerda e 2px para baixo, mix-blend-mode multiply, para o desregistro. As imagens são preto e branco com efeito de meio-tom (overlay de padrão de pontos radial-gradient a 4px), recortadas com clip-path polygon (12 pontos desiguais) e borda branca de 5px, levemente rotacionadas, sobrepondo umas às outras e ao texto. Adicione tiras de fita (retângulos rgba(255,255,255,0.55), rotacionados) e um selo de carimbo em #0078bf. Os botões são retângulos pretos com texto Anton branco e uma borda inferior rasgada. Sem raio, sem sombras, sem easing suave; o hover troca as imagens instantaneamente.

## Tokens
:root { --bg:#f1efe7; --fg:#111111; --accent:#ff48b0; --accent2:#0078bf; --radius:0; --tape:rgba(255,255,255,0.55); --grain:0.12; --font:'Anton',sans-serif; --font-type:'Courier Prime',monospace }

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