Вайбкодинг для дизайнера: как выбрать сервис для создания прототипов лендинга

Вайбкодинг для дизайнера: как выбрать сервис для создания прототипов лендинга

Расскажу, как тестировала три 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:

  1. Structure & Content: Use the attached text document. It contains the complete section structure, headlines, body copy, and button labels.
  2. 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: на каждый лендинг уходило около часа. Но есть нюансы!

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

Я делала всё только промптами, без макетов. Это было согласовано с клиентом и руководством. Мы пропустили этап согласования дизайна — и сильно ускорили процесс.

Не ожидала, что вайбкодинг так зайдёт. Теперь это часть моего рабочего процесса — и я не собираюсь от него отказываться.

Читать оригинал