UI/UX Pro Max — Дизайн-интеллект

Исчерпывающее руководство по дизайну для веб- и мобильных приложений. Содержит 50+ стилей, 161 цветовую палитру, 57 пар шрифтов, 161 тип продукта с правилами обоснования, 99 UX-правил и 25 типов диаграмм для 10 технологических стеков. База данных с поиском и рекомендациями на основе приоритетов.

Когда применять

Этот скилл следует использовать, когда задача связана со структурой UI, визуальными дизайн-решениями, паттернами взаимодействия или контролем качества UX.

Обязательно использовать

• Проектирование новых страниц (Landing Page, Dashboard, Admin, SaaS, Mobile App)
• Создание или рефакторинг UI-компонентов (кнопки, модалки, формы, таблицы, графики и т.д.)
• Выбор цветовых схем, типографических систем, стандартов отступов или систем разметки
• Проверка UI-кода на UX, доступность или визуальную согласованность
• Реализация навигационных структур, анимаций или адаптивного поведения
• Принятие дизайн-решений на уровне продукта (стиль, иерархия информации, выражение бренда)
• Улучшение воспринимаемого качества, ясности или удобства использования интерфейсов

Рекомендуется

• UI выглядит «недостаточно профессионально», но причина неясна
• Получение отзывов об удобстве использования или опыте
• Предрелизная оптимизация качества UI
• Согласование кросс-платформенного дизайна (Web / iOS / Android)
• Создание дизайн-систем или библиотек переиспользуемых компонентов

Не нужен

• Чистая разработка бэкенд-логики
• Только проектирование API или базы данных
• Оптимизация производительности, не связанная с интерфейсом
• Инфраструктура или DevOps
• Невизуальные скрипты или задачи автоматизации

Критерий решения: Если задача изменит, как функциональность выглядит, ощущается, движется или с ней взаимодействуют — этот скилл нужно использовать.

Категории правил по приоритету

Приоритет	Категория	Влияние	Ключевые проверки	Антипаттерны
1	Доступность	КРИТИЧНО	Контраст 4.5:1, Alt-текст, Навигация с клавиатуры, Aria-метки	Убирать кольца фокуса, Кнопки только с иконкой без меток
2	Касание и взаимодействие	КРИТИЧНО	Минимальный размер 44×44px, Отступ 8px+, Обратная связь при загрузке	Опора только на hover, Мгновенные смены состояния (0ms)
3	Производительность	ВЫСОКОЕ	WebP/AVIF, Ленивая загрузка, Резервирование пространства (CLS < 0.1)	Layout thrashing, Cumulative Layout Shift
4	Выбор стиля	ВЫСОКОЕ	Соответствие типу продукта, Согласованность, SVG-иконки (не эмодзи)	Смешивать flat и skeuomorphic произвольно, Эмодзи как иконки
5	Разметка и адаптивность	ВЫСОКОЕ	Mobile-first breakpoints, Viewport meta, Без горизонтального скролла	Горизонтальный скролл, Фиксированные px-ширины, Отключать zoom
6	Типографика и цвет	СРЕДНЕЕ	Base 16px, Line-height 1.5, Семантические цветовые токены	Текст < 12px для тела, Серый-на-сером, Raw hex в компонентах
7	Анимация	СРЕДНЕЕ	Длительность 150–300ms, Анимация передаёт смысл, Пространственная непрерывность	Только декоративная анимация, Анимация width/height, Без reduced-motion
8	Формы и обратная связь	СРЕДНЕЕ	Видимые метки, Ошибка рядом с полем, Вспомогательный текст	Только placeholder как метка, Ошибки только вверху
9	Паттерны навигации	ВЫСОКОЕ	Предсказуемое «назад», Bottom nav ≤5, Deep linking	Перегруженная навигация, Сломанная кнопка «назад»
10	Графики и данные	НИЗКОЕ	Легенды, Тултипы, Доступные цвета	Опора только на цвет для передачи смысла

1. Доступность (КРИТИЧНО)

• color-contrast — минимум 4.5:1 для обычного текста (крупный текст 3:1)
• focus-states — видимые кольца фокуса на интерактивных элементах (2–4px)
• alt-text — описательный alt-текст для значимых изображений
• aria-labels — aria-label для кнопок только с иконкой
• keyboard-nav — порядок Tab совпадает с визуальным порядком; полная поддержка клавиатуры
• form-labels — используйте label с атрибутом for
• skip-links — «Перейти к основному контенту» для пользователей клавиатуры
• heading-hierarchy — последовательные h1→h6, без пропуска уровней
• color-not-only — не передавайте информацию только цветом (добавьте иконку/текст)
• reduced-motion — соблюдайте prefers-reduced-motion; уменьшайте/отключайте анимации по запросу

2. Касание и взаимодействие (КРИТИЧНО)

• touch-target-size — минимум 44×44pt (Apple) / 48×48dp (Material); расширяйте область касания за визуальные границы при необходимости
• touch-spacing — минимум 8px/8dp между целевыми областями касания
• hover-vs-tap — используйте click/tap для основных взаимодействий; не полагайтесь только на hover
• loading-buttons — отключайте кнопку во время асинхронных операций; показывайте спиннер или прогресс
• tap-delay — используйте touch-action: manipulation для сокращения задержки 300ms (Web)
• press-feedback — визуальная обратная связь при нажатии (ripple/highlight)
• haptic-feedback — используйте тактильный отклик для подтверждений и важных действий; избегайте злоупотребления
• safe-area-awareness — держите основные элементы касания вдали от чёлки, Dynamic Island, панели жестов и краёв экрана

3. Производительность (ВЫСОКОЕ)

• image-optimization — используйте WebP/AVIF, адаптивные изображения (srcset/sizes), ленивую загрузку
• image-dimension — объявляйте width/height или используйте aspect-ratio для предотвращения сдвигов разметки
• font-loading — используйте font-display: swap/optional для предотвращения FOIT
• lazy-loading — ленивая загрузка некритичных компонентов через dynamic import / route-level splitting
• virtualize-lists — виртуализируйте списки от 50+ элементов
• progressive-loading — используйте скелетные экраны / shimmer вместо долгих блокирующих спиннеров для операций >1с
• input-latency — задержка ввода менее ~100ms для нажатий/прокрутки
• debounce-throttle — используйте debounce/throttle для высокочастотных событий (scroll, resize, input)

4. Выбор стиля (ВЫСОКОЕ)

• style-match — подбирайте стиль под тип продукта
• consistency — используйте один стиль на всех страницах
• no-emoji-icons — используйте SVG-иконки (Heroicons, Lucide), не эмодзи
• platform-adaptive — соблюдайте платформенные идиомы (iOS HIG vs Material)
• dark-mode-pairing — проектируйте светлый/тёмный варианты вместе для согласованности
• primary-action — каждый экран должен иметь только один основной CTA

5. Разметка и адаптивность (ВЫСОКОЕ)

• viewport-meta — width=device-width initial-scale=1 (никогда не отключать zoom)
• mobile-first — проектируйте сначала для мобильных, затем масштабируйте до планшета и десктопа
• breakpoint-consistency — системные точки останова (например, 375 / 768 / 1024 / 1440)
• readable-font-size — минимум 16px основной текст на мобильных (избегает автозума iOS)
• line-length-control — мобильные 35–60 символов в строке; десктоп 60–75
• spacing-scale — используйте систему отступов с шагом 4pt/8dp (Material Design)
• viewport-units — предпочитайте min-h-dvh вместо 100vh на мобильных

6. Типографика и цвет (СРЕДНЕЕ)

• line-height — используйте 1.5–1.75 для основного текста
• font-pairing — согласовывайте характер шрифтов заголовков и тела
• font-scale — согласованная типографическая шкала (например, 12 14 16 18 24 32)
• color-semantic — определяйте семантические цветовые токены (primary, secondary, error, surface) вместо raw hex в компонентах
• color-dark-mode — тёмный режим использует десатурированные/более светлые тональные варианты, а не инвертированные цвета
• weight-hierarchy — используйте font-weight для иерархии: жирные заголовки (600–700), обычное тело (400)
• number-tabular — используйте tabular/monospaced цифры для столбцов данных, цен и таймеров

7. Анимация (СРЕДНЕЕ)

• duration-range — 150–300ms для стандартных переходов; 300–500ms для сложных (Material Motion)
• easing-curves — используйте ease-out для элементов входа, ease-in для выхода, ease-in-out для перемещения (Material Motion)
• spatial-continuity — сохраняйте пространственную непрерывность: элементы движутся к источнику/от источника (Apple HIG)
• no-width-height-animation — не анимируйте width/height; вместо этого используйте transform/opacity
• motion-meaning — каждая анимация должна передавать состояние или причинно-следственную связь; избегайте только декоративных анимаций
• reduce-motion-required — ОБЯЗАТЕЛЬНО: реализуйте prefers-reduced-motion для всех анимаций

8. Формы и обратная связь (СРЕДНЕЕ)

• visible-labels — каждое поле формы должно иметь видимую постоянную метку; не используйте только placeholder
• error-placement — размещайте сообщения об ошибках непосредственно под проблемным полем, а не только вверху
• progressive-disclosure — показывайте поля по мере необходимости; не перегружайте форму сразу
• loading-state — показывайте состояние загрузки для любого действия, занимающего более 100ms
• success-confirmation — давайте чёткую обратную связь после успешной отправки
• inline-validation — валидируйте при unfocus (не при каждом нажатии), если возможно

9. Паттерны навигации (ВЫСОКОЕ)

• back-button-behavior — кнопка «Назад» всегда возвращает на один логический уровень вверх; никаких сюрпризов
• tab-bar-count — нижняя навигация должна иметь ≤5 элементов (Apple HIG, Material)
• deep-linking — каждый экран должен иметь уникальный URL или маршрут для навигации и обмена
• nav-hierarchy — максимум 3 уровня глубины навигации; более глубокие маршруты требуют хлебных крошек
• active-state — текущий раздел должен быть чётко выделен в навигации

10. Графики и данные (НИЗКОЕ)

• chart-legend — всегда включайте легенду или метки для многосерийных данных
• chart-tooltips — используйте тултипы для отображения точных значений при наведении/касании
• accessible-colors — цвета графиков должны работать для дальтоников; используйте паттерны/формы в дополнение к цвету
• responsive-charts — графики должны корректно изменять размер; на мобильных показывайте упрощённый вид

Поддерживаемые технологические стеки

• React, Next.js, Vue, Svelte
• SwiftUI, React Native, Flutter
• Tailwind CSS, shadcn/ui, HTML/CSS

Интеграции

Интегрируется с shadcn/ui MCP для поиска компонентов и получения примеров.