Я сделал рабочий экран за 58 минут с нуля и вот как

## Что получится на выходе

За 58 минут по этому маршруту можно сделать рабочий UI-экран:

• с Auto Layout и компонентами в Figma
• адаптированный под мобильную версию
• с реальным контентом вместо Lorem ipsum
• готовый к передаче в разработку или показу заказчику

Подходит для любого одного состояния интерфейса: онбординг, дашборд, карточка продукта, форма, экран ошибки.

## Почему 58 минут, а не «за 5»

Честно: за 5 минут можно получить картинку. За 58 — рабочий экран.

Между «AI сгенерировал что-то похожее» и «это можно передать в разработку» лежит работа. Нужно разобраться со структурой, компонентами, состояниями, реальным текстом. VibeDesign ускоряет каждый этап, но не убирает их.

58 минут — реалистичное время для дизайнера, который понимает задачу и умеет работать с результатом генерации.

## Стек для воркфлоу

Три инструмента — больше не нужно.

Google Stitch или Figma Make — генерация первичного макета по описанию. Stitch удобен для старта с нуля в браузере, Figma Make — если уже есть файл и нужно итерировать прямо в нём.

Claude — составить промпт для генератора, написать реальный текст для экрана, разобрать структуру компонентов. Не для рисования — для мышления.

Figma — финальная сборка, Auto Layout, компоненты, передача в разработку.

Опционально: Reve 2.0 или Midjourney — если нужны иллюстрации или заглушки для изображений.

## Шаг 1. Формулировка задачи — 5 минут (0:00–0:05)

Главная ошибка — начать генерировать без понимания задачи. ИИ сделает что-то красивое, но не то.

Перед стартом ответьте письменно на три вопроса — прямо в заметках или в чате с Claude:

Что это за экран? Не «часть приложения», а конкретно: «экран онбординга шаг 2/4 — пользователь выбирает свои цели».

Что пользователь делает на этом экране? Одно главное действие: «выбирает 1–3 цели из списка и нажимает "Далее"».

Кто пользователь, какой контекст? «Мобильное приложение для трекинга привычек, аудитория 25–40 лет, светлая тема, минималистичный стиль».

Три ответа — это основа первого промпта. Больше ничего придумывать не нужно.

## Шаг 2. Генерация основы — 10 минут (0:05–0:15)

Попросите Claude составить промпт для Stitch — не пишите его с нуля сами:

Составь промпт для генерации UI-экрана в Google Stitch.

Экран: онбординг, шаг 2 из 4 — выбор целей пользователя.
Действие: пользователь выбирает 1–3 цели из 6 вариантов
(здоровье, продуктивность, сон, спорт, питание, медитация),
нажимает «Далее».
Приложение: трекер привычек, мобильное, iOS.
Стиль: светлая тема, минималистичный, акцентный цвет — индиго.
Шрифт: Inter.

Claude вернёт готовый промпт. Вот что получится примерно:

Mobile onboarding screen, step 2 of 4. Goal selection.
User selects 1–3 goals from 6 options: Health, Productivity,
Sleep, Sport, Nutrition, Meditation.
Each goal is a card with icon and label.
Selected state: filled indigo background, white text.
Progress indicator at top (2/4 dots).
"Continue" button at bottom — disabled until at least one
goal selected.
Light theme. Inter font. iOS safe area. Clean, minimal.

Запускаете Stitch, вставляете промпт. Через 20–30 секунд — первая версия. Она будет на 70% правильной. Это нормально — дальше итерации.

## Шаг 3. Итерации — 15 минут (0:15–0:30)

Не переписывайте промпт с нуля. Давайте короткие точечные правки:

Правка сетки:

Карточки слишком крупные, все 6 не видно на экране.
Сделай сетку 2×3, карточки компактные:
иконка сверху, название снизу, минимальные отступы.

Правка кнопки:

Кнопка "Далее" должна быть неактивной по умолчанию.
Серая, disabled. Активируется после выбора хотя бы одной цели.

Правка заголовка:

Заголовок слишком маленький. Увеличь до 24px bold.
Добавь подзаголовок под ним:
"Можно выбрать несколько" — 14px, серый, regular.

Индикатор шагов:

Замени прогресс-бар на точки: 4 штуки, вторая закрашена.
Стандартный паттерн для онбординга, выровняй по центру сверху.

Три-четыре таких правки — и экран уже близко к нужному. Дальше финальная сборка.

## Шаг 4. Сборка в Figma — 15 минут (0:30–0:45)

Stitch даёт картинку или базовый код. Figma — это финальная сборка.

Если работаете в Figma Make — экран уже у вас в файле, переходите сразу к компонентам. Если в Stitch — экспортируйте результат и воссоздайте структуру в Figma: это быстрее, чем строить с нуля, потому что есть чёткое визуальное задание.

Auto Layout. Настройте его на основных контейнерах. Карточки в сетке 2×3 — это Frame с Auto Layout и gap 12px. Занимает 3 минуты, но потом любая правка — секунды.

Компоненты. Карточку цели сделайте компонентом с двумя вариантами: Default и Selected. Не создавайте 6 отдельных карточек — один компонент. Нужно поменять иконку во всех карточках — правите в одном месте.

Реальный текст. Замените Lorem ipsum на настоящие названия: «Здоровье», «Продуктивность», «Сон» и так далее. Реальный текст сразу показывает проблемы с переносами и длиной, которые на заглушках не видны.

Состояния. Покажите два состояния экрана: ни одна цель не выбрана (кнопка неактивна) и одна выбрана (кнопка активна). Это минимум для понятного хендоффа.

## Шаг 5. Финальная проверка — 13 минут (0:45–0:58)

Пройдитесь по чеклисту перед тем как показывать или передавать:

Структура:

• Один чёткий призыв к действию
• Все состояния компонентов показаны: default, selected, disabled
• Реальный контент, не Lorem ipsum

Технические детали:

• Safe area для iOS соблюдена (отступ снизу под жест навигации)
• Шрифты из подключённой библиотеки, не локальные
• Цвета из стилей Figma, не произвольные HEX

Мобильная версия:

• Кнопки минимум 44×44px — tap target
• Текст не меньше 14px
• Все карточки видны без скролла

Быстрый тест на понятность: закройте файл, откройте через минуту и смотрите первые 5 секунд. Если не сразу понятно, что делать — что-то не так с иерархией.

## Разбор по времени

Первые два раза может занять 75–85 минут. После пяти экранов входите в темп.

## Типичные ошибки, которые съедают время

Слишком детальный первый промпт. Если вы пишете промпт на 20 строк с точными размерами и цветами — вы делаете работу, которую должен делать ИИ. Дайте структуру и настроение, детали уточните итерациями.

Переделка вместо правки. Если первый результат не понравился — не генерируйте заново с нуля. Дайте конкретную правку: «сделай карточки компактнее». Генерация с нуля занимает в 3 раза больше времени, чем точечное уточнение.

Пропущенные компоненты. Многие переносят результат из Stitch в Figma как группы и не делают компоненты. Первая же правка «поменяй иконки во всех карточках» превращается в 20 минут ручной работы.

Экран без состояний. Экран без состояния ошибки, загрузки или пустого списка — это полдизайна. Разработчик всё равно спросит. Лучше ответить заранее.

Генерация вместо мышления на первом шаге. ИИ не знает вашего пользователя. Он не знает, почему «Медитация» должна стоять перед «Спортом» в конкретном приложении. Это знаете вы. Первые 5 минут — ваша работа, не ИИ.

## Как масштабировать на целый флоу

58 минут — это один экран. Для флоу из 5–7 экранов умножать на 5 не нужно.

После первого экрана у вас уже есть компонентная библиотека, стили и рабочий промпт-шаблон. Второй экран занимает 30–35 минут. Третий — 20–25. С четвёртого генерацию используете только для нестандартных секций, остальное — прямо в Figma с готовыми компонентами.

Полный онбординг из 5 шагов — 2,5–3 часа вместо полного рабочего дня. Это реальная цифра.

## Итог

VibeDesign не убирает дизайн. Он убирает рутину: пустой холст, поиск референсов, первичную расстановку элементов. Вы всё равно думаете о пользователе, выстраиваете иерархию, делаете компоненты и проверяете состояния.

Просто теперь вы начинаете не с нуля, а с 70% готовой основы.

Сокращённый маршрут:

1. Три ответа на три вопроса — задача, действие, контекст (5 мин)
2. Промпт через Claude → запустить Stitch или Figma Make (10 мин)
3. Три-четыре точечные правки итерациями (15 мин)
4. Auto Layout и компоненты в Figma, реальный текст (15 мин)
5. Чеклист, два состояния, tap targets (13 мин)

Первый экран можно сделать сегодня.