Frontend & UI
Dither Background
Fundo em canvas com dithering Bayer 4x4 visível e pixels quadrados.
O que é
Uma receita de canvas que renderiza um campo procedural quase preto a partir de value noise, FBM e um limiar Bayer 4x4, desenhado como células quadradas ampliadas.
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and
Por que isso importa para design
- As células ampliadas mantêm a matriz de dither legível em vez de colapsar em granulação de filme.
- Uma paleta monocromática de seis passos mantém o texto em primeiro plano legível sem um overlay pesado.
- A vinheta e a massa fora do eixo dão uma única área focal iluminada, não um brilho uniforme.
O que cobre
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
Como instalar
Dither Background
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/dither-background/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Coloque o canvas fixo atrás do conteúdo e defina pointer-events como none.
-
Ajuste o cellSize entre 5px e 10px para a legibilidade da matriz.
-
Ajuste os valores de wave, cloud, ridge e vignette para moldar a massa.
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.