design: redesign product demo UI
This commit is contained in:
33
.cursor/rules/ui-ux-pro-max.mdc
Normal file
33
.cursor/rules/ui-ux-pro-max.mdc
Normal 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%.
|
||||
Reference in New Issue
Block a user