Дизайн-система и UI-аудит: контрастность, focus states, touch targets, 161 цветовая палитра, 57 шрифтовых сочетаний. Поддержка 10 стеков: React, SwiftUI, Flutter и другие.

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

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

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

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

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

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

Не нужен

Чистая разработка бэкенд-логики
Только проектирование 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 для поиска компонентов и получения примеров.

ui-ux-pro-maxпрофессиональный аудит UI/UX

Установка