UI UX Pro Max: как научить кодинг-агента собирать интерфейсы, а не серые карточки

Что получается без скила

Агент уверенно собирает рабочую страницу: форма отправляется, роуты открываются, в консоли чисто. Проблема в другом — интерфейс выглядит как учебный проект. Системный шрифт, серые карточки с одинаковыми тенями, синяя кнопка по центру, отступы на глаз. Через десять таких проектов замечаешь, что все они похожи друг на друга, а правки дизайна занимают больше времени, чем сама вёрстка.

Причина не в том, что модель плохо пишет код. У неё нет опоры: какие шрифты сочетаются, какая палитра уместна для клиники, сколько блоков должно быть на странице записи, что считается ошибкой для банковского интерфейса. Обычно эти решения принимает дизайнер или готовый шаблон. UI UX Pro Max подкладывает агенту такую опору в виде скила.

Что именно представляет собой скил

UI UX Pro Max — не отдельное приложение и не генератор кода. Это папка скила, которую CLI раскладывает в каталог выбранной среды: .claude/skills/ui-ux-pro-max для Claude Code, аналогичные пути для Codex, Cursor, OpenCode, Windsurf и ещё двух десятков ассистентов. Внутри три части:

• инструкция — когда и как агенту применять набор правил;
• данные — CSV-таблицы со стилями, палитрами, шрифтами, отраслевыми правилами и UX-чек-листами;
• скрипт поиска на Python, который по текстовому запросу достаёт из таблиц нужные строки и собирает из них дизайн-систему.

Дальше агент работает как обычно: читает рекомендации, пишет компоненты, проверяет результат по списку. Скил не подменяет модель, а задаёт ей рамки и конкретные значения — цвета в hex, названия шрифтов, порядок блоков.

Что происходит на один запрос

Фраза «сделай лендинг для стоматологии» запускает цепочку из пяти параллельных поисков по локальным таблицам:

1. тип продукта — стоматология попадает в отраслевую категорию с готовым профилем;
2. стиль интерфейса — из каталога выбираются подходящие визуальные направления;
3. палитра — цвета под отрасль, а не случайный набор;
4. структура лендинга — какие блоки должны идти и в каком порядке;
5. пара шрифтов — сочетание заголовочного и текстового шрифта со ссылками на Google Fonts.

Результаты ранжируются алгоритмом BM25 по релевантности запросу, затем срабатывают правила: для отрасли отсекаются неподходящие приёмы и добавляются обязательные проверки. На выходе агент получает готовую дизайн-систему, а не общие советы вроде «используйте хороший контраст».

PATTERN: Hero-Centric + Social Proof
STYLE:   Soft UI Evolution
         soft shadows, calming, premium feel
COLORS:  primary #E8B4B8, secondary #A8D5BA,
         CTA #D4AF37, background #FFF5F5
FONTS:   Cormorant Garamond / Montserrat
AVOID:   neon colors, harsh animations,
         AI purple/pink gradients
CHECK:   contrast 4.5:1, visible focus states,
         text reflow at 375-1440 px

Такой блок выдаётся за секунды и не требует сети: скрипт работает с локальными CSV, ничего не скачивает и не отправляет наружу.

Что лежит в данных

Объём каталога удобнее показать таблицей — это не маркетинговые цифры, а строки в CSV-файлах репозитория.

Отдельно стоит отметить раздел про «хрупкий» текст: длинные заголовки, чипы, бейджи и подписи кнопок. Это частая боль при генерации интерфейсов — на широком экране всё красиво, на 375 px подпись вылезает за кнопку. В скиле для таких случаев прописаны правила переноса, доступного сокращения и поведения при масштабировании шрифта.

Установка и первый запуск

Скил ставится глобальным CLI. Нужен Node.js и Python 3 — второй требуется только для скрипта поиска, сторонние пакеты он не использует.

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude

Вместо claude подставляется своя среда: codex, cursor, opencode, windsurf, copilot, gemini, openclaw и другие. Ключ --global ставит скил в домашний каталог, чтобы он работал во всех проектах, а --dry-run показывает план установки без записи файлов. Для Claude Code есть альтернатива через маркетплейс плагинов:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

После установки ничего запускать вручную не нужно: скил активируется сам, когда в запросе есть работа над интерфейсом. В средах с режимом команд он вызывается как /ui-ux-pro-max.

Практические сценарии

1. Новый экран с нуля

Самый простой случай: описать продукт и задачу обычным языком. «Дашборд для аналитики клиники», «мобильный экран оформления заказа», «портфолио с тёмной темой». Агент сам подтянет паттерн, стиль и палитру, а после сборки пройдётся по чек-листу.

2. Перекраска существующего приложения

Более полезный сценарий для тех, у кого проект уже есть. Скил умеет работать как источник темы: агенту дают задачу перевести приложение на выбранный стиль, и он сначала смотрит, какие токены и компоненты уже есть, а потом меняет их пакетами. В README приведён отдельный чек-лист миграции: найти жёстко заданные цвета в стилях и утилитарных классах, сопоставить их с семантическими ролями вроде background, surface, primary, border, заменить по компонентам и после каждой партии проверить контраст, фокус и адаптивность.

3. Дизайн-система, которая переживает сессию

По умолчанию рекомендации живут в контексте одного разговора. Команда --persist сохраняет их в файлы проекта:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard"   --design-system --persist -p "MyApp" --page "dashboard"

Получается структура design-system/myapp/MASTER.md плюс файл исключений для конкретной страницы. При следующей задаче агент сначала читает исключения страницы, а если их нет — общий мастер-файл. Это снимает главную проблему длинных проектов: к десятому экрану агент уже не помнит, какой оттенок серого использовал на первом.

4. Точечный поиск без генерации

Скрипт можно вызывать напрямую, когда нужно быстро посмотреть варианты, не отдавая задачу агенту:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "error summary validation" --domain ux

Домены покрывают стили, типографику, графики, UX-правила, иконки и мотив анимации. Флаг --json отдаёт полные поля без обрезки — полезно, когда вывод в консоли выглядит укороченным.

Где границы

• Это рекомендации, а не готовый код. Скил выбирает стиль, цвета, шрифты и структуру, но вёрстку по-прежнему пишет агент. Если модель проигнорирует инструкцию, результат останется типовым.
• Ограничение длины ответа. В Claude Code большая генерация может упереться в лимит вывода одной реплики. В README советуют дробить задачу и писать результат в файлы частями, а не поднимать лимит вслепую.
• Активных стилей меньше, чем в каталоге. Из 79 поисковых стилей 50 участвуют в обычных рекомендациях, 29 доступны только по явному запросу, 9 считаются устаревшими. Это влияет на предсказуемость выдачи.
• Базовая версия бесплатна не полностью. Открытый репозиторий даёт UI/UX-каталог и генератор дизайн-систем. Брендинг, логотипы, презентации и расширенная архитектура токенов — в платной версии.
• Пример «до/после» — иллюстрация. В README прямо указано, что это вклад сообщества, а не бенчмарк и не проверка скила в рантайме. Оценивать стоит на своих проектах.

Кому подойдёт

Скил имеет смысл, если вы регулярно просите агента делать интерфейсы и устали каждый раз объяснять, какие шрифты, цвета и блоки нужны. Он полезен на старте проекта, когда нет дизайнера, и при перекраске готового приложения, когда нужно привести разрозненные экраны к одной системе. Если у вас уже есть строгий дизайн-гайд и токены, скил будет лишь дополнительным источником идей — он не отменяет вашу систему, а предлагает значения, которые вы можете принять или отклонить.

Для тех, кто только пробует кодинг-агентов, ценность проще: первый же сгенерированный экран выглядит собранным, а не учебным. Дальше можно править конкретные значения, а не переписывать всё с нуля.