Как сделать прототип сайта для клиента: процесс веб-студии

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

В Lork прототип можно собрать как работающий многостраничный сайт: его открывают по ссылке, проверяют на телефоне и после согласования продолжают развивать как React-проект.

1. Зафиксируйте результат этапа

До начала работы запишите, что именно получит клиент. Например:

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

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

2. Соберите исходники

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

1. Кто приходит на сайт?
2. Какую задачу человек решает?
3. Что должно убедить его продолжить?
4. Какое действие считается результатом?

Если информации не хватает, оставьте явную пометку. Временный текст проще заменить, чем незаметно построить страницу на выдуманном факте.

3. Сначала утвердите карту страниц

Для проекта на 10–15 страниц составьте таблицу: название страницы, её задача, главный посетитель, целевое действие и обязательные блоки. Отдельно отметьте элементы, которые нельзя менять без согласования: набор услуг, порядок разделов, контакты, юридические страницы.

Пример короткой карты:

4. Дайте AI конкретное задание

Сильный запрос содержит контекст, структуру и ограничения. Например:

Собери адаптивный прототип сайта архитектурного бюро на 12 страниц. Используй приложенный бриф и транскрипцию. Сохрани утверждённый список страниц. На каждой странице услуги должны быть результат, этапы работы, пример проекта и форма консультации. Не придумывай цифры, клиентов и награды. Сначала создай структуру и навигацию, затем наполни страницы.

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

5. Проверьте прототип как редактор

Первая генерация требует ручного прохода. Проверьте:

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

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

6. Покажите клиенту конкретные вопросы

Не отправляйте ссылку с просьбой «посмотреть дизайн». Дайте клиенту короткий маршрут:

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

Соберите комментарии в один список, согласуйте приоритет и только после этого вносите изменения. Так обратная связь не расползается по мессенджерам.

7. Зафиксируйте принятую версию

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

Пример из практики студии

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

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

В небольших проектах особенно важно не пропускать финальную проверку. По опыту Евгении агент может не сразу применить повторную просьбу изменить текст или тему, а загруженный логотип — неверно обрезать или деформировать. После каждой правки перечитайте изменённый блок и сравните логотип с исходным файлом.

Короткий чек-лист

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

Создать прототип для клиента в Lork или сравнить подходы в статье «Figma или AI для прототипа сайта».