Zur Nutzungsanleitung springen
industrial-brutalist-uivon Leonxlnx

Industrial Brutalist UI Skill.

Ein Claude Code- und Codex-Skill für UI-Design: brutalistische Oberflächen, die Schweizer Typografie mit Terminal-Ästhetik verbinden.

  • Web & UI
  • UI-Code
Leonxlnx/taste-skill · skills/brutalist-skill/SKILL.mdSKILL.md
--- name: industrial-brutalist-ui description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints. --- ## 1. Skill Meta ## 2. Visual Archetypes ## 3. Typographic Architecture ## 4. Color System ## 5. Layout and Spatial Engineering ## 6. UI Components and Symbology
Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 8.450 Zeichen insgesamt

01 Was es tut

Was die industrial-brutalist-ui-Skill in Claude Code und Codex macht

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Diese Skill entwirft Weboberflächen, die typografisches Schweizer Design der Jahrhundertmitte, industrielle Fertigungshandbücher und retro-futuristische Luftfahrt-/Militär-Terminaloberflächen synthetisieren. Sie erfordert absolute Beherrschung starrer modularer Raster, extremer typografischer Skalenkontraste, rein zweckmäßiger Farbpaletten und programmatischer Simulation analoger Degradation einschließlich Halbtonraster, CRT-Scanlines und Bitmap-Dithering.

Das Ziel ist es, digitale Umgebungen zu konstruieren, die rohe Funktionalität, mechanische Präzision und hohe Datendichte ausstrahlen, während konventionelle Consumer-UI-Muster bewusst verworfen werden. Verwendet für datenintensive Dashboards, Portfolios oder Editorial-Sites, die sich wie deklassifizierte Baupläne anfühlen sollen.

Was er erzeugt

  • Weboberflächen mit starren modularen Rastern, extremem typografischem Skalenkontrast und utilitaristischen Farbpaletten
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Wählen Sie einen visuellen Archetyp und legen Sie sich fest

    Wählen Sie entweder Swiss Industrial Print (kontrastreiche Light Modes mit kräftiger serifenloser Typografie) oder Tactical Telemetry & CRT Terminal (Dark Mode mit Monospace-Typografie und technischer Rahmung).

  2. 02
    Konstruieren Sie extremen typografischen Skalenkontrast

    Setzen Sie Makro-Typografie in massiven Größenordnungen ein, mit fluider Typografie, engem Tracking und komprimiertem Zeilenabstand, ausschließlich in Großbuchstaben.

  3. 03
    Wählen Sie eine Substrat-Palette und bleiben Sie konsequent dabei

    Wählen Sie entweder Light Mode mit mattem, ungebleichtem Dokumentenpapier-Hintergrund und kohlenschwarzem Text, oder Dark Mode mit deaktiviertem CRT-Hintergrund und weißem Phosphor-Text.

  4. 04
    Bauen Sie auf einer Blueprint-Raster-Architektur auf

    Konstruieren Sie Layouts mit strengem CSS Grid, bei dem Elemente präzise an Rasterspuren und -schnittpunkten verankert sind.

  5. 05
    Wenden Sie analoge Degradationseffekte an

    Simulieren Sie die Begrenzungen physischer Medien durch Halbton- und 1-Bit-Dithering auf Bildern, CRT-Scanlines mittels wiederholter linearer Gradienten sowie mechanische Rauschfilter, die global angewendet werden, um eine einheitliche physische Körnung über die gesamte Oberfläche zu erzeugen.

02 Finden Sie Ihren Favoriten

Wann Sie den industrial-brutalist-ui Skill verwenden

Verwenden Sie den industrial-brutalist-ui Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Datenintensive Dashboards mit hohem Bedarf an Datendichte und mechanischer Präzision

Grenzen kennen

  • Projekte, die konventionelle Consumer-UI-Muster erfordern

03 Innerhalb des Skills

Regeln, die das Skill industrial-brutalist-ui Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

  1. Keine Gradienten oder weichen Schatten

    Gradienten, weiche Drop-Shadows und moderne Transluzenz sind strikt untersagt, um physische Medien oder primitive emissive Displays zu simulieren.

  2. Makro-Typografie-Parameter

    Setzen Sie Makro-Typografie ausschließlich in Großbuchstaben mit extrem engem Tracking (-0,03em bis -0,06em) und stark komprimiertem Zeilenabstand (0,85 bis 0,95) in massiven Größenordnungen mittels Clamp-Funktionen ein.

  3. Mikro-Typografie-Einschränkungen

    Verwenden Sie ausschließlich Monospace-Schriften in Großbuchstaben in festen kleinen Größen (10px bis 14px) mit großzügigem Tracking (0,05em bis 0,1em) für alle Metadaten, Navigation, Unit-IDs und Koordinaten.

  4. Beschränkung von Terminal-Grün auf ein einzelnes Element

    Terminal-Grün darf nur für ein einziges spezifisches UI-Element verwendet werden, etwa einen einzelnen Statusindikator oder ein Datenauslese-Feld. Wenn es keinem klaren Zweck dient, lassen Sie es ganz weg.

  5. Raster-Determinismus für Trennlinien

    Nutzen Sie ein Display-Grid mit 1px Abstand und kontrastierenden Hintergrundfarben von Eltern- und Kindelement, um mathematisch perfekte, hauchdünne Trennlinien ohne komplexe Border-Deklarationen zu erzeugen.

04 In Betrieb nehmen

industrial-brutalist-ui in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

industrial-brutalist-ui zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui

Generisches skills-CLI-Format für skills/brutalist-skill/SKILL.md; das Repository dokumentiert unter Umständen einen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
Build a tactical telemetry dashboard interface for [SYSTEM NAME] monitoring [DATA TYPE] across [NUMBER] operational units. Use CRT terminal aesthetics with dark substrate, monospaced data readouts, ASCII bracket framing, and simulated scanline degradation. Display real-time metrics in tight grid compartments with aviation red accent for critical alerts. Include crosshair markers at grid intersections and randomized unit IDs.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

  • Das Ergebnis wird als UI-Code geliefert, wie im Katalog für dieses Skill aufgeführt.
  • Der Agent nennt den industrial-brutalist-ui Skill in seinem Plan oder Protokoll, bevor er das Ergebnis liefert.
  • Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie industrial-brutalist-ui über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill-Datei
skills/brutalist-skill/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; Commit ccbc156
License
MIT Aus LICENSE.
Repository-Sterne
86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für industrial-brutalist-ui.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Skill-MetaDefiniert den Skill als fortgeschrittene Kompetenz in der Synthese von schweizerischer Typografie und militärischen Terminal-Interfaces
  2. Visuelle ArchetypenEtabliert zwei unterschiedliche Modi: Swiss Industrial Print (hell) sowie Tactical Telemetry & CRT Terminal (dunkel)
  3. Typografische ArchitekturLegt Parameter für Makro-Typografie, Mikro-Typografie und texturalen Kontrast fest, einschließlich Schriften, Skala, Laufweite und Groß-/Kleinschreibung
  4. FarbsystemDefiniert kompromisslose Untergrund-Paletten für Hell- und Dunkelmodus mit Aviation-Red-Akzent und optionalem Terminal-Grün
  5. Layout und räumliche KonstruktionSchreibt strikte CSS-Grid-Architekturen mit sichtbarer Kompartimentierung, bimodaler Dichte und 90-Grad-Geometrie vor
  6. UI-Komponenten und SymbolikErsetzt Standard-UI durch ASCII-Syntax-Dekoration, industrielle Markierungen und technische Elemente wie Fadenkreuze und Warnstreifen
  7. Textur- und NachbearbeitungseffekteErzeugt analoge Degradation durch Halbton-Dithering, CRT-Scanlines und mechanische Rauschfilter
  8. Web-Engineering-VorgabenLiefert konkrete Umsetzungsanweisungen für Grid-Determinismus, semantische HTML-Tags und Typografie-Clamping
Die eigene Beschreibung des Skills
„Rohe mechanische Oberflächen, die Schweizer typografischen Druck mit militärischer Terminal-Ästhetik verbinden. Starre Raster, extremer Kontrast in der Schriftgröße, utilitaristische Farbgebung, analoge Abbauprozess-Effekte. Für datenintensive Dashboards, Portfolios oder redaktionelle Seiten, die wie freigegebene Baupläne wirken sollen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 8.450 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum Skill industrial-brutalist-ui

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Schriften sollte ich für diesen Stil verwenden?

Für die Makro-Typografie (strukturelle Überschriften) verwenden Sie kräftige Neo-Grotesk-Schriften wie Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy oder Monument Extended.

Für die Mikro-Typografie (Daten und Telemetrie) verwenden Sie Monospace-Schriften wie JetBrains Mono, IBM Plex Mono, Space Mono, VT323 oder Courier Prime. Kontrastreiche Serifen wie Playfair Display werden sparsam eingesetzt und stark nachbearbeitet.

Industrial Brutalist UI

Führen Sie industrial-brutalist-ui auf einer echten UI-Design-Aufgabe aus.

OpenDesign herunterladen, industrial-brutalist-ui über den SKILL.md-Link importieren, die obige Eingabe einfügen und den Plan vor dem Ergebnis lesen.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows