Блок 1: Быстрый стартВизуализация рабочего пространства

Визуализация рабочего пространства

Время: 7 мин | Уровень: Базовый

Цель урока

После урока у вас будет настроено визуальное рабочее пространство для наблюдения за работой Claude Code в реальном времени.

Что вы узнаете

  • Зачем нужно видеть результаты работы Claude Code
  • Как выбрать редактор (Antigravity, Obsidian, VS Code)
  • Как настроить рабочее пространство для эффективной работы

Зачем нужна визуализация

Когда вы работаете только в терминале:

  • Не видите структуру созданных файлов
  • Нужно вручную открывать каждый документ
  • Теряете контекст проекта

Когда вы добавляете визуальный редактор:

  • Видите появление новых файлов в реальном времени
  • Можете быстро просматривать содержимое
  • Сохраняете общую картину проекта

Три инструмента на выбор

ИнструментЛучше всего дляОсобенности
Antigravity ⭐Пользователи Claude CodeВсё в одном окне: терминал + файлы + редактор + превью
ObsidianРабота с заметками и документамиБесплатный, wikilinks, граф связей
VS CodeРазработчики и технические PMПолнофункциональный редактор, терминал встроен

Рекомендация: Начните с Antigravity — он создан специально для работы с Claude Code. Всё необходимое в одном окне: терминал, дерево файлов, редактор и превью. Не нужно настраивать split-screen.

Установка Antigravity (рекомендуется)

Шаг 1: Скачайте Antigravity

  1. Откройте antigravity
  2. Нажмите “Download” и выберите вашу ОС
  3. Установите приложение

Шаг 2: Откройте папку проекта

  1. Запустите Antigravity
  2. File → Open Folder
  3. Выберите папку вашего проекта

Что вы увидите

┌─────────────────────────────────────────────────────┐
│  📁 Файлы  │  📝 Редактор  │  👁 Превью            │
│            │               │                       │
│  ├─ docs/  │  # Title      │  [Rendered            │
│  ├─ src/   │  Content...   │   Markdown]           │
│  └─ ...    │               │                       │
├─────────────────────────────────────────────────────┤
│  > claude                                           │
│  _                                                  │
│  ТЕРМИНАЛ (Claude Code работает здесь)              │
└─────────────────────────────────────────────────────┘

Преимущество: Все четыре панели в одном окне — ничего настраивать не нужно.

Альтернатива: Obsidian

Шаг 1: Скачайте Obsidian

  1. Откройте obsidian.md
  2. Нажмите “Download” и выберите вашу ОС
  3. Установите приложение

Шаг 2: Создайте vault

Vault (хранилище) — это просто папка, которую Obsidian будет отслеживать. Все файлы внутри автоматически индексируются.

  1. Откройте Obsidian
  2. Нажмите “Open folder as vault”
  3. Выберите папку вашего проекта (например, my-course/)

Шаг 3: Включите отображение скрытых папок

По умолчанию Obsidian скрывает папки, начинающиеся с точки (.claude/, .git/).

Mac: В Finder нажмите Cmd + Shift + . (точка) для показа скрытых файлов

В Obsidian:

  1. Настройки → Files & Links
  2. Включите “Detect all file extensions”

Установка VS Code

Шаг 1: Скачайте VS Code

  1. Откройте code.visualstudio.com
  2. Скачайте версию для вашей ОС
  3. Установите приложение

Шаг 2: Откройте папку проекта

  1. File → Open Folder
  2. Выберите папку вашего проекта
  3. VS Code покажет структуру файлов в боковой панели

Шаг 3: Полезные расширения

  • Markdown All in One — улучшенный просмотр Markdown
  • Prettier — автоформатирование

Настройка Split-Screen (для Obsidian / VS Code)

Если вы выбрали Antigravity — пропустите этот раздел, там всё уже встроено.

Split-screen — разделение экрана на две половины. Слева работаете с Claude Code, справа видите результаты.

┌─────────────────────┬─────────────────────┐
│                     │                     │
│     ТЕРМИНАЛ        │     РЕДАКТОР        │
│   (Claude Code)     │  (Obsidian/VS Code) │
│                     │                     │
└─────────────────────┴─────────────────────┘

Mac

  1. Откройте терминал с Claude Code
  2. Наведите курсор на зелёную кнопку окна
  3. Выберите “Tile Window to Left of Screen”
  4. Откройте редактор — он автоматически займёт правую половину

Windows

  1. Перетащите окно терминала к левому краю экрана
  2. Windows предложит выбрать второе окно для правой половины
  3. Выберите ваш редактор

Полезные настройки

Для Obsidian

  • Live Preview — видите форматирование Markdown в реальном времени
  • Показ номеров строк — удобно для ссылок на конкретные места

Для VS Code

  • Auto Save (File → Auto Save) — файлы сохраняются автоматически
  • Explorer: Sort Order — сортировка по дате изменения показывает новые файлы сверху

Практика

Задание: Настройте рабочее пространство и проверьте, что всё работает.

  1. Установите выбранный редактор (Antigravity, Obsidian или VS Code)
  2. Откройте папку с проектом курса
  3. Если используете Obsidian/VS Code — настройте split-screen

Ожидаемый результат: Вы видите дерево файлов курса в редакторе.

Частые вопросы

Файлы не появляются в редакторе
  • Убедитесь, что редактор открыт в той же папке, где работает Claude Code
  • Обновите view (в VS Code: правый клик → Refresh)
Не вижу папку .claude/
  • Mac: Cmd + Shift + . в Finder
  • VS Code: папка видна по умолчанию
  • Obsidian: проверьте настройки Files & Links

Резюме

  • Antigravity — лучший выбор для Claude Code (всё в одном окне)
  • Split-screen (терминал + редактор) — альтернатива для Obsidian/VS Code
  • Убедитесь, что редактор открыт в той же папке, где работает Claude Code
  • Видеть результаты в реальном времени — ключ к эффективной работе

Следующий шаг

Урок 1.3: Запуск и клонирование курса — запустим Claude Code и проведём первый диалог — вы сразу увидите результат в вашем редакторе.

Установка и предварительные требованияЗапуск и клонирование курса