Как создать продающий лэндинг с помощью ИИ за 150 рублей в месяц
Почему этот метод работает и для кого он
Сейчас есть масса способов создать лендинг: от программирования до вайбкодинга. Но если программирование это космос для неподготовленного человека, то вайбкодинг достаточно прост. Где-то посередине этих способов расположился конструктор лэндингов. Чтобы создать лэндинг надо всё равно с чем-то разбираться, даже с вайбкодингом (который тоже стоит денег). И ещё нужно где-то разместить лэндинг, и, желательно так, чтобы к нему был удобный доступ.
Основной целью создания метода было сокращение времени на изготовление MVP при тестировании идей. Мой метод не претендует на самый удобный и гибкий, но, однозначно, он самый дешевый и, скорее всего, наиболее быстрый. Надеюсь, вам понравится. Ну что? погнали?
- Что он здесь накурил?
Настройка модели и базы знаний в Perplexity
Для начала выставляем модель Claude 4.5 и отключил "Поиск в вебе", чтобы не подмешивать новые данные из интернета. Затем создаем базу данных смыслов и ассистента на Perplexity. В моём случае, я первыми промптами создал стратегию, частью которой является лэндинг. Эта часть общая для всего моего проекта и она была готова заранее. Удобно, что лэндинг получился в единой структуре и контексте с основными материалами.
Делаем коррекцию стратегии и указываем, что лэндинг будет на Creatium. В ответе Клод предложит текст лэндинга, но можно и просто указать, что нужно создать лэндинг.
Быстрая сборка структуры без дизайна
Далее несколько промптов по коррекции текста и смыслов и на выходе получим тексты блоков, которые переносим в Creatium.
Небольшое общение с Creatium и можно быстро делать такие эскизы сайтов. Но даже если не в Creatium, то, можно разместить в каком-нибудь графическом редакторе эти блоки (Figma, Miro, как вариант).
Магия начинается здесь
Самое сложное сделано. Дальше начинается магия ИИ.
Публикуем лэндинг и получаем страницу на тестовом домене Creatium. Переходим на полученный сайт, правой кнопкой клик, выбираем показать код страницы полностью. Копируем и вставляем в чат Perplexity. Код вставляется текстовым файлом. Пишем промпт:
Нужно для этой страницы сделать современный дизайн. Предложи 3 варианта дизайна и создай для них изображения.
В варианте с графическим редактором можно загрузить скриншоты в Perplexity вместо кода страницы сайта.
Выбираем по текстовому описанию стиль и следующим промптом задаем отобразить стиль в виде изображения. Получаем вот такую картинку.
Если изображение отражает видение стиля, то акцептируем его и переходим к созданию первой версии лэндинга.
Превращаем черновик в красивый лэндинг
Берем текст, описывающий стиль нашего будущего сайта, добавляем код страницы и вставляем в промпт:
Возьми мой код страницы и перепиши под дизайн. Стиль: Современный чистый дизайн с акцентом на технологичность и AI, использующий градиенты, большие типографические блоки и карточный интерфейс. Светлая база с яркими акцентами синего и фиолетового. В ответе отдай код.
Мы получили код нашего сайта. Если этот код закинуть в блокнот и сохранить файл как Сайт.html, то его можно открыть в браузере. Будет выглядеть вот так:
Это шаблон будущего сайта. Данный этап важен тем, что у Claude появился контекст с правильными смыслами и вариант дизайна. На основе этого шаблона будет строиться оптимизация сайта, но для этого нужно код перетащить на хостинг, в качестве которого выступит Creatium.
Для тех, у кого минимум технических навыков
Дальше информация не слабонервных. Те, кто умеет размещать страницы в интернете, будут в ужасе 😁. Но мы здесь про минимум навыков, инструментов и денег. Чтобы даже школьник разобрался. Мы не будем ничего конструировать в Creatium. Это долго. Сделаем быстрее.
Открываем новую страницу в Creatium, создаём секцию HTML. Жмём настройки HTML-секции и видим внизу два окошка. Берем всё, что заключено в теги <body></body> помещаем во вкладку HTML Creatium, а всё что тегах <style></style> помещаем во вкладку CSS Creatium.
Скорее всего появится ещё небольшой код JS в тегах <script></script>, который нужно поместить во вкладку JS в Creatium. Он сделает некоторые элементы интерактивными.
⚠️ Важно! Убрать галочку "Включить инкапсуляцию стилей". С ней на сайте будет "каша".
Итеративная оптимизация с помощью промптов
Далее оптимизируем промптами. Привожу примеры:
отлично! давай добавим переработанный блок Для какого бизнеса работает ИИ-продавец
отлично! давай теперь добавим в дизайн блок Кому подойдет партнерство
отлично! давай добавим в дизайн блок Частые вопросы
отлично! Добавь блок Что такое ИИ-продавец в дизайн
отлично! Попробуй сделать блок Как работает партнерство в дизайне. Я заменю его
отлично! переделай еще первый блок Hero section с учетом исходной информации в источнике paste.txt
После каждого ответа идем в Creatium и вставляем HTML и CSS, публикуем страницу, смотрим ок, не ок. Движемся дальше.
Тонкая настройка по скриншотам
Страница устраивает, но хочется допилить мелочи. Переходим к тонкой настройке. Кидаем скриншоты того, что нужно исправить и забираем новый код. Ищем нужную секцию в HTML-секции Creatium и заменяем её. Найти место, в котором заменяется код несложно - все секции Claude подписывает для удобства. Если не подписал, попросите подписать.
Убираем дубли и чистим код
Далее я решил почистить стили, так как в разных секциях будут одинаковые стили, только с разными названиями. Скидываю примеры промптов для упорядочивания стилей.
посмотри ещё какие одинаковые стили есть у меня
не всё перенеслось как надо. скидываю css и html. сохрани всё, оптимизируй только стили
теперь оптимизируй css, так, чтобы не было дублей стилей.
Самая непростая часть, но выполнимая
Код HTML формы заявки можете убрать в HTML-секции, потому что форма будет неактивной. Действующую форму создадим из стандартной формы Creatium, у которой есть интеграция с движком. При нажатии на кнопку отправки формы данные из формы будут отправляться по стандартным каналам Creatium, и если надо во внешние приложения. Метод сырой, но работает.
Создаём пустую секцию ниже. Вставляем любую стандартную форму и вставляем свой код формы в HTML и CSS как делали это для HTML-секции. Где получить нужный код? CSS для формы получаем, задав в Perplexity промпт:
покажи все стили, которые применяются к последней форме заявки.
Копируем полученные стили в форму. Код на HTML нужно переписать. Но один раз сделал и всё, дальше вопросов не будет. С кодом помогу, если возникнут сложности.
Остается кнопка отправки. Ищем, где у неё исходный код и также правим.
Код кнопки в HTML будет такой:
<button type="submit" class="btn btn-primary" style="width: 100%" data-action="send" data-highlight="false" data-track-active="false">Текст кнопки</button>
Стили должны примениться из классов btn и btn-primary. Они уже есть на сайте.
Готово, проверяем! Должна отправляться форма и в Заявках Creatium появиться заявка с заполненными полями.
Теперь у нас полноценный лэндинг развернутый на хосте Creatium за 150 руб в месяц (2-ой и последующие сайты), который отправляет заявки на почту. Первый сайт обойдется в 750 руб в месяц. Интеграции обойдутся ещё в 150 руб, но для MVP-версии достаточно и почты.
Данный кейс показывает, что создать лэндинг без знания кода возможно, нужно немного освоить конструктор Creatium (делается за 1 день) и освоить работу с Perplexity. Все промпты в этом кейсе реальные (вставлены "как есть") и не требуют знаний промпт инжиниринга, только немного логики и знаний структуры лэндингов.
Ссылка на готовый лэндинг: ai-intech.ru
