---
description: UI/UX Pro Max — product demo page, not debug dashboard
alwaysApply: true
---

# UI/UX Pro Max Rules

Ты обязан проектировать интерфейс как demo product page, а не debug dashboard.

Обязательные принципы:
- Пользователь должен понять смысл проекта за 10 секунд.
- Первый экран должен объяснять:
  1. Что это за система.
  2. Что она делает.
  3. Как запустить демо.
  4. Какой результат будет показан.
- Главный интерфейс должен вести пользователя по цепочке:
  Detection → Classification → Command → Routing.
- Не показывать все инженерные панели сразу.
- Инженерные детали должны быть ниже или в отдельном раскрываемом блоке.
- Не должно быть горизонтального скролла.
- Mobile-first адаптив обязателен.
- Основной текст не меньше 16px.
- Кнопки не меньше 44px по высоте.
- На mobile всё в одну колонку.
- На desktop допустима сетка 2 колонки.
- Визуальная иерархия:
  Hero → Demo → Result → Scenarios → Criteria → Engineering Details.
- Запрещены мелкие debug-панели на первом экране.
- Запрещены узкие внутренние scroll-панели для сценариев.
- Запрещены fixed width больше viewport.
- Использовать min-width: 0 для grid/flex children.
- SVG/сцена должны масштабироваться через width: 100%, max-width: 100%.