- PVSM.RU - https://www.pvsm.ru -
Всем привет. Меня зовут Максим, я — технический директор СофтМедиаЛаб (SML). Через меня проходят все проекты и пресейлы. В этой статье расскажу про использование ИИ для создания прототипов: как искусственный интеллект помогает быстрее воплотить идею заказчика в жизнь и ускорить разработку проекта.
Прототипирование — это этап, который помогает превратить размытые идеи заказчика в конкретное визуальное, а иногда и интерактивное решение. Поскольку основная часть проектов компании — это заказная разработка, прототипы становятся средством быстрой коммуникации и согласования требований с заказчиками. Вместо долгих обсуждений и недопониманий клиент видит первую рабочую версию продукта, может «пощупать» интерфейс, а команда – понять, что это именно то, что нужно. Умение быстро создавать прототипы существенно экономит время и деньги на последующих этапах, снижает риски и помогает прийти к хорошему результату.
Еще пару лет назад бывало, что мы получали запрос на разработку и не могли добиться от заказчика деталей, понять кто и как будет пользоваться создаваемой системой. Заказчик путался в показаниях, а мы предлагали дизайн-спринт для проработки требований. На этот спринт привлекали аналитика и дизайнера, которые после 2-3 недель итеративной работы выдавали ТЗ и кликабельные макеты основных экранов в Figma.
Постепенно мы начали привлекать к созданию прототипов искусственный интеллект. Один из недавних запросов отлично иллюстрирует, как подключение ИИ повлияло на процесс.
Ко мне пришел запрос: «Ищем разработчика для создания платформы с нейропсихологической диагностикой. Заказчику нужен сайт с интеграцией ИИ и следующим функционалом:
решение диагностических проб и подсчет баллов;
«карта ребёнка» и история;
авто-отчёты на основе диагностики;
в будущем – масштабирование на базу упражнений и визуализацию прогресса.
Гипотезы валидированы фокус-группами, есть методические схемы с системой подсчетов, которые сейчас выполняются офлайн, подобраны материалы.
В процессе первого созвона с заказчиком я уточнил некоторые моменты, тут же составил промпт и отправил в ChatGPT:
«Хочу создать платформу для нейропсихологов.
Это сайт, на котором будут регистрироваться нейропсихологи.
После регистрации должны быть доступны функции:
управлять клиентами — дети, которых консультирует (создавать, редактировать)
выбирать экзамен из списка в системе
создавать быструю ссылку для отправки ребенку для прохождения выбранного экзамена
проходить экзамен в режиме просмотра (а ребенок проходит экзамен в режиме для оценки)
просмотр результатов пройденных экзаменов (результат прохождения будет обрабатываться ИИ на основании методологической базы)
история прохождения экзаменов ребенком (карта ребенка)
экран с профилем и информацией о следующей оплате сервиса
Сделай визуальные макеты (wireframes) в коде React+Tailwind в одном файле, чтобы его было просто вставить в проект, созданный с помощью create react app
Приложение должно быть минималистично, но производить впечатление решения с дизайном»
В результате получил код на React, который сразу запустился [2]:
Вместе с заказчиком мы продолжили обсуждение его запроса уже глядя в UI с погружением в функционал, доступный на разных экранах.
По ходу обсуждения я несколько раз модифицировал промпт, добавляя для каждой страницы инструкции по отображению данных и доступных действий. И так за одну часовую встречу я превратил исходную верхнеуровневую постановку в кликабельный прототип, заапрувленный заказчиком со словами: “Да, вот так мне нравится!”
Сейчас все подобные запросы мы уточняем именно в такой форме:
Узнаем, что хочет получить заказчик, какие функции важны;
Пишем промпт с учетом того, для кого наше решение, что оно должно уметь, как выглядеть и какой нужен результат. Просим создать макет;
Полученный результат по необходимости корректируем и показываем заказчику прототип.
В итоге заказчик понимает, что получит, а мы — трудоемкость реализации.
Еще дам небольшой анализ инструментов, которые я тестировал сам и могу порекомендовать для прототипирования:
Лучше всего с задачами прототипирования справляются облачные LLM такие как Gemini 2.5 Pro и ChatGPT-4o (прототип выше сгенерирован именно в ней).Если выбирать из локальных LLM, то мне больше всего понравилась модель Qwen3-Coder-30B-A3B-Instruct [3]. По исходному промпту выдает такой вариант, с рабочими переходами между элементами:
Помимо использования LLM, я экспериментировал с прототипами в сервисе lovable.dev [4].
Плюсы lovable:
разбивка файлов на роутинг, стили, компоненты, хуки (для данного примера создалось 15 файлов);
использование typescript для описания основных сущностей;
в самих файлах больше логики: отработка случаев, когда под список отображения пустой;
возможность подключить бэкенд с облачной базой Supabase (аналог Firebase).
Недостатки:
из коробки среди кликабельных элементов — только верхнее меню;
генерации/перегенерации идут заметно дольше, чем в LLM. Условно 2 минуты против 30 секунд;
в интерфейсе не всегда понятно, закончил lovable генерацию или еще что то делает;
бесплатного тарифа мне не хватило, чтобы к этому примеру подключить бэкенд.
Взвешивая все «за» и «против», я остановился на Gemini/GPT для прототипирования проектов не под NDA и на Qwen3-Coder-30B-A3B-Instruct для прототипирования проектов с повышенными требования к конфиденциальности. А lovable вдохновил меня на то, чтобы добавить в промпт системную часть, связанную с типизацией и обработки различных ситуаций отображения списочных элементов.
Спасибо, что дочитали до конца. Поделитесь мнением в комментариях!
Автор: MGorshkov
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ii/432540
Ссылки в тексте:
[1] Источник: https://funny.klev.club/
[2] сразу запустился: https://maxgorshkov.github.io/neuro-expert/build/
[3] Qwen3-Coder-30B-A3B-Instruct: https://huggingface.co/Qwen/Qwen3-Coder-30B-A3B-Instruct
[4] lovable.dev: http://lovable.dev
[5] Источник: https://habr.com/ru/articles/953186/?utm_campaign=953186&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.