Клиент присылает бриф во вторник и просит «показать хоть что-то» к пятнице. Раньше это означало вечер в Figma с серыми прямоугольниками и подписями «здесь будет баннер». Сейчас первый черновик структуры и даже кликабельный макет реально собрать за пару часов — но не потому, что нейросеть стала дизайнером, а потому что она забрала себе черновую работу. Ниже — рабочий процесс, который я прогоняю на своих проектах: от брифа до прототипа, который не стыдно показать заказчику.
Что считать прототипом: три уровня, и где тут ИИ
Словом «прототип» в вебе называют три разные вещи, и от этого зависит, поможет ли вам нейросеть вообще.
- Wireframe (каркас) — схема страницы без цветов и картинок: где шапка, где блок преимуществ, где форма заявки. Задача — согласовать структуру, а не красоту.
- Кликабельный прототип — те же экраны, но связанные переходами. Позволяет пройти путь «зашёл на главную → выбрал услугу → оставил заявку».
- Hi-fi макет или прототип в коде — почти готовый дизайн или сразу живая HTML-страница. Здесь решаются шрифты, сетка, состояния кнопок и форм.
Нейросети сегодня уверенно работают на первых двух уровнях и с переменным успехом — на третьем. И это нормально: чем ближе к финальному дизайну и рабочему коду, тем больше контекста нужно инструменту и тем чаще он начинает фантазировать.
Инструменты: честный обзор по категориям
Дальше я делю инструменты не по брендам, а по задачам — так проще выбирать, если бюджет на подписки ограничен.
1. Генерация интерфейса из текстового описания
v0 от Vercel, Lovable и Bolt.new превращают абзац описания в готовую страницу на React или чистом HTML с Tailwind. Пишете «нужен лендинг стоматологии: герой-блок с записью, три преимущества, отзывы, карта» — через минуту получаете код.
Плюс: это уже не картинка, а реальная вёрстка, которую можно открыть в браузере и пролистать вместе с клиентом. Минус: решения типовые, блоки похожи друг на друга, а нестандартную логику приходится дописывать руками. У Uizard идея похожая, но с уклоном в быстрые каркасы и распознавание нарисованных от руки скетчей.
2. AI внутри Figma
У Figma есть собственный набор AI-функций: First Draft помогает собрать структуру экрана и черновой текст, Make Design подкидывает варианты визуала. Важно: состав функций и их доступность по тарифам меняются буквально каждые несколько месяцев, поэтому перед покупкой подписки загляните в справку Figma — там актуальная матрица возможностей.
Отдельная категория — плагины и сервисы вроде Relume, которые генерируют библиотеку каркасных блоков и умеют переносить её в Figma или Webflow. Для типовых маркетинговых сайтов это экономит часы однообразной работы.
3. LLM как редактор структуры и текстов
ChatGPT, Claude, а из доступного в России без лишних сложностей — YandexGPT и GigaChat. Именно они дают самый недооценённый результат: не картинку, а логику страницы. Задайте модели роль аналитика, скормите бриф и получите список блоков в правильном порядке плюс черновые тексты.
UX-текст — это надписи и микрокопирайт внутри интерфейса: заголовки, подписи кнопок, сообщения об ошибках. Нейросеть пишет их быстро, но формулировки почти всегда надо править под тон бренда.
4. Картинки для наполнения макета
Midjourney, Recraft, Kandinsky от Сбера, Шедеврум от Яндекса. Для прототипа важна не художественность, а правдоподобие: чтобы клиент увидел фотографию, а не серый прямоугольник. И помните про лицензии: условия коммерческого использования у сервисов разные, у части права зависят от тарифа, поэтому перед публикацией проверяйте конкретный пункт в правилах, а не верите на слово.
Пошаговый разбор: от брифа до прототипа
Вот последовательность, которой я пользуюсь. Шаги идут именно в таком порядке, потому что каждый следующий опирается на результат предыдущего.
- Собираем контекст, а не промпт. Достаньте из брифа три вещи: кто целевая аудитория, какое одно действие должен совершить посетитель и что ему мешает это сделать. Без этих ответов нейросеть выдаст красивый, но пустой лендинг.
- Просим у LLM структуру страницы. Формулировка, которая работает: «Ты UX-аналитик. Вот бриф: … Предложи структуру главной страницы из шести блоков. Для каждого — цель, заголовок и что на нём должно быть. Обоснуй порядок». Полученный список правьте руками: модель не знает ваших ограничений по контенту и срокам.
- Пишем черновые UX-тексты. Тем же чатом, но отдельным сообщением. Сразу задавайте тон: «без канцелярита, обращение на вы, максимум восемь слов в заголовке». Так правок потом будет меньше.
- Генерируем каркас. Структуру и тексты отдаём в v0, Uizard или Figma AI. Не пытайтесь получить финальный дизайн с первого раза — цель шага только сетка и иерархия блоков.
- Доводим до кликабельного вида. Собираем экраны в Figma, связываем переходы, добавляем состояния: наведение, заполненная форма, ошибка валидации. Это та часть, где нейросеть пока экономит меньше всего времени.
- Тестируем на трёх живых людях. Дайте знакомому пройти сценарий и молча смотрите, где он застрял. Прототип существует ради этого шага, а не ради красивой презентации на созвоне.
- Передаём в разработку. Здесь помогают Cursor и Claude Code: они быстро превращают утверждённый макет в черновую вёрстку, которую дальше правит уже человек, а не генератор.
Где ИИ стабильно ошибается
Чтобы не сложилось ощущения магии — вот слабые места, на которые я наступал сам.
- Типовая логика. Модели тянут шаблон: три преимущества, блок тарифов, отзывы. Если у бизнеса нестандартная услуга или сложный путь клиента, схема разваливается.
- Данные и цифры. Факты, телефоны, цены, юридические формулировки — только вручную. Модель может уверенно выдумать реквизиты компании быстрее, чем вы заметите.
- Доступность. Контрастность текста, подписи к полям формы, порядок обхода с клавиатуры — AI об этом вспоминает редко, а заказчику это может стоить денег и репутации.
- Реальные ограничения проекта. Про CMS, сроки и бюджет инструмент просто не знает, пока вы ему не скажете прямым текстом.
Ещё нюанс: промпт — это текстовый запрос к модели. Чем конкретнее ограничения (длина, тон, число блоков, чего делать нельзя), тем предсказуемее результат. Размытое «сделай красиво» даёт размытый ответ.
Сколько это стоит и что с доступом из России
Цифры тут плавают, поэтому привожу порядок величин на момент публикации. Зарубежные сервисы (v0, Lovable, Midjourney, Figma) в основном живут на подписках примерно в 10–30 долларов в месяц за пользователя, у большинства есть бесплатный лимит на пробу, которого хватает на один-два эксперимента.
Оплата из РФ — отдельная головная боль: российские карты там в основном не принимают. Варианты — зарубежная карта, оплата через посредника (с рисками для аккаунта) или осознанный выбор в пользу отечественных сервисов: GigaChat, YandexGPT и Kandinsky работают с российскими картами и без VPN, но по генерации интерфейсов пока отстают от зарубежных аналогов.
Это не повод отказываться от иностранных инструментов, но и не повод строить на них весь процесс. Если сервис в любой момент может стать недоступен в России, держите критичные файлы локально, а не только в облаке генератора.
Короткий чек-лист перед показом прототипа
- Структура отвечает на вопрос «что делать посетителю», а не «что у нас есть».
- UX-тексты прочитаны человеком, а не только моделью.
- Есть состояния для формы и кнопок, а не только «идеальный экран».
- В макете нет выдуманных цифр, логотипов чужих компаний и картинок с непроверенной лицензией.
- Вы можете за минуту объяснить, почему блоки стоят именно в этом порядке.
Заключение
AI в прототипировании — это не «дизайнер за двадцать долларов в месяц», а очень быстрый ассистент, который снимает с вас черновики: структуру, тексты, однотипные каркасы. Решения о том, что показать пользователю и в каком порядке, по-прежнему принимает человек — и именно этот час работы и оплачивает клиент.
Практический минимум, с которого стоит начать: один LLM-чат для структуры и текстов, бесплатный лимит v0 или Uizard для каркаса и Figma для доводки. Этого достаточно, чтобы прототип к пятнице перестал быть подвигом, а стал просто рабочей рутиной.
