Внесение изменений — Тёмная тема — Презентация

Продолжительность: ~8 минут Цель: Объяснить, как Claude редактирует файлы (инструменты Edit vs Write), как работает интеграция с git и как итеративное уточнение позволяет доводить изменения до совершенства в разговорном режиме.

Вступительный крючок (1 мин)

Скажите что-то вроде:

“Вы когда-нибудь смотрели, как кто-то делает Find and Replace по всей кодовой базе, и думали ‘это плохо кончится’? Да. Массовый find-and-replace — это бензопила. Инструмент Edit у Claude — это скальпель.

В прошлом блоке мы спланировали тёмную тему. У нас есть ADR, есть диаграммы, есть чёткий список файлов для изменения. Теперь выполняем — и вы увидите то, что фундаментально изменило мой рабочий процесс. Вы описываете, что хотите, на обычном языке, а Claude вносит точные правки в нужные файлы, ничего не ломая вокруг них.”

Ключевой тезис: Этот блок — там, где план встречается с реальностью. Студенты увидят первое многофайловое изменение кода, полностью управляемое через разговор.

Как Claude редактирует файлы (3 мин)

Инструмент Edit — Хирургические замены

• Основной способ Claude модифицировать существующие файлы
• Работает через указание точной строки для поиска и точной строки для замены
• Думайте об этом как о sed, но Claude понимает контекст того, что заменяет — он не занимается слепым сопоставлением паттернов

Пример на экране:

Edit tool call:
  file: src/styles/globals.css
  old_string: "--background: #ffffff;"
  new_string: "--background: #0a0a0a;"

• Строка должна быть уникальной в файле — если она встречается дважды, Claude должен включить больше окружающего контекста для однозначности
• Это сделано намеренно: предотвращает случайные изменения в неправильном месте

Почему это важно для DevOps/SRE:

“Когда вы редактируете Kubernetes-манифесты или Terraform-файлы, вы точно не хотите, чтобы AI-инструмент вносил приблизительные изменения. Вы хотите, чтобы он менял ровно ту строку, которую имеет в виду. Инструмент Edit это обеспечивает.”

Инструмент Write — Создание файлов целиком

• Используется при создании новых файлов или полной перезаписи существующего файла
• Claude генерирует всё содержимое файла с нуля
• Лучше всего для: новых компонентов, новых конфигурационных файлов, новых скриптов
• Не идеален для: подправки одной строки в файле на 200 строк (для этого используйте Edit)

Правило:

• Меняете несколько строк? Инструмент Edit.
• Создаёте что-то новое? Инструмент Write.
• Переписываете большую часть файла? Инструмент Write.

Как это выглядит на практике:

“Когда Claude будет реализовывать тёмную тему, вы увидите, как он использует инструмент Edit примерно 8-10 раз — по одному на каждое целевое изменение. Он обновит CSS-переменные, модифицирует конфигурацию Tailwind, подправит классы компонентов. Каждая правка — маленькое, ревьюируемое изменение. Вы можете следить за каждым и говорить ‘да, выглядит правильно’ или ‘нет, давайте попробуем другой цвет.’”

Интеграция с Git (2 мин)

Claude может управлять всем вашим git-процессом

• Подготовка файлов: Claude вызывает git add на конкретных файлах, которые он изменил
• Создание коммитов: Claude пишет сообщение коммита на основе того, что он фактически сделал (не того, что вы просили — того, что он сделал)
• Показ диффов: В любой момент можно попросить “покажи дифф”, и Claude выполнит git diff
• Просмотр истории: “Покажи git log” работает ровно так, как ожидаешь

Коммит-сообщения, которые не бесят

“Вот смелое утверждение: Claude пишет коммит-сообщения лучше, чем большинство разработчиков. Не потому что разработчики ленивы — мы ленивы, но не в этом суть — а потому что Claude имеет полный контекст каждого сделанного изменения и естественно их суммирует.

Вместо ‘update styles’ вы получаете что-то вроде ‘feat: add dark theme with CSS custom properties and ThemeProvider integration.’ Включено, что изменилось и почему. Каждый раз.”

Рабочий процесс:

1. Claude вносит правки
2. Вы проверяете (в браузере в реальном времени, или попросите Claude показать дифф)
3. Вы говорите “закоммить это”
4. Claude добавляет нужные файлы, пишет осмысленное сообщение, создаёт коммит
5. Вы проверяете git log — чистая история

Ключевой тезис: Claude не делает просто git add ., закидывая всё подряд. Он добавляет именно те файлы, которые изменил.

Итеративное уточнение (1,5 мин)

Настоящая сила: дизайн через разговор

“Вот где Claude Code становится чем-то отличным от любого другого инструмента. Вы запускаете npm run dev, смотрите тёмную тему в браузере и говорите ‘боковая панель слишком светлая.’ Claude открывает нужный файл, находит CSS-переменную фона боковой панели и затемняет её. Вы говорите ‘графикам нужно больше контраста.’ Claude подправляет цветовую палитру Recharts. Вы говорите ‘акцентный цвет должен быть более синим, менее фиолетовым.’ Готово.

Вы ведёте дизайн-разговор с агентом, который может мгновенно реализовать то, что вы описываете. Без переключения между Figma и редактором. Без гугления hex-кодов. Просто разговор.”

Советы по эффективной итерации:

• Будьте конкретны: “Сделай темнее” работает. “Поменяй фон боковой панели с gray-800 на gray-900” работает лучше.
• Ссылайтесь на то, что видите: “Текст на карточках плохо читается” — Claude разберётся, какая CSS-переменная за это отвечает.
• Итерируйте небольшими шагами: Три маленьких уточнения лучше одного гигантского промпта. На каждом шаге вы проверяете результат.

Краткий справочник по системе тем (30 сек)

Быстрая сводка для студентов, которые, возможно, не работали с CSS-переменными + Tailwind:

“Красота этой архитектуры в том, что Claude нужно только определить тёмные значения цветов и убедиться, что ThemeProvider переключает правильный атрибут. Компоненты уже используют CSS-переменные — они подхватят новые цвета автоматически.”

Заключение (30 сек)

“Это блок, где всё становится реальным. Вы перейдёте от плана к работающей тёмной теме примерно за 25 минут. Будете вносить правки, просматривать их, итерировать, запускать тесты и коммитить — всё через разговор. К концу у вас будет первая настоящая фича, построенная с Claude Code. Поехали.”

Частые вопросы студентов

В: Что если Claude внесёт правку, которая мне не нравится? О: Всегда можно откатить. Claude уважает ваш git-процесс — если что-то выглядит неправильно, git checkout -- <file> или просто скажите Claude “отмени последнее изменение”. Вы всегда контролируете процесс.

В: Claude запускает dev-сервер за меня? О: Claude может запустить npm run dev, но результат нужно смотреть в своём браузере. Claude не видит ваш экран — вы являетесь визуальной обратной связью. Рассказывайте ему, что видите, и он корректирует.

В: Что если тесты упадут после изменения темы? О: На самом деле это отличный обучающий момент. Claude прочитает вывод тестов, разберётся, что сломалось (вероятно, snapshot-тест или проверка цвета), и исправит. Именно такой рабочий процесс обработки ошибок вы будете использовать постоянно.

В: Может ли Claude обрабатывать конфликты слияния? О: Да, но это не в рамках данного блока. Мы работаем на чистой ветке. Разрешение конфликтов слияния появится естественным образом в более поздних блоках.