Aller au guide d’utilisation
industrial-brutalist-uipar Leonxlnx

Industrial Brutalist UI Skill.

Un skill Claude Code et Codex pour la conception UI : interfaces brutalistes fusionnant typographie suisse et esthétique terminal.

  • Web et UI
  • Code UI
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
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 8 450 caractères au total

01 Ce qu'il fait

Ce que fait le skill industrial-brutalist-ui dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill conçoit des interfaces web qui synthétisent le design typographique suisse du milieu du XXe siècle, les manuels de fabrication industrielle, et les interfaces de terminaux aérospatiaux/militaires rétro-futuristes. Il exige une maîtrise absolue des grilles modulaires rigides, d'un contraste extrême d'échelle typographique, de palettes de couleurs purement utilitaires, et de la simulation programmatique de la dégradation analogique, incluant trames de similigravure, lignes de balayage CRT et tramage bitmap.

L'objectif est de construire des environnements numériques projetant une fonctionnalité brute, une précision mécanique et une forte densité de données, tout en écartant délibérément les patterns d'UI grand public conventionnels. Utilisé pour les tableaux de bord à forte densité de données, les portfolios ou les sites éditoriaux qui doivent évoquer des plans déclassifiés.

Ce qu'il produit

  • Interfaces web avec grilles modulaires rigides, contraste d'échelle typographique extrême et palettes de couleurs utilitaires
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Sélectionner un archétype visuel et s'y engager

    Choisissez soit Swiss Industrial Print (modes clairs à fort contraste avec une typographie sans-serif lourde), soit Tactical Telemetry & CRT Terminal (mode sombre avec typographie monospace et cadrage technique).

  2. 02
    Concevoir un contraste d'échelle typographique extrême

    Déployez une macro-typographie à des échelles massives en utilisant une typographie fluide avec un tracking serré et un interlignage compressé, exclusivement en majuscules.

  3. 03
    Choisir une palette de substrat de façon cohérente

    Sélectionnez soit un mode clair utilisant des arrière-plans mats de papier de documentation non blanchi avec un texte encre carbone, soit un mode sombre utilisant des arrière-plans CRT désactivés avec un texte phosphore blanc.

  4. 04
    Construire sur une architecture de grille de type plan technique

    Construisez des mises en page avec une grille CSS stricte où les éléments sont ancrés précisément aux pistes et intersections de la grille.

  5. 05
    Appliquer des effets de dégradation analogique

    Simulez les limitations des supports physiques via des demi-tons et un tramage 1-bit sur les images, des lignes de balayage CRT via des dégradés linéaires répétés, et des filtres de bruit mécanique appliqués globalement pour introduire un grain physique unifié dans l'interface.

02 Trouvez celui qui vous convient

Quand utiliser le skill industrial-brutalist-ui

Utilisez le skill industrial-brutalist-ui dans Claude Code ou Codex lorsque le travail porte sur ce type de design UI. La portée et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • Tableaux de bord à forte densité de données nécessitant une précision mécanique

Connaître les limites

  • Projets nécessitant des patterns d'UI grand public conventionnels

03 Dans le skill

Règles que le skill industrial-brutalist-ui donne à Claude Code et Codex

5 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Aucun dégradé ni ombre douce

    Les dégradés, les ombres portées douces et la translucidité moderne sont strictement interdits afin de simuler des supports physiques ou des écrans émissifs primitifs.

  2. Paramètres de macro-typographie

    Déployez la macro-typographie exclusivement en majuscules avec un tracking extrêmement serré (-0.03em à -0.06em) et un interlignage très compressé (0.85 à 0.95) à des échelles massives en utilisant des fonctions clamp.

  3. Contraintes de micro-typographie

    Utilisez des polices monospace exclusivement en majuscules à des échelles fixes petites (10px à 14px) avec un tracking généreux (0.05em à 0.1em) pour toutes les métadonnées, la navigation, les identifiants d'unité et les coordonnées.

  4. Limite d'un seul élément en vert terminal

    Le vert terminal ne peut être utilisé que pour un seul élément d'UI spécifique, comme un indicateur de statut unique ou une lecture de données. S'il ne remplit pas un objectif clair, omettez-le entièrement.

  5. Déterminisme de grille pour les lignes de séparation

    Utiliser une grille display grid avec un gap de 1px et des couleurs de fond contrastées entre parent et enfants pour générer des lignes de séparation mathématiquement parfaites et ultrafines, sans déclarations de bordure complexes.

04 Mettez-le en pratique

Installer industrial-brutalist-ui dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter industrial-brutalist-ui à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

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

Formulaire CLI skills générique pour skills/brutalist-skill/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

  • Le résultat est livré sous forme de code UI, comme le catalogue l'indique pour ce skill.
  • L'agent nomme le skill industrial-brutalist-ui dans son plan ou sa transcription avant de produire le résultat.
  • Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

Dans OpenDesign, importez industrial-brutalist-ui depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branche main
Fichier du skill
skills/brutalist-skill/SKILL.md Checksum de contenu enregistré lors de la vérification ; commit ccbc156
License
MIT D'après LICENSE.
Étoiles du dépôt
86 946 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt Leonxlnx/taste-skill, qui contient 11 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour industrial-brutalist-ui.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Skill MetaDéfinit le skill comme une maîtrise avancée de la synthèse d'interfaces typographiques suisses et de terminaux militaires
  2. Archétypes VisuelsÉtablit deux modes distincts : Swiss Industrial Print (clair) et Tactical Telemetry & CRT Terminal (sombre)
  3. Architecture TypographiqueSpécifie les paramètres de macro-typographie, micro-typographie et de contraste textural, incluant polices, échelle, tracking et casse
  4. Système de CouleursDéfinit des palettes de substrat sans compromis pour les modes clair et sombre, avec un accent rouge aviation et un vert terminal optionnel
  5. Mise en Page et Ingénierie SpatialeImpose des architectures CSS Grid strictes avec compartimentation visible, densité bimodale et géométrie à 90 degrés
  6. Composants UI et SymbologieRemplace l'UI standard par une décoration en syntaxe ASCII, des marqueurs industriels et des éléments techniques comme des viseurs et des rayures d'avertissement
  7. Effets Texturaux et de Post-TraitementGénère une dégradation analogique via tramage en demi-teintes, lignes de balayage CRT et filtres de bruit mécanique
  8. Directives d'Ingénierie WebFournit des instructions concrètes d'implémentation pour le déterminisme de grille, les balises HTML sémantiques et le clamping typographique
Description du skill lui-même
« Interfaces mécaniques brutes fusionnant la typographie d'imprimerie suisse avec l'esthétique des terminaux militaires. Grilles rigides, contraste d'échelle typographique extrême, couleur utilitaire, effets de dégradation analogique. Pour les tableaux de bord riches en données, les portfolios ou les sites éditoriaux qui doivent ressembler à des plans déclassifiés. »

Description en en-tête du fichier SKILL.md. Le fichier complet fait environ 8 450 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill industrial-brutalist-ui

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quelles polices dois-je utiliser pour ce style ?

Pour la macro-typographie (titres structurels), utilisez des sans-serifs néo-grotesques bold comme Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy ou Monument Extended.

Pour la micro-typographie (données et télémétrie), utilisez des polices monospace comme JetBrains Mono, IBM Plex Mono, Space Mono, VT323 ou Courier Prime. Des serifs à fort contraste comme Playfair Display sont utilisés avec parcimonie et un post-traitement marqué.

Industrial Brutalist UI

Exécutez industrial-brutalist-ui sur une vraie tâche de conception UI.

Téléchargez OpenDesign, importez industrial-brutalist-ui depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

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

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows