Frontend & UI
design-skills · Brutalism
Rohbeton-inspirierte Layouts, Darker-Grotesque-Display, Rot und Ocker.
Worum es geht
Ein Richtlinien-Skill für brutalistisches UI aus der Rohbeton-Architektur der 1950er: schmucklos, funktional, bewusst schroff. Darker-Grotesque als Display-Schrift, Rot #DD614C und Ocker #DAA144 auf Weiß.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Warum das fürs Design zählt
- Fette, schmucklose Elemente lassen Dekoration weg, damit Struktur und Text das Gewicht tragen.
- Zwei starke Akzente, Rot und Ocker, ersetzen Verläufe und Schatten komplett.
- Die Barrierefreiheitsuntergrenze gilt weiterhin, damit schroffe Layouts Kontrast und sichtbaren Fokus behalten.
Was es abdeckt
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
So installierst du es
design-skills · Brutalism
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/brutalism/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Sag Codex, der Ton ist fett und schmucklos, bevor er Komponenten wählt.
-
Verankere jede Regel an einem Token oder Schwellwert, wie es die Quality Gates verlangen.
-
Ergänze jede Do-Regel um ein konkretes Don’t-Beispiel, wenn du die Ausgabe prüfst.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.