Фронтенд-дизайн и UI-компоненты

Фронтенд-дизайн: генерация UI-компонентов кодом

Когда активируется этот навык

Пользователь просит:

• Нарисовать / сверстать UI-компонент, экран, блок, страницу
• Показать варианты дизайна (кнопки, карточки, модалки, формы, лендинги)
• Визуализировать интерфейс, макет, прототип
• Создать mockup / wireframe / UI-концепт

КРИТИЧЕСКИ ВАЖНО

• Интерактивный (hover, клик, анимация)
• Редактируемый (пользователь может попросить изменить)
• Копируемый (можно вставить в проект)

Среда исполнения

• React 18 (useState, useEffect, useCallback, useMemo, useRef)
• Recharts 2 (для графиков, если нужны)
• Tailwind CSS (все утилиты)
• Lucide React (иконки)

Дизайн-принципы

Цвет и тема

• Доминантный цвет + резкий акцент > робкая равномерная палитра
• Варьируй темы: тёмная, светлая, неон, пастель, монохром, бруталист

Композиция и пространство

• Асимметрия, нестандартные сетки, перекрытие элементов
• Щедрые отступы ИЛИ контролируемая плотность — не посередине
• Grid и Flexbox для лейаутов
• Элементы, выходящие за рамки (negative margins, absolute positioning)

Анимация и интерактивность

• CSS transitions для hover/focus
• Каскадное появление (staggered animation-delay): каждый элемент появляется с задержкой i * 0.08s
• Keyframes определяй в теге style внутри компонента
• Hover-эффекты: scale, shadow, цвет, border — что-то должно происходить при наведении
• Для сложной анимации — useEffect + requestAnimationFrame

Фоны и текстуры

• Градиенты: mesh, radial, conic — не только linear
• Шум / grain: SVG filter с feTurbulence
• Паттерны: точки, линии, сетки через CSS или SVG
• Glassmorphism: backdrop-filter blur + полупрозрачность

Протокол работы

Шаг 1. Понимание задачи

Из запроса пользователя определи:

1. Что создаём — компонент, секция, страница, экран приложения
2. Контекст — для чего (лендинг, дашборд, мобильное приложение, презентация)
3. Настроение — минимализм, роскошь, игривость, технологичность, бруталист
4. Функциональность — какие действия возможны (клик, ввод, переключение)

Шаг 2. Генерация вариантов

Если просят варианты — создай 2-4 артефакта с ПРИНЦИПИАЛЬНО разными подходами:

• Разные цветовые схемы (тёмная vs светлая vs акцентная)
• Разные стили (минималист vs максималист vs бруталист)
• Разные лейауты (горизонтальный vs вертикальный vs карточки vs список)

Каждый вариант должен отличаться не просто цветом, а концепцией.

Шаг 3. Код

Полный, рабочий JSX. Без заглушек, без "// TODO", без пропущенных стилей.

Inline styles предпочтительнее classNames (артефакт самодостаточен), но Tailwind тоже ОК.

Шаблоны типовых компонентов

Кнопка с эффектом

useState для hover. При наведении — смена фона с transparent на accent, цвета текста, лёгкий scale(1.02). Transition: all 0.25s ease. Border: 2px solid accent. BorderRadius: 12.

Лендинг-секция

Hero: полный экран, mesh-градиент фон, крупная типографика (clamp для адаптивности), CTA-кнопка с анимацией. Features: grid auto-fit minmax(300px, 1fr), карточки с иконками и hover.

Адаптивность

Для артефактов, которые должны работать на разных экранах, используй: display: grid, gridTemplateColumns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)), gap: 24

Примеры запросов и реакций

«Нарисуй блок мышления как у Claude» — React-артефакт с анимированным блоком: typing indicator, поток текста, fade-in абзацев, тёмная тема.

«Покажи 3 варианта кнопки» — 3 артефакта: (1) ghost-кнопка с неоновым свечением, (2) solid с градиентом и ripple-эффектом, (3) бруталист с жирной рамкой и смещённой тенью.

«Сделай карточку товара» — Интерактивная карточка с hover-zoom на фото (CSS), переключателем размеров, анимированной кнопкой «В корзину».

«Создай лендинг для AI-стартапа» — Полноэкранный hero с mesh-градиентом, анимированными частицами, плавающей навигацией, секциями features + pricing.