Создаёте вы мобильные приложения или нет, это не важно, главно, что у вас теперь может быть очень сильный помощник в виде нейронной сети Trace.
Это очень удобный инструмент, который позволяет создавать интерфейс мобильных приложений, посредством обычных текстовых подсказок. Давайте попробуем создать простенькое приложение в виде интернет магазина. Чтобы сильно не раздувать, материал сконцентрируемся только на карточке товара.
Нажимайте на кнопку “Start Design”.
Нас просят войти через учетную запись GitHub, но если у вас нет учетной записи в GitHub, то можно войти через учетную запись Google, это предлагается мелким еле заметным шрифтом. Я буду использовать учетную запись GitHub.
После того как мы авторизовались вы увидите аватар вашей учетной записи GitHub.
Теперь вновь нажмите на кнопку “Start Design”.
После этого откроется симулятор мобильного телефона с запущенным приложением, которое выводит надпись Hello Wrold. Внизу вы увидите черное текстовое поле, куда необходимо писать запрос.
Вы видите подсказку в текстовом поле на английском языке, но могу вас уверить, что русский язык тоже прекрасно воспринимается данной нейросетью.
Начнем создание мобильного приложения, т.е. карточки товара. Давайте составим первую подсказку с достаточно четкой формулировкой “Создай карточку товара для приложения интернет магазин”, после чего нажмите Enter.
Пока нейросеть будет создавать интерфейс мобильного приложения, то чтобы время зря не терять вам будут показываться разные рекламные ролики. В результате вы получите первый вариант.
Да, я не просто так сказал, что это первый вариант, т.к. нейросеть выдала на вашу четкую формулировку свою вариацию, а вам теперь необходимо её дорабатывать, но не руками, а текстом.
Например, я бы хотел, чтобы картинка товара была больше по ширине и там был не один вариант, а несколько картинок, которые можно листать. Также мне не нравится, что цена отображается обычным текстом, хочется как-то выделить и еще было бы неплохо обозначать вторую цену, например по карте магазина. А вот кнопка “добавить в корзину“ совсем незаметная. Попробуем сформулировать еще один набор четких подсказок, для доработки данного интерфейса.
Например, так: сделай так, чтобы картинка товара занимала 80% ширины экрана. Также добавь для картинки товара, снизу, пагинацию в стиле точек. Кнопку добавления в корзину перенеси вниз и сделай её фиксированной, а её ширину 100% от размера экрана. Цену оберни в зеленый блок, а рядом добавь вторую цену, без обрамления в блок, цвет текста менее заметный.
Уже лучше, но он проигнорировал пагинацию. Значит попрошу его отдельным запросом, чтобы подсказка не размывалась в большом тексте. Напишу так: Поставь изображение товара по центру, а под ним сделай пагинацию из пяти точек.
Мы видим, что изображение он поставил по центру, а вот пагинация является каким-то камнем преткновения. Давайте думать, как заставить его это сделать. Нужно написать подсказку более явно. Попросим его таким образом: создай элемент интерфейса, чтобы пользователь видел, что изображений товара несколько и их можно листать вправо или влево.
Он очень старается, но у него явно есть какие-то сложности с пагинацией. Хорошо, давайте проведем исследование и попросим его сделать пагинацию на английском: Add pagination to the image.
Даже таким образом он не смог отобразить пагинацию. Значит можно утверждать, что русский язык нейросеть понимает хорошо.
На самом деле он какие-то вещи добавлял между названием товара и картинкой, поэтому нам лучше откатиться. Слева есть список версий, давай выберем ту, где мы изменяли положение изображения.
Давай фон сделаем черным.
Запрос: измени фон на черный цвет.
Фон приложения изменился, а вот фон карточки остался прежним. Все потому, что мы написали размытую подсказку для нейросети. Давайте укажем более точную: измени фон карточки на темный, а цвета текста адаптируй.
Как интересно, он просто сделал пагинацию белого цвета и она не была заметна. 🙂
Думаю, что вы запомнили основной принцип - это правильное составление подсказок и работа с версиями. После того, как у вас будет все готово, то вы можете получить код нажав вот на эту кнопку:
Нажимай на неё и получишь код на Swift.
На самом деле переписать этот код на Kotlin можно посредством ChatGPT, а затем лишь доработать. Но я лично для себя вижу эту нейросеть не для написания программ, а для оперативного создания прототипов для клиента. Чаще всего клиенту не хватает при объяснении показать прототип, на котором он скажет, что ему не нравится, а затем приступать к работе.
Обычно прототипы занимают много времени, а вот такой вариант позволяет создавать прототипы без особых проблем и быстро находить точки соприкосновения с клиентами.
Не забудь подписаться на канал, чтобы ничего не пропустить. Если тебе понравилась статья, то поставь лайк и напиши добрый комментарий, побалуй автора. Спасибо за прочтение!