Фронтенд и UI
Dither Background
Canvas-фон с видимым дизерингом 4x4 по Байеру и квадратными пикселями.
Что это
Canvas-рецепт, рендерящий почти чёрное процедурное поле из value noise, FBM и порога Байера 4x4, отрисованное увеличенными квадратными ячейками.
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
Почему это важно для дизайна
- Увеличенные ячейки держат матрицу дизеринга различимой, а не сваливают её в киношное зерно.
- Монохромная палитра из шести ступеней держит текст переднего плана читаемым без тяжёлого оверлея.
- Виньетка и смещённая от центра масса дают одну яркую фокусную зону, а не ровную яркость.
Что внутри
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
Как установить
Dither Background
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/dither-background/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Поместите фиксированный canvas за контент и задайте pointer-events в none.
-
Настройте cellSize между 5px и 10px ради различимости матрицы.
-
Правьте значения wave, cloud, ridge и vignette, чтобы вылепить массу.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.