Frontend & UI
Dither Background
Canvas background with visible 4x4 Bayer dithering and square pixels.
What it is
A canvas recipe rendering a near-black procedural field from value noise, FBM, and a 4x4 Bayer threshold, drawn as enlarged square cells.
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
Why it matters for design
- Enlarged cells keep the dither matrix legible instead of collapsing into film grain.
- Six-step monochrome palette holds foreground type readable without a heavy overlay.
- Vignette and off-axis mass give one bright focal area, not even brightness.
What it covers
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
How to install
Dither Background
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/dither-background/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Drop the fixed canvas behind content and set pointer-events to none.
-
Tune cellSize between 5px and 10px for matrix legibility.
-
Adjust wave, cloud, ridge, and vignette values to shape the mass.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.