Установка скиллов и плагинов OpenClaw осуществляется на ваш страх и риск. Все файлы были получены из открытых источников и предоставляются «как есть». Мы не гарантируем их корректную работу, безопасность или совместимость с вашей системой. Перед установкой настоятельно рекомендуется ознакомиться с содержимым кода и убедиться, что вы понимаете, какие изменения будут внесены в вашу систему.
Название: ui-ux-design
Описание: Современные принципы, паттерны и лучшие практики UI/UX-дизайна для веб- и мобильных приложений. Используется при создании интерфейсов, проектировании макетов, выборе цветовых палитр, внедрении адаптивного дизайна, обеспечении доступности (WCAG) и разработке визуально привлекательных цифровых продуктов.
Когда использовать
Активируйте эти принципы в следующих случаях:
- Создание или редизайн веб- и мобильных интерфейсов
- Выбор цветовой палитры, типографики и структуры
- Реализация адаптивного (mobile-first) дизайна
- Обеспечение доступности по стандартам WCAG
- Разработка дизайн-систем и компонентов
- Проработка микро-взаимодействий и анимаций
Основные принципы дизайна
1. Mobile-First — всегда
- Начинайте с ширины 320px (минимальный экран смартфона)
- Брейкпоинты: 576px (телефон), 768px (планшет), 992px (ноутбук), 1200px (десктоп)
- По умолчанию — одноколоночная структура, расширение только при наличии пространства
2. Визуальная иерархия
Управляйте вниманием пользователя с помощью:
- Размера: чем больше элемент — тем он важнее
- Цвета: яркие и контрастные элементы привлекают внимание
- Отступов: больше пространства — больше акцент
- Близости: связанные элементы группируются
- Контраста: минимум 4.5:1 для текста
3. Белое пространство — ваш инструмент
- Используйте шаг 8px: 8, 16, 24, 32, 48, 64
- Между секциями: минимум 48–64px
- Внутренние отступы карточек: 24–32px
Цветовая система
Создайте шкалу основного цвета (50–900):
- Primary: фирменный цвет (CTA, ссылки, активные состояния)
- Neutral: оттенки серого (фон, текст, границы)
- Semantic: состояния — успех (зелёный), ошибка (красный), предупреждение (жёлтый/оранжевый)
Инструменты: Huevy, Coolors, Adobe Color
Типографика
Базируется на шаге 8px:
- text-xs: 12px / 16px
- text-sm: 14px / 20px
- text-base: 16px / 24px (основной текст)
- text-lg: 18px / 28px
- text-xl: 20px / 28px
- text-2xl: 24px / 32px
- text-3xl: 30px / 36px (заголовки секций)
- text-4xl: 36px / 40px
- text-5xl: 48px
Рекомендация: не более двух шрифтов (основной sans-serif + опциональный serif для заголовков)
Паттерны компоновки
- CSS Grid: для двумерных макетов (структура страниц)
- Flexbox: для одномерных компоновок (внутри компонентов)
- Auto-fit сетка: repeat(auto-fit, minmax(280px, 1fr))
Микровзаимодействия
- Hover: масштаб 1.05 (ощущение кликабельности)
- Click: масштаб 0.95 (тактильный отклик)
- Длительность: 0.2–0.3 секунды
- Анимируйте только transform и opacity (GPU-ускорение)
Доступность (WCAG 2.2)
- Контраст текста: минимум 4.5:1 (обычный), 3:1 (крупный)
- UI-элементы: минимум 3:1
- Навигация с клавиатуры: логичный tab-порядок и видимый фокус
- ARIA-атрибуты для кнопок, изображений и интерактивных элементов
Технологический стек (Shadcn/ui + Tailwind)
Пример настройки проекта (Next.js):
npx create-next-app@latest project-name --typescript --tailwind --app
cd project-name
npx shadcn@latest initДобавление компонентов:
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add calendarКомпоненты размещаются в components/ui/ и полностью контролируются разработчиком.
Файл из источника