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

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

Статья описывает конкретный 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-структуру данных для каждого экрана. Пример для дашборда:

{
  "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 14 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, бесплатный тариф с неограниченными запросами.

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.

Ошибка 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.

FAQ

Какой процент кода из Bolt реально переносится в production Next.js-проект?

UI-слой — компоненты, лэйауты, Tailwind-стили — переносится напрямую с минимальной доработкой. Что придётся добавить: авторизацию (Bolt использует заглушки без auth), подключение к базе данных (моковые данные нужно заменить реальными API-вызовами), обработку ошибок и тест-покрытие. Рассчитывайте, что около 20–40% кода прототипа перейдёт как есть; остальное служит детальной спецификацией для production-реализации, а не production-кодом напрямую.

Работает ли этот pipeline с mobile-first дизайнами из Figma, а не только с десктопными макетами?

Да, с одной поправкой: включайте явные инструкции по мобильным брейкпоинтам в промпт для v0 (Tailwind sm/md/lg) и добавляйте mobile-first в блок требований. v0 генерирует адаптивные компоненты по умолчанию, когда это указано, а Bolt сохраняет эту адаптивность. Слабое место — тач-специфичные взаимодействия (свайп-жесты, long-press): их нужно реализовывать вручную или использовать специализированный инструмент вроде FlutterFlow для нативных мобильных прототипов.

Что происходит со ссылкой на прототип при достижении лимитов бесплатного тарифа Netlify или Vercel?

Бесплатный тариф Netlify включает 100 ГБ трафика и 300 минут сборки в месяц — этого более чем достаточно для тестирования с 50–200 пользователями. При достижении лимитов самое простое решение — экспортировать проект из Bolt и задеплоить на Cloudflare Pages с неограниченными запросами на бесплатном тарифе. Для долгоживущих прототипов подключите проект Bolt к GitHub-репозиторию и используйте Vercel — каждый пуш автоматически деплоится, а URL остаётся стабильным.