Фронтенд и UI
UI-UX Pro Max · UI Styling
Собирает доступные интерфейсы из компонентов shadcn и утилит Tailwind.
Что это
Совмещает слой компонентов shadcn на примитивах Radix, слой стилизации на утилитах Tailwind и слой визуального дизайна на canvas. Включает референсные файлы по темизации, доступности, правилам адаптивности и кастомизации.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
Почему это важно для дизайна
- Диалоги и меню наследуют управление фокусом от Radix, поэтому доступность не приделывают задним числом.
- Цвета темы живут в CSS-переменных, поэтому тёмный режим остаётся согласованным.
- Брейкпойнты mobile-first означают, что раскладка стартует с малого и наращивается вверх.
Что внутри
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Как установить
UI-UX Pro Max · UI Styling
-
Клонируйте репозиторий.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Укажите Codex на файл скилла.
cli/assets/skills/ui-styling/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Запустите npx shadcn@latest init, чтобы настроить фреймворк и тему.
-
Добавляйте компоненты через npx shadcn@latest add button card dialog form.
-
Запустите scripts/tailwind_config_gen.py, чтобы сгенерировать конфиг с кастомными токенами.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.