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

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

• Применять воркфлоу On-Brand Prototyping & DESIGN.md перед генерацией логики в Bolt.new и Lovable, чтобы ваши приложения не выглядели как шаблонные клоны
• Правильно дробить промпты в Bolt.new на три фазы (ядро интерфейса → локальный стейт → база данных), не сжигая дневной лимит в 300 000 токенов на каскадных ошибках
• Строить полноценные MVP в Lovable в связке с Supabase (Auth + политики безопасности RLS) и двусторонней синхронизацией с GitHub
• Чётко понимать технический потолок браузерного контейнера Bolt и момент передачи Lovable-проекта инженерам

Почему приложения из вайб-кодинга выглядят одинаково — и как это исправить через DESIGN.md

Когда дизайнер впервые открывает Bolt.new или Lovable и пишет «Сделай мне CRM для дизайн-студии», происходит маленькое чудо: за две минуты появляется рабочее приложение. Но уже через пять минут становится видна главная болезнь вайб-кодинга 2026 года (duply.ai/blog/give-your-ai-agent-a-design-system, designsystemscollective.com, github.com/dimabraven/design-md): все такие приложения выглядят как близнецы-клоны.

Без жёсткой дизайн-спецификации языковая модель откатывается к среднему арифметическому своих обучающих данных: кислотно-фиолетовым градиентам, дефолтным карточкам shadcn/ui, случайным скруглениям и разнобою отступов при добавлении каждого нового экрана. Попытки править визуал фразами в чате («сделай минималистичнее») работают медленно, неточно и сжигают кредиты, а приложенный скриншот заставляет модель угадывать каждый HEX-код наугад.

Решение 2026 года: воркфлоу On-Brand Prototyping и файл DESIGN.md

Перед тем как просить ИИ-агента программировать таблицы и базы данных, зафиксируйте дизайн-систему в коде на нулевом шаге. Это делается через передачу агенту файла DESIGN.md (который можно выгрузить из Google Stitch, взять из библиотек эталонных систем вроде Linear/Stripe/Vercel на duply.ai или составить под свой бренд) и синхронизацию переменных в tailwind.config.ts / index.css.

Из каких 6 блоков состоит рабочий DESIGN.md (github.com/dimabraven/design-md):

1. Color tokens с ролями и точными HEX/HSL-значениями: не просто «синий и серый», а строгие семантические роли — background.canvas (#0A0D12), surface.card (#121721), border.subtle (#1E2636), text.primary (#F3F4F6), text.muted (#9CA3AF), action.primary (#0D9488).
2. Typography scale: семейства шрифтов для заголовков, интерфейса и моноширинных цифр/кода, их насыщенность (font-weight), размеры и межстрочные интервалы.
3. Spacing & Radius rules: базовая сетка отступов (например, строго 4 / 8 / 16 / 24 / 32px) и радиусы скруглений (6px для кнопок и инпутов, 10px для карточек).
4. Component guidance: как именно оформляются главные и второстепенные кнопки, поля ввода в состоянии фокуса/ошибки, таблицы и пустые состояния (empty states).
5. Layout principles: плотность интерфейса, максимальная ширина контейнера, поведение сайдбара на мобильных экранах.
6. Do / Don’t rules (список строгих запретов): например, «Никогда не используй фиолетово-синие градиенты на фоне и стандартные тени shadow-xl; отделяй карточки только рамкой 1px solid border.subtle».

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

Bolt.new: быстрый прототип с бэкендом в браузерном контейнере

Bolt.new (bolt.new) от команды StackBlitz запускает полноценную среду Node.js прямо внутри вкладки вашего браузера с помощью технологии WebContainer, а встроенный Bolt Cloud даёт мгновенный хостинг на домене .bolt.host и подключение баз данных.

Тарифы и лимиты Bolt.new (2026, bolt.new/pricing)
├── Free ($0): 1 000 000 токенов в месяц, жёсткий дневной потолок 300 000 токенов/день, хостинг .bolt.host
├── Pro ($25/мес): от 10M токенов/мес, снятие дневного лимита, свой домен, без бейджа Bolt
└── Teams ($30/мес за участника): общие командные пространства и репозитории

Главная ловушка Bolt.new: как не сжечь 300K дневных токенов на каскадных ошибках

На бесплатном плане у вас есть щедрый миллион токенов в месяц, но всего 300 000 токенов в сутки. При каждом сообщении в чат Bolt передаёт модели контекст файлов проекта. Если в первом же промпте попросить: «Сделай трекер финансов с базой данных, авторизацией, круговыми графиками, экспортом в CSV и тёмной темой», модель попытается сгенерировать 15 файлов одновременно.

Одна мелкая нестыковка между неподключённой базой данных и графиком вызовет ошибку сборки. Автономный отладчик Bolt начнёт в цикле переписывать файлы, и за 4–5 попыток автоисправления вы за 10 минут сожжёте все 300K дневных токенов, оставшись с неработающим белым экраном.

Правило трёхфазного дробления промптов в Bolt.new

Чтобы собирать приложения в Bolt без единого сбоя и экономить токены в 3–4 раза, всегда разделяйте разработку на три изолированные фазы:

1. Фаза 1. Дизайн-токены + Ядро интерфейса (UI Shell на мок-данных): передайте DESIGN.md и попросите собрать только визуальный каркас и компоненты с захардкоженным массивом из 3–4 тестовых записей. Никаких баз данных и сложной логики на первом шаге! Убедитесь, что экран открывается и выглядит точно по вашим токенам.

2. Фаза 2. Локальный стейт и интерактивность (Local State & CRUD в памяти): вторым промптом оживите интерфейс внутри браузера (через useState или localStorage): добавление новой записи через форму, фильтрацию по категориям, пересчёт суммы на графике и обработку пустых состояний. Проверьте весь пользовательский сценарий руками в превью.

3. Фаза 3. Подключение базы данных и авторизации (Database & Persistence): только когда интерфейс и локальная логика работают безупречно, третьим промптом попросите: «Замени локальный массив задач на хранение в базе данных с сохранением текущей структуры компонентов».

Lovable: эталон для запуска живого MVP с реальными пользователями

Если Bolt силён в мгновенных браузерных прототипах, то Lovable (lovable.dev) в 2026 году признан лидером в категории Founder MVP — когда продуктовому дизайнеру или основателю без штата инженеров нужно запустить первую боевую версию продукта (v1) с настоящей регистрацией людей и защищённой базой данных (brainy.ink/paper/vibe-coding-for-designers).

Тарифы и стек Lovable (2026, lovable.dev/pricing)
├── Стек: React + TypeScript + Tailwind CSS + Supabase + GitHub
├── Free ($0): 5 кредитов в день (максимум 30 кредитов в месяц), публичные проекты
├── Pro (от $25/мес): от 100 месячных кредитов + до 150 дневных (по 5/день), приватные проекты, свой домен
└── Business (от $50/мес): SSO, внутренний деплой и корпоративный контроль доступа

(Примечание: старый тариф Starter за $20 закрыт, минимальный платный план — Pro за $25/мес).

Главная суперсила Lovable: связка Supabase (Auth + RLS) и двусторонний GitHub Sync

В отличие от закрытых песочниц, архитектура Lovable держится на двух производственных столпах:

1. Нативная интеграция с Supabase: таблицы, Auth и политики безопасности RLS

Когда вы подключаете к проекту Lovable аккаунт Supabase, агент не просто рисует формочку входа — он сам пишет SQL-миграции, создаёт таблицы в PostgreSQL и настраивает настоящую аутентификацию (Supabase Auth по email или через Google/GitHub).

Самый важный момент, который обязан контролировать дизайнер при создании MVP с реальными данными, — это RLS (Row Level Security, защита данных на уровне строк):

• Без настроенных RLS-политик любой авторизованный пользователь через консоль браузера сможет прочитать или удалить чужие проекты из вашей таблицы.
• В Lovable обязательно включайте в промпт подключения базы прямое требование: «Создай таблицу projects с привязкой к user_id (auth.uid()) и включи Row Level Security (RLS): напиши политики SELECT, INSERT, UPDATE и DELETE так, чтобы каждый пользователь видел и редактировал только собственные записи».
• Перед публикацией MVP используйте встроенную проверку безопасности Lovable (Security Scan / проверка политик Supabase), чтобы убедиться, что ни одна таблица не осталась открытой наружу.

2. Двусторонняя синхронизация с GitHub (Two-Way GitHub Sync)

После подключения репозитория каждое действие в чате Lovable автоматически оформляется как чистый коммит в вашей ветке на GitHub. И это работает в обе стороны:

• Вы генерируете базовый интерфейс и таблицы в чате Lovable.
• Разработчик (или вы сами через Cursor / Claude Code) клонирует этот репозиторий, дописывает сложный алгоритм в своей IDE и делает git push в GitHub.
• Изменения из GitHub мгновенно подтягиваются обратно в визуальное превью Lovable — вы продолжаете править дизайн и тексты без потери инженерного кода.

Именно поэтому формула роста в 2026 году звучит так: «Запустите и проверьте MVP на первых пользователях в Lovable, а когда продукт перерастёт v1 — развивайте этот же GitHub-репозиторий силами инженеров».

Сравнение: когда открывать Bolt.new, а когда Lovable

Главное из урока