Design for AI

Stil Zine / Collage: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für zine / collage. Auch bekannt als Zine-Design, Punk-Collage, Cut-and-Paste-Web, DIY-Ästhetik, Xerox-Stil, Riso-Stil. Punk-Zines der 1970er, Riot Grrrl der 1990er; Web-Nutzung ab 2017 (Musik, Mode, Indie-Publishing).

Merkmale

  • ausgeschnittene Bilder mit rauen weißen Kanten, gerissenes Papier, Fotokopierkörnung
  • Erpresserbrief-Typografie: gemischte Schriften, Größen und Schreibweisen in einer Headline
  • Klebeband, Heftklammern, Sticker, Stempel, handschriftliche Notizen über Druck
  • kontrastreiches Schwarzweiß mit ein oder zwei Riso-Farben (Neonpink, Blau, Orange)
  • Layout ignoriert das Raster: überlappend, gedreht, gestapelt
  • Halbtonpunkte und versetzt gedruckte Farbebenen
  • Motion: Hover-Reveals, Bildwechsel, leichtes Zittern; nichts Glattes

Palette

#f1efe7 Papier, #111111 Tinte, #ff48b0 Riso-Pink, #0078bf Riso-Blau, #ff6c2f Riso-Orange, #ffe800 Riso-Gelb

Schrift

Anton oder Bebas Neue (schmale Versalien), Special Elite oder Courier Prime (Schreibmaschine), Permanent Marker oder Rock Salt (Marker), Oswald; mindestens drei in Headlines mischen; Fließtext in Courier Prime 16px

Do

  • gib jedem Bild eine raue ausgeschnittene Kante: clip-path polygon mit 10-14 unregelmäßigen Punkten, plus 4-6px weißer Rand
  • versetze Farbebenen: dupliziere eine Headline in Riso-Pink, 3px versetzt, mix-blend-mode multiply
  • halte ein verstecktes Raster darunter, damit die Collage trotzdem an etwas ausgerichtet ist

Don't

  • räum es nicht auf; perfekte Ausrichtung tötet es
  • nutze nicht mehr als zwei Riso-Farben pro Seite
  • nutze keine dezenten Grautöne; nur Schwarz, Papier und Farbe

Bekannt dafür: Riot-Grrrl-Zines, Sniffin' Glue, Poster der Sub-Pop-Ära, Nowness (teilweise), Rough Trade

CSS-Seed
: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

Baue die Seite als Punk-Zine-Collage. Papier #f1efe7 mit einem Fotokopierkörnungs-Overlay (SVG feTurbulence bei opacity 0.12, mix-blend-mode multiply), Tinte #111111, nur zwei Riso-Farben: Pink #ff48b0 und Blau #0078bf. Headlines mischen Anton bei 96px Versalien, Special Elite bei 40px und Permanent Marker bei 56px in derselben Zeile, Wörter gedreht zwischen -4deg und 5deg; Fließtext in Courier Prime 16px. Dupliziere jede Headline in #ff48b0, 3px nach links und 2px nach unten versetzt, mix-blend-mode multiply, für den Versatzdruck. Bilder sind schwarzweiß mit Halbtoneffekt (radial-gradient-Punktmuster-Overlay bei 4px), ausgeschnitten mit clip-path polygon (12 unregelmäßige Punkte) und einem 5px weißen Rand, leicht gedreht, einander und den Text überlappend. Ergänze Klebebandstreifen (rgba(255,255,255,0.55) Rechtecke, gedreht) und einen Stempel-Badge in #0078bf. Buttons sind schwarze Rechtecke mit weißem Anton-Text und einer gerissenen Unterkante. Kein Radius, keine Schatten, kein weiches Easing; Hover wechselt Bilder sofort.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als Punk-Zine-Collage. Papier #f1efe7 mit einem Fotokopierkörnungs-Overlay (SVG feTurbulence bei opacity 0.12, mix-blend-mode multiply), Tinte #111111, nur zwei Riso-Farben: Pink #ff48b0 und Blau #0078bf. Headlines mischen Anton bei 96px Versalien, Special Elite bei 40px und Permanent Marker bei 56px in derselben Zeile, Wörter gedreht zwischen -4deg und 5deg; Fließtext in Courier Prime 16px. Dupliziere jede Headline in #ff48b0, 3px nach links und 2px nach unten versetzt, mix-blend-mode multiply, für den Versatzdruck. Bilder sind schwarzweiß mit Halbtoneffekt (radial-gradient-Punktmuster-Overlay bei 4px), ausgeschnitten mit clip-path polygon (12 unregelmäßige Punkte) und einem 5px weißen Rand, leicht gedreht, einander und den Text überlappend. Ergänze Klebebandstreifen (rgba(255,255,255,0.55) Rechtecke, gedreht) und einen Stempel-Badge in #0078bf. Buttons sind schwarze Rechtecke mit weißem Anton-Text und einer gerissenen Unterkante. Kein Radius, keine Schatten, kein weiches Easing; Hover wechselt Bilder sofort.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.