Лидеры года — новая категория на Workspace Digital Awards! Номинируйте вашу команду, продукты и проекты.
Нейросети

Мы отдали дизайн сайта нейросетям. Вот что из этого вышло

52 
 

Работа с нейросетями все больше становится частью повседневной работы дизайнера. Но когда ИИ действительно ускоряет процесс, а когда без человека не обойтись?

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

Это статья о нашем реальном опыте работы с нейронками в разработке сайтов. Здесь мы расскажем, как используем их на этапах аналитики, проектирования и дизайна; а команда Aiston поделится, как вайб-кодит на этапе разработки. 

Аналитика: быстрее собрать, но не быстрее понять


Любой хороший проект начинается с аналитики, и здесь особенно велик соблазн переложить всю работу на нейросеть. Отчасти это оправданно. Мы обычно используем GPT и Claude: они быстро собирают информацию, структурируют данные и проходятся по конкурентам, т.е. берут на себя то, что раньше съедало часы ручной работы.

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

Как это выглядит на практике, рассказывает графический дизайнер е—б эдженси Арина:

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

Дальше подбираем бренды для анализа. Тут нейросеть берет ссылки из первых результатов выдачи, и вместо брендов с историей можно получить самые банальные консервы, которые и разбирать-то нечего. Спасает точный запрос и ручной поиск по статьям и рейтингам. Зато зарубежные бренды GPT находит отлично.

Портреты первых пяти брендов я делаю сама, остальные отдаю GPT по этому шаблону. Он иногда тупит, поэтому позиционирование я перепроверяю. А вот техническую часть (цены, сегменты, коллекции, где продают) он закрывает идеально. Потом я загружаю все портреты и прошу найти сходства и различия: я либо соглашаюсь, либо категорически нет, и мы спорим дальше».


Проектирование: тут решает человек

На этапе проектирования нейросети чаще всего подключаются к текстам, и тут мы упираемся в тему, о которой сейчас говорят на каждом углу: нейрослоп. Так называют гладкий, грамотный и совершенно безликий текст, который ВООБЩЕ ничего не сообщает. 

Читатели от него устают. По опросу Sprout Social, 56% людей часто или очень часто видят в соцсетях контент, который сами называют нейрослопом. А по данным Fractl и Search Engine Land, доля американцев, у которых активное использование ИИ в маркетинге бренда снижает доверие к нему, за год выросла с 20% до 39%.

Заметить подвох читатель способен. В открытом тесте DEJAN людям показывали пары коротких фрагментов из новостных текстов и просили угадать, какой из них написала нейросеть. В среднем отвечали верно в 64% случаев, а те, кто читал дольше 40 секунд, угадывали уже в 75%. Так что на бегу нейрослоп легко пропустить, но стоит вчитаться, и он быстро себя выдает. Причем само подозрение влияет на оценку: в одном исследовании участники плохо отличали сгенерированные аннотации от написанных людьми, но качество и надежность текста оценивали по тому, что думали о его авторе.

«С текстами мы работаем так. Для черновиков берем GPT (Claude, по нашему опыту, справляется с ними заметно хуже), но считаем результат только базой. Даже при хорошем брифе, четком ТЗ и продуманном tone of voice нейросеть почти всегда оставляет следы: однотипные обороты, канцелярит, странные обобщения. Убрать их может только редактор, и между черновиком от ИИ и текстом, который не стыдно показать клиенту, всегда лежит ручная работа». — Маша Ищенко, фаундер е—б эдженси.

Дизайн: шаблон да, уникальность — нет

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

Почему? Креатив это совмещение несовместимого и взгляд на задачу сразу с нескольких сторон. В голове у дизайнера одновременно живут аналитика, конкуренты, аудитория, понимание того, что на рынке уже стало нормой, где еще можно поэкспериментировать, а где эксперимент превратится в перегиб. Уникальное решение рождается именно на стыке всего этого. Нейросеть же учили на том, что уже существует, поэтому принципиально новое она придумать не может.

Пока не может.

Но хватит теории, давайте покажем на двух наших проектах. 

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

На проекте Ростелекома агент был уже не так хорош. Дизайнеры отрисовали часть страницы в минималистичной стилистике с яркими 3D-элементами. Блоков уже хватало, логика карточек считывалась без подсказок, оставалось только продолжить. В итоге агент натыкал иконок и кругов куда придется. Блок с четырьмя иконками по краям прям наш любимый. 

Словом, уровень джуна нейросеть тянет. Для набросков вариантов и отдельных блоков она вполне пригодится. А вот до крутого дизайна, который цепляет и запоминается, ей пока далеко.

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

Отдельно скажем о том, где ИИ сейчас по-настоящему хорош: картинки и видео. Тут речь уже не про шаблонный дизайн сайта, а про визуальный контент, для которого раньше нужна была либо съемка, либо часы работы иллюстратора. Для простых генераций часто хватает GPT. Для видео мы берем Magnific (бывший Freepik), но чаще всего Kling или Runway. А еще в ходу нейросеть Figma, в основном для апскейла. Применяем все это в разных проектах.

Для Queenlash, например, мы делали ролики с девушками, и генерация вышла очень симпатичной. А на сайте Ростелекома все 3D-объекты тоже нагенерированы. 


Кейс Aiston: от макета к рабочему сайту

Но давайте про Aiston. Компания делает ИИ-продукты, и когда мы обновляли их действующий сайт, запрос был на технологичный, «умный» вайб, но без лишнего креатива (аудитория у них конкретная, и заигрываться с формой было не с руки).

После дизайна наступает этап, где нейронки помогают особенно здорово: реализация макета.

«Раньше все было так. Дизайнер отдавал разработчику статичный макет, а анимации, микровзаимодействия и переходы приходилось объяснять словами или показывать на референсах. Часть задуманного в процессе неизбежно терялась. Те, кто хотел избежать потерь, анимировали макет в Figma или After Effects, собирали все в отдельной проге и только потом передавали разработчику. И это долго.

Для Aiston мы пошли другим путем. На главном экране нужна была интерактивная анимация, поэтому мы отрисовали экран с пустым фоном и заверстали статичные элементы. А анимацию уже не рисовали, а вайб-кодили: переносим блок в Claude Code и Codex, смотрим на живой макет прямо в браузере и настраиваем движение и взаимодействия на месте. Так, блок за блоком, была собрана большая часть анимаций на сайте». — Лена Бобина, фаундер е—б эдженси

Разработчикам от этого проще: им не нужно «переводить» анимацию из статики в код, она уже готова в нужном формате. А нам как дизайнерам это дает результат получше, потому что мы сразу видим, как все выглядит и работает по-настоящему, а не в теории.

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


Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13818 тендеров
проведено за восемь лет работы нашего сайта.


Слово Aiston: а как у вас?

Начнем с козырей: 100% опрошенных разработчиков Aiston используют ИИ. Да-да, не удивляйтесь! Причем 94% работают с документацией, 88% анализируют проекты и ищут ошибки, а 75% подключают ИИ к проектированию решений и архитектуры.

Мы воспринимаем ИИ как следующий этап развития программирования. Вот раньше были перфокарты (это такие картонные карточки с отверстиями, с помощью которых компьютеру задавали команды), потом языки программирования, а теперь задачу можно описать обычными словами нейросетям. 

Меняются инструменты, суть остается прежней: человек объясняет компьютеру, что нужно сделать.

Но если в дизайне нейросеть упирается во вкус и уникальность, то в разработке — в надежность и последствия собственных решений. Она может за минуты сделать объём работы целой команды, а потом допустить ошибку, которую даже джун заметил бы на ревью. Но все по порядку. 

Разобраться в задаче: найти, но не решить

Команде не всегда достается подробное ТЗ и знакомая технология. Иногда на входе есть пара абзацев от заказчика и старый код, написанный на коленке. Раньше приходилось собирать информацию со всевозможных ресурсов: сайтов, документации, форумов и обсуждений других разработчиков. Процесс затягивался на несколько дней.

Теперь эту часть работы мы отдаем нейросетям. Для этого у нас есть корпоративный сервис с разными ИИ-агентами. Сначала агент собирает информацию и предлагает варианты. Потом мы обсуждаем его выводы, составляем новые вопросы, идем с ними к заказчику и повторяем цикл. Аналогично проходит весь этап аналитики. 

Как и коллеги с е–б эдженси, выбор варианта мы всегда оставляем за специалистом. Мы уже на опыте знаем, какие решения бизнесу подходят. Плюс держим в голове все договоренности и нюансы конкретного проекта. 

Спроектировать систему: предложить, не учесть детали

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

Когда человек вайбкодит продукт в одиночку, этап проектирования легко пропускается. Он открывает Claude Code и диктует свои хотелки. Нейросеть уточняет явные пробелы и предлагает варианты решения. Тут срабатывает эффект якоря: без опыта человеку сложно сравнить варианты и предусмотреть последствия, поэтому он часто выбирает первый. И да, промпт размером с «Войну и мир» тоже не спасает.

«Использование нейросетей значительно ускоряет анализ задач и подготовку прототипов: то, на что раньше уходили недели, теперь занимает дни. Но сложную систему с чувствительными данными одной нейросетью не построить. Нужны продуманная архитектура, строгие правила безопасности, учёт юридических ограничений и экспертиза в узких областях, которую ИИ пока не заменяет. На кону репутация и наша, и заказчика, а цена ошибки исчисляется миллионами рублей». — Сергей Хренов, Team Lead Aiston

Чтобы минимизировать все риски, у нас есть отдельный пайплайн. Сначала команда разработки собирает архитектуру вместе с ИИ: передает ему контекст и ограничения, просит предложить варианты решений и найти слабые места. Это только отправная точка. Затем мы дорабатываем архитектуру, подключая специалистов по интеграциям и информационной безопасности. Только после выносим решение на согласование с заказчиком. 

Написать код: снять рутину, но не контроль

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

«Сейчас проблема не в том, чтобы написать код. Нейросеть генерирует его быстрее, чем человек успевает проверить. Изменения копятся, ревью затягивается, и скорость всей разработки снова упирается в человека. Нам приходится пересматривать весь процесс». — Илья Евдокимов, Team Lead Aiston

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

К этому подходу мы пришли после вполне реального (упс!) факапа. При разработке дашборда нейросеть настроила загрузку так, что вместо нужной части данных система каждый раз забирала из базы весь массив и отправляла его в интерфейс. На небольшом объёме всё работало, а после релиза реальная нагрузка положила прод.

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

Что дальше? А дальше систему нужно поддерживать и развивать. Но это уже совсем другая история. 

Что в итоге

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

Зато в рутине и скорости она реально экономит часы. В аналитике берет на себя сбор данных. В текстах выдает черновик, с которым дальше работает редактор. В дизайне набрасывает варианты и закрывает отдельные блоки, а концепцию и вкус оставляет человеку. А в реализации, как показал наш опыт с Aiston, она вообще меняет сам процесс: то, что раньше требовало долгой настройки в Figma и передачи разработчику, теперь можно сделать и увидеть в браузере почти сразу.

Весь наш опыт сводится к простому правилу: нейронка отлично справляется с рутиной и скоростью, а человек остается там, где нужны решения, креатив и понимание контекста. И чем яснее команда видит эту границу, тем лучше у нее получается работать вместе.


Лучшее
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.




61

Лучшие статьи

Поделиться: 0 0 0
Креативный директор в  е—б эдженси , Санкт-Петербург
 173  6  6

Оцените статью
Спасибо за оценку