На прошлой неделе мне нужно было показать заказчику три варианта лендинга к утру. Раньше это означало вечер в Figma, копипаст одних и тех же блоков и нервный поиск подходящих иконок. В этот раз до реального макета я добрался за час: черновики структуры и текстов накидал ИИ, а руками допилил то, что он делает плохо. Про то, что реально ускоряется, а что до сих пор приходится делать самому, — ниже.
Что вообще значит «ИИ генерирует прототип»
Сразу договоримся о терминах, чтобы не путаться. Прототип — это черновой скелет страницы: какие блоки идут в каком порядке (заголовок, преимущества, форма, футер) и что примерно в них написано. Это не финальный дизайн, а способ быстро проверить структуру и логику, пока вы не потратили неделю на отрисовку.
ИИ в этом процессе умеет три вещи:
- сгенерировать структуру и тексты страницы по вашему описанию;
- собрать визуальный черновик — от картинок-заглушек до почти готового HTML/CSS;
- быстро переделать существующий прототип под новое ТЗ («убери третий блок, добавь подписку»).
Ключевое слово здесь — «черновик». Нейросеть отлично заполняет пустой лист, но не заменяет вам понимание, зачем вашей аудитории этот сайт.
С чего начать: текстовый скелет страницы
Самый недооценённый этап. Пока нет структуры, любая генерация картинок бесполезна. Я начинаю с обычного текстового чата — ChatGPT, Claude или YandexGPT, кому что доступно.
Пример промпта, который даёт нормальный результат:
«Ты — UX-редактор. Опиши структуру лендинга для студии ремонта квартир в Екатеринбурге. Аудитория: владельцы квартир 35–50 лет, средний чек 500 тысяч. Цель страницы: заявка на замер. Дай список блоков сверху вниз с пояснением, что в каждом.»
На выходе получаете не готовую истину, а каркас, который за пять минут правится под вашу задачу. Из трёх-четырёх таких прогонов обычно складывается структура, до которой человек доходил за полдня обсуждений.
Тексты в блоках тоже удобно генерировать здесь же — но обязательно переписывать под себя. Модель не знает вашей компании, поэтому легко сочиняет то, чего у вас нет: «10 лет на рынке», «более 500 проектов», хотя реальных цифр вы не давали. Это не баг ИИ, это его природа — и это тот случай, когда за выдумки потом отвечаете вы, а не нейросеть.
Визуальный черновик: от картинок до почти готового кода
Когда структура есть, можно переходить к картинке. Тут работает несколько подходов.
Генераторы макетов и интерфейсов
Инструменты вроде v0, Figma AI или генераторы лендингов по текстовому описанию собирают страницу целиком. Вы даёте им описание и получаете макет или даже готовый код. На момент публикации большинство таких сервисов ориентированы на зарубежный рынок, часть требует оплату картой в валюте — про нюансы доступа из РФ я подробнее писал в отдельной статье.
Что они делают хорошо: быстро показывают, как может выглядеть сетка, где расположить кнопку, как скомпоновать блоки. Что делают плохо — предсказуемо рисуют «средний сайт из интернета»: одинаковые заголовки, штампованные иконки, ноль связи с вашим брендом.
Генерация картинок-заглушек
Для прототипа часто не нужны настоящие фото — достаточно показать заказчику, что в этом блоке будет изображение. Тут пригодится Kandinsky, Midjourney или любой другой генератор изображений. Обязательно проверяйте условия лицензии: у разных сервисов права на коммерческое использование сгенерированного изображения отличаются, и «сгенерил в бесплатной версии» не всегда значит «можно ставить на сайт клиента».
Готовый HTML/CSS
Мой любимый приём: попросить чат-модель сгенерировать сразу разметку прототипа. Например: «Сверстай одностраничник для кофейни. Блоки: шапка с логотипом и кнопкой, hero с фоновым блоком, три преимущества, галерея из трёх фото, форма брони, футер. Используй простой HTML и CSS в одном файле, без фреймворков.»
Полученный файл я открываю в браузере, кликаю по нему, показываю заказчику — и сразу вижу, где структура ломается. Правки после этого уже вношу руками, но стартовать с готового болванчика в разы быстрее, чем с пустого окна редактора.
Где ИИ спотыкается
Честно про границы, потому что без них любой разбор превращается в рекламу сервисов.
- Логика под вашу аудиторию. Модель не знает, что у владельцев квартир 35–50 лет болит доверие, а не цена. Аргументы и порядок блоков всё равно продумываете вы.
- Консистентность с брендом. Цвета, шрифты, тон — ИИ воспроизводит «никак», а не «как у вас». Фирменный стиль придётся прикручивать самому.
- Детали. Кривые отступы, нечитаемый контраст, кнопка не туда. Прототип от ИИ почти всегда нужно чистить.
- Актуальность. Цены, лимиты и возможности сервисов меняются быстро. То, что модель «знала» год назад, сегодня может быть устаревшим — проверяйте на сайте сервиса.
Проще говоря, ИИ отлично убирает работу копирования и стартовый ступор, но не убирает работу головой.
Как встроить это в рабочий процесс
Мой порядок сейчас выглядит так:
- Описание задачи и аудитории — в чат-модель, беру структуру блоков.
- Тексты-черновики туда же, потом переписываю под клиента своими словами.
- Генерация HTML-болванки или макета в визуальном генераторе.
- Правки руками: бренд, отступы, реальные фото, логика форм.
- Показ заказчику — уже на живом, кликабельном прототипе, а не на картинке.
На каждом шаге ИИ делает первый черновик, а я — второй. Это и есть реальный баланс, а не «нейросеть сделала сайт за меня».
Заключение
ИИ для прототипов — это не замена дизайнеру и верстальщику, а ускоритель первых 30% работы: придумать структуру, накидать тексты, собрать черновой макет. Эти 30% обычно самые мучительные, когда сидишь перед пустым холстом. Остальные 70% — понимание аудитории, бренд, аккуратность и ответственность за результат — остаются на вас, и в ближайшее время никуда не денутся. Начните с малого: возьмите один реальный проект и прогоните его через описанный выше порядок. Это лучший способ понять, где ИИ вам реально помогает, а где вы просто тратите время.
