Расскажу, как тестировала три AI-сервиса для создания лендингов. Благодаря вайбодингу теперь показываю клиенту рабочий прототип уже на пресейле — без этапа макетов в Figma.
Исходные данные
Получила задачу: нужно быстро сделать четыре посадочные страницы для разных чат-ботов одной компании. Заказчик — крупный, мы регулярно делаем для него кастомную разработку. В этот раз он захотел отдельные промо-страницы под каждый продукт.
Обычно такие задачи реализую на Tilda — платформа удобна для небольших проектов, и у меня уже есть с ней опыт. Оценила сроки: «Готово будет за две недели». Но заказчик попросил уложиться быстрее и попробовать собрать лендинги с помощью ИИ.
Сначала подумала: можно сгенерировать макеты через AI, перенести в Figma — и сэкономить пару дней. Но и этого было мало. Тогда гендиректор предложил: «Попробуй вайбкодинг». Ладно, поехали!
На старте у меня было:
- примерное понимание, чего хочет клиент;
- необходимость проверить идею до финальной презентации;
- решение протестировать один кейс, чтобы убедиться в правильности подхода.
Выбор пал на три сервиса: Lovable, Bolt и Figma Make. Почему? Первые два — топовые в поиске, а Figma уже в экосистеме команды и оплачена.
Подготовка:
- структуру и тексты собрала через Grok — текст получается живее;
- подобрала визуал;
- определилась с цветовой палитрой.
Во все три сервиса загрузила одинаковые данные и промпты — чтобы сравнение было честным. Спойлер: результаты отличались.
Lovable: простота и скорость
Интерфейс интуитивный: слева — промпт, справа — результат.
Использовала чёткий запрос:
Create a fully functional landing page in Figma Make, strictly following the provided assets.
Data Sources:
- Structure & Content: Use the attached text document. It contains the complete section structure, headlines, body copy, and button labels.
- Visual Style: Use the attached reference image as the visual guide. Follow its color palette, typography, card styling, and overall aesthetic.
Critical Requirements:
- Content Integrity: Do NOT remove, merge, or skip any block from the text document. The document structure is final and must be preserved exactly as provided.
- Hover States: Implement proper hover interactions for all interactive elements:
- Buttons (Primary & Secondary): Apply background color change, shadow, or subtle scale transition.
- Navigation links: Add underline or color shift on hover.
- Cards (if present): Add a slight lift animation or shadow change.
- Link Functionality: Ensure all links are correctly configured:
- Phone: Clickable tel:+[number] link.
- Email: Clickable mailto:[address] link.
- Social Media: Working URLs pointing to the respective platforms (Instagram, Telegram, WhatsApp, etc.). Icons must match the corresponding platform.
Additional Requirements:
- Layout: Use a proper grid system. Ensure the desktop version (1440px width) has consistent padding and margins.
- Visual Hierarchy: Highlight headlines (H1, H2) and CTAs using accent colors extracted from the reference image.
Возможности сервиса:
- Предварительный просмотр — можно смотреть на разных разрешениях. Советую не пропускать: вёрстка иногда «едет».
- Облако — встроенное хранилище, например, для сбора данных с форм.
- Код — доступен исходный код, можно выгрузить и разместить на своём хостинге.
- Аналитика — встроенная, подключается через промпт или вручную.
- Безопасность — настраивается защита форм. Есть понятные инструкции.
- Скорость — показывает, где страница грузится медленно.
- Командная работа — можно пригласить участников и выдать права.
- Публикация — присваивается домен сервиса, можно подключить свой. Есть опция скрыть от поисковиков.
- GitHub — самое сильное. Настраиваешь синхронизацию — и управляешь сайтом с обеих сторон. Можно выгрузить код, развернуть на хостинге, присвоить домен. Надёжнее и удобнее.
Шаг 1: загрузила PDF с контентом и визуальный референс из Pinterest. Попросила собрать лендинг.
ВАЖНО! Всегда проверяйте результат. Сервис может потерять блоки. Тогда нужно напомнить: «Верни все блоки!».
Шаг 2: проверила ховеры, тексты, меню, переходы. Результат устроил, но потребовалась доработка:
- Добавила зацикленное видео на hero-блок — этот нюанс нужно прописывать в промпте.
- Разместила картинки. Можно генерировать прямо в сервисе, но видно, что это ИИ.
- Указала иконки соцсетей в подвале и их ссылки.
Шаг 3: подключила сбор данных через промпт, настроила безопасность, политику и куки.
Результат и впечатления
Работать с Lovable было удобно. Сервис быстро соображает и даёт много возможностей.
- 5 проектов в рамках подписки;
- передача проектов;
- выгрузка в GitHub;
- выдаёт вменяемый результат.
Критичных минусов не нашла.
Бесплатно — 20 кредитов, потом по 5 в день. Я купила 100 кредитов за месяц — около 1000 рублей. На один лендинг ушло 20 кредитов. То есть за 100 кредитов можно сделать примерно 5 простых проектов.
Bolt: функционал, но с нюансами
Интерфейс похож на Lovable.
- Предварительный просмотр — аналогичный.
- Код — доступен, можно дописывать.
- База данных — вынесена на видное место, не нужно копаться в настройках.
- Настройки страницы — богаче: управление доменами, хостингами, хранилище, резервное копирование.
- Командная работа — доступна по подписке Pro.
- Публикация — только опубликовать, без дополнительных опций.
- GitHub — синхронизация работает.
- Figma — ключевое преимущество. Можно загрузить макет из Figma и не начинать с нуля.
- Шаблоны — можно создать и раздать команде.
Как работала с Bolt
Шаг 1: загрузила те же данные — и быстро исчерпала бесплатные токены. Подписка расходуется быстрее. Но каждый день дают по 40 токенов — можно постепенно допиливать.
Шаг 2: попросила сделать синий фон и добавить полноэкранное видео. Использовала тот же промпт, но Bolt не справился. Добавил только синие блоки, убрал отступ и проигнорировал видео. Сколько ни просила — не вставил картинки в нужные блоки.
Результат и впечатления
Визуально результат понравился больше, чем у Lovable. Но чтобы его добиться — много ручной правки. Часто вылетали ошибки, простые команды игнорировались.
Плюсы: богатый функционал — база данных, шаблоны, интеграция с Figma.
- Не выполняет простые команды с первого раза.
- Быстро съедает токены.
- Качество падает при доработке.
- Командная работа — только по Pro-подписке.
200 токенов даются бесплатно, хватает почти на один проект. Ещё по 40 токенов в день.
Figma Make: глубокая интеграция с дизайном
Сразу ограничение: нельзя прикрепить PDF. Но я не сдалась — скопировала всё описание в промпт.
Интерфейс и инструменты
Проще, чем у Lovable и Bolt.
- Предварительный просмотр — можно смотреть десктоп и мобильную версию. Брейкпоинты настраиваются численно или по моделям устройств.
- Код — можно просматривать, как в других сервисах.
- Настройки — разбиты на блоки: общие (заголовок, мета-теги, Google Analytics), домены, шрифты (гибкая настройка), интеграции (Supabase, Git, npm).
- Публикация — можно задать заголовок для браузера, скопировать ссылку, показать в Figma-комьюнити.
- Доступы — как в Figma: редактирование, предпросмотр, командная работа.
- GitHub — синхронизация: связал гит — и можно править код или переносить на хостинг.
- Командная работа — проекты в пространстве Figma, отмечены значком. Можно передавать, синхронизировать с макетами и собирать сайт прямо из дизайна.
Как работала с Figma Make
Шаг 1: вставила данные в промпт. Первый результат был слабым: кнопки без текста, меню не появилось. Пришлось уточнять. Ещё сервис сам вставляет картинки, которые потом не грузятся.
Шаг 2: «причесала» результат — проверила ховеры, блоки, кликабельность формы. Всё подтянулось.
Шаг 3: настроила сбор данных через промпт. Figma подготовила окружение, присвоила полям атрибуты, собрала всё для переноса на Git — чтобы на хостинге указать реальный API.
Результат и впечатления
Понимает хуже, чем Lovable, но лучше, чем Bolt. Зато можно править бесконечно — не паришься о токенах. Удобно использовать как интерактивный макет для презентации.
- Неограниченный функционал в рамках корпоративной подписки на Figma.
- Удобная интеграция с макетами — сайт собирается по дизайну.
- Глубокая кастомизация.
- Не принимает PDF — приходится копировать вручную.
- Требует больше ручной работы и уточнений в промптах.
Функционал зависит от подписки на Figma. По корпоративной — почти неограниченный.
Сравнительная таблица
Lovable
Назначение: сборка с нуля по описанию
Входные данные: текст, скриншоты, PDF, изображения
Качество первого результата: вменяемый, минимум доработок
Интеграция с Figma: есть — можно загрузить макет
Передача разработчику: полная синхронизация с GitHub
Плюсы: быстрый старт, удобная выгрузка в GitHub
Минусы: код требует проверки перед продакшеном
Цена: от 25$ в месяц / 100 кредитов
Bolt
Назначение: прототипирование и сборка каркаса
Входные данные: текст и интеграция с Figma через API
Качество первого результата: визуально красиво, но при правках «разваливается»
Интеграция с Figma: можно загрузить макет
Передача разработчику: GitHub + развертывание на хостинге
Плюсы: богатый функционал — БД, шаблоны, импорт из Figma
Минусы: тормозит на правках, быстро съедает токены, код деградирует
Цена: от 25$ в месяц / 10 млн токенов
Figma Make
Назначение: использование макетов из Figma для рабочих страниц
Входные данные: текст, нативная работа с макетами (фреймы, слои)
Качество первого результата: пришлось допиливать
Интеграция с Figma: проекты в Figma, сайт собирается из макета
Передача разработчику: экспорт в GitHub, код на основе слоёв
Плюсы: безлимит в подписке, сайт из макета, кастомизация
Минусы: не принимает PDF, много ручной работы, привязка к экосистеме Figma
Цена: 35$ за пользователя (вся подписка на Figma)
Стоит ли использовать вайбкодинг?
Для моей задачи ИИ-сервисы справились отлично. Больше всего понравился Lovable. Но выбрала Figma Make — потому что команда уже работает в этой экосистеме. Сервис справляется, но к нему нужно привыкнуть. Сейчас я пишу промпты так, что результат получается сразу хорошим.
Клиенту больше понравился результат в Lovable. Я скачала код оттуда и перенесла в Figma Make — уже там дорабатывала. Небольшой лайфхак.
Вайбкодинг оказался в разы быстрее, чем сборка на Tilda: на каждый лендинг уходило около часа. Но есть нюансы!
Хорошо, если в команде есть разработчик. Он оценит код, перенесёт на хостинг и подскажет, как улучшить промпт. Вайбкодинг — отличен для прототипирования и простых лендингов.
Я делала всё только промптами, без макетов. Это было согласовано с клиентом и руководством. Мы пропустили этап согласования дизайна — и сильно ускорили процесс.
Не ожидала, что вайбкодинг так зайдёт. Теперь это часть моего рабочего процесса — и я не собираюсь от него отказываться.