Внесення змін — темна тема — Презентація

Тривалість: ~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 пише коміт-повідомлення на основі того, що він реально зробив (не що ви просили — а що він зробив)
• Показ diff: Ви можете попросити “show me the diff” у будь-який момент — Claude запустить git diff
• Перегляд історії: “Show me the git log” працює рівно так, як очікуєте

Коміт-повідомлення, які не відстій

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

Замість ‘update styles’ ви отримуєте щось на кшталт ‘feat: add dark theme with CSS custom properties and ThemeProvider integration.’ Включає що змінилося і чому. Кожен раз.”

Воркфлоу:

1. Claude вносить правки
2. Ви рев’юїте (наживо в браузері або просите Claude показати diff)
3. Ви кажете “commit this”
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. Починаймо.”

Типові запитання студентів

Q: Що якщо Claude зробить правку, яка мені не подобається? A: Завжди можна відкотити. Claude поважає ваш git-воркфлоу — якщо щось не так, git checkout -- <file> або просто скажіть Claude “undo that last change.” Ви завжди контролюєте ситуацію.

Q: Claude запускає dev-сервер за мене? A: Claude може запустити npm run dev, але результат потрібно дивитися у своєму браузері. Claude не бачить ваш екран — ви є візуальним зворотним зв’язком. Кажіть йому, що бачите, і він підлаштовується.

Q: Що якщо тести падають після зміни теми? A: Це насправді чудовий навчальний момент. Claude прочитає вивід тестів, з’ясує, що зламалося (ймовірно, snapshot-тест або перевірка кольору), і виправить. Саме такий воркфлоу обробки помилок ви будете використовувати постійно.

Q: Claude може обробляти merge-конфлікти? A: Так, але це не в рамках цього блоку. Ми працюємо на чистій гілці. Вирішення merge-конфліктів природно з’являється в пізніших блоках.