UI UX Pro Max — ИИ-скилл для дизайна интерфейсов

UI UX Pro Max — это AI-скилл, который предоставляет дизайн-интеллект для создания профессиональных интерфейсов. Он работает с 22 фреймворками и платформами, от React и Next.js до SwiftUI и Flutter, и автоматически генерирует полные дизайн-системы на основе требований проекта.

Основные возможности

Скилл содержит 192 правила рассуждений, специализированные по 8 категориям индустрий: Tech и SaaS, Finance, Healthcare, E-commerce, Services, Creative, Lifestyle, Emerging Technologies. Каждое правило включает рекомендуемую структуру лендинга, приоритет стилей, палитру цветов, типографику, ключевые эффекты и анти-паттерны. Например, для fintech/банкинга скилл рекомендует избегать «AI purple/pink gradients» и использовать консервативные палитры с акцентом на доверие.

Каталог включает 79 UI-стилей (50 активных, 29 дополнительных, 9 deprecated) с устойчивыми ID и алиасами: Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI и другие. Активный набор охватывает 43 общих визуальных семейства, 2 мобильных стиля, 3 официальных платформенных дизайн-системы (Fluent 2, Shopify Polaris, Adobe Spectrum), 1 платформенный материал (Liquid Glass от Apple) и 1 аналитический стиль.

Дополнительно: 192 цветовых палитры, привязанные 1:1 к 192 типам продуктов, 74 комбинации шрифтов с импортами Google Fonts, 25 типов графиков для дашбордов и аналитики, 119 UX-гайдлайнов по доступности, anti-паттернам и resilient UI.

Генерация дизайн-системы

Флагманская функция v2.0 — Design System Generator. При запросе пользователя скилл выполняет параллельный поиск по 5 доменам (тип продукта, стиль, цвета, паттерны лендингов, затем BM25-движок рассуждений сопоставляет результаты и выдаёт полную дизайн-систему:

• структуру лендинга (Hero-Centric + Social Proof, конверсионные CTA)
• палитру цветов с HEX-кодами и пояснениями (например, «Calming palette with gold accents for luxury feel»)
• типографику с настроением и Google Fonts ссылками
• эффекты и анимации (soft shadows, gentle hover states)
• список анти-паттернов для конкретной индустрии
• чек-лист проверки доставки (контраст 4.5:1, accessible focus, prefers-reduced-motion, responsive на 375/768/1024/1440px)

Процесс генерации выглядит так: запрос пользователя → мультидоменный поиск (192 категории продуктов, 79 стилей, 192 палитры, 34 паттерна лендингов, 74 шрифтовых пары) → reasoning engine с BM25-ранжированием → полный вывод с pattern + style + colors + typography + effects + anti-patterns + checklist.

Установка и использование

Скилл устанавливается через CLI или Claude Marketplace:

# Через CLI (рекомендуется)
npm install -g ui-ux-pro-max-cli
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai opencode    # OpenCode
uipro init --ai gemini      # Gemini CLI
uipro init --ai universal   # Universal (.agents/skills/)

# Через Claude Marketplace
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

CLI-установщик поддерживает 18 платформ: Claude Code, Cursor, Windsurf, Antigravity, GitHub Copilot, Kiro, Codex CLI, Roo Code, Gemini CLI, OpenCode, Continue, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale, Trae, Qoder.

После установки скилл активируется автоматически при запросах на создание UI/UX. Достаточно написать на естественном языке:

Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce
Build a fintech banking app with dark theme

Для Kiro, GitHub Copilot, Roo Code и KiloCode доступен workflow-режим через slash-команду: /ui-ux-pro-max Build a landing page for my SaaS product.

Поддерживаемые стеки

Для каждого стека скилл предоставляет специфичные гайдлайны. Web-поиск версионный — запросы без указания старого major-версии возвращают актуальное руководство, а запросы с legacy-терминами (например, «Svelte 4» или «Next.js 15») — только курированные legacy-строки с пометкой Status и Applies To.

Продвинутое использование

Для прямого доступа к генератору дизайн-системы — команда design-system с Python-скриптом:

# Генерация дизайн-системы с ASCII-выводом
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Генерация с Markdown-выводом
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Поиск по доменам
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 "dashboard" --domain chart

# Stack-specific гайдлайны
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

Дизайн-систему можно сохранить в файлы для кроссессионного использования с паттерном Master + Overrides:

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

Это создаёт структуру design-system/myapp/MASTER.md (глобальные правила) и design-system/myapp/pages/dashboard.md (overrides для конкретных страниц). При сборке новой страницы сначала проверяется файл overrides — если существует, его правила приоритетнее Master.

Для получения полных данных без обрезки используйте флаг --json:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json

Resilient Text и компактный UI

Скилл включает гайдлайны по типичным production-проблемам: баланс заголовков — progressive enhancement, не гарантия; рефлоу текста без обрезки на узких ширинах, при зуме и масштабировании; поведение чипов и бейджей при длинных данных — wrap или операбельный +n disclosure; accessible-семантика интерактивных элементов с visible focus и programmatic state; корректная обработка прерванных анимаций с сохранением финального семантического состояния. Бейджи не могут полагаться только на цвет — интерактивные чипы требуют нативной семантики, видимого фокуса и программного состояния.

Архитектура

Исходный код структурирован как шаблонная система генерации. Все платформенные файлы (.cursor/, .windsurf/, .kiro/) генерируются динамически CLI-установщиком. Исходная истина находится в src/ui-ux-pro-max/ (данные в CSV, скрипты на Python, шаблоны), а CLI в cli/ синхронизирует ассеты и собирает дистрибутив. Проект использует semantic-release с Conventional Commits для автоматических релизов — dev-ветка создаёт бета-версии, main — стабильные.

Python 3.x требуется для скриптов поиска (стандартная библиотека, без внешних зависимостей и сетевых вызовов).