Bybit AI Trader

# 🎨 ПРОМПТ: ТРАНСФОРМАЦИЯ UI В TRADE COPILOT ## 📋 КОНТЕКСТ И АНАЛИЗ ### Текущее состояние UI **Проект:** Bybit Trading Agent WebUI **Технологии:** Vite + TypeScript, Vanilla JS компоненты **Текущий стиль:** Базовый функциональный интерфейс **Существующие компоненты:** - `ChatApp.ts` - базовый AI чат - `TradingDashboard.ts` - простая таблица позиций - `AIReasoningViewer.ts` - текстовый вывод анализа - `AlertsPanel.ts` - простой список алертов - `ActionHistoryTimeline.ts` - базовая временная шкала - `LiveLogViewer.ts` - простой лог-вьюер - `MainLayout.ts` - 3-колоночный layout **Проблемы текущего UI:** - ❌ Выглядит как базовый инструмент, а не продвинутая AI система - ❌ Нет визуальной иерархии и премиум дизайна - ❌ Отсутствует брендинг "TRADE COPILOT" - ❌ Нет анимаций и интерактивности - ❌ Простые таблицы вместо визуализаций - ❌ Нет дашборда с ключевыми метриками - ❌ Отсутствует профессиональная цветовая схема - ❌ Нет real-time визуализаций (графики, индикаторы) --- ## 🎯 ЦЕЛЬ ТРАНСФОРМАЦИИ **Превратить UI в мощный, современный интерфейс для AI Trading System "TRADE COPILOT"** ### Ключевые принципы: 1. **Premium Design** - выглядеть как профессиональная платформа ($1000+/месяц) 2. **AI-First** - подчеркнуть AI возможности системы 3. **Real-Time Focus** - все данные обновляются в реальном времени 4. **Visual Hierarchy** - четкая структура и приоритеты 5. **Dark Theme** - профессиональная темная тема для трейдеров 6. **Micro-interactions** - плавные анимации и переходы 7. **Data Visualization** - графики, индикаторы, метрики везде 8. **Brand Identity** - узнаваемый бренд "TRADE COPILOT" --- ## 🎨 ДИЗАЙН СИСТЕМА ### Цветовая палитра **Primary (AI/System):** - `--copilot-primary: #00D9FF` - яркий циан (AI, активность) - `--copilot-primary-dark: #0099CC` - темный циан - `--copilot-primary-light: #33E0FF` - светлый циан **Trading Colors:** - `--profit: #00FF88` - зеленый для прибыли - `--loss: #FF3366` - красный для убытков - `--neutral: #FFAA00` - оранжевый для нейтрального **Background:** - `--bg-primary: #0A0E27` - темно-синий фон - `--bg-secondary: #141B2D` - вторичный фон - `--bg-tertiary: #1E2538` - третичный фон - `--bg-card: #1A2132` - фон карточек **Text:** - `--text-primary: #FFFFFF` - основной текст - `--text-secondary: #B0B8C8` - вторичный текст - `--text-muted: #6B7280` - приглушенный текст **Accents:** - `--accent-purple: #8B5CF6` - фиолетовый акцент - `--accent-blue: #3B82F6` - синий акцент - `--accent-gradient: linear-gradient(135deg, #00D9FF 0%, #8B5CF6 100%)` - градиент ### Типографика **Font Family:** - Primary: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` - Monospace: `'JetBrains Mono', 'Fira Code', monospace` (для данных) **Font Sizes:** - `--text-xs: 0.75rem` (12px) - `--text-sm: 0.875rem` (14px) - `--text-base: 1rem` (16px) - `--text-lg: 1.125rem` (18px) - `--text-xl: 1.25rem` (20px) - `--text-2xl: 1.5rem` (24px) - `--text-3xl: 1.875rem` (30px) - `--text-4xl: 2.25rem` (36px) **Font Weights:** - `--font-light: 300` - `--font-normal: 400` - `--font-medium: 500` - `--font-semibold: 600` - `--font-bold: 700` ### Spacing System - `--space-1: 0.25rem` (4px) - `--space-2: 0.5rem` (8px) - `--space-3: 0.75rem` (12px) - `--space-4: 1rem` (16px) - `--space-6: 1.5rem` (24px) - `--space-8: 2rem` (32px) - `--space-12: 3rem` (48px) - `--space-16: 4rem` (64px) ### Border Radius - `--radius-sm: 0.25rem` (4px) - `--radius-md: 0.5rem` (8px) - `--radius-lg: 0.75rem` (12px) - `--radius-xl: 1rem` (16px) - `--radius-2xl: 1.5rem` (24px) - `--radius-full: 9999px` ### Shadows & Effects - `--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3)` - `--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4)` - `--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5)` - `--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6)` - `--shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3)` - свечение для AI элементов - `--shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3)` - фиолетовое свечение ### Animations - `--transition-fast: 150ms ease` - `--transition-base: 250ms ease` - `--transition-slow: 350ms ease` - `--transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55)` --- ## 🏗️ АРХИТЕКТУРА UI ### Header (Top Bar) **Компоненты:** - **Logo & Branding:** - Логотип "TRADE COPILOT" с анимацией - Статус системы (Online/Offline) с индикатором - Версия системы - **Key Metrics Bar:** - Total Balance (большой, выделенный) - Daily P/L (с цветовой индикацией) - Win Rate % - Active Positions Count - AI Confidence Score - **Quick Actions:** - Кнопка "New Trade" (выделенная, с градиентом) - Кнопка "Market Analysis" - Настройки (gear icon) - Уведомления (bell icon с счетчиком) - **User Profile:** - Аватар/инициалы - Dropdown с настройками профиля **Стиль:** - Фиксированный сверху (sticky) - Высота: 64px - Темный фон с градиентным акцентом снизу - Glassmorphism эффект (полупрозрачность) --- ### Main Dashboard (Hero Section) **Компоненты:** 1. **Portfolio Overview Card (Large)** - Большие цифры баланса - График P/L за период (мини-график) - Процент изменения с иконкой - Кнопки быстрых действий 2. **AI Status Card** - Текущий статус AI (Analyzing/Watching/Trading) - Confidence Score (визуальный индикатор) - Последний анализ (timestamp) - Кнопка "View Analysis" 3. **Active Positions Grid** - Карточки позиций (не таблица!) - Каждая карточка: - Symbol с логотипом/иконкой - Side (LONG/SHORT) с цветом - Entry & Current Price - P/L (большой, цветной) - P/L % (с индикатором прогресса) - Mini chart (sparkline) - Quick actions (Close, Modify) 4. **Market Overview Widget** - Топ движущихся активов - Market sentiment (bullish/bearish индикатор) - BTC Dominance - Fear & Greed Index **Стиль:** - Grid layout (CSS Grid) - Карточки с glassmorphism - Hover эффекты с подъемом (lift) - Плавные переходы --- ### AI Reasoning Panel (Enhanced) **Компоненты:** 1. **Analysis Flow Visualization** - Визуальный поток анализа (step-by-step) - Каждый шаг как карточка с: - Номером шага - Названием - Статусом (✅/⏳/❌) - Время выполнения - Детали (expandable) 2. **Confluence Score Visual** - Большой circular progress (0-10) - Цветовая индикация (red/yellow/green) - Breakdown по категориям: - Technical Analysis - Market Conditions - Risk Management - Probability - Каждая категория как progress bar 3. **Decision Tree Visualization** - Интерактивное дерево решений - Каждая ветка кликабельна - Показывает путь к финальному решению - Highlight текущей ветки 4. **Probability Meter** - Большой индикатор вероятности (0-100%) - Цветовая шкала - Expected Value расчет - Risk/Reward визуализация 5. **Self-Check Checklist** - Интерактивный чеклист (17 пунктов) - Каждый пункт с иконкой статуса - Группировка по категориям - Progress bar общего прогресса **Стиль:** - Темный фон с акцентами - Анимации при обновлении данных - Smooth transitions между состояниями - Highlight активных элементов --- ### Trading Dashboard (Enhanced) **Компоненты:** 1. **Portfolio Metrics Grid** - 4 большие метрики: - Total Equity (с мини-графиком) - Available Balance - Used Margin - Unrealized P/L - Каждая метрика как карточка с: - Большим числом - Процентом изменения - Иконкой - Трендом (up/down arrow) 2. **Positions View (Enhanced)** - Переключение между Views: - Grid View (карточки) - Table View (расширенная таблица) - Chart View (на графике) - Фильтры: - По символу - По стороне (LONG/SHORT) - По статусу (Profitable/Losing) - По времени - Сортировка по любой колонке - Группировка опционально 3. **Position Card Design** - Градиентный border (цвет зависит от P/L) - Symbol header с логотипом - Цены (Entry/Current) крупным шрифтом - P/L визуализация: - Большое число (цветное) - Progress bar к TP - Distance to SL/TP - Mini sparkline chart - Quick actions (hover reveal) 4. **Order Management Panel** - Открытые ордера - История ордеров - Pending orders - Каждый ордер как карточка **Стиль:** - Современные карточки - Hover эффекты - Smooth animations - Color coding для статусов --- ### Charts & Analysis Panel **Компоненты:** 1. **Multi-Chart Layout** - Основной график (большой) - Индикаторы overlay - Volume chart (ниже) - Индикаторы panel (сбоку) 2. **Chart Controls** - Timeframe selector (красивые кнопки) - Indicator selector (dropdown) - Drawing tools - Zoom controls - Fullscreen mode 3. **Technical Analysis Overlay** - Support/Resistance lines - Order blocks highlight - ML-RSI visualization - Market structure markers 4. **Real-Time Updates** - Плавное обновление свечей - Анимация новых данных - Blink эффект для изменений **Стиль:** - Темная тема для графиков - Контрастные цвета для данных - Smooth animations - Professional look --- ### Alerts & Notifications Panel **Компоненты:** 1. **Alert Types Visualization** - Critical (красный, мигающий) - Warning (оранжевый) - Info (синий) - Success (зеленый) - Каждый тип с уникальной иконкой 2. **Alert Card Design** - Цветной left border - Иконка типа - Заголовок (bold) - Описание - Timestamp - Actions (dismiss, snooze) 3. **Alert Groups** - Группировка по типу - Collapsible sections - Unread counter - Mark all as read 4. **Sound Notifications** - Настройки звуков - Preview звуков - Volume control **Стиль:** - Яркие цвета для важности - Smooth slide-in анимации - Hover эффекты - Auto-dismiss с анимацией --- ### Action History Timeline **Компоненты:** 1. **Timeline Visualization** - Вертикальная временная шкала - Каждое действие как точка на линии - Цвет кодирование по типу действия - Hover показывает детали 2. **Action Card** - Timestamp (relative + absolute) - Action type icon - Symbol - Details (expandable) - Result (success/error) 3. **Filters & Search** - По типу действия - По символу - По дате - По результату - Text search 4. **Export Options** - Export to JSON - Export to CSV - Print view **Стиль:** - Timeline как визуальный элемент - Smooth scroll - Highlight при hover - Color coding --- ### Live Logs Viewer **Компоненты:** 1. **Log Entry Design** - Цветной left border (по уровню) - Timestamp (monospace) - Level badge (DEBUG/INFO/WARN/ERROR) - Source badge (MCP/AI/WebUI) - Message (formatted) - Expandable для длинных сообщений 2. **Filters** - По уровню - По источнику - Text search - Regex search (advanced) 3. **Auto-Scroll** - Toggle auto-scroll - Smooth scroll - Scroll to top/bottom buttons 4. **Export** - Download logs - Copy selected - Clear logs **Стиль:** - Monospace font для логов - Цветное кодирование - Compact но читаемый - Smooth scrolling --- ## 🎯 КЛЮЧЕВЫЕ УЛУЧШЕНИЯ ### 1. Brand Identity **Логотип "TRADE COPILOT":** - Современный логотип с градиентом - Анимация при загрузке - Иконка/символ для favicon **Цветовая схема:** - Использовать `--copilot-primary` везде - Градиенты для акцентов - Свечение (glow) для AI элементов **Типографика:** - Использовать Inter для UI - JetBrains Mono для данных - Правильные веса шрифтов ### 2. Visual Hierarchy **Приоритеты:** 1. Portfolio & Balance (самый важный) 2. Active Positions 3. AI Analysis 4. Market Data 5. Logs & History **Размеры:** - Hero metrics: очень большие (48px+) - Secondary metrics: большие (24px) - Tertiary: нормальные (16px) ### 3. Micro-interactions **Анимации:** - Hover эффекты на всех интерактивных элементах - Smooth transitions при изменениях - Loading states с skeleton screens - Success/Error feedback animations - Number counting animations (0 → value) **Примеры:** - Кнопки: lift on hover, glow on active - Карточки: scale on hover, shadow increase - Данные: fade in при обновлении - Progress bars: smooth fill animation ### 4. Data Visualization **Графики:** - Mini sparklines для позиций - Circular progress для confluence - Bar charts для breakdown - Line charts для P/L history - Heatmaps для market data **Индикаторы:** - Color coding везде - Progress bars для метрик - Badges для статусов - Icons для типов ### 5. Real-Time Updates **Визуальные индикаторы:** - Blink эффект для изменений - Pulse для обновлений - Smooth transitions - Loading states **Performance:** - Virtual scrolling для больших списков - Debounced updates - Optimized re-renders --- ## 📝 ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ ### CSS Architecture **Структура:** ``` styles/ ├── variables.css # CSS custom properties ├── reset.css # CSS reset ├── base.css # Base styles ├── components/ # Component styles │ ├── header.css │ ├── dashboard.css │ ├── cards.css │ ├── charts.css │ └── ... ├── utilities.css # Utility classes └── main.css # Main stylesheet ``` ### Component Structure **Каждый компонент:** - TypeScript класс - CSS модуль или scoped styles - Type definitions - Event handlers - Update methods ### Performance - Lazy loading компонентов - Virtual scrolling - Debounced updates - Optimized animations (use transform, opacity) - CSS containment ### Accessibility - ARIA labels - Keyboard navigation - Focus indicators - Screen reader support - Color contrast (WCAG AA) --- ## 🚀 ПЛАН РЕАЛИЗАЦИИ ### Phase 1: Foundation (2-3 часа) 1. ✅ Обновить CSS variables 2. ✅ Создать base styles 3. ✅ Обновить header с брендингом 4. ✅ Создать систему компонентов ### Phase 2: Dashboard (3-4 часа) 1. ✅ Hero section с метриками 2. ✅ Portfolio cards 3. ✅ AI Status card 4. ✅ Active positions grid ### Phase 3: Enhanced Components (4-5 часов) 1. ✅ AI Reasoning visualization 2. ✅ Trading Dashboard enhancements 3. ✅ Charts integration 4. ✅ Alerts panel redesign ### Phase 4: Polish & Animations (2-3 часа) 1. ✅ Micro-interactions 2. ✅ Animations 3. ✅ Loading states 4. ✅ Error states ### Phase 5: Testing & Optimization (1-2 часа) 1. ✅ Browser testing 2. ✅ Performance optimization 3. ✅ Accessibility check 4. ✅ Mobile responsiveness **Total: 12-17 часов** --- ## 📋 ЧЕКЛИСТ РЕАЛИЗАЦИИ ### Design System - [ ] CSS Variables определены - [ ] Цветовая палитра применена - [ ] Типографика настроена - [ ] Spacing system внедрен - [ ] Shadows & effects добавлены ### Components - [ ] Header с брендингом - [ ] Hero Dashboard section - [ ] Portfolio cards (enhanced) - [ ] AI Reasoning visualization - [ ] Trading Dashboard (enhanced) - [ ] Charts integration - [ ] Alerts panel (redesigned) - [ ] Action History (enhanced) - [ ] Live Logs (enhanced) ### Interactions - [ ] Hover effects - [ ] Click animations - [ ] Loading states - [ ] Error states - [ ] Success feedback - [ ] Smooth transitions ### Branding - [ ] TRADE COPILOT logo - [ ] Favicon - [ ] Color scheme - [ ] Typography - [ ] Visual identity ### Performance - [ ] Optimized animations - [ ] Virtual scrolling - [ ] Debounced updates - [ ] Lazy loading - [ ] Code splitting --- ## 🎨 ВИЗУАЛЬНЫЕ РЕФЕРЕНСЫ **Вдохновение:** - TradingView (профессиональные графики) - Bloomberg Terminal (data density) - Coinbase Pro (clean design) - Binance (modern UI) - DeFi Pulse (data visualization) - GitHub Copilot (AI integration) **Стиль:** - Modern & Clean - Data-dense но читаемый - Dark theme преимущественно - Professional но не скучный - AI-forward (highlight AI features) --- ## ✅ КРИТЕРИИ УСПЕХА **UI должен:** 1. ✅ Выглядеть как premium платформа ($1000+/месяц) 2. ✅ Четко показывать что это AI система 3. ✅ Иметь узнаваемый бренд "TRADE COPILOT" 4. ✅ Быть интуитивно понятным 5. ✅ Показывать все данные в реальном времени 6. ✅ Иметь плавные анимации 7. ✅ Быть responsive 8. ✅ Быть быстрым и отзывчивым --- ## 📝 ФИНАЛЬНЫЙ ПРОМПТ ДЛЯ AI ``` Ты - эксперт по UI/UX дизайну для финансовых платформ и AI систем. ЗАДАЧА: Превратить текущий базовый WebUI в мощный, современный интерфейс для AI Trading System "TRADE COPILOT". КОНТЕКСТ: - Проект: Bybit Trading Agent WebUI - Технологии: Vite + TypeScript, Vanilla JS компоненты - Текущий стиль: Базовый функциональный интерфейс - Цель: Premium AI Trading Platform UI ТЕКУЩИЕ КОМПОНЕНТЫ: - ChatApp.ts - базовый AI чат - TradingDashboard.ts - простая таблица позиций - AIReasoningViewer.ts - текстовый вывод анализа - AlertsPanel.ts - простой список алертов - ActionHistoryTimeline.ts - базовая временная шкала - LiveLogViewer.ts - простой лог-вьюер - MainLayout.ts - 3-колоночный layout ТРЕБОВАНИЯ: 1. BRAND IDENTITY "TRADE COPILOT" - Создать узнаваемый бренд - Логотип с градиентом (#00D9FF → #8B5CF6) - Цветовая схема: темный фон (#0A0E27) + яркие акценты - Типографика: Inter для UI, JetBrains Mono для данных 2. PREMIUM DESIGN SYSTEM - CSS Variables для всех цветов, spacing, typography - Glassmorphism эффекты - Smooth animations (150-350ms) - Micro-interactions везде - Shadows & glows для AI элементов 3. ENHANCED COMPONENTS HEADER: - Logo "TRADE COPILOT" с анимацией - Key Metrics Bar (Balance, Daily P/L, Win Rate, AI Confidence) - Quick Actions (New Trade, Market Analysis) - User Profile dropdown - Sticky, glassmorphism эффект HERO DASHBOARD: - Portfolio Overview Card (большие цифры, мини-график) - AI Status Card (статус, confidence score, последний анализ) - Active Positions Grid (карточки вместо таблицы) - Market Overview Widget (топ movers, sentiment) AI REASONING PANEL: - Analysis Flow Visualization (step-by-step карточки) - Confluence Score (circular progress 0-10) - Decision Tree (интерактивное дерево) - Probability Meter (0-100% с цветовой шкалой) - Self-Check Checklist (17 пунктов, интерактивный) TRADING DASHBOARD: - Portfolio Metrics Grid (4 большие метрики) - Positions View (Grid/Table/Chart переключение) - Position Cards (градиентный border, mini sparkline) - Order Management Panel CHARTS: - Multi-chart layout - Technical Analysis Overlay - Real-time updates с анимациями - Dark theme для графиков ALERTS: - Alert Types Visualization (цветные карточки) - Sound notifications - Auto-dismiss с анимацией - Unread counter ACTION HISTORY: - Timeline Visualization (вертикальная шкала) - Action Cards (expandable) - Filters & Search - Export options LIVE LOGS: - Color-coded entries - Level & Source filtering - Auto-scroll - Export functionality 4. VISUAL ENHANCEMENTS - Все числа с counting animations - Hover effects на всех интерактивных элементах - Loading states с skeleton screens - Success/Error feedback animations - Smooth transitions между состояниями - Blink эффект для real-time updates 5. DATA VISUALIZATION - Mini sparklines для позиций - Circular progress для confluence - Bar charts для breakdowns - Line charts для P/L history - Color coding везде ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ: - Использовать CSS Variables - TypeScript strict mode - Component-based architecture - Optimized animations (transform, opacity) - Virtual scrolling для больших списков - Accessibility (ARIA, keyboard navigation) - Mobile responsive СТИЛЬ: - Modern & Clean - Data-dense но читаемый - Dark theme преимущественно - Professional но не скучный - AI-forward (highlight AI features) Вдохновение: TradingView, Bloomberg Terminal, Coinbase Pro, GitHub Copilot НАЧНИ С: 1. Обновления CSS Variables (colors, spacing, typography) 2. Создания base styles 3. Обновления Header с брендингом 4. Улучшения Hero Dashboard section Покажи код для каждого компонента с полными стилями. ``` --- **Этот промпт содержит все необходимое для трансформации UI в мощный интерфейс TRADE COPILOT!**