Как создать прототип сайта для клиента с помощью ИИ

Короткий ответ: соберите из брифа один рабочий документ, сначала согласуйте структуру, затем создайте одну показательную страницу. После трёх точечных правок станет понятно, подходит ли AI-конструктор для всего проекта.

Такой процесс уже используют клиенты Lork. Веб-студия из нашего интервью делает оплачиваемые прототипы на 10–15 страниц. Раньше их несколько дней собирали в Figma. Теперь команда превращает бриф или транскрипцию разговора в промпт, генерирует основу и показывает её заказчику.

Создать прототип в AI-конструкторе Lork

Какой прототип нужен клиенту

До начала работы договоритесь о назначении прототипа. Один заказчик хочет увидеть стиль и структуру. Другой ждёт почти готовый сайт. Оба употребят слово «прототип» с одинаково уверенным видом, и дальше у проекта появится лишняя неделя.

Зафиксируйте четыре вещи:

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

Для первого обсуждения часто достаточно главной страницы и одной внутренней. Они показывают визуальное направление, навигацию и типовые блоки. Остальные страницы стоит создавать после подтверждения основы.

Клиенту полезно заранее сказать, что часть функций в прототипе может быть условной. В рекомендациях Figma по тестированию прототипов советуют прямо обозначать такие ограничения, проверять доступ по ссылке и не перегружать тестовый файл лишними экранами и тяжёлыми изображениями.

Как превратить бриф в понятное задание

Сырые материалы редко готовы для генератора. В транскрипции много повторов, случайных идей и решений, от которых клиент отказался через две минуты. AI послушно вернёт всё сразу, если не провести небольшую редакторскую работу.

Соберите задание из пяти частей.

1. Контекст. Чем занимается компания, кто приходит на сайт и откуда берётся трафик.
2. Целевое действие. Заявка, запись, звонок, покупка, скачивание или запрос расчёта.
3. Структура. Список страниц и обязательных блоков в нужном порядке.
4. Материалы. Утверждённые тексты, логотип, фотографии, цвета и ссылки на референсы.
5. Ограничения. Что нельзя переписывать, переставлять, перекрашивать или придумывать.

Если клиент прислал сайт конкурента, добавьте пояснение к ссылке. Например: взять плотность первого экрана, принцип навигации и расположение формы. Копировать чужие тексты, логотип и фотографии не нужно.

Полезная формулировка ограничения выглядит так: «Сохрани названия услуг и цены дословно. Новые обещания от себя не добавляй. Изменения структуры сначала перечисли отдельно».

Как собрать и согласовать прототип

Рабочий процесс можно уложить в шесть шагов.

1. Покажите AI исходный документ и попросите вернуть структуру без дизайна.
2. Исправьте страницы и блоки до генерации интерфейса.
3. Соберите главную страницу и один типовой внутренний экран.
4. Проверьте тексты, брендовые элементы и мобильную версию.
5. Отправьте клиенту ссылку вместе с коротким сценарием просмотра.
6. После согласования расширяйте проект до полного объёма.

Сценарий просмотра экономит странное количество времени. Напишите клиенту, что именно нужно оценить сейчас: структуру, стиль, порядок блоков и понятность оффера. Обсуждение шрифта в подвале можно оставить на следующий круг. Шрифт подождёт. Он уже многое видел.

Просите обратную связь в формате «экран → элемент → изменение → причина». Комментарий «сделать дороже» звучит бодро, но генератору и дизайнеру от него одинаково тоскливо.

Где AI ломает процесс

В интервью с пользователями Lork повторялись четыре проблемы.

Самовольные изменения. Агент мог поправить нужный текст и одновременно изменить цвет, соседний блок или ранее утверждённое решение.

Слабая работа с референсами. У одного пользователя сайты конкурентов сработали хорошо. Веб-студия сообщала о нестабильной обработке ссылок, PDF, изображений и логотипов. Референс лучше сопровождать письменным разбором.

Потеря структуры. Студии нужна фиксация согласованных страниц. Без неё каждая правка снова открывает старые решения.

Цена повторных попыток. Ошибка агента тратит время и токены. Для клиентского проекта оценивайте стоимость нескольких циклов доработки, а не одной генерации.

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

Если тест нужен на реальном брифе, откройте AI-конструктор сайтов Lork, вставьте задачу клиента и начните с главной страницы. После генерации проверьте три локальные правки и мобильную версию до того, как расширять прототип.

Готовый промпт и ответы на вопросы

Создай прототип сайта компании по приложенному брифу. Сначала покажи список страниц и блоков, затем дождись подтверждения. Утверждённые тексты сохраняй дословно. Цвета бренда и пропорции логотипа не меняй. Референс используй для композиции и плотности страницы. Главная цель сайта — заявка на консультацию. После согласования структуры создай главную страницу и одну внутреннюю. Проверь обе на мобильном экране.

Перед отправкой клиенту проверьте:

• открывается ли ссылка без входа в ваш аккаунт;
• совпадают ли названия услуг, цены и контакты;
• сохранились ли цвета и пропорции логотипа;
• понятен ли следующий шаг на каждом важном экране;
• выглядит ли прототип нормально на телефоне;
• ясно ли клиенту, какие функции пока условны.

Можно ли заменить Figma AI-конструктором?

Для раннего согласования сайта иногда можно. Интервью веб-студии показывает, что AI-прототипы на 10–15 страниц уже продаются клиентам как отдельный результат. Для сложной дизайн-системы, детальной анимации и передачи точных макетов Figma может остаться в процессе.

Стоит ли сразу создавать все страницы?

Лучше начать с главной и одного типового экрана. Ошибка в общей структуре или стиле тогда исправляется в двух местах, а не в пятнадцати.

Что передавать разработчикам?

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

Как выбрать инструмент?

Для клиентского прототипа важны скорость первого результата, правки, работа с референсами и удобная ссылка для показа. Сравнение классов инструментов есть в статье об аналогах Lovable AI.

Собрать клиентский прототип