2.3: Разработка

Ключевое: Это самый большой и важный урок курса. За 55 минут ты построишь работающий продукт — не макет, не презентацию, а настоящее приложение, которое можно открыть в браузере. Процесс прост: ты описываешь, что нужно → Claude строит → ты проверяешь → корректируешь → повторяешь. Это и есть vibe coding в действии.

Обзор

Всё, что мы делали до этого — установка инструментов, исследования, планирование — было подготовкой к этому моменту. У тебя есть проект (урок 2.1) и описание продукта (урок 2.2). Пора строить.

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

Именно так работают настоящие разработчики — только они пишут код руками, а ты будешь описывать словами. Результат — тот же: работающее приложение.

55 минут — это ориентир. Если ты увлечёшься и проведёшь полтора часа — это нормально. Если закончишь за 40 минут — тоже нормально. Главное — не торопиться и не пропускать шаги проверки.

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

Чему научишься

• Итеративная разработка — как строить продукт шаг за шагом, а не пытаться сделать всё разом. Это ключевой навык, который отличает успешные стартапы от провальных. Ты научишься разбивать большую задачу на маленькие шаги и проверять каждый из них.

• Разбиение на задачи — большую функцию нужно разделить на 3-5 маленьких. «Сделай дашборд» — это плохой запрос. «Сделай шапку с логотипом и навигацией» — хороший. Ты научишься декомпозировать задачи так, чтобы Claude давал предсказуемый результат.

• Проверка в браузере — после каждого изменения ты открываешь приложение и смотришь результат. Работает? Выглядит правильно? Данные отображаются? Ты научишься тестировать свой продукт как пользователь.

• Исправление проблем — что-то сломалось? Выглядит не так? Claude поможет. Ты научишься описывать проблемы так, чтобы Claude быстро находил и исправлял их.

• Работа с git — git сохраняет каждую версию твоего проекта. Если что-то пошло не так, можно вернуться к предыдущей версии. Claude поможет с git — тебе не нужно запоминать команды.

Цикл разработки: как это работает

Весь процесс строится вокруг одного цикла, который повторяется снова и снова:

Описываешь → Claude строит → Проверяешь → Корректируешь → Сохраняешь
     ↑                                                          |
     └──────────────────────────────────────────────────────────┘

Шаг 1: Описываешь

Ты говоришь Claude, что нужно сделать. Чем конкретнее — тем лучше:

Правило: одно описание — одна задача. Не пытайся описать три экрана в одном сообщении.

Шаг 2: Claude строит

Claude пишет код, создаёт файлы, устанавливает зависимости. Ты видишь, что он делает — каждый файл, каждое изменение. Если работаешь в Cursor, изменения появляются в реальном времени.

В этот момент Claude может задать уточняющие вопросы: «Какой цвет для кнопки?», «Нужна ли анимация?», «Куда ведёт эта ссылка?». Отвечай — и он продолжит.

Шаг 3: Проверяешь

Открываешь приложение в браузере (обычно localhost:3000) и смотришь результат:

• Отображается ли всё правильно? — текст, кнопки, картинки на своих местах
• Работает ли функционал? — кнопки нажимаются, формы отправляются, данные показываются
• Нравится ли визуально? — цвета, размеры, расстояния между элементами
• Нет ли ошибок? — пустые страницы, «белый экран», сообщения об ошибках

Шаг 4: Корректируешь

Если что-то не так — описываешь проблему. Примеры:

Кнопка "Начать" слишком маленькая, сделай её крупнее и зелёной

Список задач отображается, но нет возможности добавить новую задачу.
Добавь кнопку "+" и форму для ввода названия

Между заголовком и списком слишком мало отступа, увеличь до 32px

При клике на задачу ничего не происходит. Нужно открывать
карточку с деталями: описание, дата создания, статус

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

Шаг 5: Сохраняешь (git commit)

После каждого значимого изменения — сохраняй прогресс через git. Это как «сохранение» в игре. Claude сделает это за тебя:

Сохрани текущий прогресс в git с описанием "Добавлена главная страница"

Claude выполнит нужные команды (git add, git commit). Тебе не нужно их запоминать.

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

Пошаговый план урока

Вот примерный порядок, в котором вы будете строить приложение:

Этап 1: Базовая структура (10 мин)

Claude создаст основу: навигацию, шапку, подвал, пустые страницы. Ты проверишь, что приложение запускается и отображается в браузере.

Этап 2: Главный экран (10 мин)

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

Этап 3: Ключевая функция (15 мин)

Самая важная Must have функция из описания продукта. Например: добавление и просмотр задач, создание отчётов, обработка обращений — то, ради чего пользователь приходит.

Этап 4: Дополнительные экраны (10 мин)

Страница настроек, профиль пользователя, второстепенные экраны из описания продукта.

Этап 5: Стили и полировка (10 мин)

Цвета, шрифты, отступы, адаптивность. Продукт должен выглядеть аккуратно и профессионально. Claude хорошо справляется с дизайном — просто описывай, что хочешь увидеть.

Основы git: сохранение прогресса

Git — это система контроля версий. Думай о ней как об «истории изменений» с возможностью вернуться в прошлое.

Три команды, которые нужно знать

Тебе не нужно их запоминать — Claude выполнит всё по просьбе. Но полезно понимать, что происходит:

Когда сохранять

• После создания нового экрана
• После добавления новой функции
• Перед экспериментами (чтобы было куда вернуться)
• Когда всё работает и выглядит хорошо

Правило: работает — сохрани

Если приложение работает и выглядит нормально — сохрани. Если ты собираешься менять что-то значительное — сначала сохрани текущее состояние. Это самая важная привычка в разработке.

Как описывать проблемы Claude

Когда что-то не работает или выглядит не так, важно описать проблему чётко:

Хорошие описания проблем

Формула хорошего описания проблемы

Что вижу + Что ожидаю + Где именно

Пример: «На странице списка задач (что вижу) задачи отображаются без дат (что не так). Добавь дату создания справа от названия каждой задачи (что ожидаю).»

Что делать, если что-то сломалось

Не паникуй. В vibe coding сломанный код — это нормальная часть процесса. Вот алгоритм:

1. Опиши проблему Claude — «Приложение перестало работать после последнего изменения»
2. Покажи ошибку — если в браузере или терминале есть сообщение об ошибке, скопируй его
3. Claude починит — в 90% случаев Claude сам найдёт и исправит проблему
4. Если не помогло — откати — «Откати к последнему рабочему сохранению в git»
5. Попробуй иначе — опиши задачу другими словами или разбей на более мелкие шаги

Советы для лучшего результата

1. Работай маленькими шагами — одно изменение за раз. Не «сделай весь дашборд», а «сделай шапку дашборда с логотипом». Потом «добавь боковое меню». Потом «добавь основную область с графиками». Маленькие шаги = предсказуемый результат.

2. Проверяй после каждого шага — не накапливай 5 изменений и потом проверяй. Каждое изменение — проверка. Это занимает 10 секунд (обновить страницу в браузере), но экономит минуты отладки.

3. Сохраняй часто — каждые 5-10 минут, если что-то работает. Git — бесплатная «страховка». Не пользоваться ей — как ехать без ремня безопасности.

4. Используй Cursor — так ты видишь код и результат одновременно. Не обязательно читать код, но видеть, как файлы появляются и меняются — полезно для понимания процесса.

5. Не бойся экспериментировать — «А что если сделать кнопку больше?», «А давай попробуем другой цвет?», «А если добавить анимацию?». Git позволяет всегда откатить. Экспериментируй свободно.

6. Делай перерывы — 55 минут интенсивной работы — это много. Если чувствуешь, что устал или запутался, встань, пройдись, вернись через 5 минут с свежей головой.

7. Описывай конкретно — «сделай красиво» не работает. «Минималистичный дизайн, много воздуха, зелёные акценты, шрифт Inter, скруглённые углы у карточек» — работает отлично.

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

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

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

Мне нужно понимать, что за код Claude пишет? Нет. Но если тебе интересно — спрашивай! «Что ты только что сделал?», «Зачем этот файл?», «Объясни эту часть простым языком». Claude объяснит. Со временем ты начнёшь понимать больше — это естественный процесс.

Что если я хочу функцию, которой нет в описании продукта? Добавь! Скажи Claude: «Добавь в prd.md новую функцию: [описание]». Потом реализуй. Описание продукта — живой документ, его можно менять.

А смогу ли я потом показать это реальным людям? Да! В следующем модуле мы займёмся деплоем — публикацией приложения в интернете. После этого у тебя будет ссылка, которую можно отправить кому угодно.

Git — это сложно? Нет, если работаешь через Claude. Ты говоришь «сохрани» — он сохраняет. Говоришь «откати» — он откатывает. Техническая сложность скрыта, а ты получаешь все преимущества: историю изменений и возможность вернуться назад.

Что делать, если Claude завис или не отвечает? Подожди минуту — Claude может обрабатывать большое изменение. Если не помогло, нажми Ctrl+C и повтори запрос. Прогресс в файлах не потеряется.

Что создашь

Работающий MVP — приложение с интерфейсом, логикой и базовой функциональностью. Главная страница, ключевые экраны, основная функция продукта, навигация, стили. Готовое к тому, чтобы показать первым пользователям и собрать обратную связь.

Запуск

/start-2-3

Следующий модуль: Nano Banana →