# От Figma до рабочего прототипа за 1 час: AI-powered rapid prototyping

> Пошаговый pipeline от экспорта макетов Figma до работающего прототипа с помощью v0, Bolt и Claude Artifacts. Конкретные шаги, промпты, типичные ошибки.
> Author: Roman Belov · Published: 2026-04-26 · Source: https://futurecraft.pro/ru/blog/figma-to-prototype/

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

Статья описывает конкретный pipeline: макет в Figma превращается в работающий прототип через AI-генераторы кода. Без написания кода вручную. Три инструмента, пять шагов, один час.

## Что нужно до старта: минимальный набор

- **Figma-макет.** Хотя бы 2–3 экрана ключевого флоу. Pixel-perfect дизайн не нужен. Достаточно wireframe с правильной структурой и основными элементами.
- **Аккаунты.** v0.dev (Vercel), bolt.new, claude.ai. Бесплатных тарифов хватит для первого прототипа.
- **Понимание флоу.** Какие экраны связаны, что происходит при нажатии на кнопку, откуда берутся данные. Это важнее красоты макетов.

Что НЕ нужно:

- Опыт разработки
- Настроенное окружение (Node.js, npm, IDE)
- Дизайн-система в Figma

## Pipeline: от макета к прототипу за 5 шагов

```
Figma макет
    │
    │  Шаг 1: Экспорт + описание
    ▼
Структурированный бриф
    │
    │  Шаг 2: AI генерация UI (v0)
    ▼
Компоненты React/Next.js
    │
    │  Шаг 3: Сборка приложения (Bolt)
    ▼
Рабочее приложение с роутингом
    │
    │  Шаг 4: Логика и данные (Claude Artifacts)
    ▼
Прототип с интерактивностью
    │
    │  Шаг 5: Деплой
    ▼
URL для тестирования
```

Каждый шаг занимает 10–15 минут. Общее время зависит от сложности макета и количества итераций с AI.

## Шаг 1: Экспорт из Figma и подготовка брифа

AI-генераторы кода работают с текстом и изображениями. Задача первого шага: превратить визуальный макет в структурированное описание, которое AI поймёт однозначно.

### Экспорт скриншотов

Выделить каждый фрейм (экран) в Figma. Экспорт: PNG, 2x разрешение. Формат именования файлов: `01-landing.png`, `02-dashboard.png`, `03-settings.png`. Порядок номеров отражает пользовательский флоу.

### Написание брифа

Бриф состоит из трёх блоков для каждого экрана:

**Блок 1: Структура.** Перечислить все элементы экрана сверху вниз. Навигация, заголовки, карточки, кнопки, формы, футер. Указать иерархию: что внутри чего.

**Блок 2: Поведение.** Что происходит при взаимодействии. Кнопка «Создать проект» открывает модальное окно. Клик по карточке ведёт на страницу деталей. Форма отправляет данные и показывает уведомление.

**Блок 3: Данные.** Какие данные отображаются. Список проектов содержит название, дату, статус, аватар автора. Дашборд показывает 4 метрики: revenue, users, conversion, churn.

Пример брифа для лендинга:

```
Экран: 01-landing.png

Структура:
- Header: логотип слева, навигация (Features, Pricing, Blog), кнопка "Get Started" справа
- Hero: заголовок H1, подзаголовок, две кнопки (primary "Start Free", secondary "Watch Demo")
- Features: сетка 3 колонки, каждая карточка = иконка + заголовок + описание
- Social proof: логотипы 5 компаний в ряд
- CTA: полноширинный блок с заголовком и кнопкой
- Footer: 4 колонки ссылок, копирайт

Поведение:
- "Get Started" и "Start Free" ведут на /signup
- "Watch Demo" открывает модальное окно с видео
- Header фиксируется при скролле

Данные:
- Заголовок и текст — placeholder, заменить на реальные при наличии
- Логотипы компаний — placeholder изображения
```

### Почему бриф важнее скриншота

Скриншот даёт AI визуальный контекст. Бриф даёт семантику. AI видит прямоугольник с текстом и кнопкой. Без брифа он не знает, что это карточка проекта, которая ведёт на `/projects/:id`, а данные приходят из API. С брифом генерация точнее по количеству итераций до рабочего результата.

### Подготовка mock-данных

Подготовить JSON-структуру данных для каждого экрана. Пример для дашборда:

```json
{
  "metrics": [
    { "label": "Revenue", "value": "$12,450", "change": "+12.5%" },
    { "label": "Users", "value": "1,234", "change": "+8.1%" },
    { "label": "Conversion", "value": "3.2%", "change": "-0.4%" },
    { "label": "Churn", "value": "1.8%", "change": "+0.2%" }
  ],
  "recentTransactions": [
    { "customer": "Acme Corp", "amount": "$2,400", "status": "completed" },
    { "customer": "Globex Inc", "amount": "$1,800", "status": "pending" }
  ]
}
```

Передавать mock-данные вместе с промптом. AI использует реалистичные значения вместо «Lorem ipsum» и «Item 1, Item 2». Прототип выглядит убедительнее для тестировщиков и стейкхолдеров.

## Шаг 2: Генерация UI-компонентов в v0

v0 от Vercel генерирует React-компоненты на базе shadcn/ui и Tailwind CSS. Результат: production-ready код, который можно сразу использовать в Next.js приложении.

### Как подавать запрос

Загрузить скриншот экрана и добавить текстовый промпт. Формат промпта, который стабильно даёт хороший результат:

```
Recreate this UI as a React component.

Stack: React, TypeScript, Tailwind CSS, shadcn/ui.

Structure:
[вставить блок "Структура" из брифа]

Requirements:
- Responsive: mobile-first, breakpoints sm/md/lg
- Use shadcn/ui components where possible (Button, Card, Input, Dialog)
- Mock data inline, no API calls
- Dark mode support via Tailwind dark: prefix
```

### Итерации

Первая генерация редко бывает идеальной. Типичные проблемы и как их решать:

| Проблема | Промпт для исправления |
|----------|----------------------|
| Неправильные пропорции | "Make the hero section taller, reduce padding on feature cards" |
| Отсутствует компонент | "Add a testimonials section between Features and CTA" |
| Неправильная сетка | "Change features from 2 columns to 3 columns on desktop" |
| Плохая типографика | "Use text-4xl font-bold for H1, text-lg text-muted-foreground for subtitle" |

Обычно хватает 2–3 итерации на экран. v0 сохраняет контекст предыдущих генераций в рамках одного чата.

### Экспорт кода

После финализации компонента нажать «Code» и скопировать. v0 генерирует один файл с компонентом. Сохранить локально или сразу перенести в Bolt на следующем шаге.

Повторить для каждого экрана. Три экрана — три компонента. На данном этапе они не связаны между собой. Связывание происходит на шаге 3.

## Шаг 3: Сборка приложения в Bolt

Bolt.new от StackBlitz разворачивает полноценное приложение в браузере. В отличие от v0, который генерирует отдельные компоненты, Bolt создаёт проект целиком: роутинг, файловая структура, package.json, конфигурация.

### Стартовый промпт

```
Create a Next.js 16 app with App Router and the following pages:

1. Landing page (/)
2. Dashboard (/dashboard)
3. Settings (/settings)

Use Tailwind CSS and shadcn/ui.
Add a shared layout with sidebar navigation (Dashboard, Settings)
and top header with user avatar dropdown.

Here are the components for each page:
[вставить код компонентов из v0]

Connect pages with Next.js Link components.
Add loading states for page transitions.
```

### Что Bolt делает автоматически

- Создаёт файловую структуру Next.js проекта
- Настраивает Tailwind, shadcn/ui, TypeScript
- Распределяет компоненты по файлам
- Добавляет роутинг между страницами
- Запускает dev-сервер прямо в браузере

Результат: через 2–3 минуты в preview-окне работает приложение с навигацией между страницами.

### Типичные доработки

Bolt иногда неправильно импортирует shadcn-компоненты или путает App Router с Pages Router. Промпты для исправления:

```
Fix: use "use client" directive for components with useState/useEffect
```

```
Fix: import { Button } from "@/components/ui/button" —
use the correct shadcn/ui import paths
```

```
Add a mobile-responsive sidebar:
hamburger menu on mobile, fixed sidebar on desktop
```

На этом этапе приложение работает, страницы связаны, навигация кликабельна. Данные статичны (захардкожены в компонентах).

## Шаг 4: Добавление логики через Claude Artifacts

Claude Artifacts генерирует интерактивные React-компоненты, которые работают автономно. Лучший инструмент для прототипирования логики: формы, фильтры, сортировки, модальные окна, анимации состояний.

### Когда использовать Artifacts вместо Bolt

| Задача | Инструмент |
|--------|-----------|
| Полное приложение с роутингом | Bolt |
| Отдельный интерактивный компонент | Claude Artifacts |
| Форма с валидацией и состояниями | Claude Artifacts |
| Дашборд с графиками | Claude Artifacts |
| Прототип одного сложного экрана | Claude Artifacts |

### Промпт для генерации интерактивного компонента

```
Создай React-компонент дашборда со следующей функциональностью:

1. Четыре карточки метрик вверху: Revenue ($12,450), Users (1,234),
   Conversion (3.2%), Churn (1.8%).
   Каждая с иконкой и процентом изменения (зелёный/красный).

2. График (Recharts): линейный, данные за 7 дней,
   переключатель Revenue/Users.

3. Таблица последних транзакций: 10 строк,
   колонки: Customer, Amount, Status (badge), Date.
   Сортировка по клику на заголовок колонки.
   Фильтр по статусу (All, Completed, Pending, Failed).

4. Все данные — mock, сгенерировать реалистичные.

Стек: React, TypeScript, Tailwind CSS, Recharts.
Стиль: тёмная тема, скруглённые карточки, subtle shadows.
```

Claude сгенерирует полностью работающий компонент с состояниями, обработчиками событий, фильтрацией и сортировкой. Artifact можно сразу просмотреть в интерфейсе Claude.

### Интеграция в Bolt-проект

Скопировать код компонента из Artifacts. Вставить в Bolt через промпт:

```
Replace the Dashboard page content with this component:
[вставить код]

Install recharts if not already installed.
```

Bolt установит зависимости и встроит компонент в существующий проект.

### Итеративная доработка в Claude

Контекст диалога в Claude Artifacts сохраняется. Можно дорабатывать компонент пошагово:

```
Добавь к дашборду:
- Date range picker над графиком (последние 7/30/90 дней)
- Экспорт таблицы в CSV по кнопке
- Skeleton loading при переключении фильтров
```

Каждая итерация генерирует обновлённую версию компонента. Проверить в preview, скопировать финальный вариант.

## Шаг 5: Деплой и публикация

Прототип собран. Нужна ссылка, которую можно отправить пользователям, инвесторам или команде.

### Вариант 1: Деплой из Bolt (самый быстрый)

Bolt интегрирован с Netlify. Нажать «Deploy» в интерфейсе. Bolt автоматически:

1. Собирает production-билд
2. Деплоит на Netlify
3. Выдаёт URL вида `project-name.netlify.app`

Время: 1–2 минуты. Бесплатный тариф Netlify покрывает прототипы полностью.

### Вариант 2: Vercel (если используется Next.js)

Экспортировать проект из Bolt (кнопка «Download»). Загрузить в GitHub-репозиторий. Подключить к Vercel. Автоматический деплой при каждом пуше. Этот вариант лучше, если прототип будет развиваться дальше.

### Вариант 3: Cloudflare Pages

Для статичных прототипов без серверной логики. Быстрый CDN, бесплатный тариф с неограниченными запросами.

```bash
npx wrangler pages deploy dist/
```

## Сравнение инструментов: v0 vs Bolt vs Claude Artifacts

| Критерий | v0 | Bolt | Claude Artifacts |
|----------|-----|------|-----------------|
| Тип результата | Один компонент | Полное приложение | Интерактивный компонент |
| Стек | React + shadcn/ui | Next.js / Vite / Astro | React (standalone) |
| Роутинг | Нет | Да | Нет |
| Интерактивность | Базовая | Полная | Полная |
| Деплой | Нет | Netlify встроен | Нет (нужен экспорт) |
| Итерации | В рамках чата | В рамках проекта | В рамках диалога |
| Лучше всего для | UI-компоненты, дизайн | Связывание в приложение | Сложная логика, формы |

Инструменты не конкурируют — они закрывают разные этапы pipeline. v0 генерирует визуал. Bolt собирает проект. Claude Artifacts добавляет интерактивность.

## Частые ошибки и как их избежать

### Ошибка 1: Генерация всего приложения одним промптом

AI-генераторы лучше работают с декомпозированными задачами. Промпт «создай полный SaaS-дашборд с авторизацией, биллингом и аналитикой» даст посредственный результат. Нужно разбить на экраны, генерировать каждый экран отдельно, собрать в Bolt.

### Ошибка 2: Пропуск брифа

Загрузить скриншот и написать «recreate this» срабатывает нестабильно. AI неправильно интерпретирует назначение элементов, путает декоративные элементы с функциональными, игнорирует связи между экранами. Бриф решает эту проблему.

### Ошибка 3: Бесконечные итерации

Правило: максимум 5 итераций на один компонент. Если после пятой попытки результат не устраивает, проблема в промпте, а не в AI. Переписать промпт с нуля, добавить больше контекста. Подробнее о структурировании контекста для AI в [гайде по context engineering](/ru/blog/context-engineering-guide/).

### Ошибка 4: Попытка сделать production-ready продукт

Цель прототипа: проверить гипотезу, собрать обратную связь, показать видение. В прототипе допустимы моковые данные, отсутствие авторизации, упрощённая валидация. Полировка до production-качества на этапе прототипирования тратит время, нужное на валидацию идеи.

## Когда AI-прототипирование не подходит

**Сложная бизнес-логика.** Калькуляторы с десятками переменных, workflow-билдеры с ветвлениями, системы с ролевой моделью. AI-генераторы хорошо справляются с UI, но путаются в многоуровневой логике. Для таких случаев лучше закодировать логику вручную и использовать AI только для UI-слоя.

**Real-time функциональность.** WebSocket-соединения, коллаборативное редактирование, live-обновления. AI-генераторы не создают серверную инфраструктуру. Можно имитировать real-time через setInterval и mock-данные, но это обманывает тестировщиков.

**Нативные мобильные приложения.** v0 и Bolt генерируют веб-приложения. Для мобильных прототипов лучше подходят Figma-прототипы с анимациями или специализированные инструменты вроде FlutterFlow.

**Интеграции с внешними сервисами.** Оплата через Stripe, отправка email через SendGrid, OAuth-авторизация. Эти интеграции требуют серверной части и настройки ключей. В прототипе их заменяют заглушки: кнопка «Pay» показывает модальное окно «Payment successful», форма логина принимает любые данные.

## Чеклист: от Figma до прототипа за 1 час

```
□ Экспорт экранов из Figma (PNG, 2x)           — 5 мин
□ Написание брифа для каждого экрана            — 10 мин
□ Генерация компонентов в v0 (2-3 итерации)     — 15 мин
□ Сборка приложения в Bolt                       — 10 мин
□ Добавление интерактивности (Claude Artifacts)  — 15 мин
□ Деплой                                         — 5 мин
                                          Итого: ~60 мин
```

## Что дальше после прототипа

1. **Пользовательское тестирование.** Отправить ссылку 5–10 потенциальным пользователям. Собрать обратную связь через Hotjar, записи экранов или короткие интервью. Цель: понять, решает ли продукт проблему и понятен ли интерфейс.

2. **Итерация прототипа.** На основе фидбэка вернуться в pipeline. Изменить экран в Figma, перегенерировать компонент в v0, обновить в Bolt. Цикл итерации: 20–30 минут вместо начального часа, потому что структура проекта уже готова.

3. **Переход к разработке.** Если гипотеза подтвердилась, код из Bolt можно использовать как стартовую точку для production-приложения. Компоненты на shadcn/ui и Tailwind CSS совместимы со стандартным Next.js-проектом. Потребуется добавить авторизацию, базу данных, API, тесты.

Час на прототип вместо месяцев на разработку: сначала проверить идею, потом строить продукт.

---

*Нужна помощь с rapid prototyping? Я помогаю стартапам внедрять AI-решения и строить продукты — [belov.works](https://belov.works).*