Сайт или лендинг за вечер с ИИ: практичный вайбкодинг без кода

Собрать рабочий сайт за вечер реально: формулируете цель, ведёте диалог с ИИ‑агентами и получаете код, контент и интеграции без ручной разработки. В этом гайде я показываю, как пройти путь от прототипа и текстов до деплоя, оплаты и аналитики в РФ. Разберём инструменты и готовые промпты, ревью AI‑кода и безопасность, чтобы процесс оставался управляемым, а не «чёрной магией».

Как собрать сайт или лендинг с ИИ — без кода

Итеративная сборка через диалог с LLM даёт темп, сравнимый с конструктором, и гибкость кода. Вы формулируете бизнес‑цели и ограничения, агент предлагает структуру, контент и модули — вы уточняете промптами и доводите до продакшена. Это не no‑code и не классический цикл с ТЗ на сотни страниц: здесь вы — архитектор, ИИ — многофункциональный исполнитель. Термин vibe coding широко обсуждают инженеры и лиды; подход стал практичным с моделями уровня OpenAI / GPT и Anthropic / Claude (включая Sonnet).

Суть подхода: чем он отличается от no-code и «классики»

Коротко:

• No‑code — визуальные конструкторы. Быстро, но ограничено архитектурой платформы.
• Классическая разработка — максимум гибкости и качества, но дороже и дольше.
• Вайбкодинг — скорость ИИ + гибкость кода. Вы ставите цель, задаёте контекст (Prompt), агент генерирует структуру и код, вы валидируете и деплоите.

На практике меняется процесс:

• ТЗ → Prompt: текстовые требования, данные и примеры вместо громоздких спецификаций.
• Сразу появляются рабочие артефакты: прототип, контент, вёрстка, интеграции.
• Роль архитектора: вы принимаете ключевые решения и отвечаете за качество.

Где это работает лучше всего: кейсы и ограничения

Подходит:

• Лендинги лидогенерации, мероприятия, продуктовые страницы.
• Мини‑каталоги, MVP‑интернет‑магазин до 50 SKU.
• Прототипы: быстро проверить гипотезу и собрать обратную связь.
• Встроенные виджеты и микросайты для B2B и IT‑услуг.

Ограничения:

• Сложная бизнес‑логика, высокие нагрузки, регуляторные требования — критичны к качеству кода и аудиту.
• Долгосрочная поддержка без инженера рискованна: нужен процесс ревью и мониторинга.
• Доступность зарубежных сервисов в РФ: часть — только с зарубежной картой или VPN. Нужны локальные альтернативы.

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

Инструменты и сравнение: Cursor, Claude Code, Replit, Lovable, Bolt.new, Tilda и др.

Классы инструментов и кратко по каждому: IDE‑ассистенты (Cursor, GitHub Copilot), облачные агенты (Replit Agent, Lovable, Bolt.new), редакторы‑генераторы и конструкторы (Tilda). Модели: OpenAI / GPT, Anthropic / Claude (Sonnet). Для оркестрации интеграций — MCP (протокол интеграции агентов), который позволяет агентам обращаться к внешним инструментам.

Сравнительная таблица (условно, без ссылок):

Инструмент	Класс	Что умеет	Цена ориентир	Доступность в РФ	Ограничения
Cursor	IDE-ассистент	Генерация/редактирование кода, чат по проекту	Free/Pro	Частично (VPN может требоваться)	Нужны базовые знания кода
Claude Code (Sonnet)	ИИ-агент	Глубокое понимание ТЗ, генерация модулей	По usage	Доступ ограничен, возможен VPN	Платёж — зарубежные карты
OpenAI / GPT	Модель	Генерация текста/кода, инструменты	По usage	Ограниченно	Политики контента и оплат
GitHub Copilot	IDE-помощник	Подсказки, автодополнение	Подписка	Ограниченно	Требует GitHub и оплаты
Replit Agent	Облачный агент	Проекты с рантаймом, быстрый деплой	Free/Pro	Ограниченно	Производительность, регион
Lovable	Генератор приложений	«Prompt → приложение», предпросмотр	Free/Pro	Частично	Меньше контроля над кодом
Bolt.new	Быстрый генератор	Проекты из промптов за минуты	Free	Частично	Экспорт/деплой — ограничения
Tilda	Конструктор	Готовые блоки, формы, оплаты в РФ	Подписка	Локально доступен	Архитектурные рамки конструктора

Отдельно о связке с Tilda. На практике это компромисс: генерируем контент и HTML‑фрагменты ИИ и переносим в Tilda, где подключаем домен, формы, платежи и метрики. Получаем скорость и локальную доступность.

Пошаговый разбор: от промпта до рабочего лендинга

Шаг 0. Роль архитектора и ТЗ

• Опишите цель, аудиторию, оффер, 1–2 целевых действия, юридические ограничения (152‑ФЗ), интеграции (CRM, платежи).
• Подготовьте референсы по тону и структуре.

Шаг 1. Prompt для структуры

• Попросите модель (GPT/Claude) сгенерировать карту блоков: Header, Hero, Social proof, Benefits, Pricing, FAQ, CTA, Footer.

Шаг 2. Контент и дизайн‑система

• Сгенерируйте текст каждого блока, палитру и типографику. Зафиксируйте компоненты.

Шаг 3. Вёрстка и адаптив

• Используйте Cursor или аналог: «создай адаптивный лендинг на чистом HTML/CSS + Tailwind, формы с валидацией, SVG‑иконки, оптимизация Lighthouse ≥ 90/90/90/90».

Шаг 4. Интеграции

• Формы: Webhook → Битрикс24 или 1С, копия на Email. Платежи: ЮKassa/CloudPayments/Robokassa. MCP — для вызовов внешних инструментов агентами (по необходимости).

Шаг 5. Деплой

• Статический хостинг или Tilda. Подключите домен и SSL, проверьте robots.txt, Sitemap.xml, favicon, Open Graph.

Шаг 6. Метрики и тесты

• Яндекс Метрика, цели/сквозная аналитика, антиспам, резервное копирование.

Шаг 7. Ревью и релиз

• Линтер, базовые unit‑тесты, ручные проверки сценариев, чек‑лист безопасности (ниже).

Пример промпта для лендинга: шапка, тарифы и форма — готовый шаблон

Скопируйте и адаптируйте:

Ты — фронтенд-разработчик и копирайтер. Сгенерируй одностраничный лендинг для B2B-услуги «Аудит маркетинга». Требования:
1) Структура: Header (логотип+меню), Hero (заголовок ≤60 симв., подзаголовок ≤120, CTA-кнопка), Social proof (3 лого+1 цитата), Benefits (3–5 пунктов), Pricing (3 тарифа), FAQ (5 вопросов), Contact form.
2) Тон: деловой, краткий. ЦА: собственники малого бизнеса в РФ.
3) Вёрстка: HTML5 + Tailwind CSS, адаптив 360–1440px, тёмная/светлая тема.
4) Форма: имя, телефон (маска +7), email, чекбокс «Согласен с политикой 152‑ФЗ». Валидация на клиенте.
5) Отправка формы: fetch POST JSON на /lead, дублирование на email admin@site.ru.
6) SEO: title, description, Open Graph, h1–h3, alt для изображений, микроразметка FAQPage.
7) Производительность: картинки как <img loading="lazy">, шрифты system-ui, Lighthouse ≥ 90 по всем метрикам.
Выведи: index.html, styles.css (встроенный <style> допустим), текст всех блоков.

Пример промпта для интернет‑магазина: карточка товара

Собери карточку товара (одежда) на HTML/CSS/JS: галерея (3 фото, ленивая загрузка), цена, размеры (кнопки S/M/L), счётчик, «Добавить в корзину», блок доставки/возврата, отзывы (3 шт.), рекомендованные товары (4 карточки). Подготовь схему данных JSON для импорта CSV (id, title, price, sku, size, image, category).
Добавь кнопку «Купить» с переходом к оплате (заглушка). Под готовые шлюзы в РФ оставь точки интеграции: ЮKassa, CloudPayments, Robokassa.

Чек‑лист деплоя: хостинг, домен, SSL, платежи и аналитика (РФ)

• Домен и SSL: проверьте NS, A/AAAA, CNAME, HSTS. Убедитесь, что HTTPS включён.
• Хостинг: статический (быстро и дёшево) или конструктор. Для экспорта zip — поддержка CI/CD желательно.
• Платежи:
  • ЮKassa: договор, методы оплат, уведомления, тестовые платежи.
  • CloudPayments: виджет, webhook, тестовые карты, 3‑D Secure.
  • Robokassa: фискализация при необходимости, статусы заказов.
• CRM: Битрикс24 или 1С — проверьте поля лида, источники, UTM; зафиксируйте GDPR/152‑ФЗ флаги.
• Аналитика: Яндекс Метрика, события форм и оплат, e‑commerce параметры.
• SEO/Техничка: robots.txt, sitemap.xml, каноникал, 404/500 страницы, favicons, Open Graph, preconnect.
• Резервные копии: бэкап кода и формы; экспорт данных заявок раз в сутки.
• Юридическое: политика обработки данных, оферта, реквизиты, чекбокс согласия, хранение данных в РФ.

Шаблоны промптов, структура ТЗ и библиотека фрагментов

Фиксируйте роль: вы — архитектор. Давайте ИИ чёткие границы.

Шаблон ТЗ (7 пунктов):

1. Цель и KPI (лиды, заявки, CR). 2) ЦА и JTBD. 3) Архитектура страниц и блоков. 4) Контентные требования (тон, доказательства). 5) Интеграции (CRM, платежи, MCP‑инструменты). 6) Безопасность и соответствие 152‑ФЗ. 7) Критерии приёмки (скорость, Lighthouse, валидаторы).

Библиотека фрагментов — prompts для вайбкодинга:

• Header: «Сверстай липкую шапку: логотип слева (SVG), справа меню из 5 пунктов, CTA‑кнопка, адаптив 320–1440px, тёмная тема».
• Тарифы: «Сделай таблицу цен из 3 планов: Starter/Pro/Business; указать цену в рублях/мес, 5 фич, CTA под каждым, план Pro — выделить».
• Форма заявки: «Собери форму (имя, телефон +7 маска, email, компания, чекбокс 152‑ФЗ). Валидация + сообщения об ошибках, антиспам‑ханипот, POST в /lead».
• FAQ: «Сделай аккордеон из 6 вопросов с микроразметкой FAQPage и краткими ответами ≤ 300 знаков».

Фраза‑подсказка для масштабирования: «Разбей код на компоненты, добавь комментарии в стиле JSDoc, вынеси константы, подготовь хуки для платежей (ЮKassa/CloudPayments/Robokassa)».

Как тестировать и ревьюить AI‑код: безопасность, тесты, ответственность

Чек‑лист ревью AI‑кода:

• Код‑стиль: линтер (ESLint), форматер (Prettier), запрет инлайн‑скриптов где не нужно.
• Безопасность: Content Security Policy, HTTPS only, sanitization ввода, защита от XSS/CSRF, скрытие токенов.
• Данные: соответствие 152‑ФЗ, минимизация PII, сроки хранения, доступы по ролям.
• Тесты: unit на валидацию форм и форматирование данных; e2e на ключевые сценарии (открытие страницы, отправка формы, переход к оплате).
• Производительность: Lighthouse ≥ 90, изображения оптимизированы, критический CSS, lazy loading.
• Логи и мониторинг: 4xx/5xx, время ответа, уведомления о падениях.
• Ответственность: зафиксируйте в ТЗ критерии приёмки и процесс отката.

Стоимость и время: план для стартапа и малого бизнеса

• Время: прототип — 2–4 часа, лендинг — 7–10 часов, магазин (до 50 SKU) — 1–2 дня.
• Затраты в месяц (ориентиры):
  • ИИ (OpenAI / GPT или Anthropic / Claude Sonnet): 0–50$ по usage.
  • IDE‑ассистент (Cursor/GitHub Copilot): 0–20$.
  • Хостинг/домен/SSL: 5–15$.
  • Платёжный шлюз: комиссия 0%–3%.
  • В РФ часть сервисов потребует зарубежную карту или VPN — закладывайте локальные альтернативы (Tilda, локальные хостинги, российские шлюзы).

Частые ошибки и как их избежать

• Нет роли архитектора: промпты разрознены — результат сырой. Решение: единое ТЗ и backlog промптов.
• Перегрузка анимациями и шрифтами — просадка скорости. Решение: системные шрифты, lazy, критический CSS.
• Игнор 152‑ФЗ и хранения данных. Решение: политика, чекбоксы, хранение в РФ.
• «Заливка» без тестов. Решение: e2e на ключевые пути, ручное тестирование чек‑листом.
• Нет резерва на доступность сервисов в РФ. Решение: дублируйте пути деплоя и платёжные сценарии.

Кейсы: удачные лендинги, собранные этим подходом

• Кейс 1: B2B‑аудит маркетинга. Лендинг за 9 часов: 8 блоков, форма с валидацией, интеграция в Битрикс24. Результат: 3,5% конверсия с тёплого трафика, 17 лидов за первую неделю.
• Кейс 2: Онлайн‑курс. Сборка лендинга на ИИ и оплаты через ЮKassa. Время — 1 день. Результат: 2,1% CR, окупаемость трафика в 1,3× за 10 дней.
• Кейс 3: MVP‑магазин мерча (до 30 SKU). Генерация карточек, корзина, Robokassa. Результат: первые продажи в день запуска, время до релиза — 14 часов.

Шаблон таблицы цен (pricing) и пример файла CSV для импорта

Пример секции цен (Markdown → преобразуйте в HTML через ИИ):

План	Цена/мес	Для кого	Фичи
Starter	990 ₽	Стартап	3 страницы, форма, Метрика
Pro	2 900 ₽	Малый бизнес	10 страниц, A/B, CRM, оплаты
Business	7 900 ₽	B2B отдел	25 страниц, SLA, роли, бэкапы

Пример CSV (UTF‑8):

plan,price,features
Starter,990,"3 страницы; форма; Метрика"
Pro,2900,"10 страниц; A/B; CRM; оплаты"
Business,7900,"25 страниц; SLA; роли; бэкапы"

Мини‑кейс: от промпта до запущенного лендинга (код/архив)

1. Промпт: возьмите шаблон выше и адаптируйте под ваш оффер.
2. Результат ИИ — index.html. Сохраните как файл:

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Аудит маркетинга — повысим лиды за 14 дней</title>
<meta name="description" content="Аудит маркетинга для B2B: выявим точки роста, настроим аналитику, дадим план из 10 шагов.">
<style>body{font-family:system-ui;margin:0} .container{max-width:980px;margin:0 auto;padding:24px} .btn{background:#0ea5e9;color:#fff;padding:12px 16px;border-radius:8px;text-decoration:none}</style>
</head>
<body>
<header class="container"><h1>Аудит маркетинга</h1><a class="btn" href="#lead">Оставить заявку</a></header>
<main class="container"><section><h2>Что получите</h2><ul><li>10 точек роста</li><li>Настроенная Метрика</li><li>План на 30 дней</li></ul></section>
<section id="pricing"><h2>Тарифы</h2><ul><li>Starter — 990 ₽</li><li>Pro — 2 900 ₽</li></ul></section>
<section id="faq"><h2>FAQ</h2><details><summary>Сколько длится аудит?</summary><p>5 рабочих дней с даты доступа.</p></details></section>
<section id="lead"><h2>Заявка</h2><form id="leadForm"><input name="name" placeholder="Имя" required><input name="phone" placeholder="Телефон +7" required><label><input type="checkbox" required>Согласен с политикой 152‑ФЗ</label><button type="submit">Отправить</button></form></section>
</main>
<script>document.querySelector('#leadForm').addEventListener('submit',async(e)=>{e.preventDefault();const f=new FormData(e.target);const data=Object.fromEntries(f.entries());await fetch('/lead',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});alert('Заявка отправлена');});</script>
</body>
</html>

3. Упакуйте в zip (index.html + assets при необходимости) и загрузите на хостинг или в Tilda как HTML‑блоки. Проверьте чек‑лист деплоя.

Промпты для вайбкодинга: быстрый генератор фраз

• «Сформируй value‑proposition в 1 предложении ≤ 120 символов для ЦА: …»
• «Собери блок преимуществ: 5 пунктов, каждый ≤ 90 символов, без воды, в деловом тоне».
• «Сделай CTA‑варианты (кнопки) для 2 действий: заявка и консультация».
• «Проверь орфографию, упростишь длинные фразы, вернёшь синонимы бизнес‑лексики».
• «Добавь микроразметку FAQPage и BreadcrumbList, проверь валидность HTML5».

10 шагов: краткая сводка процесса

1. Цель и оффер. 2) Карта блоков. 3) Черновой контент. 4) Генерация вёрстки. 5) Адаптив. 6) Форма/валидация. 7) Платежи/CRM. 8) Метрики. 9) Ревью/тесты. 10) Деплой и бэкапы.

Безопасность и продакшенизация AI‑сгенерированного кода

• Секреты вне репозитория, .env не коммитим.
• Политика CORS, ограничение доменов для webhook.
• Обновления зависимостей и проверка лицензий.
• План инцидентов: контакты, RTO/RPO, бэкапы ежедневно.

Инструменты и доступность в РФ: практические заметки

• Часть облачных сервисов может требовать зарубежную карту или VPN. План B: конструкторы, локальный хостинг, офлайн‑оплаты.
• Для логики заказов и складов — интеграции с 1С/Битрикс24. Агентам можно описать интерфейс (через MCP) и генерировать адаптеры.

Резюме выбора по задачам

• Одностраничник — Cursor/Claude Code → экспорт → статический хостинг или Tilda.
• Магазин до 50 SKU — генерация карточек + локальный шлюз оплаты.
• Дальше — подключайте разработчика на ревью и автоматизацию.