Frontend & UI
Dither Background
Canvas-Hintergrund mit sichtbarem 4x4-Bayer-Dithering und quadratischen Pixeln.
Worum es geht
Ein Canvas-Rezept, das ein fast schwarzes prozedurales Feld aus Value Noise, FBM und einem 4x4-Bayer-Threshold rendert, gezeichnet als vergrößerte quadratische Zellen.
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
Warum das fürs Design zählt
- Vergrößerte Zellen halten die Dither-Matrix lesbar, statt in Filmkorn zu zerfallen.
- Eine sechsstufige monochrome Palette hält Vordergrundschrift lesbar ohne schweres Overlay.
- Vignette und außermittige Masse geben einen hellen Fokusbereich statt gleichmäßiger Helligkeit.
Was es abdeckt
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
So installierst du es
Dither Background
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/dither-background/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Leg das fixierte Canvas hinter den Content und setz pointer-events auf none.
-
Justiere cellSize zwischen 5px und 10px für die Lesbarkeit der Matrix.
-
Passe wave-, cloud-, ridge- und vignette-Werte an, um die Masse zu formen.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.