Урок 5: Практика — прототип тремя способами

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

• Проводить сквозную лабораторную проверку одного продуктового брифа в Figma Make, Google Stitch и v0
• Диагностировать характерные ошибки первого промпта в каждом из трёх генераторов (потеря стейта, визуальный дрейф, шаблонные цвета shadcn/ui) и исправлять их вторым прицельным шагом
• Оценивать артефакты (слои Figma, DESIGN.md, React-код) по объективной матрице из 5 критериев
• Выстраивать гибридный пайплайн, объединяющий сильные стороны всех трёх инструментов

Лабораторный бриф: интерактивный лендинг и калькулятор для SaaS-продукта

Чтобы сравнение было честным, мы возьмём не просто статичную визитку, а страницу продукта с интерактивным узлом (переключателем тарифов и калькулятором размера команды). Именно на таких задачах сразу видно, какой инструмент рисует красивую ширму, а какой реально держит логику и дизайн-систему.

Единый бриф лабораторной работы: TaskFlow
├── Продукт: TaskFlow — ИИ-трекер задач и спринтов для продуктовых команд (5–50 человек)
├── Эстетика и референсы: сдержанный инженерный минимализм (Linear, Raycast)
├── Дизайн-токены:
│   ├── Фон страницы: #090D16, поверхность карточек: #111827, рамки: #1F2937
│   ├── Акцент (color.action): #6366F1 (индиго), вторичный акцент: #10B981 (изумрудный)
│   └── Радиус карточек: 12px, кнопок: 8px, шрифт: Inter / Geist
└── Обязательные блоки и логика:
    1. Hero-секция: заголовок, подзаголовок, форма быстрого старта по email (с проверкой пустого поля), превью доски спринта
    2. Блок возможностей: 3 карточки в сетке (ИИ-приоритизация бэклога, Авто-сводка стендапов, Синхронизация с GitHub)
    3. Интерактивный блок тарифов: ползунок размера команды (от 5 до 50 человек), переключатель «Месяц / Год (-20%)» и 3 карточки планов (Starter $0, Pro $12/чел, Enterprise), где итоговая сумма пересчитывается на лету
    4. Модальное окно или второй экран: при клике на «Начать пробный период» на тарифе Pro открывается экран подтверждения, где сохранены выбранное число участников и тип оплаты

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

Лабораторный этап 1: Figma Make — проверка маршрута и сохранение стейта

В Figma Make наша главная цель — получить работающий интерактивный сценарий переходов и вернуть согласованные фреймы на холст через Copy Design.

1. Запустите таймер и откройте Figma Make: приложите к промпту базовый фрейм с вашими стилями кнопок (или выберите библиотеку команды в Make Kit).
2. Отправьте первый промпт по правилу «Сначала маршрут, потом визуал»: опишите переход от выбора числа участников на ползунке и клика по кнопке тарифа Pro к экрану подтверждения заявки, а также возврат по кнопке «Назад». Вторым абзацем задайте токены тёмной темы.
3. Протестируйте маршрут и найдите типичную ошибку первого промпта: передвиньте ползунок на 25 человек, переключите оплату на годовую, нажмите «Начать пробный период», а с экрана подтверждения нажмите «Назад».

Где Figma Make ошибается на первом промпте и как исправить это вторым шагом

На первой итерации Make отлично рисует оба экрана, но часто допускает две ошибки состояния:

1. На экране подтверждения отображается захардкоженная цена $12/мес вместо пересчитанной суммы для 25 человек с годовой скидкой.
2. При нажатии кнопки «Назад» ползунок команды снова сбрасывается на начальное значение 5 человек, а переключатель возвращается на помесячную оплату.

После исправления нажмите Copy Design и вставьте оба состояния на холст Figma. Остановите таймер и запишите расход кредитов.

Лабораторный этап 2: Google Stitch — Vibe Design и голосовая калибровка

В Google Stitch наша задача — за 5–10 минут пропустить фазу серых вайрфреймов, исследовать несколько визуальных концепций на бесконечном холсте и выгрузить файл DESIGN.md.

1. Запустите таймер и создайте проект Desktop на stitch.withgoogle.com (через VPN).
2. Сформулируйте Vibe-промпт с референсом: «Лендинг для TaskFlow — ИИ-трекера спринтов для инженерных команд. Ощущение: хирургическая точность, глубина тёмного интерфейса, спокойная уверенность. Референсы по атмосфере: Linear и Raycast. Включи Hero с превью доски, сетку из 3 возможностей и интерактивный блок тарифов с калькулятором команды».
3. Сравните 4 концепта на бесконечном холсте: выберите лучший и попросите Stitch автоматически достроить следующий экран подтверждения триала.

Где Google Stitch ошибается на первом промпте и как исправить это вторым шагом

Первая генерация в Stitch даёт эффектную атмосферу и качественные контекстные иллюстрации от Nano Banana 2, но почти всегда грешит двумя проблемами:

1. Визуальный перегруз в плотных блоках данных: в секции тарифов модель увлекается декоративными градиентами и крупными заголовками, из-за чего три карточки не помещаются в один экран по высоте, а таблица сравнения теряет читаемость.
2. Рассинхрон стиля на достроенном экране: когда вы просите достроить второй экран (подтверждение триала), он может получить чуть другой оттенок тёмного фона или иную форму кнопок.

Экспортируйте из Stitch файл DESIGN.md — мы используем его прямо сейчас на третьем этапе в v0!

Лабораторный этап 3: v0 — сборка на дизайн-токенах и деплой на Vercel

В v0 (v0.app) мы проверяем, как быстро можно получить настоящий работающий веб-сайт с математикой калькулятора и задеплоить его по публичной ссылке.

1. Запустите таймер и откройте v0.app.
2. Передайте в первом промпте блок токенов (или DESIGN.md из Stitch) вместе со структурным брифом: явно укажите «Не используй дефолтные серые оттенки shadcn/ui, строго применяй переданные HEX-токены #090D16, #111827 и акцент #6366F1».
3. Проверьте превью и код: посмотрите, как отработал ползунок расчёта цены и адаптивная вёрстка на ширине мобильного телефона.

Где v0 ошибается на первом промпте и как исправить это вторым шагом

Даже при хорошем брифе на первой генерации всей страницы целиком v0 часто допускает две типичные ошибки:

1. Частичный откат к дефолтному shadcn/ui в глубине страницы: если Hero-секция покрасилась в ваши токены #090D16 и #6366F1, то к четвёртому блоку (калькулятор и модальное окно) модель «устаёт» и вставляет стандартные классы bg-slate-900, стандартный синий ползунок и типовые карточки без вашей обводки #1F2937.
2. Бутафорский интерактив: ползунок двигается, но цифры внутри карточек тарифов остаются статичным текстом, а форма email в Hero перезагружает страницу при отправке.

Нажмите Deploy в правом верхнем углу v0, откройте полученную ссылку на телефоне и остановите таймер.

Сравнительная таблица вашей лабораторной работы

Заполните матрицу по горячим следам от 1 до 5 баллов — она покажет, какой инструмент лучше закрывает именно ваши текущие задачи:

Эталонный гибридный конвейер 2026 года

На реальных коммерческих проектах сильнейшие продуктовые дизайнеры не выбирают один инструмент против остальных — они соединяют их в единую цепочку за 45 минут:

Шаг 1: Google Stitch (10 мин)
└── Нащупать атмосферу через Vibe Design, откалибровать композицию голосом в Voice Canvas
    и выгрузить файл DESIGN.md + стартовые слои в Figma

Шаг 2: Figma Design + Figma Make (20 мин)
└── Проверить токены через Check Designs, подключить библиотеку команды (Make Kit),
    отладить переходы состояний и крайние случаи (пустой список, возврат «Назад») в Make

Шаг 3: Figma MCP Server → v0 или IDE (15 мин)
└── Передать утверждённый фрейм, переменные (get_variable_defs) и DESIGN.md в v0 / Claude Code
    и задеплоить живой React-прототип по публичной ссылке

Рабочее место дизайнера (Nano Banana 2 через arckep.ru)

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