ВАЙБКОДИК для гуманитариев и не только

Когда почувствуешь, что тебе надоело переключать окна, и захочешь, чтобы ИИ сам вставлял код в файлы, переходи на Cursor или устанавливай Copilot.

Суть для вайбкодера

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

2.2. Введение в Git и GitHub: контроль версий с первого дня

Представь, что ты пишешь важный документ в Word. Ты сохраняешь его как «Документ_финал», потом «Документ_финал_2», потом «Документ_финал_настоящий_исправленный». Знакомо? В программировании так делать нельзя: в проекте десятки файлов, и запутаться в них очень легко. Для этого придумали систему контроля версий.

Что такое Git

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

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

Что такое GitHub

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

Связка работает так: ты пишешь код на компьютере, Git запоминает изменения, а потом ты отправляешь эти изменения на GitHub (в облако).

Зачем это гуманитарию

В вайбкодинге ИИ будет генерировать много кода. ИИ может ошибиться или сломать то, что уже работало. Без Git ты не поймешь, на каком этапе всё сломалось, и будешь вручную удалять куски кода. С Git ты просто скажешь: «Верни всё как было час назад», и проект восстановится.

Кроме того, GitHub — это твое портфолио. Когда ты захочешь показать свой проект, ты просто скинешь ссылку на GitHub.

Как это работает в VS Code (минимум действий)

Тебе не нужно учить сложные команды в терминале. В VS Code есть встроенная вкладка для работы с Git. Она выглядит как иконка с тремя кружочками, соединенными линиями (на левой панели).

Обычно процесс выглядит так:

Ты создал проект и хочешь его сохранить.

Открываешь вкладку Git в VS Code. Ты видишь список измененных файлов.

Пишешь короткое сообщение (например, «Сделал шапку сайта»).

Нажимаешь галочку (Commit). Снимок сохранен!

Если ты привязал GitHub, нажимаешь кнопку «Sync Changes» (или «Publish Branch»), и код улетает в облако.

Суть для вайбкодера

Не пугайся слов «контроль версий» и «репозиторий». Воспринимай Git и GitHub как кнопку «Сохранить» с возможностью отмены. Твоя задача — после каждого удачного шага (сделали кнопку, сверстали страницу) нажимать «Сохранить снимок» в VS Code. Если ИИ на следующем шаге всё сломает, ты сможешь безопасно вернуться к последнему рабочему состоянию.

2.3. Как формулировать техническое задание для ИИ (TDD-подход)

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

Чтобы получить хороший результат, нужно использовать подход, который программисты называют TDD (Test-Driven Development — разработка через тестирование). Звучит сложно, но на практике это означает всего одно правило: сначала описываем, что должно получиться, и только потом просим ИИ написать код.

Почему «Сделай красиво» не работает

Представь, что ты нанял строителя и сказал ему: «Построй мне красивый дом». Скорее всего, ты получишь что-то странное, потому что у каждого свое понятие о красоте.

То же самое с ИИ. Если ты напишешь: «Сделай мне страницу с товарами», ИИ начнет угадывать. Он сделает список в одну колонку, или добавит лишние поля, или выберет ядовитые цвета. Тебе придется переделывать это десять раз.

Как выглядит правильное ТЗ (промпт)

Хорошее техническое задание для ИИ состоит из четырех блоков.

1. Роль

Скажи ИИ, кем он должен быть. Это настраивает его на нужный лад.

Пример: «Ты — опытный веб-разработчик и эксперт по пользовательским интерфейсам».

2. Контекст и цель

Объясни, что мы делаем и для кого.

Пример: «Я делаю сайт-визитку для фотографа. Целевая аудитория — молодожены, которые ищут фотографа на свадьбу. Сайт должен вызывать доверие и выглядеть современно».

3. Конкретные требования (структура)

Опиши, из чего состоит страница, шаг за шагом.

Пример:

Вверху шапка с логотипом и кнопкой «Связаться».

Ниже большой баннер с фотографией и заголовком.

Дальше галерея из 6 фотографий в сетке (3 колонки).

Внизу подвал с контактами и ссылками на соцсети.

4. Технические ограничения (если есть)

Укажи, какие технологии использовать и чего делать нельзя.

Пример: «Используй только чистый HTML и CSS, без фреймворков. Используй Flexbox или Grid для сетки. Сделай сайт адаптивным, чтобы на телефоне галерея перестраивалась в одну колонку».

Главное правило: один шаг за раз

Самая частая ошибка новичков — пытаться решить всё одной гигантской задачей. Если ты попросишь ИИ «Сделай мне интернет-магазин с корзиной, оплатой и личным кабинетом», он выдаст тебе сотни строк кода, в которых ты запутаешься. И скорее всего, там будут ошибки.

Работай итерациями (маленькими шагами).

Сначала попроси сделать только шапку сайта.

Убедись, что она выглядит правильно.

Потом попроси добавить блок с товарами.

Потом — кнопку «Купить».

Каждый маленький шаг легко проверить и легко откатить, если что-то пошло не так.

Суть для вайбкодера

ИИ не читает мысли. Чем точнее и подробнее ты опишешь структуру (какие блоки, в каком порядке, какого цвета, как они должны себя вести при нажатии), тем меньше раз ты будешь переделывать работу. Если результат тебя не устроил, не начинай всё заново. Просто напиши ИИ: «Ты сделал галерею в одну колонку, а мне нужно три колонки на компьютере и одна на телефоне. Переделай только этот блок».

2.4. Итеративный подход: дробление задач на мелкие шаги

В предыдущей теме мы выяснили, что ИИ нужно давать четкое техническое задание (ТЗ). Но даже самое подробное ТЗ не сработает, если ты попытаешься сделать всё сразу. В этой теме мы разберем главный принцип успешной работы с ИИ — итеративный подход.

Почему большие задачи убивают проект

Представь, что ты просишь ИИ: «Напиши мне полноценный сайт для онлайн-школы с расписанием, личным кабинетом и оплатой».

Что произойдет? ИИ сгенерирует огромный массив кода (возможно, сотни строк). Скорее всего, там будут ошибки, несовместимые детали или код, который ты просто не поймешь. Ты скопируешь его, вставишь, откроешь браузер и увидишь белый экран. И ты не поймешь, где именно ошибка: в верстке, в логике или в подключении файлов.

В вайбкодинге работает правило: чем больше задача, тем выше шанс провала.

Что такое итерация (маленький шаг)

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

Вместо гигантского сайта онлайн-школы, ты разбиваешь работу на итерации:

Итерация 1: Сделать пустую страницу с шапкой и заголовком «Добро пожаловать».

Итерация 2: Добавить под заголовком блок с расписанием занятий (просто статичный список).

Итерация 3: Добавить форму входа (логин и пароль).

Итерация 4: Сделать так, чтобы при нажатии на кнопку «Войти» появлялось всплывающее окно.

Каждый шаг маленький. Если после первой итерации шапка съехала вбок, ты сразу это видишь и просишь ИИ: «Шапка съехала, исправь». Ты не тратишь время на поиск ошибки в сотнях строк кода.