Files
GoClaw/ideas.md

7.2 KiB
Raw Permalink Blame History

GoClaw Control Center — Дизайн-идеи

## 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 секции. Космический центр управления с высокой информационной плотностью, тёмной темой и неоновыми акцентами состояния. 0.08

## 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 для подписей. Брутальный индустриальный терминал с монохромной палитрой и единственным оранжевым акцентом. 0.04

## 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 для кода и логов. Нейросетевая визуализация с glassmorphism панелями и анимированным графом связей агентов. 0.06