Прототипирование фронтенда за вечер: аналитик собрал кликабельный макет без дизайнера

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

С появлением генеративного ИИ (LLM, большая языковая модель, по сути продвинутый генератор текста и кода) аналитик перешёл к так называемому вайбкодингу, когда задачу описываешь словами, а нейросеть генерирует готовый код. Для прототипирования фронтенда это означает: вместо перетаскивания компонентов в графическом редакторе вы получаете рабочую HTML-страницу с кнопками, полями и переходами.

Зачем аналитику кликабельный прототип?

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

С рабочим прототипом проще:

• согласовать решение с руководством и стейкхолдерами (заинтересованными лицами, от которых зависит судьба фичи)
• показать пользовательские сценарии вживую, а не на словах
• обнаружить ошибки до начала полноценной разработки
• обсуждать спорные моменты, тыкая пальцем в экран, а не в текст ТЗ

Фронтенд-разработчику потом передаётся не готовый код, а наглядный референс: как выглядит интерфейс и как он себя ведёт. Встраивать в архитектуру, подключать API (программный интерфейс для обмена данными между системами), писать тесты он будет сам.

Что понадобится

• Любой текстовый редактор или IDE (среда разработки): VS Code, Cursor или даже блокнот
• Доступ к ИИ-ассистенту, который умеет генерировать код: ChatGPT, Claude, YandexGPT или GigaChat для тех, кто работает в РФ
• Базовое понимание трёх технологий: HTML (разметка страницы), CSS (стили и внешний вид), JavaScript (поведение и интерактив)
• Текст задачи: описание фичи, список полей, типы данных, ограничения
• Время: первый прототип занимает от 30 минут до пары часов в зависимости от сложности

Автор рекомендует именно связку HTML, CSS и JavaScript, а не фреймворки вроде React или Vue. Причина практическая: чем проще стек, тем меньше шансов, что ИИ сгенерирует что-то, в чём вы не разберётесь.

Пошаговая инструкция

1. Соберите требования к фиче. Запишите: какая информация выводится, откуда берётся, какие типы данных, обязательные и необязательные поля, ограничения по длине, поведение при ошибке. Это тот же процесс, который вы делали бы для Figma-макета.

2. Сформулируйте промпт (текстовое задание для нейросети). Опишите задачу так, будто объясняете стажёру: что за страница, какие элементы на ней, как они расположены, что происходит при нажатии.

Создай HTML-страницу с формой добавления товара.
Поля: название (обязательное, до 100 символов),
цена (число, обязательное),
описание (необязательное, до 500 символов),
категория (выпадающий список: электроника, одежда, еда).
При отправке показывай сообщение об успехе.
При ошибке валидации подсвечивай поле красным
и показывай текст ошибки под полем.
Стиль: минималистичный, светлая тема, без внешних библиотек.

1. Отправьте промпт ИИ-ассистенту. Получите файлы HTML, CSS и JavaScript (иногда всё в одном HTML-файле).

2. Откройте результат в браузере. Просто дважды кликните по HTML-файлу. Никакой сборки, серверов и установки пакетов не нужно.

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

4. Передайте правки обратно ИИ. Не нужно отправлять замечания дизайнеру и ждать. Просто напишите:

В форме товара добавь поле «артикул» (обязательное, только цифры, 8 символов).
Перенеси кнопку «Отправить» под все поля.
Сделай заголовок крупнее.

1. Покажите результат заказчику. Кликабельный прототип в браузере убеждает сильнее, чем статичный макет или текстовое ТЗ.

2. Передайте папку с файлами фронтенд-разработчику как визуальный референс поведения интерфейса.

Что с этого вам?

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

Авторам Дзена и контент-маркетологам. Тот же подход работает для лендингов, интерактивных демо и визуальных примеров в статьях. Вместо скриншота можно встроить рабочий прототип.

Предпринимателям в РФ и СНГ. Если у вас нет штатного дизайнера, а задачу нужно показать подрядчику или инвестору, кликабельный прототип за вечер стоит ноль рублей и объясняет идею лучше презентации.

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