Design for AI

Estilo Fanzine / collage: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para fanzine / collage. También llamado diseño de fanzine, collage punk, web de cortar y pegar, estética DIY, estilo fotocopia, estilo riso. fanzines punk de los 70, riot grrrl de los 90; uso web de 2017 en adelante (música, moda, edición independiente).

Rasgos

  • imágenes recortadas con bordes blancos irregulares, papel rasgado, grano de fotocopia
  • tipografía de nota de rescate: fuentes, tamaños y cajas mezcladas dentro de un mismo titular
  • cinta adhesiva, grapas, pegatinas, sellos, notas manuscritas sobre lo impreso
  • blanco y negro de alto contraste con una o dos tintas riso (rosa fluorescente, azul, naranja)
  • el layout ignora la retícula: solapado, rotado, apilado
  • puntos de semitono y capas de color desregistradas
  • movimiento: revelados en hover, cambios de imagen, ligero temblor; nada suave

Paleta

#f1efe7 papel, #111111 tinta, #ff48b0 rosa riso, #0078bf azul riso, #ff6c2f naranja riso, #ffe800 amarillo riso

Tipografía

Anton o Bebas Neue (mayúsculas condensadas), Special Elite o Courier Prime (máquina de escribir), Permanent Marker o Rock Salt (rotulador), Oswald; mezcla al menos tres en los titulares; cuerpo en Courier Prime 16px

Haz

  • dale a cada imagen un borde de recorte irregular: clip-path polygon con 10-14 puntos desiguales, más un borde blanco de 4-6px
  • desregistra las capas de color: duplica un titular en rosa riso, desplázalo 3px, mix-blend-mode multiply
  • mantén una retícula oculta debajo para que el collage siga alineándose a algo

Evita

  • no lo limpies; la alineación perfecta lo mata
  • no uses más de dos tintas riso por página
  • no uses grises sutiles; solo negro, papel y tinta

Conocido por: Fanzines riot grrrl, Sniffin' Glue, carteles de la era Sub Pop, Nowness (parcial), Rough Trade

Semilla 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

Construye el sitio como un collage de fanzine punk. Papel #f1efe7 con una capa de grano de fotocopia (SVG feTurbulence a opacity 0.12, mix-blend-mode multiply), tinta #111111, solo dos tintas riso: rosa #ff48b0 y azul #0078bf. Los titulares mezclan Anton a 96px en mayúsculas, Special Elite a 40px y Permanent Marker a 56px dentro de la misma línea, con palabras rotadas entre -4deg y 5deg; cuerpo en Courier Prime 16px. Duplica cada titular en #ff48b0, desplazado 3px a la izquierda y 2px hacia abajo, mix-blend-mode multiply, para el desregistro. Las imágenes son en blanco y negro con un efecto de semitono (capa de patrón de puntos con radial-gradient a 4px), recortadas con clip-path polygon (12 puntos desiguales) y un borde blanco de 5px, ligeramente rotadas, solapándose entre sí y con el texto. Añade tiras de cinta adhesiva (rectángulos rgba(255,255,255,0.55), rotados) y una insignia de sello de goma en #0078bf. Los botones son rectángulos negros con texto blanco en Anton y un borde inferior rasgado. Sin radio, sin sombras, sin easing suave; el hover cambia las imágenes al instante.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como un collage de fanzine punk. Papel #f1efe7 con una capa de grano de fotocopia (SVG feTurbulence a opacity 0.12, mix-blend-mode multiply), tinta #111111, solo dos tintas riso: rosa #ff48b0 y azul #0078bf. Los titulares mezclan Anton a 96px en mayúsculas, Special Elite a 40px y Permanent Marker a 56px dentro de la misma línea, con palabras rotadas entre -4deg y 5deg; cuerpo en Courier Prime 16px. Duplica cada titular en #ff48b0, desplazado 3px a la izquierda y 2px hacia abajo, mix-blend-mode multiply, para el desregistro. Las imágenes son en blanco y negro con un efecto de semitono (capa de patrón de puntos con radial-gradient a 4px), recortadas con clip-path polygon (12 puntos desiguales) y un borde blanco de 5px, ligeramente rotadas, solapándose entre sí y con el texto. Añade tiras de cinta adhesiva (rectángulos rgba(255,255,255,0.55), rotados) y una insignia de sello de goma en #0078bf. Los botones son rectángulos negros con texto blanco en Anton y un borde inferior rasgado. Sin radio, sin sombras, sin easing suave; el hover cambia las imágenes al instante.

## 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 }

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