От макетов до кода: как AI-прототипы упростили жизнь разработчикам и тестировщикам

Привет! Я — Аля, старший продакт-менеджер выделенных серверов в Selectel. Представьте, вашей команде нужно разработать новый интерфейс для продукта. Вы ставите задачу на дизайнера, а он приносит статичные картинки экранов в Figma. На встрече команда смотрит на них и понимает, что половина сценариев не продумана. Возникают вопросы: «Что будет, если пользователь нажмет на кнопку или данные не загрузятся?» И вместо того, чтобы передать задачу в разработку, вам приходится выяснять детали в комментариях и чатах.

Нам это хорошо знакомо. Долгие циклы согласований, переделки после релиза, сложности с тестированием — все это было частью нашего процесса. Чтобы решить эти проблемы, мы решили попробовать AI-инструменты для прототипирования. В статье расскажу, как Figma Make и другие сервисы помогли нашей команде ускорить создание прототипов и сократить количество правок. Будет полезно тем, кто устал от цикла «получить макет → найти проблему → подождать правки → повторить».

Как было раньше

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

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

Основные проблемы при разработке макетов

Сложности с проектированием и подготовкой тест-кейсов. Дизайнеры отправляли разработчикам и тестировщикам статичные макеты — визуально продуманные страницы, но без полного UX-флоу. Из-за этого разработчикам было трудно продумать архитектуру, не зная всех состояний. А тестировщики не могли подготовить качественные тест-кейсы, чтобы получить рабочую версию.

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

Некорректная оценка задач. Без понимания всех сценариев команда не могла оценить реальное время разработки, поэтому называла примерные сроки — и часто ошибалась. Например, коллеги оценивали задачу в две недели, а делали месяц. Отсюда — некорректные ожидания у лидов и продактов.

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

Предложить свою идею — целый квест. В IT-сфере непросто донести идею словами. Разработчик видит, как можно сделать лучше, но для демонстрации иногда нужна визуализация. Не всегда можно увидеть полную картинку по макету, а создавать MVP ради демонстрации идеи — долго и затратно.

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

Облачная инфраструктура для ваших проектов

Виртуальные машины в Москве, Санкт-Петербурге и Новосибирске с оплатой по потреблению.

Подробнее →

Как стало с AI-прототипами

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

Инструменты

Мы протестировали четыре AI-сервиса: Replit, Lovable, Cursor и Figma Make. Каждый по-своему хорош для определенных задач. Ниже рассмотрим их подробнее.

Для работы с прототипами самым простым для нас оказался Figma Make. Ниже делюсь его основными преимуществами.

• Бесплатный. Не нужно согласовывать бюджет, чтобы использовать в работе.

• Безопасный. Коллеги уже работают в Figma, а значит, он одобрен нашими безопасниками.

• Доступность. Figma итак является нашим ежедневным инструментом. У него минимальный порог входа, можно легко вносить изменения и делиться ссылками.

Качество генерации Figma Make может быть немного хуже, чем у других инструментов. Но мы не делаем из прототипов продакшен-код. Если ваша цель — показать логику и получить обратную связь, то этого вполне хватает.

Какие задачи решили с помощью AI-прототипов

Отображение новых моделей потребления интернет-трафика или полосы при заказе сервера

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

1. Сделали рабочий AI-прототип для десктопа и мобильной версии. Внести изменения в макет можно за пару минут.

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

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

На создание прототипа, документации и диаграммы у нас ушло около 20–25 минут.

Редизайн страницы заказа

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

Вот так выглядит интерфейс сейчас:

Вот три примера рассматриваемых концептов:

Предложения в конфигураторе кастомов

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

AI-прототипы не всегда выглядят идеально — у них могут быть шероховатости в деталях. Но мы работаем на компонентах, поэтому команде разработки обычно хватает и такого уровня проработки. Отдельные макеты требуются далеко не в каждом случае.

Как AI-инструменты для прототипирования изменили наш подход

Понятная логика сразу. Кликабельный прототип показывает все переходы и состояния. Не нужно гадать, как должно работать, — можно просто потыкать и сразу увидеть.

Можно «пощупать» до начала разработки. На этапе PBR разработчики могут прокликать прототип и сразу понять технические ограничения. Где потребуется сложная логика? Какие нужны запросы к бэкенду? Все становится понятнее.

Быстрая обратная связь. Нашли проблему в логике? Продакт или дизайнер (а может и сам разработчик или тестировщик) правит прототип прямо на встрече. Не нужно ждать несколько дней на внесение правок — вопрос решается за минуты.

Ранняя подготовка тест-кейсов. Тестировщики теперь готовят тест-кейсы параллельно с разработкой, опираясь на прототип. Не нужно ждать готовую версию, чтобы понять, что проверять.

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

Разработчики могут предлагать улучшения. Это, пожалуй, самое крутое. Любой человек из команды может сгенерировать прототип альтернативного решения за 15 минут. Видишь, как сделать лучше? Покажи. Это касается не только текущих задач, но и идей по развитию продукта в целом.

Создайте веб-приложение и получите бонусы на его деплой в облако

В новом бесплатном курсе по JavaScript.

Подробнее →

Практические советы для разработчиков и тестировщиков

Если хотите попробовать этот подход в своей команде, вот несколько рекомендаций.

Начните изменения с себя. Самостоятельно создайте небольшой прототип с помощью AI-инструментов и покажите коллегам, как это улучшило или может улучшить продукт. Демонстрация работает лучше слов. Когда команда увидит, как это экономит время и повышает качество, захочет тоже попробовать.

Создавайте прототипы пошагово. Не пытайтесь описать все в одном промте — AI выдаст что-то громоздкое и сложно редактируемое. Лучше начните с каркаса: сначала сгенерируйте базовую структуру, затем — основные экраны без деталей. После наращивайте логику шаг за шагом: добавляйте состояния, переходы, эдж-кейсы. Так проще контролировать результат и вносить правки.

Используйте прототипы для тест-кейсов. Кликабельный прототип — отличная основа для подготовки тестовых сценариев. Видно все состояния, переходы и эдж-кейсы.

Не бойтесь предлагать свои идеи через прототипы. Видите, как можно улучшить UX или упростить реализацию? Сделайте быстрый прототип и покажите команде. Это займет 15–20 минут, но сэкономит часы обсуждений.

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

Заключение

AI-прототипы не становятся альтернативой дизайнеру и продакту. Они помогают разработчикам и тестировщикам глубже понять задачу до начала работы и во время нее. На практике инструмент позволяет:

• экономить время на уточнениях,

• вносить меньше правок после релиза,

• влиять на продукт на ранних этапах,

• давать более точные оценки задач,

• заранее готовиться к тестированию.

Если вы пока работаете со статичными макетами и чувствуете описанные боли — попробуйте AI-инструменты для прототипирования. Начните с одной небольшой задачи. Сделайте макет самостоятельно, покажите команде, а дальше — посмотрите, как это изменит ваш процесс.

А как у вас в команде работают с прототипами? Используете ли вы AI-инструменты? Делитесь в комментариях, интересно узнать про другой опыт :)