Как добавить ИИ на лендинг за один промпт

Год назад добавить AI на сайт мог только программист, а разрабатывать приходилось больше недели. Сейчас Google упростил установку нейронок до уровня «описал задачу — получил бота». Со всеми правками и доработками на одного простого бота уходит полчаса. Технические навыки не требуются, достаточно уметь составлять четкие инструкции языковым моделям.

ИИ позволяют строить новые воронки со свежими подходами или улучшать старые, повышать на них траст и вовлеченность. Мы можем дать юзерам пользу перед покупкой, занять, пока смотрят длинный VSL, персонализировать под них промо, дать больше удобств. Нужно только включить воображение и придумать, как заставить ИИ продавать.

В статье покажем, как за 1 промпт создать одностраничник с AI-функционалом или добавить AI на существующую проклу. Также будет много примеров, для чего можно использовать под разные вертикали. Заодно посмотрим, как свежая IDE для вайб-кодинга от Google справится с созданием бота.

Создадим ленд с врачом-консультантом через Gemini

Мы хотим медика, который соберет анамнез, даст план упражнений, питания и напишет назначение. Доктор будет притворяться живым, избегать дисклеймеров. И общение должно происходить на новом одностраничнике. Описываем своими словами все это в ТЗ и стартуем.

По шагам:

1. Открываем оф. панель.
2. Переключаемся на последнюю модель Pro.
3. Включаем Canvas.
4. Пишем промпт.
5. Получаем результат.
6. Тестируем и вносим правки.

Среда подставляет ключ, поэтому прила сразу активна, но в продакшене нужен свой apiKey для ИИ.

Посмотрите на весь экран приложение, которое получилось с первого же сообщения.

Еще один способ установки языковой модели на сайт — кнопка Add Gemini Features, но она генерит рандомный функционал, и нужно заранее грузить ленд в «Канвас».

Помимо Canvas, доступен Dynamic view. Он собирает дизайн, тексты, графику, техничку в разы интереснее, чем 100% существующих вайб-кодерских инструментов. Dynamic view возвращает профессионально оформленный визуал буквально из 3–4 хаотичных предложений, даже рисует часть картинок с нуля. Но на момент выхода статьи экспорт недоступен, поэтому пока пользуемся средой Canvas и другими решениями.

Создадим примерочную с Banana через AI Studio

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

Теперь реализуем примерочную. Допустим, у нас свипы с вещами. Хотим, чтобы пользователи себя увидели в разыгрываемой нами одежде.

По шагам:

1. Идем в AI Studio.
2. Переходим в Build.
3. Выбираем ниже Nano Banana.
4. Отправляем ТЗ.
5. Ждем генерацию.
6. Тестируем.

Если вылетают ошибки, жмем кнопку Fix, которая автоматически появляется слева над текстовым полем.

Результат с первой попытки. В AI Studio среда также подставляет ключ, поэтому прила сразу активна. Одежда иногда устанавливается другая, но это правится за 1 итерацию.

AI Studio пишет на фреймворках

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

Если не знаете, как билдить, запросите в том же диалоге чистый HTML, CSS, JS строго без необходимости в Node, NPM или запуске сборщиков. Агент перепишет, уберет лишнее и подскажет, какие файлы скачать.

Установка на сайт

Когда параллельно генерим ленд с AI-функционалом с нуля, отдельно инсталить ничего не нужно.

Если приложение небольшое, можно изначально закинуть скрипты, разметку, стили в AI Studio, чтобы система сама интегрировала все корректно.

Добавлять нейронку в большой проект немного сложнее. Загружать кучу файлов и компонентов в AI Studio долго, и система может путаться. Если просто создать отдельно бота и скачать результат как есть, непонятно, что дальше делать с ним. Поэтому нужно перед разработкой ИИ-помощника указать площадке писать инструкцию по API в формате markdown.

Когда бот будет готов, останется выгрузить его вместе с API-файлом и отдать редактору с нейронками на борту. Подойдет бесплатный Antigravity, локальный IDE от Google с LLM-моделями.

На борту все последние выпуски Gemini и Claude 4.5. Похож на Cursor, но менее стабилен. Умеет запускать полуавтоматические тесты через встроенный браузер, разворачивает PHP-сервер из коробки, есть библиотека MCP с установкой пакетов в один клик.

Добавим умный калькулятор на сайт с Antigravity

Самый простой способ развернуть AI на существующем промо — открыть его в локальном редакторе для вайб-кодинга и дать ТЗ. Все будет работать на устройстве, поэтому не придется загружать скрипты в AI Studio.

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

По шагам:

1. Скачиваем antigravity.google и авторизуемся.
2. Открываем приложение в папке с проклой.
3. Выбираем последнюю модель Gemini.
4. Отправляем в правом окне промпт.
5. Проверяем.

Antigravity с первой попытки развернул почти весь функционал корректно.

Поиграться с результатом можете в песочнице. Ключи будут активны до конца января.

Если после интеграции увидите в ответе ассистента много звездочек и решеток, это не баг. Агент забыл подружить формат вывода Gemini (markdown) с сайтом. Нужна функция, превращающая MD в HTML. Отправьте скрин в диалог, это быстро решается.

Другие варианты применения

• Нутра: консультация по препарату, акции, частоте приема БАДа, составление диет и упражнений. Для старого оффера помощник попробует сконвертить повторно тех, кто уже принимал этот препарат и не дождался чуда за неделю. Обрабатывать возражения и объяснять отсутствие обещанного эффекта он будет по заданному сценарию: «Уверен, вы напоролись на подделку, вероятно, проигнорировали часть рекомендаций, принимали слишком мало».

• Свипы: подбор и поиск подарка в честь праздника, ответы про условия конкурса, по характеристикам продукта. Агент объяснит, почему закрывается склад, что за предзапретная ликвидация, почему «по ссылке для сотрудников» устройство стоит $2.

• Финансы: рассчитает кредит, вероятности выдачи, подскажет по условиям и как повысить шанс одобрения.

• Крипта: продемонстрирует, как ИИ анализирует сотни источников для прогнозирования и торговли, покажет конкретные новости, приведет примеры расчетов, даст совет по портфелю, закроет часть возражений.

Дополнительно по нутре

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

Теперь такие тексты с расширенным описанием и детальными медицинскими обоснованиями можно убрать в промпт для бота. Ассистент будет опираться на эти данные и отвечать детально, при необходимости дополнять. При этом степень морали также задается в инструкции, ИИ не душит этикой, не ставит в каждом сообщении дисклеймеры, не отправляет к доктору.

В случае с VSL у зрителей не всегда есть время досмотреть до конца ролик на 15–30 минут, а бэкфикс в вебвью ФБ работает с ограничениями. Кнопка для консультации поможет не терять занятую часть лидов. Это удержит гостя, пока он играется с агентом, плюс во время чата даст дополнительную инфу и попытается ненавязчиво довести до заказа. Нейронка взаимодействует с узлами согласно настройкам, поэтому при запросе пользователя он способен показать форму заказа.

Что умеет Gemini внутри сайта

Это логическое ядро, которое получает данные от пользователя (текст, голос, фото), принимает решения и отдает команду JavaScript-коду на изменение DOM, CSS, переменных или навигации. Но важно понимать, что это не функционал из коробки, каждую фичу нужно внедрять на этапе добавления ИИ на страницу.

Работа с текстом:

• помимо консультаций в ролевой модели, AI может автоматически перевести проклу, опросить в формате квиза и отвечать параллельно на вопросы пользователя. Если спрашивали про доставку, поднимет вверх несколько отзывов про сроки. Или обработает моментально возражения в комментариях, удалит неконструктивную критику.

Работа с медиа:

• примет фотографии с анализом и препаратами, объяснит слабые места в их лечении, расскажет, чем наш БАД отличается и как лечит. Или посмотрит на фото и выдаст, что это подделка, поэтому нет эффекта. Затем предложит заказать оригинал по ссылке/форме, которая только что появилась. Для свипов, которые маскируются под маркетплейс, можно сделать внутренний поиск в каталоге товаров по картинке.

Взаимодействия с лендингом:

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

Поиск:

• зайдет в интернет, проверит факты и свежие данные. Или поищет локально в статьях и документах, которые указал разработчик.

Рекомендации по промптам

AI добавляется за одно сообщение. Сложнее составить внутреннюю инструкцию — ее уже нужно оттачивать. Можно через диалог или вручную текстом прямо в коде. Внутренний «systemPrompt» записывается в формате markdown прямо в скриптах.

Продумайте всю техничку до разработки

Для создания ленда с AI мы можем идти по шагам: давать задачу, смотреть результат и переходить к другой. Но это контрпродуктивно.

Во время правок Gemini часто забывает часть первоначальных установок и лезет, куда не просили. К примеру, пока разработчик работает над формой по нашему запросу, он может без разрешения записать дисклеймер в настройки бота. Чем больше правок, тем больше сюрпризов. И они обнаруживаются не сразу. Если стартовать с минимума, в итоге получится круговая работа над ошибками.

Лучше скормить все детали структурированным большим промптом и потом вносить точечные правки. Подготовьте, разделите и структурируйте: логику, дизайн, запреты и все детали до того, как отправите LLM первое ТЗ на разработку.

Если у вас проблемы с промптингом, вместо того чтобы сразу врубать Canvas с техзаданием, опишите задачу, попробуйте сперва составить ТЗ в диалоге и потом приступайте к техничке.

Лимиты и ограничения

На free-тарифе ограничение — 250 сообщений. Этих лимитов хватит протестировать бот в режиме чата, но для Banana и других мультимедиа-моделей требуется ключ со старта. Для Veo среда даже для тестов не подставляет ключ и с ходу требует пользовательский.

Google Cloud дает $250 или $300 кредитов новым пользователям после линковки карты, хватит примерно на 250 000 запросов/ответов. Иногда запрашивает препей $10, перед привязкой — обратите внимание.

Заключение

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

Чем еще может помочь ИИ:

• персонализировать рекламу — продать БАД, используя индивидуальные симптомы и данные посетителя из продвинутых опросов;

• повысить траст одностраничника на свипстейки — IQ-тесты, где за каждый правильный ответ снижается цена и алгоритм рассчитывает сложность вопросов так, чтобы по окончании квиза выходила нужная сумма с бланка;

• дать действительно что-то полезное (диеты, упражнения) перед продажей — показать что нам не все равно и мы не очередные скамеры с пустышками;

• предоставить пользователю больше удобства — найти и «купить» кроссовки, которые пользователь увидел и сфоткал на улице.

Статью писали не для кодеров, поэтому затронули не все технологии и нейронки Google, которые могут установить себя на веб. У гиганта около 10 инструментов, способных закрыть наши задачи, но там требуется больше технических навыков. Если у вас остались вопросы — спросите у Gemini.