industrial-brutalist-uidi Leonxlnx

Industrial Brutalist UI Skill.

Uno skill Claude Code e Codex per UI design: interfacce brutaliste che fondono la tipografia svizzera con l'estetica del terminale.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

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

Intestazione e sezioni lette dal file upstream il 14 settembre 2026 · 8.450 caratteri in totale

01 Cosa fa

Cosa fa lo skill industrial-brutalist-ui in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questo skill progetta interfacce web che sintetizzano il design tipografico svizzero di metà secolo, i manuali industriali di produzione e le interfacce terminali retro-futuristiche aerospaziali/militari. Richiede una padronanza assoluta di griglie modulari rigide, un contrasto tipografico di scala estremo, palette di colori puramente utilitaristiche e la simulazione programmatica del degrado analogico, incluse retinature, scanline CRT e dithering bitmap.

L'obiettivo è costruire ambienti digitali che proiettino funzionalità grezza, precisione meccanica e alta densità di dati, scartando deliberatamente i pattern UI convenzionali per il consumatore. Utilizzato per dashboard ricche di dati, portfolio o siti editoriali che devono sembrare progetti declassificati.

Che cosa produce

Interfacce web con griglie modulari rigide, contrasto estremo di scala tipografica e palette cromatiche utilitarie

Vedi l'esempio di prompt ↗

Come funziona

01
Seleziona un Archetipo Visivo e Mantienilo
Scegli tra Swiss Industrial Print (modalità chiara ad alto contrasto con tipografia sans-serif pesante) o Tactical Telemetry & CRT Terminal (modalità scura con tipografia monospaziata e inquadratura tecnica).
02
Ingegnerizza un Contrasto Estremo di Scala Tipografica
Distribuisci macro-tipografia a scale massive usando tipografia fluida con tracking stretto e leading compresso, esclusivamente in maiuscolo.
03
Scegli una Palette di Substrato in Modo Coerente
Seleziona la modalità chiara con sfondi in carta documentale opaca non sbiancata e testo a inchiostro carbonio, oppure la modalità scura con sfondi CRT disattivati e testo a fosforo bianco.
04
Costruisci su un'Architettura a Griglia Blueprint
Costruisci layout con CSS Grid rigido dove gli elementi sono ancorati con precisione ai binari e alle intersezioni della griglia.
05
Applica Effetti di Degradazione Analogica
Simula i limiti dei media fisici tramite retinatura e dithering a 1 bit sulle immagini, scanline CRT tramite gradienti lineari ripetuti, e filtri di rumore meccanico applicati globalmente per introdurre una grana fisica unificata nell'interfaccia.

02 Trova la tua applicazione

Quando utilizzare lo skill industrial-brutalist-ui

Usa la skill industrial-brutalist-ui in Claude Code o Codex quando il lavoro riguarda la progettazione UI di questo tipo. Capacità e limiti indicati di seguito sono presi dal file della skill.

Buona applicazione

Dashboard ricche di dati che richiedono alta densità di dati e precisione meccanica

Conosci i limiti

Progetti che richiedono pattern UI convenzionali per il consumatore

03 Dentro la skill

Regole che la Skill industrial-brutalist-ui Fornisce a Claude Code e Codex

5 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Nessun Gradiente o Ombra Morbida
Gradienti, ombre morbide e trasparenze moderne sono strettamente proibiti, per simulare media fisici o display emissivi primitivi.
Parametri di Macro-tipografia
Distribuisci la macro-tipografia esclusivamente in maiuscolo con tracking estremamente stretto (-0.03em a -0.06em) e leading altamente compresso (0.85 a 0.95) a scale massive usando funzioni clamp.
Vincoli di Micro-tipografia
Usa font monospaziati esclusivamente in maiuscolo a scale fisse piccole (10px a 14px) con tracking generoso (0.05em a 0.1em) per tutti i metadati, la navigazione, gli ID unità e le coordinate.
Limite a un Singolo Elemento in Verde Terminale
Il verde terminale può essere usato solo per un elemento UI specifico, come un singolo indicatore di stato o una lettura di dati. Se non serve a uno scopo chiaro, omettilo del tutto.
Determinismo della Griglia per le Linee Divisorie
Utilizzare display grid con gap 1px e colori di sfondo genitore/figlio contrastanti per generare linee divisorie sottilissime e matematicamente perfette, senza complesse dichiarazioni di border.

04 Mettila al lavoro

Installa industrial-brutalist-ui in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi industrial-brutalist-ui a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica del CLI skills per skills/brutalist-skill/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Prima di accettare l'output, cerca questi elementi nella trascrizione e nei file:

Il risultato viene fornito come codice UI, come elenca il catalogo per questa skill.
L'agente nomina lo skill industrial-brutalist-ui nel suo piano o trascrizione prima di produrre il risultato.
I tuoi contenuti, nomi e numeri appaiono invariati nell'output.

In OpenDesign importi industrial-brutalist-ui dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
File della skill: skills/brutalist-skill/SKILL.md Checksum del contenuto registrato alla verifica; commit ccbc156
License: MIT Da LICENSE.
Stelle del repository: 86.946 Snapshot GitHub scattata il 14-09-2026 per l'intero repository Leonxlnx/taste-skill, che contiene 11 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per industrial-brutalist-ui.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Meta dello SkillDefinisce lo skill come competenza avanzata nella sintesi tra tipografia svizzera e interfacce terminale militari
Archetipi VisiviStabilisce due modalità distinte: Swiss Industrial Print (chiara) e Tactical Telemetry & CRT Terminal (scura)
Architettura TipograficaSpecifica i parametri di implementazione per macro-tipografia, micro-tipografia e contrasto testurale, inclusi font, scala, tracking e casing
Sistema ColoreDefinisce palette di sfondo intransigenti per modalità chiara e scura, con accento rosso aviazione e verde terminale opzionale
Layout e Ingegneria SpazialeImpone architetture CSS Grid rigorose con compartimentazione visibile, densità bimodale e geometria a 90 gradi
Componenti UI e SimbologiaSostituisce la UI standard con decorazioni in sintassi ASCII, marcatori industriali e asset tecnici come mirini e strisce di avvertimento
Effetti Testurali e Post-ProcessingProgetta un degrado analogico tramite dithering a semitono, scanline CRT e filtri di rumore meccanico
Direttive di Ingegneria WebFornisce istruzioni concrete di implementazione per il determinismo della grid, i tag HTML semantici e il clamping tipografico

Descrizione della skill

"Interfacce meccaniche grezze che fondono la tipografia svizzera da stampa con l'estetica dei terminali militari. Griglie rigide, estremo contrasto di scala tipografica, colore utilitaristico, effetti di degradazione analogica. Per dashboard ricche di dati, portfolio o siti editoriali che devono sembrare progetti declassificati."

Descrizione front-matter da SKILL.md. Il file completo è di circa 8.450 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo Skill industrial-brutalist-ui

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quali font dovrei usare per questo stile?

Per la macro-tipografia (intestazioni strutturali), utilizzi sans-serif neo-grotesque molto pesanti come Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy o Monument Extended.

Per la micro-tipografia (dati e telemetria), utilizzi font monospace come JetBrains Mono, IBM Plex Mono, Space Mono, VT323 o Courier Prime. Serif ad alto contrasto come Playfair Display vengono usati con parsimonia e con un pesante post-processing.

Industrial Brutalist UI

Esegui industrial-brutalist-ui su un Task di UI Design Reale.

Scarica OpenDesign, importa industrial-brutalist-ui dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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