Всем привет. Меня зовут Максим, я — технический директор СофтМедиаЛаб (SML). Через меня проходят все проекты и пресейлы. В этой статье расскажу про использование ИИ для создания прототипов: как искусственный интеллект помогает быстрее воплотить идею заказчика в жизнь и ускорить разработку проекта.
Создал прототип — и все понятно
Прототипирование — это этап, который помогает превратить размытые идеи заказчика в конкретное визуальное, а иногда и интерактивное решение. Поскольку основная часть проектов компании — это заказная разработка, прототипы становятся средством быстрой коммуникации и согласования требований с заказчиками. Вместо долгих обсуждений и недопониманий клиент видит первую рабочую версию продукта, может «пощупать» интерфейс, а команда – понять, что это именно то, что нужно. Умение быстро создавать прототипы существенно экономит время и деньги на последующих этапах, снижает риски и помогает прийти к хорошему результату.
Еще пару лет назад бывало, что мы получали запрос на разработку и не могли добиться от заказчика деталей, понять кто и как будет пользоваться создаваемой системой. Заказчик путался в показаниях, а мы предлагали дизайн-спринт для проработки требований. На этот спринт привлекали аналитика и дизайнера, которые после 2-3 недель итеративной работы выдавали ТЗ и кликабельные макеты основных экранов в Figma.
ИИ тоже умеет создавать
Постепенно мы начали привлекать к созданию прототипов искусственный интеллект. Один из недавних запросов отлично иллюстрирует, как подключение ИИ повлияло на процесс.
Ко мне пришел запрос: «Ищем разработчика для создания платформы с нейропсихологической диагностикой. Заказчику нужен сайт с интеграцией ИИ и следующим функционалом:
решение диагностических проб и подсчет баллов;
«карта ребёнка» и история;
авто-отчёты на основе диагностики;
в будущем – масштабирование на базу упражнений и визуализацию прогресса.
Гипотезы валидированы фокус-группами, есть методические схемы с системой подсчетов, которые сейчас выполняются офлайн, подобраны материалы.
В процессе первого созвона с заказчиком я уточнил некоторые моменты, тут же составил промпт и отправил в ChatGPT:
«Хочу создать платформу для нейропсихологов.
Это сайт, на котором будут регистрироваться нейропсихологи.
После регистрации должны быть доступны функции:
1. управлять клиентами — дети, которых консультирует (создавать, редактировать)
2. выбирать экзамен из списка в системе
3. создавать быструю ссылку для отправки ребенку для прохождения выбранного экзамена
4. проходить экзамен в режиме просмотра (а ребенок проходит экзамен в режиме для оценки)
5. просмотр результатов пройденных экзаменов (результат прохождения будет обрабатываться ИИ на основании методологической базы)
6. история прохождения экзаменов ребенком (карта ребенка)
7. экран с профилем и информацией о следующей оплате сервиса
Сделай визуальные макеты (wireframes) в коде React+Tailwind в одном файле, чтобы его было просто вставить в проект, созданный с помощью create react app
Приложение должно быть минималистично, но производить впечатление решения с дизайном»
В результате получил код на React, который сразу запустился:
Вместе с заказчиком мы продолжили обсуждение его запроса уже глядя в UI с погружением в функционал, доступный на разных экранах.
По ходу обсуждения я несколько раз модифицировал промпт, добавляя для каждой страницы инструкции по отображению данных и доступных действий. И так за одну часовую встречу я превратил исходную верхнеуровневую постановку в кликабельный прототип, заапрувленный заказчиком со словами: “Да, вот так мне нравится!”
Сейчас все подобные запросы мы уточняем именно в такой форме:
Узнаем, что хочет получить заказчик, какие функции важны;
Пишем промпт с учетом того, для кого наше решение, что оно должно уметь, как выглядеть и какой нужен результат. Просим создать макет;
Полученный результат по необходимости корректируем и показываем заказчику прототип.
В итоге заказчик понимает, что получит, а мы — трудоемкость реализации.
Вместо заключения
Еще дам небольшой анализ инструментов, которые я тестировал сам и могу порекомендовать для прототипирования:
Лучше всего с задачами прототипирования справляются облачные LLM такие как Gemini 2.5 Pro и ChatGPT-4o (прототип выше сгенерирован именно в ней).Если выбирать из локальных LLM, то мне больше всего понравилась модель Qwen3-Coder-30B-A3B-Instruct. По исходному промпту выдает такой вариант, с рабочими переходами между элементами:
Помимо использования LLM, я экспериментировал с прототипами в сервисе lovable.dev.
Плюсы lovable:
разбивка файлов на роутинг, стили, компоненты, хуки (для данного примера создалось 15 файлов);
использование typescript для описания основных сущностей;
в самих файлах больше логики: отработка случаев, когда под список отображения пустой;
возможность подключить бэкенд с облачной базой Supabase (аналог Firebase).
Недостатки:
из коробки среди кликабельных элементов — только верхнее меню;
генерации/перегенерации идут заметно дольше, чем в LLM. Условно 2 минуты против 30 секунд;
в интерфейсе не всегда понятно, закончил lovable генерацию или еще что то делает;
бесплатного тарифа мне не хватило, чтобы к этому примеру подключить бэкенд.
Взвешивая все “за” и “против”, я остановился на Gemini/GPT для прототипирования проектов не под NDA и на Qwen3-Coder-30B-A3B-Instruct для прототипирования проектов с повышенными требования к конфиденциальности. А lovable вдохновил меня на то, чтобы добавить в промпт системную часть, связанную с типизацией и обработки различных ситуаций отображения списочных элементов.
Спасибо, что дочитали до конца. Поделитесь мнением в комментариях!
Источник: habr.com
