От 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

Итерации

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

Обычно хватает 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

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

Создай 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

Инструменты не конкурируют — они закрывают разные этапы 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.