Вайбкодинг: что это и как создать сайт с помощью ИИ

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

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

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

В разговоре вайбкодингом часто называют и разработку с тщательной проверкой кода. Полезно различать эти подходы: результат генерации всё равно требует проверки. Инструменты можно разделить на три группы:

• Генераторы в браузере вроде Lovable, Bolt или v0. Описываешь сайт в чате и сразу видишь результат. Перед выбором проверь возможность выгрузить код, подключить свой домен и перенести сайт на другой хостинг.
• Редакторы кода с ИИ вроде Cursor или VS Code с расширениями. Код лежит у тебя, ИИ предлагает и вносит правки, а ты видишь каждое изменение.
• Агенты вроде Claude Code. Сами читают проект, правят файлы, запускают сборку и тесты. Подходят для задач на несколько шагов. Как начать, описано в статье о Claude Code.

Какие задачи удобно поручать ИИ

• Лендинг или сайт-визитка из нескольких страниц без сложной логики.
• Прототип, чтобы показать идею заказчику или проверить спрос.
• Внутренние инструменты: калькулятор, таблица, админ-страница для одного человека.
• Скрипты: выгрузка, перенос данных, массовая обработка файлов.
• Доработка существующего сайта, когда ты понимаешь, что и где меняется: новый блок, форма, правка вёрстки.

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

Типичные проблемы сайта, созданного с ИИ

Сайт может выглядеть готовым и при этом не годиться для работы. Типичные проблемы:

• Безопасность. Ключи API прямо в коде страницы, формы без защиты от спама, данные без проверки. ИИ пишет то, о чём попросили, а о безопасности часто не просят.
• Поисковики. Google умеет выполнять JavaScript, но ошибки рендеринга или недоступные ресурсы могут скрыть контент. Проверь, что робот видит текст и ссылки, а у страниц есть отдельные URL, заголовки и описания. Подробнее — в руководстве Google по JavaScript SEO.
• Данные заявок. Проверь, куда форма отправляет имя и телефон, кто имеет к ним доступ и как долго они хранятся. Правовые основания обработки и документы нужно определить для конкретного сайта.
• Интеграции. Оплата, CRM, 1С, доставка — здесь ошибки стоят денег, и проверить их на глаз нельзя.
• Поддержка. Через полгода нужно что-то изменить, а в проекте — тысячи строк, которые никто не читал. Каждая новая правка ломает что-то старое.
• Размещение. Домен, хостинг, HTTPS, почта, резервные копии — всё это остаётся на тебе.

Как создать сайт с помощью ИИ: порядок работы

1. Сначала опиши задачу

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

Такое задание помогает оценить результат и уменьшить число переделок. Пример первого запроса:

Сделай одностраничный сайт для мастерской по ремонту велосипедов.
Блоки: первый экран с телефоном и кнопкой «Записаться», услуги с ценами,
отзывы, карта, форма заявки (имя, телефон, согласие на обработку данных).
Стек: обычные HTML, CSS и JavaScript, без фреймворков и внешних библиотек.
Сайт должен хорошо выглядеть на телефоне. Тексты возьми из файла content.md.
Сначала покажи план файлов и структуру страницы, код пока не пиши.

2. Выбери простой стек

Для простой визитки часто достаточно HTML и CSS. Если владелец будет регулярно редактировать материалы, заранее выбери CMS, например WordPress.

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

3. Двигайся маленькими шагами

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

4. Проверь сайт перед публикацией

• Форма доходит до почты или мессенджера, и в ней есть защита от спама.
• В коде, который отдаётся браузеру, нет ключей и паролей.
• У каждой страницы есть свой title и description, есть robots.txt и карта сайта.
• Сайт работает по HTTPS, адрес с www и без него ведёт в одно место.
• Проверены условия сбора данных, необходимые документы и настройки доступа к заявкам.
• Страницы быстро грузятся на телефоне: проверь в PageSpeed Insights.
• Подключены Яндекс Метрика и Вебмастер.

Пункты из этого списка можно отдать самому ИИ: «проверь проект по этому списку и перечисли, что не выполнено». Но результат проверки всё равно нужно перепроверить.

Когда нужен разработчик

Подключай разработчика, когда не можешь самостоятельно проверить важную часть проекта: оплату, доступ к данным, интеграцию с CRM или 1С. Для сайта, который будет развиваться годами, также важны понятная структура и документация.

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

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