За один вечер разговора с прорабом получается настоящая страница — не картинка-набросок, а живой сайт, который открывается в браузере. Это до сих пор сбивает с толку: кажется, что «собрать сайт» — это недели возни, а на деле первый рабочий вариант появляется за пару часов. Дело не в волшебстве, а в том, что вам больше не нужно печатать код руками — нужно только ясно говорить, что построить.

Сегодня то же самое произойдёт у вас. К концу урока на вашем экране будет страница: с вашим именем, с вашим фото, со ссылками на то, что вам важно. Она будет настоящей — в браузере, не в картинке. Вы увидите её так же, как видит её любой гость. Единственная разница: гость пока не сможет открыть её из другого города — это произойдёт в Уроке 8. Сейчас страница живёт на вашем компьютере, и это нормально: любой дом сначала стоит на закрытом участке, а потом получает адрес.

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

Быстрый конспект: откуда мы пришли

Часть 1. Что такое «запустить локально»

Прежде чем строить, разберёмся с одним словосочетанием, которое вы будете слышать весь курс: «запустить локально». Это не страшно — это просто значит запустить сайт на своём компьютере, чтобы посмотреть, как он выглядит, раньше чем показывать кому-то ещё.

Представьте: дом строится на закрытом участке. Хозяин может зайти внутрь и посмотреть на стены в любой момент — даже когда ещё нет ни замка, ни адреса, ни таблички с номером. Гостей он туда пока не ведёт, но сам видит всё как есть. Вот это — и есть «запустить локально».

С технической стороны: когда Claude Code запустит проект, он покажет вам адрес вроде localhost:3000. Это адрес, который работает только на вашем компьютере и только пока терминал открыт [1]. Откройте браузер, вставьте туда localhost:3000 — и увидите свою страницу. Закройте терминал — адрес перестаёт работать. Снаружи никто ничего не видит. Гостям вы откроете доступ в Уроке 8.

Часть 2. Просим Claude Code создать проект

Открываем терминал, переходим в папку, где хотите хранить проекты, и запускаем прораба. В диалоге с Claude Code пишем первую задачу — и вот здесь важно вспомнить урок 2: хорошая задача содержит ЧТО, ГДЕ, КАК и ГОТОВО. Не «сделай мне сайт», а что-то вроде этого [2]:

# Пример первой задачи прорабу:
Создай новый проект личной страницы-визитки на Next.js.
Страница должна показывать: моё имя крупным шрифтом вверху,
фото по центру и три ссылки под ним. Стиль — светлый,
чистый. Запусти dev-сервер, чтобы я мог открыть страницу
в браузере по адресу localhost:3000.

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

Часть 3. Блоки по очереди: имя, фото, ссылки

Главное правило этой части: один блок — одна задача. Не просите прораба сделать всё сразу. Во-первых, результат хуже предсказуем. Во-вторых, если что-то пошло не так, вы не знаете, какой из блоков виноват. Помните урок 2: ясная, конкретная задача с понятным критерием — это то, что отличает прораба от того, кто просто «скажи чего-нибудь».

Часть 4. Превью и итерации по дизайну

Страница собрана. Теперь наступает самое интересное: вы смотрите на неё и понимаете, что что-то «не то». Имя слишком маленькое. Кнопки стоят плотно. Фон хотелось бы другой. Это не баг — это нормальный процесс. Именно поэтому существует превью: смотреть и говорить «вот тут поправь».

Правки по дизайну — это отдельный жанр задач прорабу. Они короче, конкретнее, и тут самое важное — называть что менять и как, а не просто «сделай красивее». Вот примеры хороших правок:

Обновление страницы происходит автоматически: как только Claude Code сохраняет изменения, браузер обновляется сам (это называется «hot reload» — не страшно, просто удобная функция). То есть вы видите правку почти мгновенно, не нажимая F5.

Часть 5. Маленькие правки: как не сломать остальное

Есть ситуация, которую рано или поздно переживает каждый: попросил поправить цвет кнопки — а разъехалось всё остальное. Это происходит, потому что страница — это не набор независимых деталей, а связная система. Один неточный запрос может задеть то, что вы не трогали.

Рецепт прост, и он тоже про урок 2: указывайте область правки. Не просто «измени шрифт», а «измени шрифт только у блока с именем, остальное не трогай». Прораб понимает такую формулировку правильно, потому что граница задачи чёткая.

И ещё одно — если что-то сломалось, не паникуйте. Скажите прорабу: «Предыдущее изменение сломало расположение кнопок. Верни как было». Claude Code умеет откатывать свою же работу. Но есть способ лучше, и про него — тизер в следующей части.

Часть 6. «Надо бы сохраниться» — тизер git

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

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

Claude Code умеет делать такие точки за вас — достаточно попросить. Но весь разговор про git — что это такое, зачем он нужен и как с ним работать — мы ведём в следующем уроке. Сейчас главное знать: такой инструмент существует, он не страшный, и к концу урока 5 вы сделаете первую сохранёнку своего проекта.

Резюме