Frontend & UI
design-skills · Dithered
Sombreamento em padrão de pontos e paleta limitada para telas retrô de alto contraste.
O que é
Uma skill de guideline para interfaces com dithering que usam padrões de pontos para simular tons a partir de uma paleta limitada. Corpo em Open Sans, display em Space Grotesk, IBM Plex Mono, destaques em azul e violeta.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Por que isso importa para design
- Padrões de pontos substituem os gradientes, então o sombreamento sobrevive a um conjunto de cores propositalmente restrito.
- A renderização de alto contraste mantém o texto legível mesmo quando as superfícies carregam textura pesada de padrão.
- As regras proíbem movimento decorativo, evitando que o tratamento retrô vire ruído visual.
O que cobre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
Como instalar
design-skills · Dithered
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/dithered/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Diga ao Codex o limite de paleta primeiro e deixe-o derivar as regras de sombreamento por padrão.
-
Peça estados vazio, de carregamento e de erro para que as superfícies com padrão sigam legíveis.
-
Verifique as áreas de clique e os estados de foco, que esta skill aponta de forma explícita.
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.