Skip to content

DESIGN.md

Latest commit

 

History

History
136 lines (105 loc) · 6.44 KB

DESIGN.md

File metadata and controls

136 lines (105 loc) · 6.44 KB
Raw

Viewing — дизайн и как устроено (без исходников)

Документ для репозитория: как работает продукт и на чём основан визуал.
Полный код UI здесь не раскрывается — только принципы и поток.

1. На что опираемся

Продукт

Дизайн-скиллы

Скачан и использован как дизайн-гайд для UI (не как зависимости runtime):

Frontend-Design-SKILLS-for-AI
Авторы/набор: AkyRayy · skill для агентов и дизайнеров интерфейсов.

Ключевые файлы, которые влияли на решения:

Файл Что взяли
SKILL.md 7 принципов: restraint, type hierarchy, one accent, whitespace, craft details; список «AI slop»
color.md Токены surface / ink / hairline / accent; палитра Deep / Ink
typography.md Два «голоса»: UI-sans + mono для метаданных/кикеров
components.md Primary / secondary / ghost / danger; hover, focus, disabled; radius 6–8px
product-ui-patterns.md Product chrome (панели, сегменты, статусы) в духе Linear-style
anti-patterns.md Отказ от purple-blue градиентов, glassmorphism everywhere, pill soup, emoji-иконок

Выбранная эстетика: Technical / Mono + Refined Minimal
(игровой tool-overlay, не лендинг и не «неоновый киберпанк-шаблон»).

2. Как работает приложение (логика)

Трей (иконка «V»)
    │
    ├─ Окно управления (не завершает app при закрытии)
    ├─ Настройки (хоткей, модель; поверх HUD)
    │
    └─ Хоткей (по умолчанию Alt+E) или «Захват»
            │
            ▼
     Выделение области экрана
            │
            ▼
     Широкий HUD (внизу экрана)
            │
            ├─ Автозапрос: «что это + как скрафтить»
            ├─ Кнопки: что / крафт / где найти
            ├─ Кратко ↔ Расширенно → новый запрос к ИИ
            ├─ Свой вопрос (Enter)
            └─ Клик вне HUD → закрыть
Слой Роль
Трей Жизненный цикл: app живёт в фоне
Захват Только выделенная область
Vision (Gemini REST) Скрин + промпт → текст ответа
Сессия Память «текущая игра» между вопросами
Кэш Ускорение для банальных предметов
Настройки Хоткей, имя модели; ключ API из .env

Платформа: Windows. Сайт/подписки не связаны с приложением.

3. Визуальная система (принципы)

Токены (идея, не код)

  • Surface: near-black фон, elevated карточки, sunken поля ввода
  • Ink: основной текст / muted / subtle
  • Hairline: тонкие границы вместо теней
  • Один accent: холодный cyan — кнопки primary, focus, статус
  • Warning / Error: только для предупреждений и destructive

Что сознательно убрали (anti-slop)

  • Градиенты purple→blue / cyan→purple на кнопках
  • «Стеклянные» панели и blur everywhere
  • Сверхскруглённые pill-кнопки
  • Эмодзи вместо иконок в product UI
  • Тяжёлые многослойные тени

Компоненты

  • Primary — одно главное действие (Спросить / Захват)
  • Secondary — outline (Что это / Крафт / Где / Фото)
  • Ghost — слабые действия (настройки)
  • Danger — выход / закрыть
  • Kickers — mono uppercase labels (OVERLAY, ANSWER, SETTINGS)
  • HUD — широкий, низ экрана: слева контроль, справа ответ

Состояния

  • Hover / pressed / disabled на кнопках
  • Focus ring через accent на полях
  • Loading: статус-строка «ИИ анализирует…»
  • Автоскролл ответа вниз

4. Что в репозитории (карта, без дампа кода)

Путь Назначение
docs/APP_SPEC.md Продуктовые решения
docs/DESIGN.md Этот файл — дизайн + поток
src/viewing_app/ Исходники приложения (модули UI / AI / capture)
assets/ Иконка трея
dist/Viewing.exe Локальная сборка (не обязана быть в git)
.env Секреты только локально, не в git

Сборка: build_exe.bat / PyInstaller (build_exe.spec).

5. Критерии «дизайн готов»

По checklist skill-набора (адаптация):

  1. Один акцент, не «цветные обои»
  2. Иерархия: kicker → title → body → meta
  3. Hairlines вместо glass + shadow soup
  4. Кнопки читаются по роли (primary singular)
  5. HUD не перекрывает игру целиком — wide bar, dimmer
  6. Состояния loading / empty / error предусмотрены

6. История

Дата Изменение
2026-07-26 Подключён гайд Frontend-Design-SKILLS-for-AI; UI переведён на token theme; задокументировано без раскрытия полного кода