Дизайн-системы
UI-UX Pro Max · Design System
Трёхслойные дизайн-токены, спецификации компонентов и генерация слайдов по токенам.
Что это
Скилл дизайн-системы, покрывающий слои примитивных, семантических и компонентных токенов как CSS-переменные, плюс спецификации состояний компонентов и генератор слайдов, который собирает презентации из тех же токенов.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
Почему это важно для дизайна
- Слой семантических токенов сводит переключение светлой и тёмной темы к смене конфига, а не к переписыванию.
- Спецификации компонентов сводят в таблицу состояния default, hover, active и disabled, поэтому в передаче не остаётся двусмысленностей.
- Валидатор помечает захардкоженные hex-значения, удерживая компоненты и слайды на системе токенов.
Что внутри
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Как установить
UI-UX Pro Max · Design System
-
Клонируйте репозиторий.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Укажите Codex на файл скилла.
cli/assets/skills/design-system/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Запустите generate-tokens.cjs по JSON-конфигу токенов, чтобы получить файл CSS-переменных.
-
Попросите у Codex спецификации компонентов, затем прогоните validate-tokens.cjs по src/, чтобы поймать сырые значения.
-
Используйте search-slides.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. Свой ключ, свой результат.