Frontend e UI
Dither Background
Sfondo canvas con dithering Bayer 4x4 visibile e pixel quadrati.
Che cos’è
Una ricetta canvas che rende un campo procedurale quasi nero da value noise, FBM e una soglia Bayer 4x4, disegnato come celle quadrate ingrandite.
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
Perché conta per il design
- Le celle ingrandite tengono leggibile la matrice di dithering invece di collassare in grana di pellicola.
- Una palette monocromatica a sei passi tiene leggibile la tipografia in primo piano senza un overlay pesante.
- Vignettatura e massa fuori asse danno un’unica area focale luminosa, non una luminosità uniforme.
Cosa copre
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
Come installarlo
Dither Background
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/dither-background/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Metti il canvas fisso dietro al contenuto e imposta pointer-events a none.
-
Regola cellSize tra 5px e 10px per la leggibilità della matrice.
-
Regola i valori di wave, cloud, ridge e vignette per modellare la massa.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.