Фронтенд и UI
design-skills · Dithered
Затенение точечным паттерном и ограниченная палитра для ретро-экранов с высоким контрастом.
Что это
Скилл-гайдлайн для дизеринг-интерфейсов, которые точечными паттернами имитируют оттенки из ограниченной палитры. Основной текст Open Sans, заголовки Space Grotesk, IBM Plex Mono, синий и фиолетовый акценты.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Почему это важно для дизайна
- Точечные паттерны заменяют градиенты, поэтому затенение выживает при намеренно урезанном наборе цветов.
- Высококонтрастный рендер держит текст читаемым даже там, где поверхности несут плотную текстуру паттерна.
- Правила запрещают декоративное движение, не давая ретро-приёму превратиться в визуальный шум.
Что внутри
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
Как установить
design-skills · Dithered
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/dithered/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Сначала задайте Codex лимит палитры, затем дайте ему вывести правила затенения на паттернах.
-
Запросите состояния пустого экрана, загрузки и ошибки, чтобы поверхности с паттерном оставались читаемыми.
-
Проверьте области нажатия и состояния фокуса, которые этот скилл отдельно оговаривает.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.