design: redesign product demo UI

This commit is contained in:
root
2026-07-04 12:14:08 +02:00
parent cb38cd0002
commit a7025ca50c
20 changed files with 2546 additions and 2207 deletions

View File

@@ -0,0 +1,33 @@
---
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%.