Модуль d.8 · Урок 4
Урок 4: Какой билдер для какой задачи
Содержание
Чему вы научитесь
- Применять главный принцип 2026 года «Выбирай инструмент по слою задачи, а не по хайпу» (
brainy.ink/paper/vibe-coding-for-designers) - За 30 секунд определять оптимальную связку платформ (Framer, Webflow, v0, Bolt.new, Lovable) через дерево решений
- Считать полную экономику запуска и поддержки с учётом лимитов токенов, кредитов и доступности из России
- Переносить единый файл
DESIGN.mdмежду визуальным сайтом и кодовым веб-приложением
Главный принцип 2026 года: выбирайте инструмент по слою задачи, а не по хайпу
Каждую неделю в соцсетях вирусится очередной тред «Этот ИИ-инструмент убил все остальные». Как точно сформулировано в индустриальном плейбуке Vibe Coding for Designers: A 2026 Playbook (brainy.ink/paper/vibe-coding-for-designers), команды, которые терпят неудачу с ИИ-разработкой, выбирают один модный инструмент и пытаются натянуть его на все уровни продукта:
- v0 — это генератор фронтенд-компонентов и быстрых маркетинговых страниц на React, но не конструктор сложных баз данных.
- Bolt.new — это реактивная браузерная песочница для проверки гипотез и сборки интерактивного прототипа с бэкендом к пятнице, но не боевой серверный рантайм для высоконагруженного продакшена.
- Lovable — это лучший ускоритель от нуля до работающего full-stack MVP с авторизацией и реальными данными в Supabase, но не агент для глубокого рефакторинга пятилетнего корпоративного монолита.
- Framer и Webflow — это зрелые визуальные платформы для публичных сайтов, анимаций и контентных порталов с CMS, которые не нужно заменять рукописным кодом из чата.
Матрица слоёв продукта (2026)
| Слой вашей задачи сегодня | Какой инструмент брать | Почему другие здесь проиграют |
|---|---|---|
| Имиджевый лендинг или промо-страница (1–3 экрана) с выразительной анимацией и полным визуальным контролем | Framer AI (или v0 при деплое в React-стек) | В Bolt/Lovable вы потратите часы, объясняя словами в чате физику скролл-параллакса, которая во Framer настраивается мышкой за 2 минуты |
| Многостраничный корпоративный сайт, медиа или каталог (5–100+ страниц) с регулярным обновлением статей и кейсов | Webflow AI | Каскадные переменные (Variables) и реляционная CMS позволяют маркетологам вести сайт годами без риска сломать вёрстку |
| Интерактивный функциональный прототип с бэкендом «к пятнице» (калькулятор, внутренний дашборд, проверка механики) | Bolt.new | Мгновенный запуск в WebContainer без настройки окружения и щедрый бесплатный лимит (1M токенов/мес) |
| Боевой MVP продукта (v1) с регистрацией реальных пользователей, личным кабинетом и базой данных, когда вы не инженер | Lovable | Автоматическая связка с Supabase (Auth + RLS-защита строк) и двусторонняя синхронизация с GitHub для последующей передачи разработчикам |
| Развитие существующей большой кодовой базы и сложный рефакторинг после стадии MVP | Claude Code / Cursor + Figma MCP + DESIGN.md | Генераторы с нуля начинают терять контекст на крупных проектах — здесь вступают в игру IDE-агенты с прямым доступом к репозиторию и макетам |
Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.
Дерево решений: от брифа к стеку за 4 вопроса
Прогоните любой новый проект через эти четыре развилки до того, как откроете браузер:
Развилка 1. Нужна ли регистрация пользователей, личный кабинет и сохранение пользовательских данных в БД? Если нет (это сайт-витрина, портфолио, блог или лендинг) — идите в визуальные билдеры (Framer или Webflow). Если да — переходите к развилке 2.
Развилка 2. Вы проверяете быструю внутреннюю гипотезу на моках или запускаете продукт для живых клиентов с приватными данными? Для быстрого прототипа берите Bolt.new (в три фазы: UI → стейт → БД). Для живых людей, оплаты и защиты данных через RLS берите Lovable + Supabase.
Развилка 3. Если это публичный сайт: сколько на нём страниц и как часто меняется контент? До 3–5 страниц с упором на вау-эффект и анимацию — Framer AI (или v0, если вы хотите хранить код в Git). От 5 страниц с блогом, каталогом услуг и фильтрацией — Webflow AI.
Развилка 4. Как склеить маркетинговый сайт и само приложение в единый бренд? Подготовьте единый файл
DESIGN.md(цветовые роли, шрифты, шаг отступов, радиусы): используйте его переменные в глобальных стилях Framer/Webflow на главном доменеexample.comи скормите этот жеDESIGN.mdна нулевом шаге в Lovable/Bolt для приложения на поддоменеapp.example.com.
Полная таблица стоимости и доступности из России (осень 2026)
| Платформа | Что даёт бесплатный план (Free) | Минимальный рабочий платный план | Доступ из РФ (редактор и хостинг) |
|---|---|---|---|
| Framer AI | 1 сайт на .framer.app с бейджем Framer | Basic $10/мес (свой домен, до 30 страниц, 1 коллекция CMS) | Нужен VPN (входит в список restricted countries) |
| Webflow AI | 2 страницы на .webflow.io, до 50 записей CMS, AI Site Builder включён | Basic $14/мес (статический сайт) / CMS $23/мес (2 000 записей CMS) | Работает без VPN |
| v0 (Vercel) | $5 кредитов/мес, до 7 сообщений в день, деплой на Vercel | Plus $30/мес (больше токенов, импорт фреймов из Figma, приватность) | Работает без VPN |
| Bolt.new | 1M токенов/мес (до 300K/день), хостинг на .bolt.host, базы данных | Pro $25/мес (от 10M токенов, без дневного потолка, свой домен) | Работает без VPN |
| Lovable | 5 кредитов/день (до 30/мес), только публичные проекты | Pro $25/мес (от 100 кредитов + до 150 дневных, приватные репо, свой домен) | Работает без VPN |
(Оплата всех перечисленных зарубежных подписок из России требует карты иностранного банка).
4 дорогие архитектурные ошибки и как их избежать
Для каждого из трёх сценариев ниже выпишите: (1) какой инструмент (или связку из двух инструментов) вы выберете, (2) какой тариф понадобится на старте и (3) какие правила вы зафиксируете в DESIGN.md перед первым промптом:
- Кейс А: локальная сеть студий керамики в Москве. Нужен имиджевый сайт с расписанием мастер-классов (обновляется администратором дважды в неделю), галереей работ и формой записи в Telegram. Аудитория заходит с российских мобильных операторов без VPN.
- Кейс Б: фаундер запускает B2B-сервис автоматической сверки юридических договоров. К понедельнику нужен публичный лендинг с калькулятором выгоды и рабочий личный кабинет (
app.), где клиент регистрируется, загружает документ и видит историю своих проверок, которую не должны видеть другие пользователи. - Кейс В: продуктовый дизайнер внутри финтех-компании должен за один вечер собрать кликабельный прототип нового дашборда аналитики с рабочей фильтрацией по датам и живыми графиками, чтобы защитить идею перед директором по продукту в пятницу утром.