Frontend & UI
design-skills · Brutalism
Layouts inspirados em concreto bruto, display Darker Grotesque, vermelho e ocre.
O que é
Uma skill de guideline para UI brutalista, inspirada na arquitetura de concreto bruto dos anos 1950: sem adornos, funcional, propositalmente áspera. Display em Darker Grotesque, vermelho #DD614C e ocre #DAA144 sobre branco.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Por que isso importa para design
- Elementos marcantes e sem adorno abrem mão da decoração, então estrutura e texto carregam o peso.
- Dois destaques fortes, vermelho e ocre, substituem por completo gradientes e sombras.
- O piso de acessibilidade continua valendo, então os layouts ásperos mantêm contraste e foco visível.
O que cobre
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
Como instalar
design-skills · Brutalism
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/brutalism/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Diga ao Codex que o tom é marcante e sem adorno antes de ele escolher os componentes.
-
Ancore cada regra a um token ou limiar, como exigem os portões de qualidade.
-
Combine cada regra do que fazer com um exemplo concreto do que não fazer ao revisar a saída.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.