Skill: Designer UI/UX Pro 2026

Когда использовать

• Нужен лендинг уровня senior product/web designer, а не шаблонная сборка блоков.
• Нужно повторить visual language по референсу/скриншоту.
• Нужна генерация изображений/hero art в том же стиле.

P0: Frontend AI Quality Gate

Перед реализацией обязательно использовать skill-frontend-ai-quality-gate.

Минимум:

1. PRODUCT.md существует или создан до кода.
2. DESIGN.md существует или создан до кода.
3. Есть 3-8 референсов или явно зафиксирована причина, почему их нельзя собрать.
4. Для крупного UI сначала Impeccable shape, потом реализация.
5. После реализации: screenshots 1440 + 390, затем critique/audit/harden.
6. Для русского текста использовать ru-text.

Входные данные (обязательно)

1. Цель страницы (какое действие должен сделать пользователь).
2. Аудитория (кто читает страницу).
3. Референсы: 2-5 ссылок или скриншотов.
4. Контентные блоки (hero, services, process, proof, faq, cta).
5. Ограничения бренда (цвета, шрифты, tone).

P0: Дизайн-результат уровня продакшн

1. Сначала собрать дизайн-систему страницы:
   • 8/12-колоночная сетка;
   • шкала spacing;
   • типографическая иерархия;
   • primary/secondary/accent цвета;
   • states для кнопок/inputs/cards.
2. Сделать 3 ключевых экрана:
   • Hero + above-the-fold;
   • основной контентный паттерн;
   • финальный conversion блок.
3. Для каждого экрана зафиксировать:
   • принцип композиции;
   • визуальный ритм;
   • контраст и читаемость;
   • поведение на mobile.

P0: Screenshot-to-design (reverse engineering)

1. Разобрать скриншот на:
   • layout;
   • scale typography;
   • style tokens;
   • interaction patterns.
2. Восстановить в проекте те же паттерны:
   • same information hierarchy;
   • same spacing rhythm;
   • same visual weight.
3. Не копировать пиксель-в-пиксель брендовые артефакты; сохранить структуру и качество UX.

P1: Генерация изображений

1. Сгенерировать hero/support изображения в едином art direction:
   • цвет/свет/композиция совпадают со страницей;
   • без стокового вида и случайных артефактов.
2. Для каждого изображения создать:
   • prompt;
   • negative prompt;
   • размер (минимум 1600x900 для hero).
3. Перед публикацией проверить:
   • legibility с наложенным текстом;
   • соответствие brand palette;
   • web-оптимизацию (вес/формат).

P1: UX и конверсия

1. На каждом экране один главный CTA, вторичный CTA только если нужен.
2. У каждого блока есть одна функция:
   • объяснить;
   • доказать;
   • снять возражение;
   • привести к действию.
3. Пройти UX check:
   • 5-second clarity test;
   • contrast/accessibility baseline;
   • mobile thumb-zone проверка.

P2: Handoff в код

1. Подготовить handoff-пакет:
   • токены (цвета, типографика, spacing, radius, shadow);
   • component spec;
   • behavior spec (hover/focus/active/disabled).
2. Сверить реализацию:
   • desktop 1440;
   • mobile 390;
   • визуальная консистентность.

Quality Gate (Definition of Done)

Задача выполнена только если:

1. Страница визуально цельная и не выглядит шаблонной.
2. Референсный стиль узнаваем на уровне композиции и иерархии.
3. Изображения поддерживают дизайн-систему страницы.
4. Есть готовый handoff для разработчика.
5. Mobile-версия не деградирует визуально и функционально.

Формат ответа агента

1. P0: что сделано в UI/UX и почему.
2. P1: какие изображения сгенерированы и как использовать.
3. P2: какие файлы и токены переданы в handoff.
4. RISK: что может ухудшить качество и как это предотвращено.