Три слоя Vibe Design: на каком этапе какой инструмент реально работает
Основной чат
Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.
Почему «лучший инструмент» — это неправильный вопрос
Самый частый вопрос про AI-дизайн: «Что лучше — v0 или Lovable? Stitch или Figma Make?» Этот вопрос не имеет ответа, потому что инструменты решают разные задачи.
Правильный вопрос: на каком слое я сейчас работаю?
Vibe Design устроен в три слоя. Каждый отвечает на свой вопрос:
- Слой 1 — Исследование: правильное ли направление?
- Слой 2 — Сборка: работает ли это как продукт?
- Слой 3 — Точность: можно ли из этого сделать реальное?
Большинство инструментов хорошо работают на первом или втором слое. Задача дизайнера — довести работу до третьего, не потеряв по дороге дизайн-систему, состояния и логику.
Слой 1. Исследование — проверяем направление
На этом слое не нужна красота. Нужен ответ на вопрос: «Это вообще та сторона?»
Цель — быстро сгенерировать несколько вариантов, выбрать самый перспективный, выбросить остальные. Время на один вариант — минуты, не часы. Никакой фиксации на деталях.
Инструменты слоя 1
Google Stitch — лучший старт когда нужно несколько экранных концепций из одного брифа. Задаёшь бизнес-цель или настроение («доверие и плотность данных, как у Linear»), получаешь несколько направлений для сравнения. Мартовское обновление 2026 добавило генерацию пяти экранов одновременно и Voice Canvas. Главное ограничение — это инструмент для исследования, не для производства.
Claude Artifacts — быстрее всего когда нужен один интерактивный компонент или проверка идеи которую можно показать через десять минут. Готовый React или HTML прямо в чате, без установки, по ссылке. Нулевой порог входа.
Bolt — хорош для хакатонов и быстрых демо. WebContainer запускает Node.js прямо в браузере, установка не нужна. Для слоя 1 это плюс. Для продакшена — ограничение.
Как понять что слой 1 закончен
Ты выбрал одно направление. Остальные можно выбросить без сожаления. Если всё ещё хочется поиграть с вариантами — значит, ещё не определился, и на слой 2 идти рано.
Слой 2. Сборка — проверяем работоспособность
На этом слое нужна не идеальная реализация, а рабочий продукт с реальными флоу, данными и состояниями. Пользователь должен пройти сценарий от начала до конца.
Главная ловушка слоя 2 — принять его результат за финальный дизайн. Он никогда не финальный. Интервалы будут сбитыми. Кнопки — разными. Состояния — неполными. Это нормально для этого этапа.
Инструменты слоя 2
Lovable — лучший выбор когда нужен работающий MVP с логикой и данными. Генерирует полностековые приложения по текстовому брифу. Скорость — от идеи до рабочей ссылки за один сеанс. Ограничение — пиксельное качество не его сильная сторона, детали придётся доводить руками.
v0 by Vercel — точечная генерация компонентов. Описал один компонент — получил готовый React с Tailwind, вставляешь в проект. Хорошо работает на переходе слоя 2 в слой 3. Требует базового технического комфорта — не нужно писать код, но структуру нужно уметь читать.
Figma Make — для дизайнеров который не хочет покидать привычную среду. Старт прямо из своих файлов, знакомая ментальная модель. Быстрая итерация. Слабое место — без дисциплины по компонентам быстро превращается в хаос.
Шесть вопросов к результату слоя 2
Перед тем как двигаться дальше, проверь каждый экран:
☐ Скорость до демо: можно показать стейкхолдеру прямо сейчас?
☐ Соответствие дизайн-системе: используются ли реальные компоненты или AI придумал новые?
☐ Единообразие компонентов: кнопка везде одинаковая?
☐ Состояния: есть loading, empty, error, success — или только happy path?
☐ Продолжаемость: другой человек разберётся в структуре через месяц?
☐ Подключение данных: работает на реальных данных или на placeholder?Если хотя бы три пункта вызывают сомнения — не переходи на слой 3 пока не разобрался.
Слой 3. Точность — делаем реальным
Это слой где продукт становится настоящим: единые компоненты, правильные токены, состояния которые не придумывали на ходу, код который можно продолжить через месяц.
Большинство команд застревает на слое 2 и называет это «готово». Настоящее конкурентное преимущество — стабильно доходить до слоя 3.
Инструменты слоя 3
Cursor — полноценная IDE с глубоким пониманием кодовой базы. Здесь всё становится реальным: рефакторинг, чистота компонентов, Git, структура которую можно передать команде. Требует базовой кодовой грамотности — читать структуру обязательно, писать с нуля — нет.
Claude Code + Figma MCP — для дизайнеров которые работают на границе дизайна и кода. Claude Code читает Figma-файл напрямую через MCP-протокол, генерирует код который ссылается на реальные токены и компоненты, и может вернуть сгенерированный UI в Figma как редактируемые слои. Это не прототипирование — это производственный воркфлоу.
Разница между Cursor и Claude Code + Figma MCP на практике: Cursor лучше когда у тебя уже есть кодовая база и нужно работать внутри неё. Claude Code + Figma MCP лучше когда ты идёшь из дизайна в код и обратно, и важно чтобы токены и компоненты не потерялись при переходе.
Что MCP меняет на слое 3
До MCP AI угадывал. «Кажется, это H1.» «Кажется, отступ 16px.» «Кажется, это Primary Button.»
С MCP AI знает. Потому что читает твою дизайн-систему напрямую — компоненты, Auto Layout, токены, нейминг. Разница между «похоже на твой продукт» и «это твой продукт».
Три воркфлоу под разные задачи
Выбор маршрута зависит от того, что важнее на конкретном проекте.
Маршрут максимальной точности Figma → Figma Make → Cursor → Production
Подходит когда есть детальная дизайн-система и нужна пиксельная реализация. Дольше, но результат ближе к системе.
Маршрут быстрого MVP Figma как референс → Lovable → Cursor → Production
Подходит когда нужно что-то рабочее быстро, с реальными флоу и данными. Figma здесь — источник правил, не точка старта.
Маршрут поиска направления Идея → Bolt или Stitch → Figma Make или Lovable → Cursor
Подходит когда ещё не определились и нужна быстрая валидация. Первые два шага специально дешёвые — чтобы можно было выбросить без потерь.
Главная ошибка — не в инструментах
Самая распространённая проблема в Vibe Design не техническая.
AI генерирует что-то, что выглядит хорошо, работает и запускается быстро. В этот момент легко сказать «я доверяю» — и перестать думать как дизайнер. В этот момент ты перестаёшь проектировать и начинаешь утверждать.
AI не беспокоится об edge cases, когнитивной нагрузке и пользовательских ментальных моделях. Он обязан дать ответ — и даст, даже если ответ не имеет смысла с точки зрения UX.
Правильный фрейм: AI — джуниор. Ты — лид. Он работает быстро. Ты решаешь, что идёт в продакшен.
Итог
Слой 1 — Исследование
☐ Инструменты: Stitch, Claude Artifacts, Bolt
☐ Цель: выбрать направление
☐ Готово когда: один вариант выбран, остальные выброшены
Слой 2 — Сборка
☐ Инструменты: Lovable, v0, Figma Make
☐ Цель: рабочий продукт с реальными флоу
☐ Готово когда: все шесть вопросов чеклиста без сомнений
Слой 3 — Точность
☐ Инструменты: Cursor, Claude Code + Figma MCP
☐ Цель: единые компоненты, правильные токены, продолжаемый код
☐ Готово когда: другой человек может продолжить через месяц
