Прототип приложения нейросетью: кликабельный, а не картинка

Прототип приложения нейросетью: кликабельный, а не картинка

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

Чем прототип отличается от дизайна и макета?

Под словами «прототип приложения» люди имеют в виду три разные вещи, и полезно сразу понять, какая нужна вам.

Запросы вроде «нейросеть для создания дизайна мобильного приложения» обычно про первую строку. Но макет отвечает только на вопрос «нравится ли, как выглядит». На вопрос «поймут ли люди, что делать» отвечает только то, что можно нажать. Нейросеть, которая пишет код, сразу даёт третью строку, и по цене это не дороже рисования экранов вручную.

Зачем вообще нужен прототип?

Чтобы проверить идею до того, как вложить в неё деньги разработчиков. Типичные случаи такие.

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

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

Вы собираетесь заказывать разработку. Прототип становится лучшим техническим заданием: программист видит экраны, переходы и поля форм, а не пересказ в документе.

Что описать в запросе, чтобы прототип получился?

Главная ошибка первого сообщения: описывать приложение целиком, со всеми будущими функциями. Прототип проверяет одну гипотезу, поэтому описывайте один главный сценарий.

Работает такая схема из пяти пунктов:

1. Кто пользователь. «Владелец небольшой пекарни».
2. Главная задача. «Принимать предзаказы на завтра и видеть, сколько чего печь».
3. Экраны по порядку. «Список товаров, корзина, оформление заказа, экран владельца со сводкой».
4. Какие данные вводятся и где они видны. «Покупатель вводит имя, телефон и время получения, владелец видит заказы на завтра».
5. Как выглядит на телефоне. «Мобильный интерфейс, нижняя панель вкладок, крупные кнопки».

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

Как сделать прототип по шагам

1. Откройте zugo.dev и войдите через Google, GitHub или по почте. Стартовые кредиты выдаются сразу, карта не нужна.
2. Отправьте описание по схеме выше.
3. Дождитесь сборки. Прототип запускается и проверяется в браузере, прежде чем приходит к вам.
4. Пройдите главный сценарий сами, как пользователь. Запишите, где споткнулись.
5. Правьте словами: «добавь экран подтверждения заказа», «покажи пустое состояние, когда заказов нет».
6. Опубликуйте и отправьте ссылку тем, на ком проверяете идею.

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

Как проверять прототип на людях?

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

Дайте человеку одну задачу, а не экскурсию. Не «посмотри, что я сделал», а «закажи себе на завтра два круассана к девяти утра». Задача заставляет пройти сценарий, экскурсия заставляет вежливо хвалить.

Молчите и смотрите. Самое ценное происходит в те секунды, когда человек ищет кнопку и не находит. Если вы подскажете, вы потеряете ровно то, ради чего делали прототип.

Записывайте не мнения, а действия. «Сказал, что удобно» почти ничего не значит. «Дважды нажал на картинку товара, думая, что она открывает описание» это готовая правка на следующую итерацию.

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

Где хранятся данные прототипа?

Тут есть честная граница между бесплатным стартом и подпиской.

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

Настоящая платформа с аккаунтами пользователей, общей базой и отдельными страницами собирается на тарифе Pro. Тогда данные лежат во встроенном бэкенде Zugo Cloud: заказ, оформленный покупателем, появляется на экране владельца, а пользователи входят по почте без пароля. Подробнее о приложениях с базой написано в статье может ли нейросеть собрать приложение с базой данных.

Сколько стоит прототип?

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

Бесплатно выдаётся 1 450 стартовых кредитов, разово и без карты: хватит на один прототип в одном файле. Для прототипа с общей базой и несколькими итерациями нужен Pro: $25 в месяц и 20 000 кредитов каждый месяц. Новым пользователям первый месяц Pro стоит $5, если оформить его в течение 12 часов после регистрации.

Можно ли из прототипа сделать настоящее приложение?

Отчасти. Прототип это веб-приложение: оно открывается в браузере, его можно добавить на главный экран телефона, и для многих задач этого хватает надолго. Файла для Google Play или App Store из него само по себе не появится, и этот путь разобран в статье нейросеть для создания приложения на андроид.

Если прототип подтвердил идею, у вас есть два пути. Первый: продолжать дорабатывать его правками, пока он не станет рабочим продуктом. Второй: на тарифе Pro выгрузить код в GitHub и отдать его программисту как основу. Во втором случае разработчик получает не картинку, а работающий код, и это экономит ему первые недели.

Чего от прототипа не ждать?

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

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

И он не отвечает на вопрос «будут ли платить». Прототип показывает, понятно ли людям, что делать. Готовы ли они за это платить, проверяется отдельно: предзаказом, листом ожидания, прямым вопросом. Какие задачи нейросети пока не по силам, перечислено в статье чего нейросеть собрать не может.

Коротко

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