Design for AI

Stil Maximalismus: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für maximalismus. Auch bekannt als maximalistisches Web, mehr ist mehr, Anti-Minimalismus, Visual-Overload-Design. zyklisch; Web-Welle 2019-2023 (Gen-Z-Markenseiten, Mode, Musik).

Merkmale

  • alles geschichtet: Muster über Fotos über Schrift über Farbblöcken
  • sich beißende, knallige Paletten, fünf oder mehr Farben gleichzeitig
  • gemischte Schriften (Display-Serif + Grotesk + Script + Mono) in extremen Größen
  • dichte Kompositionen, überlappende Elemente, gedrehte Sticker, Marquee-Text
  • Texturen: Körnung, Halbton, Scans, Klebeband, handgezeichnete Kritzeleien
  • viel Motion: Marquees, Hover-Swaps, Cursor-Follower, automatisch scrollende Streifen
  • braucht trotzdem ein Raster darunter, sonst wirkt es kaputt

Palette

#ff3cac Hot Pink, #ffe600 Gelb, #2b00ff Elektroblau, #00ff85 Acid Green, #1a1a1a Tinte, #fff5e6 Cremebasis

Schrift

Anton oder Bebas Neue für Display-Blöcke, Instrument Serif kursiv als Kontrast, Space Mono für Labels, Caveat für Kritzeleien; Größen von 11px bis 200px, extreme Schnitte

Do

  • baue auf einem echten 12-Spalten-Raster und brich es dann an drei oder vier Stellen bewusst
  • beschränke Motion auf Elemente, die sich wiederholen (Marquee, Ticker), plus Hover-Swaps
  • nutze Textur-Overlays (Körnung, Halbton), um sich beißende Ebenen zusammenzukleben

Don't

  • lass die Farben nicht ins Pastell abrutschen; das Beißen ist der Punkt
  • nutze keine einzelne Schrift
  • vergiss nicht eine ruhige Zone für die eigentliche Aktion (Formular, Kaufen-Button)

Bekannt dafür: Gucci (Kampagnen 2019-2021), Spotify Wrapped, Nike-By-You-Drops, Bratz-Relaunch

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

Baue die Seite im lauten maximalistischen Stil. Basis Creme #fff5e6 mit Tinte #1a1a1a und mindestens fünf sich beißenden Füllungen, großzügig eingesetzt: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. Die Typografie mischt Anton bei 160px Versalien für den Hero, Instrument Serif kursiv bei 40px für Zwischenüberschriften, Space Mono 13px Versalien für Labels und Caveat für handgekritzelte Anmerkungen. Layout auf einem 12-Spalten-Raster, dann Überlappung: ein gedrehter (-6deg) Sticker-Badge über dem Hero-Bild, ein Foto, das unter die Headline läuft, ein Marquee-Streifen in voller Breite in #ffe600, der mit 40s linear infinite scrollt. Ergänze ein Körnungs-Overlay (SVG feTurbulence, opacity 0.12) über die ganze Seite und ein Halbtonmuster hinter einem Abschnitt. Harte versetzte Schatten 8px 8px 0 #1a1a1a, kein Radius. Hover tauscht das Bild gegen ein zweites Bild. Halte einen ruhigen Block für das Anmeldeformular: Creme, eine Farbe, großer Button.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im lauten maximalistischen Stil. Basis Creme #fff5e6 mit Tinte #1a1a1a und mindestens fünf sich beißenden Füllungen, großzügig eingesetzt: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. Die Typografie mischt Anton bei 160px Versalien für den Hero, Instrument Serif kursiv bei 40px für Zwischenüberschriften, Space Mono 13px Versalien für Labels und Caveat für handgekritzelte Anmerkungen. Layout auf einem 12-Spalten-Raster, dann Überlappung: ein gedrehter (-6deg) Sticker-Badge über dem Hero-Bild, ein Foto, das unter die Headline läuft, ein Marquee-Streifen in voller Breite in #ffe600, der mit 40s linear infinite scrollt. Ergänze ein Körnungs-Overlay (SVG feTurbulence, opacity 0.12) über die ganze Seite und ein Halbtonmuster hinter einem Abschnitt. Harte versetzte Schatten 8px 8px 0 #1a1a1a, kein Radius. Hover tauscht das Bild gegen ein zweites Bild. Halte einen ruhigen Block für das Anmeldeformular: Creme, eine Farbe, großer Button.

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

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