Ir a la guía de uso
industrial-brutalist-uipor Leonxlnx

Industrial Brutalist UI Skill.

Un skill de Claude Code y Codex para diseño UI: interfaces brutalistas que fusionan tipografía suiza con estética de terminal.

  • Web y UI
  • Código 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
Encabezados y metadatos leídos del archivo original el 14-09-2026 · 8450 caracteres en total

01 Qué hace

Qué hace el skill industrial-brutalist-ui en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill diseña interfaces web que sintetizan el diseño tipográfico suizo de mediados de siglo, los manuales de fabricación industrial y las interfaces de terminal retrofuturistas aeroespaciales/militares. Requiere un dominio absoluto de las cuadrículas modulares rígidas, un contraste extremo de escala tipográfica, paletas de color puramente utilitarias, y la simulación programática de degradación analógica, incluidos tramados, líneas de escaneo CRT y dithering de mapa de bits.

El objetivo es construir entornos digitales que proyecten funcionalidad cruda, precisión mecánica y alta densidad de datos, descartando deliberadamente los patrones convencionales de UI de consumo. Se usa para dashboards con muchos datos, portfolios o sitios editoriales que necesitan sentirse como planos desclasificados.

Qué produce

  • Interfaces web con cuadrículas modulares rígidas, contraste extremo de escala tipográfica y paletas de color utilitarias
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Seleccione Un Arquetipo Visual y Manténgalo

    Elija entre Swiss Industrial Print (modos claros de alto contraste con tipografía sans-serif pesada) o Tactical Telemetry & CRT Terminal (modo oscuro con tipografía monoespaciada y encuadre técnico).

  2. 02
    Diseñe un Contraste Extremo de Escala Tipográfica

    Despliegue macro-tipografía a escalas masivas usando tipografía fluida con seguimiento ajustado e interlineado comprimido, exclusivamente en mayúsculas.

  3. 03
    Elija Una Paleta de Sustrato de Forma Consistente

    Seleccione ya sea el modo claro con fondos de papel de documentación mate sin blanquear y texto en tinta carbón, o el modo oscuro con fondos de CRT desactivado y texto en fósforo blanco.

  4. 04
    Construya sobre una Arquitectura de Cuadrícula tipo Blueprint

    Construya diseños con CSS Grid estricto donde los elementos se anclan con precisión a las pistas e intersecciones de la cuadrícula.

  5. 05
    Aplique Efectos de Degradación Analógica

    Simule limitaciones de medios físicos mediante trama de semitonos y dithering de 1 bit en imágenes, líneas de escaneo CRT a través de gradientes lineales repetidos, y filtros de ruido mecánico aplicados globalmente para introducir un grano físico unificado en toda la interfaz.

02 Encuentra tu caso de uso

Cuándo usar el skill industrial-brutalist-ui

Usa el skill industrial-brutalist-ui en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

  • Dashboards con mucha densidad de datos que requieren alta densidad de datos y precisión mecánica

Conozca los límites

  • Proyectos que requieren patrones convencionales de UI de consumo

03 Dentro del skill

Reglas que el Skill industrial-brutalist-ui le da a Claude Code y Codex

5 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Sin Gradientes ni Sombras Suaves

    Los gradientes, las sombras suaves y la translucidez moderna están estrictamente prohibidos para simular medios físicos o pantallas emisivas primitivas.

  2. Parámetros de Macro-tipografía

    Despliegue macro-tipografía exclusivamente en mayúsculas con un seguimiento extremadamente ajustado (-0.03em a -0.06em) e interlineado altamente comprimido (0.85 a 0.95) a escalas masivas usando funciones clamp.

  3. Restricciones de Micro-tipografía

    Use fuentes monoespaciadas exclusivamente en mayúsculas, a escalas pequeñas fijas (10px a 14px) con seguimiento generoso (0.05em a 0.1em) para todos los metadatos, navegación, IDs de unidades y coordenadas.

  4. Límite de un Solo Elemento en Verde Terminal

    El verde terminal solo puede usarse para un elemento de UI específico, como un único indicador de estado o lectura de datos. Si no cumple un propósito claro, ómitalo por completo.

  5. Determinismo de Cuadrícula para las Líneas Divisorias

    Utilice display grid con gap de 1px y colores de fondo contrastantes entre padre e hijo para generar líneas divisorias matemáticamente perfectas y ultrafinas sin declaraciones de border complejas.

04 Ponlo a trabajar

Instalar industrial-brutalist-ui en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar industrial-brutalist-ui a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

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

Formato genérico de CLI de skills para skills/brutalist-skill/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

  • El resultado se entrega como código de interfaz, según lista el catálogo para este skill.
  • El agente nombra el skill industrial-brutalist-ui en su plan o transcripción antes de producir el resultado.
  • Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign importe industrial-brutalist-ui desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Leonxlnx
Archivo de skill
skills/brutalist-skill/SKILL.md Checksum de contenido registrado en la verificación; commit ccbc156
License
MIT Desde LICENSE.
Estrellas del repositorio
86.946 Snapshot de GitHub tomado el 14-09-2026 para todo el repositorio Leonxlnx/taste-skill, que contiene 11 skills en este catálogo. No es una calificación ni un conteo de uso para industrial-brutalist-ui.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. Meta del SkillDefine el skill como un dominio avanzado de la síntesis de interfaces tipográficas suizas y terminales militares
  2. Arquetipos VisualesEstablece dos modos distintos: Swiss Industrial Print (claro) y Tactical Telemetry & CRT Terminal (oscuro)
  3. Arquitectura TipográficaEspecifica los parámetros de implementación de macrotipografía, microtipografía y contraste textural, incluyendo fuentes, escala, tracking y uso de mayúsculas
  4. Sistema de ColorDefine paletas de sustrato sin concesiones para los modos claro y oscuro con acento rojo aviación y verde terminal opcional
  5. Layout e Ingeniería EspacialExige arquitecturas estrictas de CSS Grid con compartimentación visible, densidad bimodal y geometría de 90 grados
  6. Componentes de UI y SimbologíaSustituye la UI estándar por decoración de sintaxis ASCII, marcadores industriales y elementos técnicos como miras y franjas de advertencia
  7. Efectos Texturales y de PostprocesamientoGenera degradación analógica mediante tramado de semitonos, líneas de escaneo CRT y filtros de ruido mecánico
  8. Directivas de Ingeniería WebProporciona instrucciones concretas de implementación para el determinismo de la grid, etiquetas HTML semánticas y limitación tipográfica
La descripción propia del Skill
"Interfaces mecánicas crudas que fusionan la tipografía suiza de imprenta con la estética de terminal militar. Grillas rígidas, contraste extremo de escala tipográfica, color utilitario, efectos de degradación analógica. Para dashboards con gran cantidad de datos, portafolios o sitios editoriales que necesiten sentirse como planos desclasificados."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 8.450 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill industrial-brutalist-ui

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué fuentes debo usar para este estilo?

Para la macrotipografía (encabezados estructurales), utilice sans-serif neo-grotescas pesadas como Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy o Monument Extended.

Para la microtipografía (datos y telemetría), utilice fuentes monoespaciadas como JetBrains Mono, IBM Plex Mono, Space Mono, VT323 o Courier Prime. Las serifas de alto contraste como Playfair Display se usan con moderación y con un fuerte postprocesamiento.

Industrial Brutalist UI

Ejecuta industrial-brutalist-ui en una tarea de diseño de interfaz real.

Descarga OpenDesign, importa industrial-brutalist-ui desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

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

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows