Фронтенд и UI
UI-UX Pro Max · Banner Design
Проектирует баннеры нужного размера в HTML, а затем экспортирует их в PNG.
Что это
Процесс из пяти шагов для баннеров: собрать требования, изучить арт-дирекшн, собрать баннер на HTML и CSS с сгенерированными визуалами, снять скриншот в точных пикселях платформы, а затем показать варианты для итерации.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
Почему это важно для дизайна
- Каждый баннер экспортируется в точных пикселях платформы, поэтому ничто не обрезается и не масштабируется.
- Сгенерированные визуалы рендерятся без текста, поэтому заголовки остаются чётким HTML.
- Три арт-дирекшна на запрос, поэтому сравнение идёт до окончательного выбора.
Что внутри
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
Как установить
UI-UX Pro Max · Banner Design
-
Клонируйте репозиторий.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Укажите Codex на файл скилла.
cli/assets/skills/banner-design/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Ответьте на вопросы о цели, платформе, содержании, бренде, стиле и количестве.
-
Он собирает по одному HTML-баннеру на каждый арт-дирекшн с применёнными безопасными зонами.
-
Он снимает каждый в заданной ширине и высоте, сжимая файлы сверх лимита.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.