Verwende dieses Skill nur, nachdem ein Benutzer es explizit ausgewählt hat oder eine bestätigte Projektkonfiguration es festlegt. Für nicht erklärte neue UI-Anfragen verwende stattdessen einen Stilauswahlmechanismus, um den Geschmack des Benutzers nicht hier zu erraten. Vorhandene Marken-, Barrierefreiheits- und Benutzervorgaben haben Vorrang vor allen untenstehenden Beispielen. Die folgende Stilrichtlinie ist keine Berechtigung, mit dem UI-Coding zu beginnen, bevor der Stil ausgewählt wurde.
Stilpaket: Brutalismus
ID: brutalism
Signatur: Rohe strukturelle Ehrlichkeit, freiliegendes Layout-Gerüst, unnachgiebiger monochromer Kontrast und keine dekorative Tarnung.
Dies ist ein Stilpaket, kein verbindlicher Standard. Lade es nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben.
Gute Passung / Zielkonflikte
- Funktioniert gut für: Avantgarde-Portfolios, Aktivistenplattformen, Architekturarchive, unabhängige Publikationen, Kunst-/Kulturinstitutionen und Entwickler-Tools, die unkompromittierte strukturelle Authentizität suchen.
- Vorsicht bei: Konventionellen Massenmarkt-Konsumentenanwendungen, bei denen dekorative Vertrautheit und sanfte Ästhetik anfängliche Benutzerzögerlichkeit reduzieren.
- Referenzrichtungen:
- Architektonischer Béton Brut: Rohbetongrau (
#E8E8E8bis#DCDCDC), reine kräftige schwarze Linien (#000000), freiliegende strukturelle Gitterteilung, und monospace architektonische Metadaten. - Strenge monochrome Grundstruktur: Reiner weißer Hintergrund (
#FFFFFF) mit schweren schwarzen Rändern (2.5px solid #000000), strenge schwarze Blockaktionen und keine kosmetische Ornamentik.
- Architektonischer Béton Brut: Rohbetongrau (
Brutalistische Materialtreue-Prüfung – zwingend erforderlich
Bevor du eine brutalistische Seite als vollständig bezeichnest, muss der sichtbare Ansichtsbereich deutlich als rohe, ehrliche strukturelle Komposition lesbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist eine generische Seite, die lediglich unformatiertes Default oder chaotischen überlappenden Text anwendet, ein FEHLSCHLAG.
Eine erfolgreiche brutalistische Implementierung zeigt alle der folgenden Merkmale:
- Freiliegendes strukturelles Gerüst: Gitterlinien, Abschnittstrennlinien und Inhaltscontainer werden durch sichtbare solide schwarze Ränder (
2px–3px solid #000000) gebildet, die das strukturelle Skelett der Webseite zelebrieren. - Null kosmetische Tarnung: Absolut keine weichen unscharfen Schlagschatten, keine glänzenden Reflexionen, keine abgerundeten Bubble-Ecken und keine transluzenten Glasunschärfen. Oberflächen sind flach, deckend und unmissverständlich direkt.
- Hyperdisziplinierte Ausrichtung: Trotz der rohen Materialehrlichkeit ist die Ausrichtung messerscharf. Spalten, Ränder und Zeilen fügen sich nahtlos und ohne erratisches Wandern ineinander.
- Strenge kontrastreiche Palette: Unnachgiebiger Schwarz-auf-Weiß oder Schwarz-auf-Beton-Monochromkontrast, der WCAG AAA (7:1+) erfüllt. Farbe wird nur als operatives Warnsignal verwendet (reines Rot
#FF0000oder rohes Warn-Gelb#FFD700). - Sofortige interaktive Zustandswechsel: Schaltflächen und interaktive Elemente wechseln sofort bei
:hoverund:active(z. B. sofortige Farbinversion von Schwarz-auf-Weiß zu Weiß-auf-Schwarz) ohne verzögerte Beschleunigung oder künstliche Spring-Physik.
Test des ersten Ansichtsbereichs: Erkenne auf einem Desktop-Screenshot das freiliegende Strukturgitter, die flachen unverzierten Ebenen und die strenge monochrome Autorität, ohne den Seitentitel zu lesen. Wenn es abgerundete Karten oder weiche Schatten enthält, entferne sofort die dekorative Tarnung.
Explizite brutalistische Strukturausnahme – freiliegende Gitterränder sind erforderlich
Brutalismus-spezifische Überschreibung: Die universelle Anti-Slop-Warnung gegen übermäßige Ränder oder harten Kontrast darf NICHT als Verbot dicker schwarzer Trennlinien (2px–3px solid) oder freiliegender struktureller Gerüste hier interpretiert werden. Im architektonischen Brutalismus werden strukturelle Verbindungen und ehrliche Materialien gefeiert, nicht hinter kosmetischer Farbe versteckt.
- Erlaubte strukturelle Behandlungen: Sichtbare 2px–3px Strukturränder, rohe rechteckige Container, kontrastreiche Monospace-Metadaten und sofortige Farbinversionszustände.
- Anti-Slop-Grenze: Brich nicht absichtlich die Zugänglichkeit, indem du Textabsätze überlappen lässt, unlesbare Neon-Knallfarben verwendest oder Schaltflächen unmöglich zu finden machst. Authentischer Brutalismus ist hyperfunktional, nicht zufällig kaputt.
- Anti-Slop-Interpretation: Bewerte brutalistische Layouts nach struktureller Integrität, funktionalem Nutzen und Lesbarkeit, nicht nach dem Versuch, harte Kanten zu weich zu machen. Das Entfernen struktureller Ränder, um eine generische Weichheits-Heuristik zu erfüllen, ist ein Design-Rückschritt.
Typografie und Schrift
Unnachgiebige, schwere groteske serifenlose oder technische Monospace: Arial, Helvetica, IBM Plex Sans, IBM Plex Mono oder System-Schriftarten ohne Serifen. Überschriften: 44–72 px Desktop / 30–44 px Mobil (Stärke 800–900, enge Zeilenhöhe 1,05–1,15). Fließtext: 16–18 px (Stärke 400, Zeilenhöhe 1,5). Monospace für Metadaten, Zeitstempel und Abschnittsindizes.
Farbrichtung
- Heller Modus (Kräftiges Papier):
- Leinwandbasis: Kräftiges Papierweiß (
#FFFFFF) oder Architekturbeton (#E5E5E5). - Strukturtinte / Ränder: Reines Schwarz (
#000000). - Oberflächenblöcke: Kontrastreiche solide Füllungen (
#000000oder#FFFFFF).
- Leinwandbasis: Kräftiges Papierweiß (
- Dunkler Modus (Pitch Invertiert):
- Leinwandbasis: Kräftiges Pechschwarz (
#000000). - Strukturtinte / Ränder: Reines kräftiges Weiß (
#FFFFFF). - Oberflächenblöcke: Kontrastreiche solide dunkle Füllungen (
#000000oder#121212).
- Leinwandbasis: Kräftiges Pechschwarz (
- Operativer Signalakzent (Nur eine Farbe): Signalrot (
#FF0000/#FF3333) oder Warn-Amber (#FFCC00). - Themeninversionsregel: Im Brutalismus ist der Dunkel-/Hellmodus ein autoritärer Polaritätswechsel. Im Dunkelmodus ist die Leinwand
#000000und Text/Ränder sind#FFFFFF. Schaltflächen invertieren sauber beim Hovern (Hell: weiße Schaltfläche wechselt zu schwarzer Füllung + weißem Text; Dunkel: schwarze Schaltfläche wechselt zu weißer Füllung + schwarzem Text). Schwarzer Text auf schwarzem Hintergrund oder weißer Text auf weißem Hintergrund ist strengstens verboten.
Layout und Geometrie
Ecken sind streng quadratisch (border-radius: 0px). Strukturränder: 2px–3px solid #000000. Inhaltsblöcke schließen bündig aneinander an oder halten feste modulare Abstände von 16px/24px ein.
Oberflächen, Tiefe, Textur
Oberflächen sind 100 % flach, deckend und strukturell. Null Schatten. Null Farbverläufe. Tiefe wird ausschließlich durch das Schichten von schwarzen Blöcken über weißen Rahmen und die sofortige Inversion von Vorder- und Hintergrundfarben hergestellt.
Komponentenanatomie und Interaktion
- Brutalistische Schaltfläche: Schwerer schwarzer Rand (
2px solid #000000), weißer Hintergrund, fette Großbuchstaben; bei Hover/Aktiv sofortige Inversion zu solide schwarzem Hintergrund und weißem Text. - Strukturpanel: Rechteckiger Container mit schweren oberen/unteren Rändern; Trennlinien zwischen internen Abschnitten.
- Metadaten-Tag: Monospace-Tag in eckigen Klammern:
[DOC_REF: 4092]. - Formularsteuerelemente: Schlichte Eingabefelder mit dickem schwarzem Rand und kontrastreichem solidem schwarzem Fokusring (
outline: 3px solid #000000; outline-offset: 2px;).
Bewegung
Sofortige Zustandswechsel standardmäßig (0 ms) oder sehr kurze lineare Übergänge (60–100 ms). Kein Hüpfen, keine Beschleunigungskurven, kein Parallax, keine dekorativen Übergänge.
Optionales Anime.js v4 Rezept
- Bewegungsentscheidung: Sofortige Zustandswechsel standardmäßig; Anime.js ist für authentischen Brutalismus im Allgemeinen unnötig.
- Startdauer: 0ms (sofort); nur anpassen, wenn ein bestimmter funktionaler mechanischer Schiebeverschluss angefordert wird.
- Vermeiden: Federn, verschiebende Enthüllungen, theatralische Scroll-Animationen.
- Abhängigkeit: CSS/nativ standardmäßig. Folge der Taste Engine
references/motion-engine.md, wenn verfügbar; eigenständiges Skill folgt den Prinzipien der reduzierten Bewegung und keine dekorativen Schleifen.
UI-Schreiben und Mikrotext
Direkt, unmissverständlich und sachlich. Beispiele: „INDEX“, „DOWNLOADS SPEZIFIKATION“, „TERMINALFEHLER: VERBINDUNG UNTERBROCHEN“, „BESTÄTIGEN“. Vermeide gesprächigen Gesprächskopier oder überzeugende Marketing-Floskeln.
Starter-Tokens (Vorschläge, kein vollständiges Theme)
| Token | Standard Hellmodus | Standard Dunkelmodus |
|---|---|---|
--taste-brutal-bg | #ffffff | #000000 |
--taste-brutal-ink | #000000 | #ffffff |
--taste-brutal-surface | #ffffff | #121212 |
--taste-brutal-border | 2.5px solid #000000 | 2.5px solid #ffffff |
--taste-brutal-radius | 0px | 0px |
--taste-brutal-signal | #ff0000 | #ff3333 |
--taste-brutal-font-heading | 'Arial Black', Arial, Helvetica, sans-serif | 'Arial Black', Arial, Helvetica, sans-serif |
--taste-brutal-font-body | Arial, Helvetica, sans-serif | Arial, Helvetica, sans-serif |
--taste-brutal-font-mono | 'IBM Plex Mono', monospace | 'IBM Plex Mono', monospace |
--taste-brutal-motion-duration | 0ms | 0ms |
Tokens stellen eine Richtung dar und sind nicht für jede Palette/Plattform garantiert kopierbar. Definiere --taste-brutal-* auf Projektebene, stelle Farbkontrast sicher und passe über Themetokens an, anstatt literale Werte zu verteilen.
Heldenkomposition (voller erster Ansichtsbereich)
Wenn ein öffentlich ausgerichtetes Portfolio / eine Landingpage / Homepage einen Helden hat: Verwende eine ein-Sichtbildschirm-Kombination aus Kopfzeile und Held. Grundhöhe basierend auf min-height: 100svh mit 100vh Fallback, subtrahiere die echte Kopfzeile nur, wenn sie im normalen Fluss ist; lasse den Helden für Barrierefreiheit und kurze mobile Bildschirme expandieren. Wende dies nicht auf private Dashboards oder andere Aufgabenseiten an; direkte Benutzervorgaben gewinnen. Stilspezifische Richtung: Konstruiere den ersten Ansichtsbereich als unmissverständlichen architektonischen Monolithen: massiver Anzeigetitel in strukturellem Gerüst, strenge schwarze Call-to-Action-Blöcke, und null kosmetische Füllmasse. Siehe im Router references/hero-layout.md, wenn vorhanden. Eigenständige Verwendung folgt denselben responsiven und Anti-Slop-Prinzipien.
Stilspezifisches Qualitätstor
- Tun: Überprüfe strengen monochromen Kontrast; stelle sicher, dass 2–3px Strukturränder solide sind; überprüfe scharfe 0px quadratische Ecken; überprüfe die Polaritätsinversion des Dunkel-/Hellmodus, sodass Text und Hintergrund niemals kollidieren (kein Schwarz-auf-Schwarz oder Weiß-auf-Weiß-Text); stelle sicher, dass der Signalakzent streng singulär bleibt.
- Nicht tun: Füge keine abgerundeten Ecken, weichen Schlagschatten oder sanften Farbverlauf hinzu; vermeide dekorative Füll-Badges oder gesprächigen Marketingtext; lasse keine schwarze Tinte oder Ränder beim Wechsel zu dunkler Leinwand zurück.
- Bestätige Desktop- und Mobilkonsistenz; sichtbarer Tastaturfokus (
:focus-visible); Lade-, Leer-, Deaktiviert-, Fehler- und Erfolgszustände; reduziertes Bewegungsverhalten (prefers-reduced-motion). - Injiziere keine stilspezifischen Annahmen in nicht zusammenhängende Projekte. Wenn Stile kombiniert werden, nenne explizit den primären Stil und die entliehenen Merkmale.
Universelles Anti-Slop-Gatter (eigenständig)
Jedes Element muss seinen Platz verdienen. Inhalt vor Dekoration. Dekoriere keine Unsicherheit. Erfinde keine Bilanzen, Metriken, Testimonials, Benutzer, Logos, Zustimmung, verifizierten/Live/Online-Status, gefälschte Aktivität oder Erfolgsbestätigungen; verwende ehrliche Leer-/Lade-/Fehlerzustände. Demodaten sind nur akzeptabel, wenn angefordert und sichtbar gekennzeichnet.
Füge keine dekorativen Karte-in-Karte-Schichten hinzu: eine verschachtelte Oberfläche muss eine eigene Interaktions- oder Informationsgrenze darstellen. Vermeide automatisch generierte 3-Feature-Grids, 4-Stat-Dashboards, gefälschte Heldenbehauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, nicht zusammenhängende dekorative Kunst und zufällige Schleifen nur, um den Ansichtsbereich zu füllen. Bevorzuge Gruppierung mit Typografie, Abständen, Ausrichtung und Trennlinien. Gleiche Peers benötigen bewusste visuelle Balance.
Anti-Slop-Texten: Kein generisches „Entfalte dein Potenzial”, „Erlebe die Zukunft”, „Beschleunige deinen Workflow“, „nahtlose“ Behauptungen oder übersetzte Äquivalente. Überschriften müssen tatsächlichen Inhalt kommunizieren, CTAs müssen die Aktion benennen, und Leer-/Fehler-/Erfolgstext muss reale Zustände und nächste Schritte beschreiben. Vermeide falsche Dringlichkeit, erfundene Ziffern, vage KI-Hype, unnötige Emojis und unzugängliche Grossbuchstaben-Blöcke. Passe die Formulierung an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.
Themen- und Moduskontrastintegrität: Wenn ein Benutzer den Dunkelmodus oder Hellmodus anfordert (oder einen Themenschalter erstellt), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Ränder, Eingaben und semantischen Badges hinweg umgedreht werden. Lasse niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare niedrigkontrastige Status-Pillen zurück. Alle Zustände müssen WCAG AA Kontrast erfüllen (mindestens 4,5:1 für Fließtext/normalen Text, 3:1 für große Überschriften und interaktive Grenzen).
Responsive und Bewegung: Gestalte Mobilseiten bewusst, überprüfe lange Beschriftungen, Fokus-Zustände und zugänglichen Kontrast; kein Text-Clipping, um einem trendigen Layout zu entsprechen. Statisch standardmäßig; verwende Bewegung für sinnvolle Interaktionen, respektiere Präferenzen für reduzierte Bewegung, vermeide Hüpf-/Schweb-/Puls-Dekoration ohne einen echten Zustand.
Kritische/Hohe Funde-Blockvervollständigung: Erfundener Status/Daten, kaputte Aktionen, unzugängliche/abgeschnittene Steuerelemente, irreführender Text, Themenkontrast-Kollisionen oder signifikante Mobilfehler müssen behoben werden. Berichte, was tatsächlich überprüft wurde; behaupte keine Tests, die nicht durchgeführt wurden.
Kein Ästhetik-Veto: Ausdrucksstarke Farben, Schatten, Farbverläufe, Kartenlayouts oder dekorative Behandlungen sind legitim, wenn sie beabsichtigte Teile der ausgewählten Ästhetik sind und die Benutzbarkeitsprüfungen bestehen. Erzwinge nicht stillschweigend Minimalismus.
Anti-Slop: stilspezifisch
Strukturelle Ehrlichkeit, nicht ästhetische Verspieltheit.
- Ablehnen: Abgerundete Pillenformen, Pastellakzente, dekorative Schattenunschärfen, verspielte Illustrationen, generische Vorlagenkarten und Themenkollisionen (wie schwarzer Text, der auf einer dunklen brutalistischen Leinwand verbleibt).
- Stattdessen: Lege Layout-Raster mit schweren strukturellen Rändern frei, strenge Typarchitektur, sofortige Zustandswechsel und eindeutigen Kontrast.
- Textkontrolle: UI-Texte müssen kurz, direkt und funktional ohne Marketingsprache sein.
- Audit: Führe universelle Anti-Slop-Zweck-, Wahrheits-, verschachtelte-Oberflächen-, Text-, Responsivitäts-, Zugänglichkeits- und Bewegungskontrollen zusätzlich zu den Qualitätstoren dieses Stils durch. Bestrafe keine bewussten, zugänglichen Funktionen.
…
[gekürzt zur Übersetzung]