Вайбкодинг: как сделать сайт по описанию — от промпта до публикации

В этой статье — весь путь от текстового описания до опубликованного сайта: готовый промпт, правки итерациями, проверка на телефоне, подключение формы заявок и три способа выложить результат в интернет. Подойдёт тем, кто никогда не делал сайтов: вайбкодинг закрывает и код, и дизайн. Понадобится вечер времени и AI-агент — платный или бесплатный. Всё проверено в июле 2026 года.

Как это работает: три этапа

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

• Первая версия одним промптом. Подробное описание → агент отдаёт готовую страницу. Здесь важно попросить один HTML-файл: его легко открыть, проверить и опубликовать.
• Итерации. 10–20 коротких правок: цвета, отступы, тексты, порядок секций. Это основная часть работы.
• Публикация. Файл выкладывается на бесплатный или обычный хостинг — способы ниже.

Агент подойдёт любой: терминальный вроде Claude Code или Codex, редактор вроде Cursor, десктоп-приложение вроде RUFP. Если ещё не выбрали — есть сравнение нейросетей и агентов для вайбкодинга. Дальше по тексту шаги одинаковы для всех.

Готовый промпт для сайта

Скопируйте и замените бизнес на свой:

Почему промпт устроен именно так:

• Перечислены секции по порядку. «Сделай красивый лендинг» без структуры даёт случайный результат; список секций — предсказуемый.
• Один акцентный цвет назван словами. Это самый дешёвый способ получить целостный дизайн без дизайнера.
• «Хорошо выглядеть на телефоне» — сказано явно. Большинство посетителей лендингов приходят с телефона.
• Тексты — черновиком. Заполненная страница выглядит честнее, чем «Lorem ipsum», и её проще оценивать.

Правки: как довести дизайн до нормального

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

Типичная последовательность правок для лендинга:

• «Сделай первый экран выше, чтобы кнопка была видна без прокрутки»;
• «Замени коралловый на глубокий зелёный во всех местах»;
• «В тарифах выдели средний как рекомендуемый»;
• «Уменьши таблицу расписания, на телефоне она слишком плотная»;
• «Перепиши слоган: короче и без пафоса».

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

Хочется эффектов — плавных появлений, анимаций при прокрутке? Это тоже делается описанием; продвинутый разбор со связкой инструментов — в статье про анимированный сайт без кода.

Проверка на телефоне

Минимальный чек-лист перед публикацией:

• Откройте файл в браузере и сузьте окно до ширины телефона — либо включите режим устройства: правый клик → «Просмотреть код» → значок телефона (Chrome, работает и в Яндекс Браузере).
• Проверьте: тексты не вылезают, кнопки нажимаются пальцем, таблица расписания не требует горизонтальной прокрутки.
• Всё, что сломалось, отдавайте агенту как есть: «на ширине телефона тарифы слипаются в одну колонку без отступов — поправь».

Форма заявки: как получать сообщения

Важный момент, о который спотыкаются почти все: форма в HTML-файле сама по себе никуда ничего не отправляет. Кнопка «Отправить» без обработчика — украшение. Рабочие варианты по возрастанию сложности:

• Кнопка-ссылка вместо формы. «Записаться» ведёт в ваш Telegram или WhatsApp. Самый надёжный вариант для старта — попросите агента: «замени форму на кнопку, которая открывает чат со мной в Telegram».
• Внешний сервис форм. Скажите агенту: «подключи форму к бесплатному сервису приёма форм» — он предложит вариант вроде Formspree и вставит нужный код; заявки будут приходить на почту.
• Отправка в Telegram-бота. Заявки приходят сообщением в ваш Telegram. Требует создать бота и попросить агента настроить отправку — это уже мини-проект третьей недели, если идти по плану обучения вайбкодингу с нуля.

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

Порядок для GitHub Pages: зарегистрируйтесь на GitHub, создайте публичный репозиторий, загрузите ваш файл под именем index.html, в настройках репозитория включите Pages — через пару минут сайт доступен по ссылке. Если что-то не сходится, этот же список шагов можно отдать агенту и попросить провести вас по актуальному интерфейсу.

Для хостинга с доменом: файл загружается в корневую папку сайта через панель хостинга. Название панели и кнопки различаются, но задача «загрузить index.html в корень» решается в любой из них за пять минут.

Частые ошибки

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

Когда вайбкодинг для сайта не подходит

Честные границы подхода на июль 2026 года:

• Интернет-магазин с корзиной и оплатой. Это уже полноценное приложение с платёжами и безопасностью — новичку лучше взять готовую платформу для магазинов.
• Сайт, который будут наполнять несколько человек без агента. Если контент-менеджер должен править тексты через админку — нужна CMS вроде WordPress, а не одиночный HTML-файл.
• Жёсткие корпоративные требования к бренду. Попасть агентом в утверждённый брендбук до пикселя дольше, чем сверстать по макету руками дизайнера.

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

FAQ

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

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

Как потом вносить правки?
Открываете тот же файл с агентом и описываете правку словами, затем заменяете файл на хостинге. Держите последнюю рабочую копию — это ваша «админка».

Чем это лучше конструктора вроде Тильды?
Конструктор быстрее, пока вы внутри его шаблонов, и дороже на длинной дистанции (подписка). Вайбкодинг гибче: любая логика, любой дизайн, файл принадлежит вам и живёт на любом хостинге. Если конструктор всем устраивает — это нормальный выбор; вайбкодинг выигрывает, когда хочется нестандартного или бесплатного.

Что с SEO у такого сайта?
Базовые вещи агент сделает по запросу: «добавь заголовок страницы, description и разметку заголовков по смыслу». Для лендинга услуги этого достаточно; продвижение — отдельная тема, начинающаяся с полезного содержимого, а не технологии сайта.

Что почитать дальше

• Как научиться вайбкодингу с нуля — план на месяц, если сайт — только первый шаг.
• Какие нейросети и агенты подходят для вайбкодинга — если ещё выбираете инструмент.
• Анимированный сайт без кода: Claude Code + Google Stitch — следующий уровень визуала.
• Шпаргалка по командам Claude Code — для тех, кто выбрал терминальный агент.