Веб-дизайн и веб-разработка с помощью ИИ: как мы в Spans сделали 5 сайтов за один день

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

Чтобы это проверить, решили провести внутри команды Spans хакатон, где каждый смог бы «пощупать» технологии изнутри и, возможно, научиться делать по-новому.

Подружиться с нейросетями и друг с другом

На хакатон у нас было две цели:

— заинтересовать команду нейросетями, дать практику, показать рабочие инструменты;

— замутить энтертейнмент: провести кросс-командный тимбилдинг, чтобы «поиграть» с коллегами.

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

Заказчики, к слову, были разными — и из B2B, и из B2C сегментов; у кого-то уже был сайт, у кого-то — только презентация или короткий бриф.

Реальные проекты, сайт за 1 день на ИИ, обратная связь заказчиков

Условия, которые мы дали командам:

⁃ Реальный бриф от клиента: 15-20 минут на личное знакомство по зуму;

⁃ Используем только бесплатные ИИ (!)

⁃ Руками команды должно быть сделано не более 20% работы;

⁃ Клиента не вовлекаем, а вносим правки по результату;

⁃ В конце дня защищаем проект и презентуем его клиенту;

⁃ А также формируем список инструментов, которыми пользовались.

Что хотели получить по итогу:

⁃ Одностраничный сайт на тестовом домене: простой, современный, удобный, релевантный запросу клиента и решающий его задачу — в общем, всё, ради чего мы обычно делаем проекты в Spans;

⁃ Лого, палитра, шрифт;

⁃ Описание используемых инструментов.

Также командам дали сроки: проект надо было реализовать за 6 часов.

А ещё, чтобы у команд была мотивация, мы объявили призовой фонд — 20 тысяч рублей. Сформировали жюри, состоящее из топов команды и клиентов.

Поехали!

У нас было 5 команд, 5 проектов и ИИ

Итак, у нас было 5 команд и 5 проектов — и все они от реальных заказчиков с реальными целями. При этом, идеи абсолютно разные: от БАДов до космоса!

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

Из минимальной информации, которая была дана заказчиками, команды реализовали визуалы, смыслы, структуру, сам сайт на Битриксе и Тильде, а код под каждый проект ребята из back-end писали с помощью ИИ.

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

Свечи и космос

На хакатон взяли в работу следующие проекты: проект про космос, кондитерская, свечи, личный бренд, БАДы.

Использовали нейросети:

Copilot (https://www.bing.com/chat?form=NTPCHB) — редактура текстов и поиск доп.материалов, генерация креативных решений.

Вывод: классно подходит для креативных задач, и задач на поиск решений, в которых необходим контекст из интернета

Gemini (https://gemini.google.com/?hl=ru) — редактура и создание продающих текстов. Вывод: хорошо работает именно с текстами, идеально для копирайта

ChatGPT4 (https://chat.openai.com/) — разработка подробной структуры и кода для блоков и элементов сайта.

Вывод: важно четко прописать промты, чтобы не было неожиданностей

MistralAi (https://chat.mistral.ai/chat) — разработка подробной структуры и кода для блоков и элементов сайта.

Вывод: то же, что с GPT

Relume (https://www.relume.io/) — создание и экспорт подробных прототипов сайта.

Вывод: удобная штука, которая ускоряет работу

Krea (https://www.krea.ai/) — визуально-направленная генерация контента, разработка логотипа.

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

Бесплатный инструмент, кстати!

Midjorney (https://www.midjourney.com/home) — генерация фотоконтента по текстовому описанию, создание наработок на брендинг и логотипа.

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

Framer (https://framer.com/) — создание сайта по текстовому запросу.

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

Также есть плагин, который из Фигмы позволят импортировать дизайн, и потом его настраивать. Адаптивы же после генерации автоматически создаются и изменяются сами при редактуре смежных размеров.

Переиграли и уничтожили ИИ

Насколько реально собирать сайты только на нейросетях?

Как можно использовать ИИ в работе?

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

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

Зато оправдалась вторая цель: дать команде шанс попробовать что-то новое, подумать out of the box. Потому что помимо использования новых инструментов, многие взяли не свою часть работы: например, back-end и front-end разработчики поменялись местами.

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

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

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