Лендинг — самый популярный первый проект в вайбкодинге. За один вечер можно получить готовую страницу с формой, дизайном и деплоем. Вот как это работает на практике.
Что должно быть на лендинге: определитесь до промпта
Прежде чем открывать ИИ-инструмент, ответьте на четыре вопроса: 1. Для кого страница? (аудитория) 2. Что предлагаем? (оффер — одно предложение) 3. Что должен сделать посетитель? (CTA: оставить заявку, записаться, скачать) 4. Какие блоки нужны? (заголовок, список преимуществ, отзывы, форма)
Шаг 1: Выберите инструмент
- bolt.new или Lovable — если хотите без установки, прямо в браузере. Идеально для лендинга.
- Cursor — если хотите контролировать HTML/CSS и уметь вносить правки самостоятельно.
- v0.dev (от Vercel) — генерирует UI-компоненты на React/Tailwind по описанию.
Шаг 2: Напишите подробный промпт
Чем конкретнее — тем лучше результат. Пример хорошего промпта:
«Создай одностраничный лендинг для онлайн-курса по вайбкодингу. Аудитория — продакт-менеджеры без опыта в коде. Блоки: (1) Hero с заголовком "Создавай приложения без программирования" и кнопкой "Оставить заявку"; (2) 3 преимущества курса с иконками; (3) Программа: 4 блока по неделям; (4) Форма с полями Имя, Email, Телефон и кнопкой; (5) Футер с контактами. Стиль: современный, тёмный фон, акцентный цвет — фиолетовый. Адаптивная вёрстка.»
Шаг 3: Итерируйте
После первой генерации не ждите идеала — ждите «рабочий каркас». Дальше правите запросами:
- «Сделай заголовок крупнее, добавь подзаголовок с выгодой»
- «Перекрась кнопку в #7C3AED, сделай скруглённой»
- «Убери секцию с отзывами, добавь вместо неё блок FAQ из 4 вопросов»
Работайте итерациями: один запрос — одно изменение.
Шаг 4: Подключите форму
Самый простой способ собирать заявки без бэкенда:
- Tally.so — бесплатный конструктор форм, который можно встроить или сделать отдельной страницей.
- Typeform — красивые формы, есть бесплатный тариф.
- Попросите ИИ: «Замени форму на embed-код Tally с ID [ваш ID]».
Шаг 5: Задеплойте
В bolt.new и Lovable — кнопка деплоя встроена, получите ссылку за минуту. В Cursor — залейте на GitHub и подключите к Vercel (см. гайд по деплою). Получите URL вида yoursite.vercel.app, который можно сразу отправлять.
Итог: лендинг через вайбкодинг — реальная задача на 2–3 часа при первом опыте. Ключевой навык — не «знать код», а уметь формулировать задачу и итерировать по результату.