Вайбкодинг: Программирование с ИИ для начинающих

Что такое вайбкодинг и почему знание синтаксиса больше не обязательно

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

Возможно, вы всегда хотели создать свое приложение, автоматизировать рутину на работе или просто понять, как работает магия кода, но вас останавливал страх перед сложностью. Раньше этот страх был обоснован. Сегодня — нет.

Конец эпохи «Кодеров» и начало эпохи «Творцов»

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

!Сравнение традиционного программирования и современного подхода с ИИ

Однако с появлением больших языковых моделей (LLM), таких как GPT-4, Claude 3.5 Sonnet и других, правила игры изменились. Мы перешли от написания инструкций для машины на её языке к общению с машиной на нашем языке.

Что такое Вайбкодинг?

Термин «Вайбкодинг» (Vibecoding) стал популярным благодаря Андрею Карпатому (Andrej Karpathy), бывшему директору по ИИ в Tesla и одному из основателей OpenAI. В своем вирусном твите он описал, как изменился его процесс работы: большую часть времени он теперь просто пишет промпты (текстовые запросы), копирует ошибки, вставляет их обратно в ИИ и управляет процессом, полагаясь на «вайб» — ощущение того, что код делает то, что нужно.

> Я просто пишу код на основе вайба. Я вижу, что ИИ пишет код, который выглядит правильно, запускаю его, вижу ошибку, копирую ошибку обратно в ИИ, и он её исправляет. — Твит Андрея Карпатого о вайбкодинге

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

Ключевые отличия вайбкодинга:

Фокус на результате: Вам важно, что делает программа, а не как* именно написан цикл внутри. * Естественный язык: Вашим главным инструментом становится русский (или английский) язык, а не Python или JavaScript. * Скорость: То, на что раньше уходили дни, теперь делается за минуты. * Низкий порог входа: Вам не нужно знать наизусть библиотеки и фреймворки.

Почему синтаксис больше не обязателен?

Чтобы понять революционность момента, нужно разобраться, что такое синтаксис.

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

Например, в языке Python, чтобы вывести текст на экран, нужно написать:

Если вы напишете Print("Привет") (с большой буквы) или print "Привет" (без скобок), программа сломается. Компьютеры были невероятно педантичны и глупы: они не понимали контекста.

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

!ИИ выступает переводчиком с человеческого языка на машинный синтаксис

Значит ли это, что учиться не нужно совсем?

Не совсем. Знание синтаксиса перестало быть барьером, но понимание логики осталось важным. Вайбкодинг не отменяет мышление, он меняет его уровень.

Представьте, что вы режиссер фильма:

Раньше (Традиционное кодирование): Вы должны были сами выставлять свет, настраивать камеру, шить костюмы и монтировать пленку.

Сейчас (Вайбкодинг): У вас есть команда профессионалов (ИИ). Вы говорите: «Здесь должно быть грустно и темно», и ИИ выставляет свет. Вы говорите: «Герой должен бежать быстрее», и ИИ меняет монтаж.

Ваша задача — знать, какой фильм вы хотите снять, и уметь объяснить это своей команде.

Как выглядит процесс вайбкодинга?

Процесс создания программы теперь выглядит как диалог. Вот примерный алгоритм, который мы будем осваивать в этом курсе:

Идея: Вы формулируете, что хотите создать (например, «Калькулятор расходов на кофе»).

Промпт (Запрос): Вы описываете задачу ИИ. «Напиши веб-страницу, где я могу вводить цену чашки кофе, и она будет считать сумму за месяц».

Генерация: ИИ пишет код за секунды.

Запуск и проверка: Вы открываете результат. Работает? Красиво?

Итерация (Уточнение): Вы видите, что кнопка слишком маленькая. Вы не ищете в коде параметры размера. Вы просто пишете ИИ: «Сделай кнопку 'Добавить' больше и зеленого цвета».

Финал: ИИ переписывает код, вы получаете готовый продукт.

Инструменты вайбкодера

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

* ChatGPT / Claude: Для генерации идей и отдельных кусков кода. * Cursor: Редактор кода нового поколения со встроенным ИИ, который пишет код прямо внутри ваших файлов. * Replit: Платформа, позволяющая создавать и запускать приложения прямо в браузере, даже с телефона.

Преимущества подхода для новичков

Почему вам повезло начать именно сейчас?

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

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

Мгновенная обратная связь: Вы сразу видите результат своих идей.

Заключение

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

В этом курсе мы пройдем путь от простых запросов до создания полноценных работающих приложений. Мы научимся «чувствовать вайб» кода, управлять искусственным интеллектом и превращать идеи в реальность.

Забудьте о страхе перед ошибками. В мире вайбкодинга ошибка — это просто повод продолжить диалог с ИИ.

Готовы начать? Переходите к следующему уроку, где мы настроим ваше первое рабочее пространство.

Настройка рабочего пространства: установка Cursor и интеграция с LLM

В предыдущей статье мы выяснили, что вайбкодинг — это не магия, а новый способ взаимодействия с компьютером, где вы выступаете в роли архитектора, а ИИ — в роли строителя. Но любому архитектору, даже самому гениальному, нужен кабинет и чертежный стол. В мире программирования это называется IDE (Integrated Development Environment) — Интегрированная Среда Разработки.

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

Почему именно Cursor?

Долгое время стандартом индустрии был редактор VS Code от Microsoft. Он прекрасен, но он создавался в эпоху, когда код писали вручную. Чтобы добавить туда ИИ, нужно устанавливать плагины, настраивать их и мириться с ограничениями.

Cursor — это редактор нового поколения. Разработчики взяли за основу VS Code (поэтому он выглядит знакомо и профессионально) и перестроили его так, чтобы Искусственный Интеллект был не просто помощником, а «вторым пилотом», встроенным в само сердце программы.

!Иллюстрация эволюции инструментов разработки

Преимущества для вайбкодера:

* Встроенный чат с ИИ: Вам не нужно переключаться между браузером с ChatGPT и кодом. Всё происходит в одном окне. * Контекст: Cursor «видит» все ваши файлы. Если вы попросите «исправь ошибку», он сам поймет, о каком файле речь, в отличие от обычного чат-бота, куда код нужно копировать вручную. * Предсказание действий: Иногда Cursor дописывает за вас не просто строку, а целый блок кода, предугадывая ваши мысли.

Шаг 1: Установка Cursor

Давайте перейдем от слов к делу. Процесс установки максимально упрощен.

Перейдите на официальный сайт cursor.com.

На главной странице вы увидите большую кнопку Download (Скачать). Сайт автоматически определит вашу операционную систему (Windows, macOS или Linux).

Скачайте установочный файл.

Запустите его и следуйте стандартным инструкциям установщика.

> Совет для пользователей Windows: Если система спросит разрешение на внесение изменений, смело соглашайтесь. Это стандартная процедура.

Первичная настройка

При первом запуске Cursor может задать вам несколько вопросов:

* Keyboard layout (Раскладка клавиатуры): Если вы никогда не программировали, выбирайте стандартную (VS Code Default). * Import extensions (Импорт расширений): Если у вас раньше не было VS Code, просто пропустите этот шаг. * AI Setup: Здесь вам предложат войти в аккаунт или создать его. Это обязательно, так как работа ИИ требует подключения к серверам.

Шаг 2: Знакомство с интерфейсом

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

!Карта интерфейса редактора Cursor

1. Проводник (Explorer) — Слева

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

2. Редактор (Editor) — По центру

Это ваш «холст». Самая большая область, где будет появляться текст программы. Здесь мы будем читать код (и иногда править его).

3. Чат с ИИ (AI Pane) — Справа (или вызывается клавишами)

Это ваш пульт управления. Место, где происходит магия вайбкодинга. Здесь вы будете писать запросы на русском языке, например: «Создай простой сайт-визитку».

Шаг 3: Интеграция с LLM (Large Language Models)

Cursor — это кузов автомобиля, но ему нужен двигатель. Этим двигателем являются LLM — большие языковые модели.

На данный момент Cursor предлагает несколько моделей на выбор. Самые популярные:

Claude 3.5 Sonnet: На момент написания курса это лучшая* модель для программирования. Она пишет чистый код, отлично понимает контекст и редко ошибается. Мы будем использовать её как основную. * GPT-4o: Мощная модель от OpenAI. Тоже отличный выбор, но Claude 3.5 Sonnet часто выигрывает в нюансах написания кода. * cursor-small: Быстрая и легкая модель для мелких правок.

Как выбрать модель?

В интерфейсе Cursor найдите панель чата (обычно справа или вызывается комбинацией клавиш Ctrl+L на Windows или Cmd+L на Mac).

Внизу или вверху чата будет выпадающий список с названием модели.

Убедитесь, что выбрана Claude 3.5 Sonnet (или актуальная версия Claude).

> Важно: Cursor предоставляет бесплатный пробный период (обычно 2 недели Pro-тарифа), который позволяет использовать самые мощные модели. Для начала этого более чем достаточно. Позже можно будет подключить свой API-ключ или оплатить подписку, но для старта платить не нужно.

Шаг 4: Два режима работы с ИИ

В вайбкодинге есть два основных способа взаимодействия с ИИ внутри Cursor. Понимание разницы между ними критически важно.

Режим 1: Чат (Chat)

Горячие клавиши: Ctrl+L (Windows) / Cmd+L (macOS)

Это диалог. Вы используете его, когда: Хотите обсудить идею: «Как лучше сделать калькулятор?»* * У вас возникла ошибка, и вы хотите понять её причину. * Вам нужно сгенерировать код с нуля для нового файла.

Это похоже на переписку в мессенджере с опытным коллегой.

Режим 2: Редактирование (Cmd K)

Горячие клавиши: Ctrl+K (Windows) / Cmd+K (macOS)

Это режим «Хирург». Вы выделяете кусок кода (или ставите курсор в пустое место), нажимаете Ctrl+K и пишете инструкцию. ИИ меняет код прямо в файле.

Примеры команд для Ctrl+K: «Добавь комментарии к этому коду»* «Перепиши эту функцию, чтобы она работала быстрее»* «Исправь ошибку в этой строке»*

!Визуальная метафора режимов работы

Практика: Настройка «под себя»

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

Нажмите Ctrl+Shift+P (Windows) или Cmd+Shift+P (macOS). Откроется строка поиска команд — это «волшебная палочка» редактора.

Напишите там: Color Theme и нажмите Enter.

Используйте стрелки, чтобы выбрать цветовую схему, которая вам приятна. Многие программисты любят темные темы (Dark), так как они меньше утомляют глаза.

Что делать, если английский интерфейс пугает?

Сам интерфейс Cursor (меню, настройки) на английском языке. Но не переживайте:

Вам не нужно читать меню. 99% времени вы будете писать промпты на русском языке в окно чата.

ИИ понимает по-русски. Вы можете написать в чат: «Объясни, что делает кнопка Source Control слева», и Cursor сам расскажет вам о своем интерфейсе.

Заключение

Поздравляю! Вы установили самый современный инструмент для разработки на планете. Теперь у вас есть: * Среда: Место, где живет код. * Интеллект: Claude 3.5 Sonnet, готовый выполнять ваши команды. * Инструменты: Понимание разницы между Чатом и Cmd+K.

Ваше рабочее место готово. В следующей статье мы напишем (точнее, навайбим) вашу первую программу — и для этого нам не придется учить синтаксис Python. Мы просто попросим ИИ сделать это.

Подготовьтесь, будет интересно!

Искусство промптинга: как формулировать задачи для генерации чистого кода

В предыдущих уроках мы разобрались, что такое вайбкодинг, и подготовили наше рабочее место, установив Cursor и выбрав мощную языковую модель (LLM). Теперь перед вами открыт редактор, курсор мигает в строке чата, и наступает момент истины. Что написать, чтобы магия сработала?

Многие новички совершают одну и ту же ошибку: они пишут ИИ так же, как пишут поисковый запрос в Google. Но LLM — это не поисковик. Это ваш сверхинтеллектуальный, но очень буквальный стажёр. Качество кода, который вы получите, напрямую зависит от качества задачи, которую вы поставите. В мире ИИ это называется промпт-инжиниринг (от англ. prompt — подсказка, запрос).

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

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

Представьте, что вы приходите к строителю и говорите: «Построй мне дом». Что он построит? Хижину из веток? Небоскреб? Кирпичный коттедж?

Когда вы пишете в чат Cursor короткий запрос вроде «Напиши змейку на Python», модель, конечно, выдаст вам код. Но это будет усредненная змейка. Она может быть черно-белой, без счета очков, с управлением, которое вам неудобно. И тогда вам придется тратить часы на переделки.

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

!Визуализация процесса превращения идеи в код через правильный промпт

Анатомия идеального промпта

Чтобы ИИ понял вас правильно, ваш запрос должен содержать четыре ключевых элемента. Давайте назовем эту формулу Р.З.К.Ф. (Роль, Задача, Контекст, Формат).

1. Роль (Persona)

Задайте ИИ роль. Это настраивает «мышление» модели на определенный лад. Если вы скажете «Ты — учитель для детей», код будет простым и с комментариями. Если «Ты — Senior Python Developer», код будет оптимизированным и профессиональным.

> Пример: «Ты — опытный веб-разработчик, специализирующийся на создании современных лендингов...»

2. Задача (Task)

Четко сформулируйте действие. Используйте активные глаголы: «напиши», «создай», «исправь», «объясни».

> Пример: *«...Напиши код для секции

Практика: создание вашего первого веб-приложения с нуля через диалог

Мы прошли теорию, настроили инструменты и научились говорить с ИИ на одном языке. Настало время магии. Сегодня мы не будем читать о коде — мы будем его создавать.

В этой статье мы напишем ваше первое полноценное веб-приложение. И самое главное: вы не напишете ни одной строчки кода вручную. Мы будем использовать метод вайбкодинга, полагаясь на Cursor и модель Claude 3.5 Sonnet.

Наша цель — создать «Помодоро-таймер». Это популярный инструмент для управления временем: 25 минут работы и 5 минут отдыха. Это идеальный проект для старта: он содержит визуальную часть (интерфейс), логику (отсчет времени) и интерактивность (кнопки).

Шаг 1: Подготовка фундамента

Прежде чем строить дом, нужно расчистить площадку. В мире программирования это означает создание папки проекта.

Откройте Cursor.

В верхнем меню выберите File -> Open Folder... (Файл -> Открыть папку).

Создайте новую папку на рабочем столе и назовите её pomodoro-app.

Нажмите «Выбрать папку».

Теперь вы видите пустой экран. Слева в проводнике (Explorer) пусто. Это ваш чистый холст.

Шаг 2: Первый промпт — Рождение приложения

Вспомним формулу Р.З.К.Ф. (Роль, Задача, Контекст, Формат) из прошлого урока. Нам нужно создать базовую версию приложения.

Мы будем использовать режим Chat (Ctrl+L или Cmd+L), так как мы создаем что-то с нуля.

Введите следующий промпт в чат:

> Ты — опытный Frontend-разработчик. Напиши простое веб-приложение «Помодоро-таймер». > Функционал: Таймер на 25 минут, кнопки «Старт», «Пауза» и «Сброс». > Технологии: Используй HTML, CSS и JavaScript в одном файле (index.html), чтобы мне было проще запускать. > Стиль: Минималистичный, современный дизайн, крупный шрифт таймера.

Что происходит в этот момент?

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

где — общее время в секундах, — количество минут (в нашем случае 25), а — количество секунд в одной минуте. ИИ сам напишет этот алгоритм внутри кода.

!Визуализация того, как текстовый запрос превращается в готовый файл с кодом

После того как ИИ сгенерирует код, вы увидите кнопку Apply (Применить) или Save to index.html. Нажмите её. В вашем проводнике появится файл index.html.

Шаг 3: Запуск и проверка вайба

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

Найдите файл index.html в списке слева.

Нажмите на него правой кнопкой мыши.

Выберите Copy Path (Копировать путь).

Откройте ваш браузер (Chrome, Safari, Edge).

Вставьте путь в адресную строку и нажмите Enter.

Перед вами должна появиться первая версия вашего таймера. Понажимайте кнопки. Время идет? Пауза работает? Сброс возвращает 25:00?

Если да — поздравляю, вы создали приложение! Если нет — не паникуйте. Просто напишите в чат: «Кнопка сброса не работает, исправь», и ИИ перепишет код.

Шаг 4: Итерация — Улучшаем стиль через Cmd+K

Скорее всего, первая версия выглядит простовато. Белый фон, черные буквы. Скучно. Давайте добавим «вайба».

Теперь мы будем использовать режим Edit (Редактирование), так как у нас уже есть файл, и мы хотим его изменить.

Откройте файл index.html в редакторе Cursor.

Нажмите Ctrl+A (выделить всё), затем Ctrl+K (или Cmd+K на Mac).

Появится строка ввода. Напишите:

> Сделай дизайн в стиле «Dark Mode». Фон должен быть темно-серым, таймер — неоново-голубым. Кнопки сделай круглыми и добавь плавную анимацию при наведении.

Нажмите Enter. Вы увидите, как Cursor удаляет старые строки кода и пишет новые прямо на ваших глазах. Это похоже на работу призрака-программиста.

Обновите страницу в браузере (F5). Видите разницу? Вы только что выступили в роли арт-директора, а ИИ выполнил всю грязную работу с CSS-стилями.

Шаг 5: Добавляем функционал

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

Снова выделите весь код (Ctrl+A).

Вызовите окно редактирования (Cmd+K / Ctrl+K).

Напишите:

> Добавь звуковой сигнал (приятный колокольчик), который проигрывается, когда таймер доходит до 00:00. Используй встроенный в браузер звук или ссылку на бесплатный аудиофайл.

ИИ добавит необходимую логику. Он найдет способ воспроизвести звук, не требуя от вас поиска файлов.

Шаг 6: Что делать, если всё сломалось?

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

Алгоритм действий при ошибке:

Не пытайтесь чинить код сами, если вы не знаете языка.

Если в браузере есть явная ошибка (красный текст в консоли разработчика F12), скопируйте её.

Если явной ошибки нет, опишите проблему словами в чат (Ctrl+L):

> «После последнего изменения таймер перестал запускаться. Кнопка 'Старт' не реагирует. Верни рабочее состояние и проверь логику».

ИИ проанализирует свои последние действия, найдет ошибку и исправит её. В вайбкодинге откат назад — это шаг вперед.

Понимание структуры (для любознательных)

Хотя мы не пишем код, полезно понимать, из чего состоит наш файл index.html. ИИ упаковал туда три слоя:

HTML (Скелет): Это кнопки и цифры, которые вы видите. Теги <div>, <button>, <span>.

CSS (Кожа): Это цвета, отступы, шрифты и анимации. Блок <style>.

JavaScript (Мозги): Это логика, которая заставляет цифры меняться каждую секунду. Блок <script>.

В традиционной разработке эти слои часто разносят по разным файлам (style.css, script.js). Но для вайбкодинга и простых проектов держать всё в одном файле (index.html) — отличная практика. Это упрощает контекст для ИИ и облегчает запуск для вас.

Заключение

Посмотрите на свой экран. Вы только что создали работающее приложение. Вы не учили синтаксис циклов, не запоминали названия CSS-свойств. Вы просто общались.

Ваше домашнее задание — не останавливаться. Попробуйте изменить время таймера на 45 минут. Попробуйте добавить список задач под таймером. Экспериментируйте с промптами.

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

Добро пожаловать в клуб создателей!

Публикация проекта в интернете и методы исправления ошибок с помощью ИИ

Поздравляю! Если вы читаете эту статью, значит, у вас на компьютере уже есть файл index.html с работающим «Помодоро-таймером». Вы создали его, общаясь с ИИ, и он работает локально. Это огромный шаг.

Но есть нюанс: пока что этот шедевр видите только вы. Если вы отправите другу ссылку вида file:///C:/Users/Name/Desktop/pomodoro-app/index.html, она у него не откроется. Почему? Потому что этот файл лежит на вашем жестком диске, а не в интернете.

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

От локального файла к глобальной ссылке

Чтобы ваш сайт стал доступен другим, его нужно разместить на сервере. Этот процесс называется хостинг (от англ. host — принимать гостей).

!Визуальное объяснение разницы между локальным хранением файла и хостингом в интернете

Раньше для этого нужно было покупать домен, настраивать FTP-клиенты и разбираться в администрировании серверов. В эпоху вайбкодинга мы используем инструменты, которые делают это за секунды.

Инструмент: Netlify Drop

Для нашего первого проекта мы используем сервис Netlify Drop. Это самый простой способ опубликовать статический сайт (такой, как наш, состоящий из HTML, CSS и JS).

Инструкция по публикации:

Откройте папку с вашим проектом pomodoro-app на компьютере.

Перейдите на сайт Netlify Drop.

Вы увидите область с надписью "Drag and drop your site output folder here".

Просто перетащите вашу папку pomodoro-app в этот круг.

Подождите несколько секунд.

Как только загрузка завершится, Netlify выдаст вам случайную ссылку (например, agitated-beaver-123456.netlify.app). Нажмите на неё. Вуаля! Ваш таймер теперь в интернете. Эту ссылку можно отправить другу, маме или выложить в соцсети.

Искусство отладки: Что делать, если что-то сломалось?

В программировании ошибки неизбежны. Их называют багами (bugs). Даже профессионалы с 20-летним стажем пишут код с ошибками. Разница лишь в том, как они их исправляют.

В вайбкодинге мы не ищем пропущенную запятую глазами. Мы используем ИИ как детектива.

Тип 1: Визуальные баги

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

Как лечить: Сделайте скриншот проблемы (или просто опишите её) и отправьте в чат Cursor.

> Промпт: «Посмотри на кнопку 'Старт'. Она прилипла к верхнему краю экрана. Добавь отступ сверху и сделай её по центру. И еще, цвет текста сливается с фоном, сделай его контрастнее».

Тип 2: Логические ошибки

Это когда программа работает, но неправильно. Например, таймер уходит в минус (показывает -00:01) или не останавливается при нажатии на паузу.

Здесь нам может понадобиться немного математики, чтобы понять, как объяснить проблему ИИ. Представьте, что мы хотим добавить прогресс-бар (полоску времени). ИИ должен рассчитать ширину полоски.

Формула расчета ширины прогресс-бара выглядит так:

Где — итоговая ширина полоски в процентах, — текущее оставшееся время в секундах, — изначальное время таймера (например, 1500 секунд для 25 минут), а — множитель для перевода дроби в проценты.

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

> Промпт: «Прогресс-бар заполняется странно. Кажется, он растет, когда время уменьшается. Проверь формулу расчета ширины. Она должна уменьшаться от 100% до 0% по мере истечения времени».

Тип 3: «Тихие» ошибки и Консоль разработчика

Самый коварный тип ошибок: вы нажимаете кнопку, и... ничего не происходит. Таймер стоит. Ошибок на экране нет.

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

Как открыть консоль:

Нажмите F12 (или Fn+F12) в браузере.

Или кликните правой кнопкой мыши в любом месте страницы -> Просмотреть код (Inspect) -> вкладка Console.

Если вы видите там красный текст — это джекпот! Это сообщение об ошибке.

!Как выглядит сообщение об ошибке в консоли разработчика

Алгоритм действий:

Копируйте красный текст ошибки.

Идите в Cursor.

Вставьте текст ошибки в чат и добавьте: «Я нажал на кнопку Старт и получил эту ошибку. Исправь».

ИИ мгновенно поймет, в какой строке проблема, и предложит исправление.

Цикл вайбкодинга: Итерации

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

Generate: Сгенерировали код в Cursor.

Test: Открыли index.html локально, проверили.

Debug: Если есть ошибки — скормили их ИИ, получили новый код.

Deploy: Когда всё работает идеально, снова перетащили папку в Netlify Drop.

> Важно: При повторной загрузке папки в Netlify сайт обновится. Ссылка может измениться, если вы не зарегистрировались, но для тестов это не страшно.

Продвинутые советы по промптингу ошибок

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

Давайте контекст: Не пишите просто «не работает». Пишите: «Я добавил звук окончания таймера, но теперь кнопка сброса не обнуляет таймер»*. Просите объяснений: Если ИИ предлагает сложное решение, спросите: «Объясни, почему возникла эта ошибка, простыми словами»*. Это поможет вам лучше понимать логику. Откат: Если ИИ окончательно запутал код, используйте Ctrl+Z в редакторе или попросите ИИ: «Верни код к состоянию, когда таймер работал, но без звука»*.

Заключение

Теперь вы обладаете полным циклом навыков вайбкодера:

Придумываете идею.

Описываете её ИИ.

Получаете код.

Исправляете ошибки через диалог.

Публикуете результат в интернете.

Вам больше не нужно бояться красного текста в консоли или сломанных кнопок. Для вайбкодера ошибка — это просто еще одна тема для разговора с ИИ.

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