Вайбкодинг: первый сайт за вечер без программиста

Предприниматель полгода откладывает запуск сайта, потому что разработчик стоит 150–250 тысяч рублей, а «сделать самому» кажется фантастикой. В марте 2026 один из резидентов COMANDOS запустил первый лендинг через вайбкодинг за три вечера, не зная ни HTML, ни JavaScript — сейчас он ведёт шесть рабочих сайтов и ни разу не звонил программисту.

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

Вайбкодинг и первый сайт: почему это работает без кода

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

Согласно исследованию Stack Overflow Developer Survey 2026, более 76% разработчиков используют AI-инструменты ежедневно. Но тренд сместился дальше: теперь люди без технического бэкграунда запускают рабочие продукты с нуля, опираясь только на AI. Андрей Карпатий (один из основателей OpenAI) ещё в 2025 году назвал этот подход «software 1.0 written by the vibe» — отсюда и название.

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

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

• Нужен статичный лендинг или сайт-визитка (без личных кабинетов и баз данных)
• Бюджет ограничен: разработчик стоит 80–200 тысяч рублей, а AI-подписка — 1 900–3 200 ₽/мес
• Важна скорость: MVP нужен за дни, а не недели
• Сайт будет меняться часто: править через AI быстрее, чем объяснять задачу подрядчику

Когда лучше позвать разработчика:

• Нужен backend с авторизацией, личными кабинетами, платежами
• Высокие нагрузки (тысячи пользователей одновременно)
• Критична безопасность данных клиентов

---

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

Три главных инструмента на российском рынке в 2026 году (гид по выбору нейросети):

Инструмент	Формат	Стоимость	Для кого
Google Antigravity	Браузерная IDE	Бесплатно / $20/мес	Первый раз, без установки
Claude.ai (Projects)	Браузерный чат	~1 900 ₽/мес (Pro)	Удобнее для итерации
Cursor	Desktop IDE	Бесплатно → от $20/мес	Полный контроль над файлами
Claude Code	Терминальный агент	По токенам	Автопилот для опытных

Подробное сравнение инструментов — в статье «Cursor vs Claude Code vs Antigravity: что выбрать». Здесь — короткий вывод: для первого сайта берите Google Antigravity или Claude.ai — браузерный интерфейс, регистрация через Google, старт через 5 минут. Подробнее про Google Antigravity читайте в обзоре инструмента. Концептуально вайбкодинг разобран в гайде «Вайбкодинг простыми словами» — там же найдёте таблицу сравнения с наймом разработчика.

Оплата для российских пользователей. Claude Pro и Cursor принимают карты через посредников (Boosty, Paygine) или криптовалюту. Google Antigravity в базовом режиме бесплатен без карты. Telegram-каналы с тегом «AI подписки» предлагают оформление через СБП.

Хостинг: Vercel — бесплатный тариф, работает с российских IP, деплой за 2–3 минуты. Для хранения данных в РФ: Timeweb Cloud или Beget (от 150 ₽/мес).

---

Шаг 1: ТЗ на русском — главная работа

Качество вашего первого сайта на 80% зависит от промпта. Не от инструмента, не от настроек — от того, насколько точно вы объяснили задачу.

Плохой промпт: «Сделай лендинг для моей студии».

Хороший промпт для первого сайта:

Сделай одностраничный лендинг для студии детской фотографии «Светлячок».
Целевая аудитория: мамы детей 1–7 лет, Москва.

Структура страницы:
1. Шапка: логотип (заглушка), название студии, кнопка «Записаться»
2. Герой-блок: крупный заголовок «Воспоминания, которые остаются», 
   подзаголовок, кнопка CTA
3. Три преимущества: мягкий свет студии, детский реквизит, фото за 24 ч
4. Цены: три пакета — 5 000, 8 000, 12 000 ₽, таблица с преимуществами
5. Форма: имя, телефон, кнопка «Хочу фотосессию»
6. Подвал: контакты, ссылки на Instagram и ВКонтакте

Стиль: пастельные тона (розовый, молочный, золото), шрифт с засечками 
для заголовков, без засечек для текста. Мобильная версия обязательна.
Технически: один HTML-файл с встроенным CSS, без внешних зависимостей.

Такое ТЗ даёт инструменту всё необходимое: бизнес, аудиторию, структуру, стиль, технические требования. AI не будет гадать.

🔑 Лайфхак: добавьте в конец ТЗ «Сделай код с комментариями на русском — я буду его редактировать». Это поможет понимать, какую часть менять при итерации. Больше проверенных промптов для бизнес-задач — в коллекции «Готовые промпты для бизнеса».

---

Шаг 2: Первая версия за 20 минут

Вставьте ТЗ в чат выбранного инструмента. Через 1–3 минуты получите полный HTML/CSS-код.

Что делать с результатом:

1. Скопируйте весь код (кнопка «Copy code»).
2. Создайте папку moy-sayt на рабочем столе, внутри — файл index.html.
3. Вставьте код, сохраните.
4. Откройте index.html в браузере (двойной клик или перетащите во вкладку).

Первая версия редко бывает идеальной — это нормально. Цвет не тот, кнопка не там, лишний блок. Всё правится одним сообщением.

Как просить правки — конкретно:

• «Измени цвет фона шапки с белого на тёмно-синий (#1a2540)»
• «Кнопка “Записаться” должна быть оранжевой и крупнее — сейчас она теряется»
• «Уберите секцию с командой — она мне не нужна»
• «На мобильном текст слишком мелкий — увеличь до 16px минимум»

«Вайбкодинг и первый сайт — это не “попросил и с первого раза получил идеал”. Это диалог: вы описываете, что не так, AI правит, вы снова смотрите. Обычно 3–5 итераций до того, что действительно хочется», — Дмитрий Попов, AI бизнес-стратег.

---

Шаг 3: Мобильная версия — обязательная проверка

По данным Яндекс.Метрики, более 65% трафика в российском малом бизнесе приходит со смартфонов (источник: Яндекс Маркетинг 2026). Если сайт сломан на телефоне — половина лидов теряется.

Как проверить без смартфона:

1. Откройте index.html в Chrome.
2. Нажмите F12 (или «Просмотр кода»).
3. В панели DevTools найдите значок телефона — Toggle device toolbar.
4. Выберите «iPhone 12» или «Samsung Galaxy S21», ширина 375–390px.

Что проверяем:

• Текст читается без горизонтальной прокрутки
• Кнопки нажимаются — не слишком маленькие, не перекрывают друг друга
• Форма видна целиком
• Изображения не выходят за край экрана
• Нет «белых полос» по бокам

Если что-то сломано — пишите AI конкретно: «На мобильном 375px меню перекрывает заголовок. Исправь, чтобы меню сворачивалось в бургер».

---

Шаг 4: Публикация на Vercel — 5 минут до рабочей ссылки

Vercel — самый быстрый способ опубликовать статический сайт бесплатно. Работает с российских IP без VPN, регистрация через GitHub.

Пошагово:

1. Создайте аккаунт на github.com (если нет) — это бесплатно.
2. Нажмите «New repository», назовите moy-sayt, сделайте публичным.
3. Перетащите файл index.html в интерфейс репозитория → Commit changes.
4. Зайдите на vercel.com → «Sign Up with GitHub».
5. «Add New Project» → выберите moy-sayt → Deploy.
6. Через 2–3 минуты получите ссылку вида moy-sayt.vercel.app.

Домен (yoursite.ru) подключается через настройки Vercel. Нужна CNAME-запись у регистратора домена — это 10 минут в панели управления.

🔑 Лайфхак: попросите AI написать README.md с инструкцией по деплою на Vercel — тогда при следующем обновлении не нужно вспоминать шаги.

Российские альтернативы хостингу:

• Timeweb Cloud — от 150 ₽/мес, деплой через GitHub Actions, данные в РФ
• Beget — от 149 ₽/мес, хостинг + домен вместе, панель управления на русском
• GitHub Pages — бесплатно, но нет backend-функций и медленнее CDN

---

Типичные ошибки в вайбкодинге при создании первого сайта

Ошибка 1: Расплывчатое ТЗ

«Сделай красивый сайт» → AI не знает, что для вас красиво. Всегда указывайте: конкретные цвета, какие блоки, размер кнопок, что показывать, для кого сайт.

Ошибка 2: Попытка править код вручную

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

Ошибка 3: Хотеть всё сразу

«Сделай интернет-магазин с каталогом, корзиной, оплатой и личным кабинетом» → даже AI не справится с этим за один промпт. Начните с лендинга. Потом добавляйте функции по одной: сначала форма, потом аналитика, потом интеграция с CRM.

Ошибка 4: Пропустить мобильную проверку

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

Ошибка 5: Не сохранять промпты

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

---

Цифры: что реально ожидать от первого сайта через вайбкодинг

По данным нашей редакции (12 лендингов, апрель–август 2026):

Показатель	Значение
Среднее время первого лендинга	2,5 часа
Среднее время последующих	45 минут
Стоимость инструментов в месяц	1 900–3 200 ₽
Количество итераций до финала	3–7
Доля проектов без разработчика	100% на этапе MVP

По исследованию McKinsey (2025), компании, внедрившие AI-генерацию кода, сократили время выхода на рынок на 25–40% по сравнению с традиционной разработкой. Для малого бизнеса этот эффект ещё сильнее: у вас нет буфера в виде команды, и скорость запуска MVP прямо влияет на выживаемость идеи. Подробнее о том, во сколько обходится AI-инструментарий для малого бизнеса, — в разборе стоимости внедрения.

---

Что дальше: от первого сайта к рабочему продукту

Вайбкодинг и первый сайт — это точка входа. Дальше логика такая:

Добавьте аналитику. Попросите AI вставить Яндекс Метрику (тег в <head>). Займёт 5 минут, даст данные о трафике, источниках и поведении. Без аналитики вы не знаете, работает ли ваш лендинг.

Подключите форму. Сервис Formspree или Tilda-альтернативы — форма начинает слать письма на вашу почту без backend. Бесплатно до 50 заявок в месяц.

Автоматизируйте обработку заявок. Когда заявки пошли, следующий шаг — AI-агент, который принимает их в Telegram и помогает квалифицировать. Это уже автоматизация — подробнее про первый шаг в «Как внедрить AI-агента в бизнес».

Переходите к сложным проектам. Когда освоите одностраничник, можно строить Telegram-боты, небольшие CRM, продуктовые сервисы — принцип тот же, масштаб другой. Подробнее про вайбкодинг и что это такое — в общем обзоре.

---

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

Нужно ли знать код, чтобы создать первый сайт через вайбкодинг?

Нет. Вайбкодинг построен на том, что вы описываете задачу на человеческом языке, а AI пишет код. Понимание HTML и CSS помогает быстрее находить проблемы, но не обязательно.

Сколько стоит создать сайт через вайбкодинг?

Инструменты: Claude Pro — 1 900 ₽/мес, Cursor — от бесплатного, Google Antigravity — бесплатно в базовом режиме. Хостинг Vercel — бесплатно. Итого первый сайт обходится от 0 ₽ единовременно плюс подписка на AI при необходимости.

Какой инструмент лучше для первого сайта?

Для первого раза — Google Antigravity или Claude.ai в браузере: нет установки, регистрация через Google. Cursor — когда нужен полный контроль над файлами проекта. Claude Code — для автопилота в терминале.

Где опубликовать первый сайт бесплатно?

Vercel: бесплатный тариф, автодеплой из GitHub, SSL, работает с российских IP. Российские альтернативы: Timeweb Cloud, Beget — от 150 ₽/мес, хранение данных в РФ.

Что делать, если AI написал сломанный код?

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

---

Вайбкодинг пошагово: как организовать рабочий процесс

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

Сессия 1 (ТЗ и структура): пишете промпт, получаете HTML-скелет, проверяете структуру блоков. Не трогаете цвета и шрифты — только убеждаетесь, что все нужные блоки на месте.

Сессия 2 (дизайн): добавляете цвета, шрифты, отступы. Фиксируете в одном дополнительном промпте: «Применить стиль: фон #F5F5F0, заголовки Inter Bold, тело Roboto Regular 16px, кнопки оранжевые #FF6B35».

Сессия 3 (контент и мобильная): вставляете реальные тексты, фото (если есть), проверяете мобильную версию.

Сессия 4 (деплой и аналитика): публикуете на Vercel, добавляете Яндекс Метрику.

Такое разделение сокращает количество итераций в два раза и снижает риск того, что правка одного элемента сломает другой.

Как Cursor IDE помогает новичку структурировать работу. Cursor IDE для новичка — это полноценная среда разработки с AI внутри: слева структура файлов, справа код, внизу терминал. Вы видите, какой файл изменился и можете откатить правку. Для лендинга это избыточно, но для сайта с несколькими страницами — жизнь сильно упрощается.

Лендинг AI пошагово через Cursor: создайте папку проекта, откройте в Cursor (File → Open Folder), нажмите Ctrl+K или Cmd+K для вызова AI-чата прямо в редакторе, вставьте ТЗ — Cursor напишет файл и сразу откроет его для редактирования.

---

Вайбкодинг и первый сайт — это не навык программиста, а навык формулировать задачи. Предприниматель, который умеет написать точное ТЗ, получает сайт за вечер. Тот, кто пишет «сделай красиво» — тратит неделю на итерации.

Если вы дочитали до этого места — вы уже знаете достаточно, чтобы запустить. Инструменты готовы, план понятен. Первый лендинг займёт вечер. С нас — поддержка в COMANDOS: там предприниматели строят AI-инструменты вместе, делятся промптами и результатами в реальном времени.