Bybit AI Trader

# 🚀 ПРОМПТ: ТРАНСФОРМАЦИЯ UI В TRADE COPILOT ## 📋 ЗАДАЧА Превратить текущий базовый WebUI в мощный, современный интерфейс для AI Trading System **"TRADE COPILOT"**. **Текущее состояние:** - Базовый функциональный интерфейс - Простые таблицы и списки - Отсутствие визуальной иерархии - Нет брендинга - Минимальные анимации **Целевое состояние:** - Premium AI Trading Platform UI - Современный дизайн уровня Bloomberg Terminal / TradingView - Четкий бренд "TRADE COPILOT" - Плавные анимации и micro-interactions - Data-dense но читаемый интерфейс --- ## 🎨 ДИЗАЙН СИСТЕМА ### Цветовая палитра ```css /* Primary - AI/System Colors */ --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%); ``` ### Типографика ```css /* Font Family */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: '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; ``` ### Эффекты ```css /* Shadows */ --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-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); ``` --- ## 🏗️ КОМПОНЕНТЫ ДЛЯ УЛУЧШЕНИЯ ### 1. HEADER (Top Bar) **Должен содержать:** - **Logo "TRADE COPILOT"** с градиентом и анимацией - **System Status** индикатор (Online/Offline) с pulse эффектом - **Key Metrics Bar:** - Total Balance (большой, выделенный) - Daily P/L (с цветовой индикацией) - Win Rate % - Active Positions Count - AI Confidence Score (circular progress) - **Quick Actions:** - "New Trade" кнопка (выделенная, с градиентом и glow) - "Market Analysis" кнопка - Settings (gear icon) - Notifications (bell icon с счетчиком) - **User Profile** dropdown **Стиль:** - Sticky header (фиксированный сверху) - Высота: 64px - Glassmorphism эффект (backdrop-filter: blur) - Градиентный border снизу --- ### 2. HERO DASHBOARD SECTION **Компоненты:** **Portfolio Overview Card (Large):** - Большие цифры баланса (48px+) - Mini sparkline график P/L - Процент изменения с иконкой - Кнопки быстрых действий - Glassmorphism карточка с glow эффектом **AI Status Card:** - Текущий статус AI (Analyzing/Watching/Trading) - Confidence Score (circular progress 0-100%) - Последний анализ (timestamp) - Кнопка "View Analysis" с hover эффектом - Pulse анимация когда AI активен **Active Positions Grid:** - Карточки позиций (НЕ таблица!) - Каждая карточка: - Градиентный border (цвет зависит от P/L) - Symbol с логотипом/иконкой - Side badge (LONG/SHORT) с цветом - Entry & Current Price (крупным шрифтом) - P/L (очень большое, цветное) - P/L % с progress bar к TP - Mini sparkline chart - Quick actions (Close, Modify) - появляются при hover **Market Overview Widget:** - Топ движущихся активов (scrollable list) - Market sentiment индикатор (bullish/bearish gauge) - BTC Dominance - Fear & Greed Index --- ### 3. AI REASONING PANEL (Enhanced) **Компоненты:** **Analysis Flow Visualization:** - Визуальный поток анализа (step-by-step) - Каждый шаг как карточка: - Номер шага (badge) - Название - Статус (✅/⏳/❌) с анимацией - Время выполнения - Детали (expandable accordion) - Соединительные линии между шагами - Highlight текущего шага **Confluence Score Visual:** - Большой circular progress (0-10) - Цветовая индикация: - 0-6: Красный - 6-8: Желтый - 8-10: Зеленый - Breakdown по категориям: - Technical Analysis (progress bar) - Market Conditions (progress bar) - Risk Management (progress bar) - Probability (progress bar) - Smooth fill анимация **Decision Tree Visualization:** - Интерактивное дерево решений - Каждая ветка кликабельна - Показывает путь к финальному решению - Highlight текущей ветки - Smooth transitions **Probability Meter:** - Большой индикатор вероятности (0-100%) - Цветовая шкала (red → yellow → green) - Expected Value расчет - Risk/Reward визуализация (bar chart) **Self-Check Checklist:** - Интерактивный чеклист (17 пунктов) - Каждый пункт с иконкой статуса - Группировка по категориям (accordion) - Progress bar общего прогресса - Smooth check/uncheck анимации --- ### 4. TRADING DASHBOARD (Enhanced) **Компоненты:** **Portfolio Metrics Grid:** - 4 большие метрики в grid: - Total Equity (с mini sparkline) - Available Balance - Used Margin - Unrealized P/L - Каждая метрика как карточка: - Большое число (36px+) - Процент изменения (цветной) - Иконка - Тренд (up/down arrow с анимацией) - Hover показывает детали **Positions View:** - Переключение между Views: - Grid View (карточки) - по умолчанию - Table View (расширенная таблица) - Chart View (на графике) - Фильтры (dropdown + search): - По символу - По стороне (LONG/SHORT) - По статусу (Profitable/Losing) - По времени - Сортировка по любой колонке - Группировка опционально **Position Card Design:** - Градиентный border (цвет зависит от P/L) - Symbol header с логотипом - Цены (Entry/Current) крупным шрифтом - P/L визуализация: - Большое число (цветное, 24px+) - Progress bar к TP - Distance to SL/TP (small text) - Mini sparkline chart (100px width) - Quick actions (hover reveal): - Close (красная) - Modify (синяя) - View Details (серая) - Smooth hover lift эффект **Order Management Panel:** - Открытые ордера (cards) - История ордеров (table) - Pending orders (highlighted) - Каждый ордер как карточка с: - Symbol - Type (Limit/Market) - Side (Buy/Sell) - Quantity - Price - Status - Actions --- ### 5. CHARTS & ANALYSIS PANEL **Компоненты:** **Multi-Chart Layout:** - Основной график (большой, 70% высоты) - Индикаторы overlay (RSI, MACD, etc.) - Volume chart (ниже, 30% высоты) - Индикаторы panel (сбоку, collapsible) **Chart Controls:** - Timeframe selector (красивые кнопки с active state) - Indicator selector (dropdown с поиском) - Drawing tools (toolbar) - Zoom controls - Fullscreen mode (icon button) **Technical Analysis Overlay:** - Support/Resistance lines (цветные) - Order blocks highlight (полупрозрачные зоны) - ML-RSI visualization (overlay) - Market structure markers (стрелки) **Real-Time Updates:** - Плавное обновление свечей - Анимация новых данных (fade in) - Blink эффект для изменений цены - Smooth transitions --- ### 6. ALERTS & NOTIFICATIONS PANEL **Компоненты:** **Alert Types Visualization:** - Critical (красный, мигающий при новом) - Warning (оранжевый) - Info (синий) - Success (зеленый) - Каждый тип с уникальной иконкой **Alert Card Design:** - Цветной left border (4px) - Иконка типа (круглая badge) - Заголовок (bold, 16px) - Описание (secondary text) - Timestamp (muted, small) - Actions (dismiss, snooze) - появляются при hover - Slide-in анимация при появлении - Fade-out при dismiss **Alert Groups:** - Группировка по типу (collapsible) - Unread counter (badge) - "Mark all as read" кнопка - Auto-dismiss с таймером (progress bar) **Sound Notifications:** - Настройки звуков (modal) - Preview звуков (play button) - Volume control (slider) - Mute toggle --- ### 7. ACTION HISTORY TIMELINE **Компоненты:** **Timeline Visualization:** - Вертикальная временная шкала - Каждое действие как точка на линии - Цвет кодирование по типу действия - Hover показывает детали (tooltip) - Smooth scroll **Action Card:** - Timestamp (relative + absolute на hover) - Action type icon (цветной badge) - Symbol (bold) - Details (expandable accordion) - Result (success/error badge) - Smooth expand/collapse **Filters & Search:** - По типу действия (multi-select) - По символу (autocomplete) - По дате (date picker) - По результату (success/error) - Text search (debounced) - Clear filters кнопка **Export Options:** - Export to JSON (download) - Export to CSV (download) - Print view (new window) --- ### 8. LIVE LOGS VIEWER **Компоненты:** **Log Entry Design:** - Цветной left border (по уровню) - Timestamp (monospace, muted) - Level badge (DEBUG/INFO/WARN/ERROR) - Source badge (MCP/AI/WebUI) - Message (formatted, monospace) - Expandable для длинных сообщений - Copy button (появляется при hover) **Filters:** - По уровню (checkboxes) - По источнику (checkboxes) - Text search (debounced) - Regex search (advanced toggle) - Clear filters **Auto-Scroll:** - Toggle auto-scroll (switch) - Smooth scroll - Scroll to top/bottom buttons (floating) - Scroll position indicator **Export:** - Download logs (button) - Copy selected (button) - Clear logs (button с подтверждением) --- ## 🎯 КЛЮЧЕВЫЕ УЛУЧШЕНИЯ ### 1. Brand Identity - Логотип "TRADE COPILOT" с градиентом (#00D9FF → #8B5CF6) - Favicon с иконкой - Цветовая схема везде - Типографика (Inter + JetBrains Mono) ### 2. Visual Hierarchy - Hero metrics: очень большие (48px+) - Secondary: большие (24px) - Tertiary: нормальные (16px) - Четкая структура и приоритеты ### 3. Micro-interactions - Hover эффекты (lift, glow, scale) - Smooth transitions (150-350ms) - Loading states (skeleton screens) - Success/Error feedback - Number counting animations ### 4. Data Visualization - Mini sparklines - Circular progress - Bar charts - Line charts - Color coding везде ### 5. Real-Time Updates - Blink эффект для изменений - Pulse для обновлений - Smooth transitions - Loading states --- ## 📝 ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ ### 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 ``` ### Performance - Lazy loading компонентов - Virtual scrolling для больших списков - Debounced updates - Optimized animations (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 часов** --- ## ✅ КРИТЕРИИ УСПЕХА 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". ТЕКУЩИЙ СТЕК: - Vite + TypeScript - Vanilla JS компоненты (классы) - CSS модули - TradingView Lightweight Charts ТЕКУЩИЕ КОМПОНЕНТЫ: - 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 для данных - Favicon с иконкой 2. PREMIUM DESIGN SYSTEM - CSS Variables для всех цветов, spacing, typography - Glassmorphism эффекты (backdrop-filter: blur) - Smooth animations (150-350ms ease) - Micro-interactions везде - Shadows & glows для AI элементов 3. ENHANCED 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 4. HERO DASHBOARD - Portfolio Overview Card (большие цифры 48px+, mini sparkline) - AI Status Card (статус, confidence circular progress, pulse когда активен) - Active Positions Grid (карточки с градиентным border, mini sparkline, hover actions) - Market Overview Widget (топ movers, sentiment gauge) 5. AI REASONING PANEL - Analysis Flow (step-by-step карточки с соединительными линиями) - Confluence Score (circular progress 0-10, цветовая индикация) - Breakdown по категориям (progress bars) - Decision Tree (интерактивное дерево) - Probability Meter (0-100% с цветовой шкалой) - Self-Check Checklist (17 пунктов, интерактивный) 6. TRADING DASHBOARD - Portfolio Metrics Grid (4 большие метрики с mini sparklines) - Positions View (Grid/Table/Chart переключение) - Position Cards (градиентный border, крупные цифры, mini sparkline, hover actions) - Order Management Panel 7. CHARTS - Multi-chart layout - Technical Analysis Overlay - Real-time updates с анимациями - Dark theme 8. ALERTS - Color-coded cards (left border, иконки) - Slide-in анимации - Sound notifications - Auto-dismiss 9. ACTION HISTORY - Timeline Visualization (вертикальная шкала) - Action Cards (expandable) - Filters & Search - Export options 10. LIVE LOGS - Color-coded entries - Level & Source filtering - Auto-scroll - Export ВИЗУАЛЬНЫЕ УЛУЧШЕНИЯ: - Все числа с counting animations - Hover effects (lift, glow, scale) - Loading states (skeleton screens) - Success/Error feedback - Smooth transitions - Blink эффект для real-time updates ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ: - CSS Variables для всего - TypeScript strict mode - Component-based architecture - Optimized animations (transform, opacity) - Virtual scrolling для больших списков - Accessibility (ARIA, keyboard) - 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 с брендингом "TRADE COPILOT" 4. Улучшения Hero Dashboard section Покажи полный код для каждого компонента с TypeScript и CSS. ``` --- **Этот промпт готов к использованию для трансформации UI в TRADE COPILOT!**