industrial-brutalist-ui
Industrial Brutalist Web-Schnittstellen gestalten
Markante, mechanische Web-Schnittstellen mit Schweizer Typografie und militärischen Terminal-Ästhetik erstellen. Datenintensive Dashboards und redaktionelle Websites mit roher Funktionalität und extremem typografischem Kontrast generieren.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "industrial-brutalist-ui". Erstelle einen Hero-Bereich mit industrial-brutalistischem Stil
Erwartetes Ergebnis:
Generiert CSS-Grid-Layout mit massiver Uppercase-Headline über die gesamte Viewport-Breite, sichtbare 1px-Ränder zur Abschnittsunterteilung, Monospace-Metadaten-Labels in den Ecken und rote Akzentlinien zur Markierung wichtiger Datenpunkte.
Verwendung von "industrial-brutalist-ui". Gestalte eine Datentabelle für taktische Terminal-Schnittstelle
Erwartetes Ergebnis:
Erstellt Tabelle mit Festbreiten-Schriftart, dunklem Hintergrund, weißem Text, optionaler grüner Statuszelle, horizontalen Linien über die gesamte Breite und eckig eingeklammerten Abschnittsüberschriften wie [ SYSTEM STATUS ].
Sicherheitsaudit
SicherStatic analysis detected 71 potential security issues, all are FALSE POSITIVES. The backtick patterns are CSS code examples in markdown documentation, not shell execution. Color hex codes were misidentified as cryptographic weaknesses. ASCII bracket decorations were misidentified as Windows system references. This skill contains only design guidelines with no executable code.
Qualitätsbewertung
Was du bauen kannst
Daten-Dashboard-Design
Erstellung von hochdichten Monitoring-Dashboards für Analyse-Plattformen mit taktischer Terminal-Ästhetik, Monospace-Telemetriedaten und klarer visueller Hierarchie
Redaktionelle Portfolio-Website
Visuell eindrucksvolle Portfolio- oder redaktionelle Websites mit Schweizerisch-industrieller Print-Ästhetik, übergroßer Typografie und asymmetrischen Layouts aufbauen
Technische Dokumentations-UI
Dokumentations-Schnittstellen gestalten, die sich anfühlen wie entschlüsselte Blaupausen oder militärische Handbücher mit starren Rastern und utilitaristischem Styling
Probiere diese Prompts
Erstelle eine Landing-Page im Schweizerisch-industriellen Print-Stil. Verwende ein helles Substrat mit #F4F4F0 Hintergrund, schwere Sans-Serif-Header in massiver Größe und rote #E61919 Akzente. Inkludiere sichtbare Rasterlinien und Uppercase-Monospace-Metadaten.
Baue ein Daten-Dashboard mit taktischer Telemetrie-Ästhetik. Verwende den Dark-Mode mit #0A0A0A Hintergrund, JetBrains Mono Font für alle Datenanzeigen, weißen Phosphor #EAEAEA Text und optional grün #4AF626 für nur eine Status-Anzeige.
Generiere CSS-Typografie-Variablen für eine brutalistische Schnittstelle mit Makro-Headern unter Verwendung von Inter Black bei clamp(4rem, 10vw, 15rem) mit -0.05em Buchstaben-Abstand, und Mikro-Text unter Verwendung von JetBrains Mono bei 12px mit 0.08em Tracking. Alles Uppercase.
Füge CSS-Effekte für analoge Degradation hinzu, einschließlich Rasterton-Pattern-Overlay unter Verwendung von SVG radialen Punkten, CRT-Scanlines mit repeating-linear-gradient und globalem mechanischem Rauschen unter Verwendung von SVG-Filter auf dem Root-Element.
Bewährte Verfahren
- Wähle EINE visuelle Archetyp (Schweizer Industrial Print oder Taktische Telemetrie) pro Projekt und mische niemals beide in derselben Schnittstelle
- Verwende immer CSS clamp()-Funktionen für Makro-Typografie, um fluide Skalierung über Viewport-Größen hinweg bei gleichzeitiger Wirkung zu gewährleisten
- Wende globale Rauschfilter und Textureffekte auf DOM-Root-Ebene an für konsistente analoge Degradation über alle Elemente
Vermeiden
- Mische niemals helle und dunkle Substrat-Farbpaletten in derselben Schnittstelle – entscheide dich für einen Modus
- Vermeide die Verwendung von border-radius auf jedem Element – alle Ecken müssen exakt 90 Grad für mechanische Starrheit sein
- Verwende keine Verläufe, weiche Drop-Shadows oder moderne Translukenz-Effekte, da sie die utilitaristische Ästhetik verletzen