Перейти к содержимому

Как сделать лендинг без кода: пошаговая инструкция

Как сделать лендинг без кода: пошаговая инструкция

Опишите одним абзацем, кому вы продаёте, что именно предлагаете и какое действие ждёте от посетителя. AI-билдер соберёт страницу с блоками, формой и адаптивной вёрсткой примерно за минуту. Сборка стоит 6 кредитов, любая последующая правка 3. Публикация в один клик на адрес вида <slug>.zugo.run, свой домен подключается.

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

Что должно быть на лендинге, а чего быть не должно?

Работающая одностраничная структура короткая. Первый экран отвечает, что это и для кого. Дальше идёт проблема словами человека, потом решение, потом доказательства, потом цена или условия, потом одно действие. Ниже блок с ответами на возражения и повтор действия.

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

Отдельно про длину. Короткий лендинг лучше не потому, что люди не читают, а потому что каждый лишний блок это ещё одна возможность закрыть вкладку. Если продукт сложный и требует объяснения, длинная страница оправдана, но каждый блок должен снимать конкретное возражение, а не заполнять место.

Что писать в промпте, чтобы получился нужный лендинг?

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

Собери одностраничный лендинг для [продукт или услуга].
Аудитория: [кто это, какая у него проблема].
Оффер: [что человек получает, за сколько, в какой срок].
Целевое действие: [оставить заявку / записаться / купить].
Блоки по порядку:
1. Первый экран: заголовок с выгодой, подзаголовок с уточнением,
   кнопка [текст кнопки]
2. Проблема: три пункта словами клиента
3. Как это работает: [N] шагов
4. Что входит: список с ценами в долларах
5. Доказательства: [реальные цифры, работы, дипломы]
6. Частые вопросы: [5 настоящих вопросов]
7. Форма заявки: имя, телефон, [ещё поле], кнопка
Тон: спокойный, без превосходных степеней.
Не выдумывать отзывы, цифры, награды и логотипы клиентов.
Цены в долларах.

Последняя строка нужна почти всегда. Генеративный текст охотно дописывает «более 500 довольных клиентов» и логотипы несуществующих партнёров, а отвечать за это придётся вам. Подробный разбор структуры промпта есть в статье как писать промт для ИИ-билдера.

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

Одна страница собирается примерно за минуту. Многостраничный сайт считается по другой шкале, но лендингу он обычно не нужен.

Сборка Страниц Кредитов Что получается
Лендинг 1 6 Блоки, форма, адаптив, публикация
Лендинг в режиме Hi-Fi 1 12 Повышенная детализация, вдвое дороже обычной
Одна правка нет 3 Другой заголовок, новый блок, другая кнопка
Правка в режиме Hi-Fi нет 6 То же в повышенной детализации
Сайт из нескольких страниц 3 12 Первые три страницы, дальше по 3 за страницу

Free даёт 5 кредитов, это меньше стоимости одной сборки, поэтому бесплатный тариф про осмотреться, а не про запуск. Pro стоит $25 в месяц за 200 кредитов, чего хватает на длинный цикл правок. Business стоит $99 в месяц. Разбор тарифов есть в статье сколько стоит сайт и приложение на нейросети.

Считать бюджет удобнее по числу итераций. Реалистичный лендинг это одна сборка и от пяти до десяти правок, потому что заголовок и первый экран переписываются несколько раз. Это укладывается в один месяц Pro с большим запасом.

Куда падают заявки с формы?

Форма без адресата это самая частая ошибка первого лендинга. Заявка должна оказаться там, где вы её увидите в течение часа, иначе страница работает вхолостую.

Resend отправляет каждую заявку письмом на почту, которую вы читаете. Этого достаточно для первых недель. Supabase добавляет базу Postgres под вашим аккаунтом, если заявки нужно хранить, искать и отмечать обработанными. Оба варианта подключаются как коннекторы, а не пишутся руками.

Проверьте форму сами до того, как запустите рекламу. Отправьте настоящую заявку, дождитесь письма, ответьте на него. Эта минута проверки регулярно спасает от недели трафика, который уходил в никуда, и это дешевле любого анализа конверсии.

Если планируете считать эффективность, подключите Google Analytics сразу. Данные до запуска не собираются задним числом, а спор о том, работает ли заголовок, без цифр превращается в спор о вкусе.

Как опубликовать лендинг и подключить свой домен?

Публикация занимает один клик: проект уезжает на адрес вида <slug>.zugo.run, и по этой ссылке страница уже открывается у кого угодно. Перед выдачей сборка проверяется в песочнице: она запускается, и сборка, которая не открылась, не выдаётся. Это снижает риск получить белый экран, но не заменяет ваш просмотр страницы на телефоне.

Свой домен подключается отдельно и стоит того, как только вы начинаете платить за трафик. Адрес вида <slug>.zugo.run нормален для проверки идеи и хуже работает в объявлении, куда человек смотрит полсекунды. Порядок подключения описан в статье свой домен для AI-приложения.

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

Чего сгенерированный лендинг не сделает за вас?

  • Не придумает оффер. Билдер соберёт страницу вокруг того предложения, которое вы дали. Слабый оффер в красивой вёрстке остаётся слабым оффером.
  • Не приведёт трафик. Страница готова за вечер, а источник посетителей это отдельная работа на недели.
  • Не заменит команду разработки на сложном продукте. Личный кабинет, расчёт стоимости по десятку параметров и интеграция с вашей CRM это уже не лендинг.
  • Не даст готовые фотографии. Свои снимки, работы и лица команды загружаете вы. Сгенерированные картинки на странице услуги выглядят как чужие и считываются мгновенно.

Ни одно из этих ограничений не повод отказываться от подхода. Это разница между «страница готова к вечеру» и «маркетинг готов», и путать одно с другим дороже, чем знать заранее.

Как проверить лендинг перед запуском рекламы?

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

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

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

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

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

Наконец, посмотрите, куда ведут все кнопки, и убедитесь, что аналитика уже стоит. Данные до запуска задним числом не собираются, а спор о том, работает ли заголовок, без цифр превращается в спор о вкусе.

С чего начать первую версию?

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

Дальше показывайте страницу пяти людям из целевой аудитории и правьте по их вопросам, а не по своим ощущениям. Более подробный разбор сборки лендинга есть в статье лендинг нейросетью, а если страница нужна как визитка со ссылками, посмотрите страницу ссылок в био. Начать можно на zugo.dev.

← Все статьи