Frontend & UI
Dither Background
Fond canvas avec un tramage Bayer 4x4 visible et des pixels carrés.
De quoi il s’agit
Une recette canvas qui rend un champ procédural quasi noir à partir de value noise, de FBM et d’un seuil Bayer 4x4, dessiné en cellules carrées agrandies.
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
Pourquoi ça compte pour le design
- Les cellules agrandies gardent la matrice de tramage lisible au lieu de s’effondrer en grain de film.
- Une palette monochrome à six paliers garde le texte de premier plan lisible sans surcouche lourde.
- Vignette et masse décentrée donnent une seule zone focale lumineuse, pas une luminosité uniforme.
Ce que ça couvre
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
Comment l’installer
Dither Background
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/dither-background/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Placez le canvas fixe derrière le contenu et mettez pointer-events à none.
-
Réglez cellSize entre 5px et 10px pour la lisibilité de la matrice.
-
Ajustez les valeurs de wave, cloud, ridge et vignette pour sculpter la masse.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.