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

Расскажу, как я тестировала три AI-сервиса для сборки лендинга. Благодаря вайбкодингу мы теперь показываем клиенту рабочий прототип уже на пресейле.

На старте продаж мы, как правило, презентуем клиенту часть будущего продукта ещё до заключения сделки. Конечным результатом этапа является макет в фигме. За счёт вайбкодинга мы оперативно показываем клиенту рабочий прототип с ховерами и поп-апами.

Исходные данные

Прилетела как-то ко мне задача: нужно оперативно сделать 4 посадочные страницы для разных чат-ботов, чтобы показать продукты внутри одной компании, то есть, заходя на сайт бренда, можно перейти на промо-страницу каждого из них. Сразу поясню – заказчик крупный, мы делаем для него пул задач кастомной разработки. В этот раз он хотел подготовить отдельные промо на каждый вид продукта.

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

Оценила сроки и выдала: «За 2 недели будет готово». Но у заказчика был конкретный запрос – попробовать собрать лендинги с помощью ИИ и уложиться в более сжатые сроки.

Попробовала прикинуть, как ускориться – например, собрать макеты с помощью 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. Подключила сбор данных с формы через промпт, настроила безопасность и прописала политику и куки.

Результат и впечатления

Работать с сервисом понравилось – он удобный, соображает быстро и сразу даёт много возможностей.

Плюсы:

5 проектов в рамках подписки;
передача проектов;
выгрузка в GitHub;
выдаёт вменяемый результат.

Критичных минусов для моей задачи не нашла.

Стоимость

Бесплатно даётся 20 кредитов, затем каждые сутки ещё по 5. Я брала 100 кредитов на месяц – потратила около 1000 рублей. На этот лендинг ушло 20 кредитов. То есть за 100 кредитов можно сделать примерно 5 несложных проектов.