Вайб-кодинг: что это и как собрать сайт нейросетью

Что такое вайб-кодинг простыми словами

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

Главное отличие от обычного программирования в точке контроля. Раньше человек держал в голове синтаксис и писал строки сам. Теперь он держит в голове задачу и результат, а строки пишет модель. Читать код всё равно приходится, просто на другом уровне: вопрос «как написать цикл» сменяется вопросом «делает ли эта страница то, что я просил».

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

Чем собирают: четыре инструмента

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

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

Как собрать сайт нейросетью: пять шагов

Порядок, который работает. Он выглядит скучно, зато не приводит к «сделала что-то не то, начинаем заново».

Отдельно про пятый шаг. Проверять надо не «красиво ли», а конкретные вещи: открывается ли страница на телефоне, есть ли Title и Description, отдаёт ли сервер код 200, работает ли форма. Половина сгенерированных страниц уезжает в продакшн с пустыми мета-тегами — модель про них просто не вспоминает, пока не попросишь.

Что собирают чаще всего: шесть типов страниц

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

Общее у всех шести: страниц немного, контент меняется редко, зато нужен блок, которого нет в готовых шаблонах. Как только появляется ежедневное обновление и человек без технического бэкграунда в роли редактора — выигрывает обычная CMS, я разбирал это в сравнении движков.

Живые примеры блоков

Дальше — три блока, отрисованные прямо на этой странице. Это обычный HTML и немного CSS: ровно то, что отдаёт модель, когда просишь собрать секцию. Смотрите на структуру: текст внутри взят для примера.

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

Ещё четыре блока, которые просят чаще всего

Продолжение галереи, тоже живой вёрсткой прямо на странице.

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

Пример калькулятора: считает прямо здесь

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

Формула простая и её видно: конструктор берёт подписку и время на правки внутри редактора, разработка на CMS — разовую сборку плюс поддержку, вайб-кодинг — ваше время на постановку задачи и проверку. Цифры условные, смысл в порядке величин.

Дизайн: почему всё выходит одинаковым и что с этим делать

Главная претензия к сгенерированным страницам справедлива: они похожи друг на друга. Одинаковые скруглённые карточки, одинаковый синий акцент, одинаковые тени. Причина простая — модель без указаний берёт усреднённый стиль из того, что видела чаще всего.

Лечится это тем, что дизайнеры делают давно: дизайн-системой. Только теперь её кладут в промпт текстом. Формат прижился под именем DESIGN.md — обычный файл, где перечислены цвета, шрифты, отступы, радиусы и правила компонентов. Модель читает его перед работой и собирает интерфейс сразу в нужном стиле.

## Colors
primary:    #635bff
background: #ffffff
surface:    #f6f9fc
text:       #0a2540

## Typography
heading: Inter 700, tracking -0.03em
body:    Inter 400, line-height 1.65

## Spacing & Radius
radius-md: 8px
shadow:    0 2px 8px rgba(0,0,0,0.08)

## Components
button: filled, 6px radius, 500 weight
card:   1px border, surface bg, p-4

Писать такой файл руками необязательно. Есть каталог DesignMD: там больше тысячи готовых дизайн-систем известных продуктов — Stripe, Vercel, Notion, Linear, Apple, — каждую можно скопировать как DESIGN.md и вставить в свой промпт. Кроме систем там лежат готовые секции (первый экран, тарифы, навигация, подвал), паттерны интерфейсов и параметры анимации: тайминги и кривые.

Отдельно полезная штука для тех, кто работает в терминале: каталог подключается по MCP к Claude Code, Cursor, Windsurf и VS Code. После подключения агент сам ищет нужную систему и подтягивает её, когда собирает интерфейс, — копировать вручную больше не нужно. Базовый доступ бесплатный, платный тариф снимает лимиты на генерацию.

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

Один блок в шести дизайн-системах

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

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

Как пользоваться из России

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

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

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

Где вайб-кодинг ломается

Три места, где подход перестаёт работать, и их лучше знать заранее.

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

Нужна админка. Сгенерированный сайт правится через код. Если контент обновляет человек без технического бэкграунда — каждый текст будет приходить к вам. Для блога с ежедневными публикациями это тупик, тут выигрывает обычная CMS.

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

Как это выглядит на моём сайте

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

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

Что это стоит. Каждая правка идёт через код, и человек без технической части сюда не сядет. Массовые изменения — новый пункт меню на семистах страницах — делаются скриптом, и скрипт надо написать и проверить. Это осознанный обмен: скорость и контроль в обмен на отсутствие админки.

Частые вопросы

Главное