Урок 3: Bolt и Lovable — vibe coding для дизайнеров

Чему вы научитесь

• Создавать полноценные веб-приложения в Bolt.new без знания кода
• Запускать MVP в Lovable с GitHub-синхронизацией
• Понимать реальную стоимость проекта на каждой платформе
• Различать, когда vibe coding лучше визуального билдера

Что такое vibe coding

Vibe coding — подход, при котором вы описываете результат на естественном языке, а AI пишет весь код. Нет визуального canvas, нет drag & drop. Вы общаетесь с AI в чате, а он создаёт приложение с frontend, backend и базой данных.

Для дизайнера это возможность выйти за пределы «просто сайта»: создать приложение с авторизацией, базой данных, API-интеграциями — без единой строчки кода.

Визуальные билдеры vs Vibe coding
├── Framer / Webflow: рисуете на canvas → сайт
└── Bolt / Lovable: описываете в чате → приложение
    ├── Frontend (React, Next.js)
    ├── Backend (Node.js, API)
    ├── База данных (Supabase, PostgreSQL)
    ├── Авторизация (email, OAuth)
    └── Хостинг (встроенный)

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Bolt.new: full-stack в браузере

Bolt.new от StackBlitz — среда разработки прямо в браузере. С выходом Bolt v2 в октябре 2025 и обновлениями 2026 года инструмент вырос из экспериментального в рабочий: автономная отладка (AI сам находит и исправляет ошибки), Bolt Cloud для хостинга, импорт из Figma.

Пошаговое создание

1. Откройте bolt.new
2. Введите: «Приложение для учёта расходов. Пользователь добавляет траты по категориям (еда, транспорт, развлечения), видит круговой график расходов за месяц и общую сумму. Светлая тема, приятные цвета»
3. Bolt создаст проект за 1-2 минуты: файлы слева, preview справа
4. Итерируйте:
   • «Добавь тёмную тему с переключателем»
   • «Сделай график за неделю / месяц / год с переключателем»
   • «Добавь экспорт данных в CSV»

Bolt v2 планирует изменения автономно: читает ошибки, пробует исправить, координирует правки в нескольких файлах. Количество «ошибка → ручной промпт → ещё ошибка» сократилось на порядок.

Bolt Cloud: хостинг из коробки

Каждый проект в Bolt получает URL на .bolt.host бесплатно. Это не только preview — это рабочий хостинг с:

• Автоматическим SSL
• Базами данных (неограниченно на любом плане)
• SEO-настройками
• Кастомным доменом (на Pro-плане)

Бесплатный план: до 1 миллиона веб-запросов в месяц. Для личного проекта или MVP — более чем достаточно.

Реальная стоимость

Bolt.new (2026)
├── Free: 1M токенов/мес, 300K/день, хостинг, БД
├── Pro ($25/мес): больше токенов, кастомный домен, без бейджа
├── Teams ($30/мес/чел): командные проекты
└── Enterprise: по запросу

1 миллион токенов на бесплатном плане — это много. Хватает на 3-5 проектов средней сложности или один большой. Ограничение — дневной лимит в 300K: если проект требует много итераций, растянете на несколько дней.

Lovable: MVP с историей кода

Lovable (бывший GPT Engineer) специализируется на быстром создании MVP. Стек: React + TypeScript + Tailwind + Supabase. Каждое изменение автоматически коммитится в GitHub — полная история кода, которую разработчик может подхватить.

Пошаговое создание

1. Откройте lovable.dev и войдите через GitHub
2. New Project > опишите: «Kanban-доска для управления задачами. Три колонки: To Do, In Progress, Done. Drag & drop карточек, поле названия и описания задачи, приоритет (цветная метка), фильтр по приоритету»
3. Lovable сгенерирует за 2-3 минуты
4. Итерируйте: «Добавь авторизацию через Supabase» > «Тёмная тема» > «Фильтр по дате»

GitHub-синхронизация

После каждого промпта Lovable автоматически коммитит в GitHub. Что это даёт:

• Полная история изменений — видно, что менялось и когда
• Разработчик продолжит работу в своей IDE (VS Code, Cursor)
• Откат к предыдущей версии через git revert
• Code review через стандартные PR

Для продуктовых команд это критически важно: MVP, созданный дизайнером в Lovable, разработчик берёт в работу без «переписывания с нуля».

Кредитная система

Lovable использует кредитную систему. Каждый пользователь получает 5 бесплатных кредитов в день независимо от плана. На бесплатном плане — максимум 30 в месяц. На платных — до 150 ежедневных кредитов в месяц плюс основной пул.

Lovable (2026)
├── Free: 5 кредитов/день (до 30/мес), публичные проекты
├── Starter ($20/мес): 100 кредитов + 5/день, приватные проекты
├── Launch ($50/мес): 100 кредитов + 5/день, code editing, кастомные домены
└── Scale ($100/мес): увеличенные лимиты

1 кредит — примерно один промпт. Простые изменения (цвет, текст) стоят 0.5 кредита. Сложные (авторизация, интеграция с БД) — около 1.2 кредита. На Starter (100 + до 150 ежедневных) хватает на 2-3 проекта средней сложности.

Bolt vs Lovable: прямое сравнение

Bolt выигрывает по бесплатному плану (1M токенов — очень щедро), встроенному хостингу (Bolt Cloud) и выбору стека (не только React). Автономная отладка экономит нервы и токены.

Lovable выигрывает по GitHub-интеграции (автокоммиты — бесценно для команд), качеству TypeScript-кода (строгая типизация) и простоте интерфейса для не-разработчиков.

Для дизайнера-одиночки: Bolt — больше возможностей бесплатно, хостинг из коробки.

Для продуктовой команды: Lovable — код сразу в GitHub, разработчик подхватывает без потерь.

Когда vibe coding, а когда визуальный билдер

Вам нужен только сайт (лендинг, портфолио, блог)?
└── Framer или Webflow -- визуальный контроль лучше

Нужно приложение с логикой (авторизация, база, API)?
└── Bolt или Lovable -- vibe coding

Нужен быстрый прототип для тестирования идеи?
└── Bolt (бесплатно, быстро, хостинг из коробки)

Нужен MVP для передачи разработчикам?
└── Lovable (GitHub sync, чистый TypeScript)

Нужен и сайт, и приложение?
└── Webflow (маркетинговый сайт) + Lovable (приложение)

Практическое задание

Создайте одно и то же приложение в Bolt и Lovable:

1. Бриф: «Трекер привычек. Пользователь добавляет привычки (название, частота: ежедневно/еженедельно), отмечает выполнение, видит streak (серию дней) и процент за неделю. Светлые приятные цвета, простой интерфейс»
2. Bolt.new: создайте и доведите до рабочего состояния за 3-4 итерации. Опубликуйте на Bolt Cloud
3. Lovable: создайте то же самое. Проверьте GitHub — убедитесь, что код запушен
4. Сравните: скорость, качество UI, удобство итераций, рабочий ли результат

Какой инструмент дал лучший результат для вашего запроса?