Модуль d.7 · Урок 5
Урок 5: Практика — прототип тремя способами
Чему вы научитесь
- Применять три инструмента прототипирования к одной задаче
- Оценивать результат по объективным критериям
- Формулировать свою стратегию выбора инструментов
Бриф: лендинг для SaaS-продукта
Для честного сравнения нужен один бриф. Используйте его дословно во всех трёх инструментах — так вы увидите, как каждый интерпретирует одно и то же описание.
Продукт: TaskFlow — AI-менеджер задач для команд
Аудитория: руководители команд от 5 до 50 человек
Стиль: современный, чистый, доверительный (референс: Linear, Notion)
Структура лендинга:
1. Hero: заголовок, подзаголовок, CTA "Попробовать бесплатно",
скриншот продукта
2. Фичи: 3 карточки (AI-приоритизация, Sprint-планирование,
Интеграции)
3. Как это работает: 3 шага с иконками
4. Тарифы: Free / Pro $12 / Team $29
5. Отзывы: 3 цитаты клиентов
6. CTA-секция: повторный призыв к действию
7. Футер: ссылки, соцсетиДля практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.
Способ 1: Figma Make
Засеките таймер.
- Откройте Figma и запустите Make
- Вставьте бриф целиком в чат
- Дождитесь генерации и оцените первый результат
- Сделайте 2-3 итерации:
- «Hero-секция выше, добавь градиентный фон от индиго к белому»
- «Карточки тарифов одинаковой высоты, Pro выделен рамкой»
- «Добавь hover-состояние для кнопок»
- Используйте Copy Design — перенесите результат на canvas
- Остановите таймер. Запишите время и количество потраченных кредитов.
Способ 2: Google Stitch
Засеките таймер.
- Откройте stitch.withgoogle.com (через VPN)
- New Project > Desktop
- Вставьте бриф и добавьте: «Ощущение: технологичный, но дружелюбный. Как Linear, но теплее»
- Выберите лучший из 3-4 предложенных вариантов
- Доработайте через Voice Canvas или текст:
- «Секция тарифов: выдели Pro визуально, добавь бейдж Популярный»
- «Сделай анимацию появления карточек фич»
- Экспортируйте код (Tailwind)
- Остановите таймер. Запишите время.
Способ 3: v0
Засеките таймер.
- Откройте v0.dev
- Вставьте бриф и добавьте: «React + Tailwind + shadcn/ui, тёмная тема с фиолетовыми акцентами»
- Выберите лучший вариант из предложенных
- Итерируйте:
- «Добавь переключатель месячная/годовая оплата в секции тарифов»
- «Hero-секция с анимированным gradient mesh фоном»
- Нажмите Deploy и получите рабочий URL
- Остановите таймер. Запишите время и URL.
Оценка результатов
Оцените каждый результат по шкале от 1 до 5:
| Критерий | Figma Make | Google Stitch | v0 |
|---|---|---|---|
| Скорость (от промпта до результата) | _ / 5 | _ / 5 | _ / 5 |
| Визуальное качество (типографика, пропорции, общий вид) | _ / 5 | _ / 5 | _ / 5 |
| Кастомизация (насколько легко доработать) | _ / 5 | _ / 5 | _ / 5 |
| Готовность кода (можно ли использовать дальше) | _ / 5 | _ / 5 | _ / 5 |
| Итерации (понимает ли правки с первого раза) | _ / 5 | _ / 5 | _ / 5 |
| Итого | _ / 25 | _ / 25 | _ / 25 |
Что обычно получается
На основе десятков прохождений этого упражнения:
Figma Make выигрывает по кастомизации. Результат остаётся в Figma — вы можете доработать каждый пиксель стандартными инструментами. Copy Design переносит всё на canvas. Минус — нет рабочего кода, только прототип.
Google Stitch выигрывает по скорости и стоимости (бесплатен). Vibe Design часто угадывает «настроение» точнее, чем конкуренты. Минус — VPN, слабая история версий, нет кастомных дизайн-систем.
v0 выигрывает по готовности кода. Результат — рабочий React-сайт на Vercel. Deploy за секунды. Минус — дизайн может быть generic (shadcn/ui), кредиты тратятся быстро.
Стратегия выбора: 3 вопроса
Ответьте на три вопроса — выбор инструмента станет очевидным:
1. Что вы делаете?
├── Макет для обсуждения с командой → Figma Make
├── Быстрый прототип с кодом → Google Stitch
└── Рабочий сайт с деплоем → v0
2. Есть ли дизайн-система?
├── Да, в Figma → Figma Make (подключает библиотеки)
├── Да, токены/JSON → Magic Patterns
└── Нет → v0 (shadcn/ui по умолчанию)
3. Бюджет?
├── Бесплатно → Google Stitch
├── До $20/мес → v0 Premium
└── Уже плачу за Figma → Figma Make (кредиты из пула)
Рабочее место дизайнера (Nano Banana 2 через arckep.ru)
Резюме урока
Вы создали один прототип тремя способами и увидели разницу на практике. Нет «лучшего» инструмента — есть подходящий для конкретной задачи. Figma Make для дизайнерского контроля, Google Stitch для бесплатного прототипирования, v0 для рабочего деплоя.
Сохраните заполненную таблицу оценки — она пригодится при выборе инструмента на реальных проектах. В следующем модуле (D.8) мы пойдём дальше: от прототипов к готовым сайтам с помощью Framer AI, Webflow, Bolt и Lovable.