92 lines
7.2 KiB
Markdown
92 lines
7.2 KiB
Markdown
# GoClaw Control Center — Дизайн-идеи
|
||
|
||
<response>
|
||
<idea>
|
||
## 1. «Mission Control» — Космический центр управления
|
||
|
||
**Design Movement:** Sci-Fi Command Center / NASA Mission Control aesthetic
|
||
**Core Principles:**
|
||
- Информационная плотность без визуального хаоса
|
||
- Тёмный фон с яркими акцентами состояния (зелёный = ОК, янтарный = предупреждение, красный = ошибка)
|
||
- Моноширинный шрифт для данных, гуманистический для навигации
|
||
- Ощущение «живой системы» — пульсирующие индикаторы, стриминг логов
|
||
|
||
**Color Philosophy:** Глубокий космический чёрный (#0A0E1A) как основа. Электрический голубой (#00D4FF) для активных элементов. Зелёный неон (#00FF88) для здоровых нод. Янтарный (#FFB800) для предупреждений. Красный (#FF3366) для ошибок. Белый с пониженной непрозрачностью для вторичного текста.
|
||
|
||
**Layout Paradigm:** Фиксированный левый сайдбар (узкий, иконки + тултипы). Основная область разделена на сетку «панелей» с возможностью ресайза. Верхняя полоса — статус-бар с ключевыми метриками кластера.
|
||
|
||
**Signature Elements:**
|
||
- Пульсирующие точки-индикаторы состояния нод
|
||
- Терминальный стиль для логов и чата с оркестратором
|
||
- Тонкие светящиеся границы (glow borders) на карточках
|
||
|
||
**Interaction Philosophy:** Мгновенная обратная связь. Hover-эффекты с лёгким свечением. Клик по ноде раскрывает детали с анимацией slide-in.
|
||
|
||
**Animation:** Плавные fade-in при загрузке данных. Пульсация индикаторов. Typing-эффект в чате. Smooth scroll в логах.
|
||
|
||
**Typography System:** JetBrains Mono для данных/метрик/логов. Inter для навигации и заголовков. Размерная иерархия: 11px данные → 13px основной → 16px заголовки → 24px секции.
|
||
</idea>
|
||
<text>Космический центр управления с высокой информационной плотностью, тёмной темой и неоновыми акцентами состояния.</text>
|
||
<probability>0.08</probability>
|
||
</response>
|
||
|
||
<response>
|
||
<idea>
|
||
## 2. «Industrial Terminal» — Индустриальный терминал
|
||
|
||
**Design Movement:** Brutalist / Industrial HMI (Human-Machine Interface)
|
||
**Core Principles:**
|
||
- Грубая честность интерфейса — никаких украшений, только функция
|
||
- Монохромная палитра с единственным акцентным цветом
|
||
- Жёсткие углы, толстые границы, крупная типографика
|
||
- Ощущение промышленной панели управления
|
||
|
||
**Color Philosophy:** Чёрный (#111111) фон. Серый (#888888) для границ и неактивных элементов. Белый (#EEEEEE) для текста. Единственный акцент — ярко-оранжевый (#FF6600) для действий и предупреждений.
|
||
|
||
**Layout Paradigm:** Полноэкранная сетка без отступов от краёв. Толстые разделители между секциями. Верхняя панель с крупными цифрами метрик. Боковая панель — список агентов в виде «карточек-плиток».
|
||
|
||
**Signature Elements:**
|
||
- Толстые рамки (3-4px) вокруг каждого блока
|
||
- Крупные моноширинные цифры для метрик
|
||
- ASCII-арт стилизация для заголовков
|
||
|
||
**Interaction Philosophy:** Минимум анимаций. Резкие переходы. Hover меняет фон на акцентный цвет.
|
||
|
||
**Animation:** Практически отсутствует. Только мгновенные переключения состояний.
|
||
|
||
**Typography System:** IBM Plex Mono для всего. Размеры: 48px для ключевых метрик, 14px для данных, 12px для подписей.
|
||
</idea>
|
||
<text>Брутальный индустриальный терминал с монохромной палитрой и единственным оранжевым акцентом.</text>
|
||
<probability>0.04</probability>
|
||
</response>
|
||
|
||
<response>
|
||
<idea>
|
||
## 3. «Neural Network» — Нейросетевая визуализация
|
||
|
||
**Design Movement:** Data Visualization Art / Generative Design
|
||
**Core Principles:**
|
||
- Визуализация связей между агентами как нейронная сеть
|
||
- Градиентные переходы между состояниями
|
||
- Стеклоподобные (glassmorphism) панели поверх тёмного фона
|
||
- Органические формы для представления данных
|
||
|
||
**Color Philosophy:** Тёмно-синий (#0D1117) фон с градиентными пятнами. Фиолетово-голубой градиент (#7C3AED → #06B6D4) для активных элементов. Стеклянные панели с backdrop-blur. Зелёный (#10B981) для здоровья, красный (#EF4444) для ошибок.
|
||
|
||
**Layout Paradigm:** Центральная область — интерактивная карта агентов (граф связей). Боковые панели выезжают по клику на узел графа. Нижняя панель — чат с оркестратором.
|
||
|
||
**Signature Elements:**
|
||
- Анимированные линии связей между агентами
|
||
- Glassmorphism панели с размытием фона
|
||
- Градиентные пульсации при передаче данных между агентами
|
||
|
||
**Interaction Philosophy:** Органическая, плавная. Панели «всплывают» при наведении. Линии связей подсвечиваются при активности.
|
||
|
||
**Animation:** Постоянная лёгкая анимация графа. Плавные переходы панелей. Градиентные пульсации.
|
||
|
||
**Typography System:** Space Grotesk для заголовков. Inter для основного текста. JetBrains Mono для кода и логов.
|
||
</idea>
|
||
<text>Нейросетевая визуализация с glassmorphism панелями и анимированным графом связей агентов.</text>
|
||
<probability>0.06</probability>
|
||
</response>
|