Сайт вайб-кодингом: пошаговая инструкция + 5 ошибок

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

Что понадобится

• Понимание, зачем сайт. Визитка, лендинг под услугу, каталог, внутренний инструмент — от этого зависит выбор на шаге 1.
• Текст и картинки. Нейросеть напишет и рыбу, но сайт с придуманными ценами и выдуманными отзывами вам не нужен. Соберите настоящее заранее.
• Инструмент. Для первого сайта — веб-конструктор в браузере, ставить ничего не надо.
• Домен, если сайт публичный. Технический адрес вида имя.конструктор.app годится для проверки, но не для визитки.
• Вечер. Реально — два-три, потому что тексты.

1. Решить, нужен ли вообще сайт своими руками

Скучный, но честный шаг. Вайб-кодинг оправдан не всегда:

Задача	Чем делать
Визитка, лендинг под услугу, портфолио	вайб-кодинг: быстро, бесплатно, полный контроль над видом
Внутренний инструмент: калькулятор, форма, дашборд	вайб-кодинг, лучший сценарий вообще
Интернет-магазин с оплатой и складом	готовая платформа; собранный руками приём платежей — это ответственность за чужие деньги
Сайт с личными кабинетами и чужими данными	не первый проект: цена ошибки другая
Блог, который ведут несколько человек	готовая CMS: вам нужна не разработка, а редактура

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

2. Выбрать инструмент под первый сайт

Для сайта подходят два класса из четырёх — разбор всех:

Веб-конструкторы (Replit, Lovable, v0). Описали в браузере — получили работающее приложение, сразу с адресом. Ничего ставить не надо. Это правильный выбор для первого сайта.

Терминальные агенты (Claude Code, Codex). Больше контроля, код лежит у вас, можно положить в любой хостинг. Но вечер уйдёт на установку и настройку, а не на сайт.

Порядок для новичка: конструктор → и только когда упрётесь в его границы, переходите к агенту.

3. Описать сайт так, чтобы получилось похожее

Опишите четырьмя блоками — это тот же приём, что и в общем старте, но применительно к сайту:

Что это и для кого. «Одностраничный сайт частного мастера по ремонту квартир в Казани. Посетитель — человек, который ищет бригаду и хочет понять цены и посмотреть работы».

Структура по экранам. «Первый экран: заголовок, короткое описание, кнопка “оставить заявку”. Дальше: услуги с ценами таблицей. Дальше: шесть фото работ. Дальше: как работаем — четыре шага. Внизу: форма заявки (имя, телефон, что нужно) и контакты».

Как выглядит. «Сдержанно, светлый фон, один акцентный цвет, крупный читаемый шрифт. Никакого стока с улыбающимися людьми. Обязательно нормально читается с телефона».

Чего не надо. «Без всплывающих окон, без чата в углу, без анимаций при прокрутке, без слайдера на первом экране».

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

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

4. Собрать по частям и проверять каждую

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

1. Структура и тексты без оформления — проверяем, что всё на месте и в нужном порядке.
2. Оформление — цвета, шрифты, отступы.
3. Мобильная версия — отдельным заходом, явной просьбой.
4. Форма — последней, потому что она сложнее всего.

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

5. Разобраться с формой заявки

Место, где ломается больше всего первых сайтов. Форма должна куда-то отправлять данные, а «куда-то» — это уже не вёрстка.

Три рабочих варианта, от простого к сложному:

• Готовый сервис форм — вы получаете письмо на почту, ничего программировать не надо. Для визитки достаточно;
• Отправка в Telegram через бота — приходит мгновенно, удобно, настраивается за десять минут;
• Своё хранение заявок — только если вы понимаете, что берёте на себя ответственность за персональные данные. Для первого сайта не надо.

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

6. Опубликовать

В веб-конструкторе публикация — это кнопка, адрес выдаётся сразу. Дальше два действия:

• подключить свой домен, если сайт публичный: технический адрес выглядит как черновик и в поиске не живёт;
• проверить, что сайт открывается по https — сейчас это делается само, но убедиться стоит.

Если собирали терминальным агентом, попросите его же: «подготовь проект к публикации и объясни по шагам, что мне сделать». Он справится, а вы получите инструкцию своими словами.

7. Проверить перед тем, как давать людям

Список короткий и обязательный:

• открыть с телефона и пролистать целиком;
• отправить заявку самому и убедиться, что она дошла;
• отправить заявку неправильно — пустую, с буквами в телефоне — и посмотреть, что происходит;
• проверить тексты глазами. Нейросеть могла оставить рыбу или придумать факт: «более 500 довольных клиентов» там, где их пятьдесят;
• спросить агента про секреты: «есть ли в проекте ключи или пароли, которые видны в исходном коде страницы?»;
• проверить скорость — если первый экран грузится дольше пары секунд, скорее всего, дело в неоптимизированных фотографиях.

Пять ошибок

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

2. Оставить придуманные тексты. Модель уверенно пишет «работаем с 2012 года» и «более 500 проектов». Это не оценочная неточность, а выдумка, за которую отвечать вам.

3. Не сделать мобильную версию отдельным шагом. «Адаптивный» в ответе агента и «нормально читается на телефоне» — разные вещи. Проверяется только глазами.

4. Забыть про согласие на обработку данных. Форма, собирающая телефоны без согласия и политики, — нарушение, а не мелочь оформления.

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

Коротко о главном

• Сначала решите, не лучше ли готовое решение: вайб-кодинг выигрывает на нетиповых и небольших задачах.
• Первый сайт — в веб-конструкторе, без установки чего-либо.
• Описание из четырёх блоков, и блок «чего не надо» — самый ценный.
• Собирайте по частям: структура → оформление → мобильная версия → форма.
• Форму подключайте через готовый сервис или Telegram; рядом — согласие на обработку данных.
• Перед публикацией: телефон, живая заявка, неверный ввод, тексты глазами, секреты в коде.

Дальше: с чего начать вайб-кодинг вообще, чем собирать, где граница возможностей.