Claude Code

Claude Code — это кодинговый агент, созданный для программистов, которые перешли на агентное программирование. Он
интегрируется с git-репозиториями и позволяет создавать проекты любой сложности. Зачем он нужен при вайбкодинге?

Все зависит от сложности задачи и того, насколько долго нам нужен результат. Если мы делаем одноразовую задачу, то смысла в нем мало, но если на реализацию нам понадобится много времени, а результат будет постоянно использоваться и дорабатываться, то без репозитория не обойтись, иначе слишком высок риск потерять все. А для этого понадобится Claude Code.

Для примера реализуем калькулятор калорий внутри нашего репозитория hexlet-vibecoding . Начнем с подготовки Claude Code к работе.

Настройка Сессия Claude Code всегда привязана к репозиторию. Прежде чем дать задачу, вы выбираете проект, с которым агент будет работать. Дальше есть два места, где этот агент может крутиться.

Первое — это ваш компьютер. В десктопном приложении Claude вы открываете репозиторий, который лежит у вас на диске, и агент работает прямо на нем. Удобно, когда проект уже скачан и вы сидите за своей машиной. Этот подход требует более глубоких технических навыков, так как нужно настраивать локальное окружение и немного уметь работать с терминалом.

Второе — это облако. Когда вы заходите на claude.ai/code в браузере или с телефона, агент работает на серверах Anthropic, ваш компьютер для этого не нужен. Чтобы он увидел ваш код, его подключают к GitHub. Claude клонирует репозиторий к себе, вносит правки и просит вас их проверить. Локально при этом ничего скачивать не нужно.

Большой плюс облака в том, что задачу можно поставить с любого устройства. Вы пишете запрос с телефона, пока стоите в очереди, убираете телефон в карман, а через несколько минут получаете уведомление о готовом результате. Компьютер при этом может быть выключен.

По умолчанию выбран облачный режим, что нам и нужно. Если вы хотите работать локально, то в интерфейсе есть переключатель. В любом случае, когда вы выбираете репозиторий, агент видит его и может с ним работать, независимо от того, где он запущен.

Для подключения репозитория нажмите Select Repository, выполните авторизацию на Github и выберите из списка hexlet- vibecoding . Если все пройдет успешно, вы увидите название репозитория и надпись main . В терминах git это называется веткой (branch). В одном репозитории может быть несколько веток, что позволяет изолированно разрабатывать одновременно несколько фич.

Режимы работы Claude Code ничего не делает у вас за спиной. По умолчанию, когда агент собирается изменить файл, запустить команду или выйти в интернет, он спрашивает разрешение. Но одобрять каждый шаг руками нужно не всегда. Сколько агенту позволено делать самому, вы выбираете в меню режимов рядом с полем ввода.

Обычный режим (Accept edits) Стоит по умолчанию. Читать файлы агент может свободно, а перед каждым изменением или запуском команды останавливается и просит подтверждения. Вы видите, что он собирается сделать, и решаете, пускать его дальше или нет. Подходит, когда вы только начали и хотите держать руку на пульсе.

Принимать правки (Auto mode) Агент сам применяет изменения в файлах и не дергает вас по мелочам, а результат вы просматриваете потом, сравнивая старый и новый код. Удобно, когда задача понятная и вы доверяете направлению, но хотите проверить итог. На рискованные действия, например, запуск команды, он по-прежнему спросит разрешение.

Режим планирования (Plan mode) Агент ничего не меняет в проекте. Он читает код, разбирается в задаче и предлагает план, что и как собирается сделать. Вы читаете план и, если согласны, разрешаете перейти к работе. Это удобно для задач посложнее, где хочется сначала все продумать, а потом уже пускать агента в файлы. Именно в этом режиме работает большинство разработчиков.

Прямо сейчас можно выбрать Auto mode — это упростит дальнейшую работу.

Задача: Калькулятор калорий Теперь мы готовы к реализации калькулятора. Начнем с простого промпта: реализуй калькулятор калорий.

Claude Code начнет создавать облачное окружение, копировать туда код и выполнять изменения. В отличие от других инструментов, Code максимально технически ориентирован. Он будет говорить, какие файлы и как исправил, рассказывать про технические подробности и в конце оперировать понятиями git. Например, если нажать на счетчик добавленных/ удаленных строк (зеленые и красные числа), то он покажет исходный код.

Прямо сейчас мы не будем глубоко погружаться в технические детали — это в следующих уроках. А пока разберемся с тем, как принимать изменения.

Агент не правит основной код напрямую. Он создает отдельную копию, новую ветку, и вносит все изменения в ней. Главная версия (ветка main ) остается нетронутой, пока вы сами не примете правки. Так неудачная попытка ничего не сломает в рабочем проекте. Чтобы была создана такая копия, нужно нажать кнопку "create pull request", которая появляется после любых изменений.

Готовый результат агент оформляет как pull request. Это предложение изменений, в котором собрано, что именно поменялось, какие файлы агент тронул и какие строки добавил или убрал. По сути, это запрос «вот правки, давайте занесем их в основную версию». Пулреквесты доступны на странице репозитория на Github. Там же ими можно управлять, например, принять — и тогда изменения попадут в репозиторий, либо отклонить — и тогда ничего не произойдет.

Вы открываете pull request и просматриваете изменения. Если все устраивает, нажимаете Merge, и правки переезжают в ветку main . Если что-то не так, можно вернуть задачу агенту на доработку или закрыть pull request без изменений, и тогда в основном коде ничего не появится.

Переключаться на Github необязательно. Достаточно попросить Claude Code смержить (принять) пулреквест. Он сделает все сам.

По сути это весь процесс. Дальше можно снова просить вносить изменения, готовить и принимать пулреквесты.

Github Pages Калькулятор готов, но пока он живет только в репозитории, и открыть его в браузере у себя или показать другим нельзя. Чтобы страница работала по ссылке на любом устройстве, ее нужно опубликовать, то есть разместить на хостинге. Хостинг — это сервис, который держит файлы сайта у себя и круглосуточно отдает их каждому, кто открывает ваш адрес.

Для простой страницы из одного HTML-файла подойдет GitHub Pages. Это бесплатный хостинг прямо внутри GitHub. Он берет файлы из вашего репозитория и публикует их в интернете, а после каждого нового изменения обновляет страницу сам.

Включить его нужно один раз. На странице репозитория на GitHub откройте Settings, раздел Pages. В блоке Source выберите ветку main и папку корня, нажмите Save.

Через минуту GitHub покажет адрес вида https://<ваш-логин>.github.io/hexlet-vibecoding . Наблюдать за процессом подготовки сайта можно на вкладке Actions.

Когда появится зеленый кружок с галкой, значит, сайт готов. Кликните по этому блоку, чтобы увидеть ссылку на сайт. Она внутри.

Откройте его, и калькулятор работает уже в интернете. Этот адрес можно отправить кому угодно или открыть с телефона, страница откроется и там. По нему же удобно проверять результат.

Дальше публикацию можно не трогать руками. Каждый раз, когда вы принимаете новый pull request с правками калькулятора, GitHub Pages подхватывает изменения, и через минуту обновление видно на том же адресе (следить за процессом можно во вкладке Actions).

CLAUDE.md Чем больше вы работаете над проектом, тем чаще ловите себя на том, что объясняете агенту одно и то же. Что это за проект, какими инструментами он собран, как принято называть файлы, чего делать не надо. Каждую новую сессию приходится начинать с этих вводных.

Чтобы не повторяться, в репозитории заводят файл CLAUDE.md . Это инструкция для агента, которую он читает в начале каждой сессии. Внутри вы описываете проект своими словами: о чем он, как устроен, какие договоренности приняты, как его запускать и проверять. Один раз написали, дальше агент держит это в голове сам.

CLAUDE.md пишут простым языком, как вы объяснили бы задачу человеку. Технических подробностей знать не нужно. Вот как мог бы выглядеть такой файл для нашего калькулятора.

# Калькулятор калорий

Это калькулятор индекса массы тела и дневной нормы калорий. Простой сайт

## Как должно выглядеть - Светлая палитра, два акцентных цвета. - Для оформления используй shadcn. - Хорошо открывается на телефоне.

## Договоренности - Объясняй изменения простыми словами. - Большие правки сначала показывай планом, потом делай.

- Для роста 175 и веса 72 индекс массы тела около 23.5, категория «норма»

Почти весь файл — это обычные слова, но одну строчку стоит пояснить. shadcn — это готовый набор аккуратных элементов интерфейса, кнопок и полей. Когда вы просите агента использовать его, калькулятор выглядит опрятно, а оформление не приходится придумывать с нуля каждый раз. Точно так же можно назвать любой другой инструмент, который вам нравится.

Файл необязательно писать руками. Можно попросить Claude Code «составь CLAUDE.md для этого проекта», он осмотрит репозиторий и предложит черновик. Дальше вы поправите его своими словами, добавите свои договоренности и уберете лишнее.

Хороший CLAUDE.md экономит много времени и делает результат предсказуемее. Агент перестает переспрашивать очевидное и реже уходит в сторону, потому что правила проекта у него перед глазами. Файл лежит в репозитории рядом с кодом, развивается вместе с проектом, и любая сессия, хоть на вашем компьютере, хоть в облаке, видит свежую версию.

Самостоятельная работа В этом задании вы сами пройдете весь путь из урока на своем репозитории, а потом придумаете калькулятору пару улучшений и добавите их отдельными пулреквестами. Терминал не понадобится.

Повторите все шаги

Откройте hexlet-vibecoding в Claude Code в облаке и пройдите путь целиком. Выберите режим Auto и дайте задачу собрать калькулятор индекса массы тела и дневной нормы калорий. Когда агент закончит, посмотрите изменения через счетчик добавленных и удаленных строк и примите pull request, кнопкой Merge на GitHub или просто попросив Claude Code смержить. Затем включите GitHub Pages (Settings, раздел Pages, ветка main и

папка корня, Save) и откройте адрес вида https://<ваш-логин>.github.io/hexlet-vibecoding . Калькулятор должен работать в интернете, проверьте его и с телефона.

Проверьте, что калькулятор считает верно

Введите рост 175 и вес 72, индекс массы тела должен получиться около 23.5, а категория «норма». Поменяйте пол и уровень активности и убедитесь, что норма калорий пересчитывается. Оставьте поле пустым или поставьте ноль в рост и посмотрите, как калькулятор ведет себя на крае, показывает понятную подсказку или выдает странное число. Если что-то не так, попросите агента поправить и примите еще один pull request.

Придумайте пару своих улучшений

Теперь добавьте калькулятору две новые возможности, каждую отдельным пулреквестом. Сначала придумайте, что улучшить, потом по очереди поручите это агенту. Для каждой правки примите pull request и через минуту проверьте обновление на боевом адресе. Несколько идей, если своих пока нет.

Добавить поле возраста, чтобы норма калорий считалась точнее. Показать рядом с числом ИМТ его категорию словами и короткую подсказку. Добавить расчет дневной нормы воды по весу. Одну из правок дайте в режиме планирования (Plan), чтобы сначала прочитать предложенный план, а потом уже пустить агента в работу. Сравните ощущение с режимом Auto.

Дополнительные материалы Что такое Git простыми словами Что такое GitHub и как его использовать