Вайб кодинг лендинга: структура страницы, которую агент собирает сам
Лендинг на вайб кодинге получается не «красивой страницей», а цепочкой блоков, которая ведёт человека к одному действию: заявке, звонку или покупке. Агент на NeuralSpace сам пишет вёрстку, адаптив и форму, а структуру и смысл задаёте вы. Дальше — каркас из восьми блоков, промпты по каждому, чек-лист перед запуском и то, что стоит поправить после первой версии.
Сначала действие, потом дизайн
У лендинга одна задача — довести до действия. Поэтому первый вопрос не «какие цвета», а «что человек должен сделать». Пока ответа нет, любой промпт даст аккуратную, но бесполезную страницу: красивые блоки, между которыми нет логики.
В разделе «Код» при создании проекта есть готовый шаблон «Лендинг». Он подставляет в поле описания заготовку: первый экран, преимущества, галерея, отзывы, форма заявки и футер. Это нормальный скелет, но не готовая структура: под свой бизнес его придётся переписать. Шаблон экономит первый шаг, а не думает за вас.
Каркас из восьми блоков
Вот порядок, который работает для услуг и небольших продуктов. Не догма, но если не знаете, с чего начать, — берите его.
- Первый экран. Заголовок с результатом, подзаголовок с уточнением, кнопка действия и один визуал. Всё остальное — ниже.
- Ситуация клиента. Короткий абзац: с чем человек приходит и почему это неудобно. Не «мы молодая компания», а «ремонт затягивается, потому что бригады пропадают».
- Что вы даёте. Три-шесть карточек услуг или результатов. Без простыней: заголовок и одно предложение.
- Как это работает. Три-четыре шага от заявки до результата. Снимает страх «а что будет дальше».
- Доказательства. Отзывы, фото работ, цифры, кейсы. Один настоящий отзыв сильнее десяти «нам доверяют тысячи клиентов».
- Цена и условия. «От» с понятной вилкой, что входит и сколько ждать. Если цена сложная — калькулятор или обещание сметы за день.
- Возражения и FAQ. Гарантия, возврат, сроки, оплата. Четыре-шесть вопросов, которые реально задают.
- Финальный призыв. Повтор кнопки, форма или контакт, короткая подпись и футер. Не заставляйте человека искать, куда нажать.
Восемь блоков — это не восемь экранов. На телефоне страница по такому каркасу укладывается в шесть-восемь прокруток, если не раздувать текст.
Три захода вместо одного промпта
Запрос «сделай красивый лендинг для студии керамики» даст общую страницу: агент придумает и заголовки, и цены, и отзывы. Половину придётся переделывать. Надёжнее разбить работу на три захода. И да — начните с формы: «Новый проект», поле «Опишите ваш проект», модель и кнопка «Создать проект». Если есть логотип, фото работ или скриншот сайта, который нравится, приложите файлы сразу.
Заход 1. Скелет и факты
Опишите бизнес, аудиторию, действие и список блоков. Например:
Промпт: «Собери одностраничный лендинг для студии керамики в Казани. Аудитория — взрослые, которые хотят попробовать гончарное дело, без опыта. Действие — запись на пробное занятие. Блоки: первый экран, для кого, три формата занятий, как проходит занятие, фото работ, отзывы, цены, вопросы, форма записи. Стиль спокойный, тёплый, светлый; без стоковых улыбок и мелкого текста. Адаптив под телефон обязателен».
Такой запрос даёт агенту рамку: он не начнёт сочинять «миссию компании» и не добавит блок с командой, которого вы не просили.
Заход 2. Тексты и цифры
Дальше правьте смысл, а не внешний вид. Дайте настоящие цены, длительность, адрес, правила отмены. Пример: «В блоке цен замени на: пробное занятие — 2 500 рублей, два часа, материалы и обжиг включены. В отзывах оставь три реальных текста, которые я пришлю. Убери слово „уникальный“ и восклицательные знаки».
Тексты лучше присылать готовыми. Модель пишет складно, но не знает ваших условий — на пустом месте придумает правдоподобную ерунду. Проверяйте всё, что похоже на факт: цены, сроки, гарантии, имена, лицензии.
Заход 3. Мобильная версия и мелочи
Когда структура и текст на месте, попросите проверить телефон: «Проверь на ширине 375 пикселей: заголовок не должен разваливаться, кнопка — помещаться, таблица цен — прокручиваться, форма — отправляться без горизонтальной прокрутки». Затем мелочи: alt у картинок, заголовок страницы, описание для соцсетей.
Первый экран: пять элементов, которые решают
Первый экран читают за пару секунд. В нём должны быть:
- Заголовок с результатом. Не «Студия керамики», а «Слепите свою кружку за два часа — без опыта».
- Подзаголовок с уточнением. Кому, где и что входит. Одно предложение.
- Кнопка с глаголом. «Записаться на пробное», а не «Отправить».
- Микро-доказательство. «Материалы включены, группа до шести человек» или реальный рейтинг.
- Один визуал. Фото продукта, процесса или результата. Не коллаж из десяти картинок.
Кнопку стоит повторить в конце страницы и ещё раз после цен, если страница длинная. Это не навязчивость: человек, который дочитал, уже готов, но не всегда готов искать форму.
Тексты, которые агент не придумает
Агент соберёт страницу, но факты должны быть вашими. Перед запуском проверьте: цены, сроки, адрес, телефон, режим работы, условия возврата, состав услуги, кто исполнитель. Всё, чего вы не дали, модель с высокой вероятностью заполнит правдоподобным примером — и это будет выглядеть убедительно ровно до первого клиента.
В проекте есть «Правила проекта» — текст, который передаётся ИИ во всех чатах. Туда удобно вынести то, что нельзя нарушать: «Не добавляй отзывы, которых я не присылал. Не обещай скидок. Пиши „вы“, без канцелярита. Телефон и адрес не меняй». «Память проекта» хранит постоянные факты: адрес, часы, названия услуг. Так меньше шансов, что в пятой правке агент забудет, как называется студия.
Визуалы: своё фото или генерация
Лучший визуал для лендинга — собственное фото продукта, процесса или места. Если фото нет, картинку можно сгенерировать в разделе «Изображения» и скачать. Не тащите стоковые фото с водяными знаками и чужие работы из портфолио: это видно и стоит доверия.
По данным платформы за 90 дней (27 июля — 25 октября 2026) у GPT Image 2 успешно завершились 93,3% из 2 991 генерации, у Seedream 4.5 — 91,2% из 1 395. Вывод простой: генерировать обложку и фоновые иллюстрации можно, но закладывайте запас — примерно каждый десятый запрос может остаться без результата, и это нормально.
Какую модель брать
По обезличенной статистике чатов вайб-проектов за 90 дней (7 августа — 1 ноября 2026, 37 диалогов) 19 — больше половины — шли на стартовой DeepSeek V4.1 Flash. Для лендинга этого хватает: структура типовая, сложной логики нет. Переключайтесь на Claude или другую сильную модель, когда появляется калькулятор, фильтр, интеграция с оплатой или большой объём правок. Уровень размышлений для вёрстки можно держать низким, для логики — поднять: это заметно влияет на скорость и расход токенов.
Проверка перед запуском
Пройдите по странице как клиент, а потом по чек-листу:
- Понятно ли за пять секунд, что здесь предлагают и что нажать?
- Кнопка и телефон видны без прокрутки на телефоне?
- Форма отправляется, а заявка приходит туда, куда вы обещали?
- Нет горизонтальной прокрутки на 375 пикселях?
- Цены и сроки совпадают с тем, что вы реально делаете?
- Ссылки на политику и согласие на обработку данных на месте?
- Картинки не весят по пять мегабайт и не тормозят первую загрузку?
- Заголовок вкладки и превью для мессенджеров выглядят нормально?
Сайт открывается кнопкой «Открыть сайт», адрес вида имя-проекта.app.neuralspace.pro можно сразу отправить на телефон и проверить на нём. Если нужен свой домен — в проекте есть «Привязать домен»: добавляете DNS-запись, сервис выпускает сертификат и включает HTTPS.
Правки без переделки всего
Не просите «переделай лендинг заново» из-за одного блока. Мелкие правки дешевле и безопаснее: «добавь блок с гарантией после цен», «сделай кнопку заметнее», «сократи текст во втором блоке». У проекта есть версии и откат: если правка сломала вёрстку, возвращаетесь к предыдущей версии одним действием, а не собираете заново.
Готовый проект можно скачать архивом, а если он пока не нужен — отправить в архив: сайт перестанет открываться, ежедневное списание за хостинг остановится, файлы останутся. Это удобно для сезонных акций и тестовых страниц.
Частые вопросы
Можно ли собрать лендинг без программирования?
Да. Вы описываете структуру и тексты, агент пишет код и собирает страницу. Понимание, из каких блоков состоит лендинг, помогает формулировать точнее, но синтаксис знать не нужно.
Сколько блоков должно быть на лендинге?
Обычно хватает шести-восьми. Если блок не ведёт к действию и не снимает возражение, он, скорее всего, лишний. Лучше меньше, но с конкретикой.
Что делать, если агент придумал цены и отзывы?
Заменить на настоящие до запуска. В «Правилах проекта» можно прямо запретить добавлять отзывы и цифры, которых вы не давали, и просить помечать неизвестное как «уточняется».
Чем лендинг отличается от «Сайта для поиска»?
Лендинг ведёт к одному действию и живёт на одном адресе. «Сайт для поиска» — многостраничная история под запросы: отдельные страницы услуг, заголовки, разметка, sitemap. Если нужен трафик из поиска по десяткам запросов, берите второй шаблон; если нужна одна продающая страница под рекламу — первый.
Можно ли подключить свой домен?
Да: в проекте есть привязка домена через DNS-запись, сертификат настраивается автоматически. Пока домена нет, сайт живёт на адресе платформы.
Начать проще с страницы вайбкодинга или сразу с раздела «Код»: создайте проект, вставьте описание по каркасу выше и попросите первый вариант. Картинки для первого экрана можно сделать в разделе «Изображения». Оплата по токенам, без подписки; новым пользователям начисляются стартовые токены.