Design for AI

Stil Klassischer Brutalismus: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für klassischer brutalismus. Auch bekannt als Raw Web, brutalistische Websites, Anti-Design, Default-HTML-Ästhetik, Web-1.0-Brutalismus. Hochphase 2014-2018 (Ära von brutalistwebsites.com).

Merkmale

  • sieht absichtlich ungestylt aus: Systemschriften, blaue Standardlinks, sichtbare Struktur
  • schwarzer Text auf Weiß oder eine einzige harte Farbe; keine Schattierung, keine Bilder außer rohen
  • Tabellen, Listen, unterstrichene Links, Monospace, Standard-Formularelemente
  • dicht, linksbündig, keine max-width-Nettigkeiten, manchmal überlappende Elemente
  • ehrlich als Dokument; Scrollbalken und Ränder liegen offen
  • gelegentlich riesige Schrift oder eine einzige grelle Farbe als einzige Dekoration
  • keine Motion oder grobe Motion (blink, marquee)

Palette

#ffffff Seite, #000000 Text, #0000ee Link, #551a8b besucht, #ff0000 ein schreiender Akzent, #c0c0c0 Trennlinien

Schrift

Times New Roman / Georgia (Serif) oder Courier New / Courier Prime (Mono) oder Arial; Größen nahe den Browser-Defaults (16px Fließtext), Überschriften fett bei 24-32px; keine eigenen Webfonts

Do

  • behalte das Standard-Browserstyling für Links, Buttons und Formularelemente
  • nutze die HTML-Struktur als Design: Überschriften, hr, Tabellen, nummerierte Listen
  • wähle eine laute Farbe und nutze sie für genau eine Sache

Don't

  • füge keine runden Ecken, Schatten oder Verläufe hinzu
  • zentriere nicht alles und baue keine Hero-Sektionen; das ist ein Template, kein Brutalismus
  • nutze keine Icon-Sets; reine Textlabels oder ASCII

Bekannt dafür: Craigslist, Hacker News, Berkshire Hathaway, Drudge Report

CSS-Seed
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #0000ee;
   --alert: #ff0000;
   --radius: 0;
   --border: 1px solid #000;
   --font: 'Times New Roman',serif
}
Prompt

Baue die Seite im klassischen Web-Brutalismus. Seitenhintergrund #ffffff, Text #000000, Links #0000ee unterstrichen, besucht #551a8b. Schriften: Times New Roman für Fließtext bei 16px und Courier New für Code und Labels; Überschriften fett, keine Letter-Spacing-Tricks, Größen 32/24/18px. Kein border-radius, kein box-shadow, keine Verläufe, keine Webfonts, keine Icons. Das Layout ist ein schlichtes Dokument: h1, Absätze, hr-Trennlinien, ul/ol-Listen und eine echte Tabelle für alle Daten. Der Inhalt sitzt linksbündig bei max-width 720px mit 16px Padding; die Nav ist eine Zeile unterstrichener Textlinks, getrennt durch Pipes. Buttons und Eingabefelder behalten das Standard-Browseraussehen mit einem 1px solid #000 Rand. Ein Akzent #ff0000 nur für den einen wichtigsten Call-to-Action. Überhaupt keine Animation. Jedes Element soll aussehen, als wäre es 1996 geschrieben und nie neu gestaltet worden.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im klassischen Web-Brutalismus. Seitenhintergrund #ffffff, Text #000000, Links #0000ee unterstrichen, besucht #551a8b. Schriften: Times New Roman für Fließtext bei 16px und Courier New für Code und Labels; Überschriften fett, keine Letter-Spacing-Tricks, Größen 32/24/18px. Kein border-radius, kein box-shadow, keine Verläufe, keine Webfonts, keine Icons. Das Layout ist ein schlichtes Dokument: h1, Absätze, hr-Trennlinien, ul/ol-Listen und eine echte Tabelle für alle Daten. Der Inhalt sitzt linksbündig bei max-width 720px mit 16px Padding; die Nav ist eine Zeile unterstrichener Textlinks, getrennt durch Pipes. Buttons und Eingabefelder behalten das Standard-Browseraussehen mit einem 1px solid #000 Rand. Ein Akzent #ff0000 nur für den einen wichtigsten Call-to-Action. Überhaupt keine Animation. Jedes Element soll aussehen, als wäre es 1996 geschrieben und nie neu gestaltet worden.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#0000ee; --alert:#ff0000; --radius:0; --border:1px solid #000; --font:'Times New Roman',serif }

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