Урок 4: v0, Magic Patterns и UX Pilot

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

• Генерировать React-компоненты через v0 и деплоить в один клик
• Использовать Magic Patterns для работы с кастомными дизайн-системами
• Создавать вайрфреймы и hi-fi экраны через UX Pilot прямо в Figma
• Выбирать между визуальным и кодовым подходом к прототипированию

v0 от Vercel: от промпта к React-коду

v0 — генератор UI от Vercel, команды, стоящей за Next.js. Вы описываете интерфейс текстом, v0 создаёт рабочий React-код с Tailwind CSS и компонентами shadcn/ui. Результат можно задеплоить на Vercel в один клик.

С 2026 года v0 перешёл на токенную модель вместо фиксированных сообщений. Это значит, что простой запрос «карточка товара» обойдётся дешевле, чем «многостраничный дашборд с графиками».

v0 -- что под капотом
├── Фреймворк: React / Next.js
├── Стили: Tailwind CSS
├── Компоненты: shadcn/ui (Radix primitives)
├── Деплой: Vercel (one-click)
├── Биллинг: $5 бесплатных кредитов/мес, затем $20/мес
└── Из РФ: работает без VPN

Пошаговая генерация

1. Откройте v0.dev и войдите через GitHub или Google
2. Опишите компонент: «Dashboard с линейным графиком продаж за 12 месяцев, 3 KPI-карточки (доход, пользователи, конверсия), таблица последних заказов»
3. v0 сгенерирует вариант с живым превью и исходным кодом
4. Нажмите Refine и уточните: «Добавь тёмную тему и фильтр по дате в правом углу»
5. Когда результат готов, нажмите Deploy — сайт появится на your-project.vercel.app

Что можно генерировать: отдельные компоненты (карточка, форма, навбар), целые страницы (лендинг, дашборд), многостраничные приложения с роутингом.

Стоимость v0

Бесплатный план включает $5 в кредитах ежемесячно. Этого хватает на 5-10 простых генераций. Кредиты рассчитываются по токенам (вход + выход), поэтому сложные запросы стоят дороже.

Premium за $20/мес даёт больше кредитов, доступ к продвинутым моделям, Figma-импорт и приватные проекты. Team за $30/мес/чел добавляет общие проекты и командные шаблоны. Купленные кредиты не сгорают в течение года.

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

Magic Patterns: дизайн-система на автопилоте

Magic Patterns решает специфическую задачу: генерация UI с учётом вашей дизайн-системы. Загружаете токены (цвета, шрифты, отступы) — все сгенерированные компоненты автоматически им следуют.

Импорт дизайн-системы

1. Откройте magicpatterns.com и создайте аккаунт
2. Settings > Design System
3. Загрузите токены: JSON-файл, ссылку на Figma-библиотеку или задайте вручную
4. Все последующие генерации будут использовать вашу палитру, шрифты и spacing

Chrome-расширение: захват чужого дизайна

Magic Patterns предлагает расширение, которое извлекает дизайн-токены с любого сайта:

1. Установите расширение из Chrome Web Store
2. Откройте сайт, стиль которого нравится (например, stripe.com)
3. Нажмите расширение > Capture Design
4. Magic Patterns извлечёт цвета, шрифты, border-radius, тени
5. Используйте эти токены для генерации компонентов в чужом стиле

Это легальный способ быстро воспроизвести «ощущение» от сайта, не копируя его пиксель в пиксель.

Стоимость Magic Patterns

Бесплатный план: ограниченное количество генераций, 1 дизайн-система. Hobby за $19/мес: 100 кредитов, приватные генерации, без водяных знаков. Pro за $75/мес: 350 кредитов, несколько дизайн-систем, общие стили для команды.

UX Pilot: вайрфреймы прямо в Figma

UX Pilot — Figma-плагин для генерации интерфейсов без выхода из Figma. Описываете экран в плагине — результат появляется на canvas. Поддерживает и lo-fi вайрфреймы, и hi-fi экраны.

Установка и использование:

1. В Figma: Plugins > Search > UX Pilot
2. Установите и запустите плагин
3. Выберите режим: Wireframe (lo-fi) или Design (hi-fi)
4. Введите описание: «Экран настроек мобильного приложения: переключатели уведомлений, выбор языка, информация об аккаунте, кнопка выхода»
5. UX Pilot сгенерирует экран прямо на canvas
6. Доработайте стандартными инструментами Figma

Edit Section: после генерации можно выделить конкретную секцию экрана и попросить AI изменить только её, не трогая остальное. Это удобнее, чем перегенерировать весь экран.

UX Pilot также умеет генерировать цветовые палитры с проверкой WCAG-контрастности и градиенты. Отдельные плагины UX Pilot Color & Gradient доступны бесплатно.

Когда какой инструмент

Нужен рабочий React-код с деплоем?
└── v0 (shadcn/ui + Vercel, one-click deploy)

Нужна консистентность с дизайн-системой?
└── Magic Patterns (импорт токенов, Chrome-захват)

Нужен быстрый вайрфрейм, не выходя из Figma?
└── UX Pilot (плагин, результат на canvas)

Нужен интерактивный прототип в Figma?
└── Figma Make (урок 2)

Нужен бесплатный прототип с кодом?
└── Google Stitch (урок 3)

Все три инструмента из этого урока работают из России без VPN. Бесплатные планы позволяют попробовать каждый.

Практическое задание

Создайте один компонент тремя инструментами:

1. v0: откройте v0.dev и сгенерируйте «Pricing card с 3 тарифами: Free, Pro $12/мес, Team $29/мес. Каждый с 5 фичами и кнопкой. Pro выделен визуально. Тёмная тема»
2. Magic Patterns: сгенерируйте аналогичную карточку. Если есть время — захватите дизайн-токены с любого сайта через Chrome-расширение
3. UX Pilot: в Figma сгенерируйте вайрфрейм такой же карточки в режиме Wireframe

Сравните: скорость, качество визуала, удобство доработки. Какой инструмент лучше вписывается в ваш рабочий процесс?

Резюме урока

v0 — лучший выбор для рабочего React-кода с мгновенным деплоем. Magic Patterns — когда критична консистентность с дизайн-системой. UX Pilot — быстрые наброски в привычной среде Figma. Все три работают из РФ без VPN, все имеют бесплатные планы.