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

- URL: https://vladimirnovozhilov.com/blog/vaibkoding-saita-kak-sozdat-lending-bez-koda/
- Author: Владимир Новожилов
- Published: 2026-09-30
- Category: AI и vibe-coding

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

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

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

![Схема процесса: идея → прототип → интеграции → деплой](./images/vaibkoding-saita-kak-sozdat-lending-bez-koda-flow.png)

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

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

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

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

По охвату задач: уместен и для [простых веб‑приложений](/blog/vibe-coding-prilozhenie-telegram-bot-gajd/), админок, форм ввода — с оговорками по безопасности и ревью.

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

![Диаграмма доступности инструментов в РФ (условно)](./images/vaibkoding-saita-kak-sozdat-lending-bez-koda-ruaccess.png)

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

| Инструмент | Класс | Что умеет | Цена ориентир | Доступность в РФ | Ограничения |
|---|---|---|---|---|---|
| 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‑тесты, ручные проверки сценариев, чек‑лист безопасности (ниже).

![График: типовой срок первого релиза при хорошем ТЗ](./images/vaibkoding-saita-kak-sozdat-lending-bez-koda-mvp.png)

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

```
Ты — фронтенд-разработчик и копирайтер. Сгенерируй одностраничный лендинг для 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. Сохраните как файл:

```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 — генерация карточек + локальный шлюз оплаты.
- Дальше — подключайте разработчика на ревью и автоматизацию.

## FAQ

### Чем вайбкодинг отличается от no‑code и классической разработки?

Вайбкодинг — это диалог с ИИ, где вы задаёте цель и ограничения, а агент генерирует код и контент. Гибче и быстрее no‑code, легче старта, чем классическая разработка. Вы — архитектор, ИИ — исполнитель.

### Для каких задач подход уместен?

Лендинги для лидогенерации и мероприятий, продуктовые страницы, мини‑каталоги и MVP‑магазины до 50 SKU, быстрые прототипы, виджеты и микросайты для B2B/IT. Для сложной логики и высоких нагрузок нужен серьёзный аудит.

### Какие ограничения и риски учитывать?

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

### Какие инструменты использовать и что с доступностью в РФ?

IDE‑ассистенты (Cursor, Copilot), облачные агенты (Replit Agent, Lovable, Bolt.new), конструкторы (Tilda). Модели — GPT и Claude. Часть сервисов ограничена в РФ, поэтому удобно комбинировать генерацию кода с Tilda для домена, форм, оплат и метрик.

### Сколько времени и сколько это стоит?

Прототип — 2–4 часа, лендинг — 7–10 часов, магазин до 50 SKU — 1–2 дня. Ежемесячно: ИИ — 0–50$, IDE — 0–20$, хостинг/домен/SSL — 5–15$, шлюзы — 0–3% комиссии. В РФ закладывайте локальные сервисы и резервные варианты.