Ir para o guia de uso
industrial-brutalist-uipor Leonxlnx

Industrial Brutalist UI Skill.

Um skill de Claude Code e Codex para design de UI: interfaces brutalistas que fundem tipografia suíça com estética de terminal.

  • Web & UI
  • Código de 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
Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 8.450 caracteres no total

01 O que faz

O Que a Skill industrial-brutalist-ui Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill projeta interfaces web que sintetizam o design tipográfico suíço de meados do século XX, manuais industriais de fabricação e interfaces de terminal retrofuturistas de estética aeroespacial/militar. Ela exige domínio absoluto sobre grades modulares rígidas, contraste extremo de escala tipográfica, paletas de cores puramente utilitárias e simulação programática de degradação analógica, incluindo halftones, scanlines de CRT e dithering em bitmap.

O objetivo é construir ambientes digitais que projetem funcionalidade bruta, precisão mecânica e alta densidade de dados, descartando deliberadamente os padrões convencionais de UI para consumidores. Usado em dashboards com muitos dados, portfólios ou sites editoriais que precisam parecer plantas técnicas desclassificadas.

O que ele produz

  • Interfaces web com grades modulares rígidas, contraste extremo de escala tipográfica e paletas de cores utilitárias
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Selecione Um Arquétipo Visual e Comprometa-se

    Escolha entre Swiss Industrial Print (modos claros de alto contraste com tipografia sans-serif pesada) ou Tactical Telemetry & CRT Terminal (modo escuro com tipografia monoespaçada e enquadramento técnico).

  2. 02
    Projete Contraste Extremo de Escala Tipográfica

    Implemente macrotipografia em escalas massivas usando tipografia fluida com tracking apertado e leading comprimido, exclusivamente em caixa alta.

  3. 03
    Escolha Uma Paleta de Substrato de Forma Consistente

    Selecione entre o modo claro usando fundos de papel de documentação não branqueado com texto em tinta carbono, ou o modo escuro usando fundos de CRT desativado com texto em fósforo branco.

  4. 04
    Construa Sobre a Arquitetura de Grade de Plantas Técnicas

    Construa layouts com CSS Grid rígido, onde os elementos são ancorados precisamente às trilhas e intersecções da grade.

  5. 05
    Aplique Efeitos de Degradação Analógica

    Simule limitações de mídia física por meio de halftone e dithering de 1 bit nas imagens, scanlines de CRT via gradientes lineares repetidos, e filtros de ruído mecânico aplicados globalmente para introduzir um grão físico unificado em toda a interface.

02 Encontre o ideal para você

Quando Usar a Skill industrial-brutalist-ui

Use a skill industrial-brutalist-ui no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Dashboards com muitos dados que exigem alta densidade de dados e precisão mecânica

Conheça os Limites

  • Projetos que exigem padrões convencionais de UI para consumidores

03 Dentro da skill

Regras que a Skill industrial-brutalist-ui Dá ao Claude Code e ao Codex

5 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Sem Gradientes ou Sombras Suaves

    Gradientes, sombras suaves e translucidez moderna são estritamente proibidos, a fim de simular mídia física ou displays emissivos primitivos.

  2. Parâmetros de Macrotipografia

    Implemente macrotipografia exclusivamente em caixa alta com tracking extremamente apertado (-0.03em a -0.06em) e leading altamente comprimido (0.85 a 0.95) em escalas massivas usando funções clamp.

  3. Restrições de Microtipografia

    Use fontes monoespaçadas exclusivamente em caixa alta em escalas pequenas fixas (10px a 14px) com tracking generoso (0.05em a 0.1em) para todos os metadados, navegação, IDs de unidade e coordenadas.

  4. Limite de Um Único Elemento em Verde Terminal

    O verde terminal só pode ser usado em um elemento de UI específico, como um único indicador de status ou uma leitura de dados. Se não servir a um propósito claro, omita-o completamente.

  5. Determinismo de Grade para Linhas Divisórias

    Utilize display grid com gap de 1px e cores de fundo contrastantes entre elemento pai e filho para gerar linhas divisórias matematicamente perfeitas e extremamente finas, sem declarações complexas de border.

04 Coloque em prática

Instalar industrial-brutalist-ui no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar industrial-brutalist-ui ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

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

Formulário genérico da CLI skills para skills/brutalist-skill/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

  • O resultado é entregue como código de UI, conforme o catálogo lista para esta skill.
  • O agente nomeia a skill industrial-brutalist-ui em seu plano ou transcrição antes de produzir o resultado.
  • Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign importe o industrial-brutalist-ui a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Arquivo da skill
skills/brutalist-skill/SKILL.md Checksum de conteúdo registrado na verificação; commit ccbc156
License
MIT De LICENSE.
Estrelas do repositório
86.946 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma avaliação ou contagem de uso para industrial-brutalist-ui.
Verificado pelo OpenDesign
14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

  1. Meta do SkillDefine o skill como proficiência avançada na síntese de interfaces tipográficas suíças e terminais militares
  2. Arquétipos VisuaisEstabelece dois modos distintos: Swiss Industrial Print (claro) e Tactical Telemetry & CRT Terminal (escuro)
  3. Arquitetura TipográficaEspecifica parâmetros de implementação de macrotipografia, microtipografia e contraste textural, incluindo fontes, escala, tracking e caixa
  4. Sistema de CoresDefine paletas de substrato intransigentes para os modos claro e escuro, com destaque em vermelho aviação e verde terminal opcional
  5. Layout e Engenharia EspacialExige arquiteturas rígidas de CSS Grid com compartimentação visível, densidade bimodal e geometria de 90 graus
  6. Componentes de UI e SimbologiaSubstitui a UI padrão por decoração em sintaxe ASCII, marcadores industriais e elementos técnicos como miras e faixas de aviso
  7. Efeitos Texturais e Pós-ProcessamentoProjeta degradação analógica por meio de dithering em halftone, scanlines de CRT e filtros de ruído mecânico
  8. Diretrizes de Engenharia WebFornece instruções concretas de implementação para determinismo de grid, tags HTML semânticas e clamping de tipografia
A Descrição da Própria Skill
"Interfaces mecânicas brutas que fundem tipografia impressa suíça com estética de terminal militar. Grids rígidos, contraste extremo de escala tipográfica, cor utilitária, efeitos de degradação analógica. Para dashboards pesados em dados, portfólios ou sites editoriais que precisam parecer plantas baixas desclassificadas."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 8.450 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill industrial-brutalist-ui

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Quais fontes devo usar para esse estilo?

Para macrotipografia (títulos estruturais), use sans-serifs neo-grotescas pesadas como Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy ou Monument Extended.

Para microtipografia (dados e telemetria), use fontes monospace como JetBrains Mono, IBM Plex Mono, Space Mono, VT323 ou Courier Prime. Serifas de alto contraste como Playfair Display são usadas com moderação e com forte pós-processamento.

Industrial Brutalist UI

Execute industrial-brutalist-ui em uma Tarefa Real de Design de UI.

Baixe o OpenDesign, importe industrial-brutalist-ui através do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

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

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows