Содержание статьи
Всё началось на обычной стратегической сессии в конце 2025 года. Мы с коммерческим директором обсуждали планы на следующий год, пересматривали процессы и думали, где теряем время. Тогда и появился вопрос: а где искусственный интеллект действительно может быть полезен нашей команде?
Расскажу, что мы перепробовали, какие задачи отдали машине и почему начинали совершенно не с нейросетей.
Сразу скажу: это не история успешного успеха. Где-то мы правда сократили время в разы, где-то только учимся, а где-то честно признали, что человек пока справляется лучше.
Где заканчивается зона отдела дизайна
Первым ко мне пришёл отдел разработки с чек-листом передачи работ. Что должно быть в макетах, какие состояния предусмотреть и как назвать компоненты – весь список того, что нужно в работе. Смотря на всё это, я поняла, что у нас куча перекрёстных задач и появляются они в момент передачи, когда один отдел говорит другому: «Всё! Теперь твоя очередь».
Мы сели разбирать этот процесс вместе с разработчиками и долго докапывались до каждого этапа – «а зачем он вообще существует?». Потом у нас появились встречи руководителей отделов под названием «Дружба отделов». Когда мне прислали название, я только и спросила: «Вы задружите меня до смерти?». Но на этих встречах мы начали поднимать вопросы, о которых раньше никто и не думал.
Взять те же брейкпоинты. Казалось бы, рядовая дизайнерская задача: стандартизировать и выбрать размеры по умолчанию. Но в процессе выяснилось, что продажники вписывают их в договоры, разработка берёт за основу реализации, и решение одного отдела внезапно тянет за собой несколько других. Таких артефактов набралось прилично – и с них мы начали.
Затем с руководителем аналитики мы буквально накладывали дорожные карты отделов друг на друга и вычленяли, где можем вести работы параллельно, а когда только поэтапно. Если одна карта ложится на другую, сразу видно роли: вот тут заканчивается зона дизайнера, а тут начинается работа аналитика или разработчика.
После разбора стало понятно, что в нашем распоряжении остаются вполне определённые этапы:
-
проектирование;
-
прототипирование;
-
дизайн-концепция;
-
дизайн-макеты;
-
разработка адаптивов.
В них и надо было погрузиться: почему мы это делаем, как делаем и какие документы нам нужны. Часть требований мы заодно выставили другим отделам.
Следующим был разбор документов. Аналитических артефактов было много, и раскиданы они по разным файлам. Это неудобно, потому что дизайнеру тяжело держать контекст в голове. Поэтому мы выставили аналитикам требование — нужен инструмент, который может всё это сортировать и предоставлять по запросу. Так мы сделали чат-бота по документам – Хранитель знаний. Его цель заключается в том, чтобы систематизировать и упорядочить все данные по проекту. Ты можешь запросить краткую выжимку, где будет описана только суть по всему проекту. А можешь и более точечно делать запрос по типу: «Покажи пример UX-аудита для авиакомпании» или «Как мы описывали этап тестирования в ТЗ».
Когда разобрали этапы, стало понятно, что дизайн нужно разделить и на направления. Например, есть коммуникационный – сюда входит маркетинг, реклама, баннеры и соцсети. А есть интерфейсный для продуктовых команд. И есть креативный для e-commerce и контентных сайтов, где можно «насыпать» прекрасностей. Этапы у них похожи, а вот процессы внутри разные. Тот же UI/UX плотно пересекается с аналитикой: они смотрят на него со стороны исследования, а мы со стороны переноса на визуал. Мы, конечно, спорили, стоит ли им вообще делать UI/UX-аналитику, если дизайнеры в ней шарят больше. В итоге мы поделили, какую информацию аналитики отдают клиенту, а какую мы оставляем себе.
Сколько экранов нужно, чтобы войти в систему
Когда процесс разобран на небольшие шаги, встаёт вопрос, что из него можно отдать нейронке. Мы начинаем с конечного результата: берём любой этап и задаём себе один вопрос – что здесь должно получиться в итоге? Визуал и дизайн пока неважны, надо понять, что мы хотим получить.
Пока сам не понимаешь, к чему идёшь, бежать можно бесконечно и нейронка за тебя не догадается. А как только результат понятен, всё становится на свои места.
Например, возьмём авторизацию. Кажется, всего один экран? А вот и нет. Вход по телефону, по электронной почте, через социальные сети и по коду подтверждения, где плашка с полем для цифр – всё это нужно отрисовывать.
Если это регистрация на сервисе или в интернет-магазине, добавляются анкеты для физлица и юрлица – две разные формы с совершенно разными полями. Плюс экран «Спасибо, всё окей». Ради того, чтобы человек просто вошёл в систему, нужно семь экранов, а с обработкой ошибок и пустыми состояниями ещё больше!
Отрисовать всё это руками – несколько часов. При этом нейронка эти паттерны уже знает: как выглядит форма входа, где расположить кнопки и как оформить ошибки. Поэтому большая часть работы становится механической.
Выгрузка готового из нейронки в Figma занимает около 10 минут: собирается скрипт, ты перетаскиваешь блоки, потом проверяешь и правишь если сильно нужно.
Отдаю аналитику на первое ревью
Так я начала с проектирования, а точнее с аналитики. Первое, что тут можно делегировать – это загнать в нейронку всю аналитику по проекту. Понятно, что большой документ она целиком не переварит. Вернее, переварит, но выдаст не то, на что ты рассчитывал, да и проверять все скопом сложновато. Поэтому идём итерациями и скармливаем разделы по частям, например, по пунктам меню.
Так нейронка делает работу первого ревью, а мы просто говорим: «Найди несостыковки, логические дыры и противоречия и разложи по критичности – сначала суперкритичное, потом некритичное, а потом совсем мелочь».
Мы всё-таки люди и ошибаемся, поэтому в аналитике может не оказаться целого куска функционала, и нейронка это выцепит. Она тоже косячит: может что-то проглядеть или объявить ошибкой то, что сделано специально. Но решаю всё равно я сама: захочу поменяю, а захочу нет. Что-то додумываю, что-то прошу нейронку докрутить, а потом проверяю её решение.
Вот это очень удобно. Ты не тратишь время на суперпогружение, а читаешь выжимку и проваливаешься только в спорные места. Ревью аналитики стало первой работой, которую мы смогли отдать нейронке.
Собираю прототип и проверяю за нейросетью
Дальше мы взялись за проектирование. Нейронки показали себя отлично. Мы задаём паттерны и подбираем референсы: похожие продукты, конкурентов или просто то, что нравится. А иногда сервис уже есть и его надо улучшить, тогда загоняем его.
Потом прописываем: примени лучшие практики и собери прототип одного раздела меню. И она делает: устраивает – забираешь, а не устраивает – пишешь, что именно не так, и гоняешь следующую итерацию. Пока настраиваешь систему, может уйти до нескольких часов, но после всё идёт как по маслу и процесс занимает не более 10 минут.
Естественно, всё надо перепроверять. Финал сверяет аналитик, потому что он глубже всех погружён в предметку. Дизайнер тоже смотрит: логику-то мы сделали, но визуал должен быть корректным. Это сильно сокращает время на ресерч решений. Нейронка классно работает как консультант или генератор идей. Мы всё реже стали попадать в тупик при продумывании того или иного решения. При том, что стопроцентного попадания в цель может и не быть, но думать стало однозначно легче.
Особенно хорошо это работает на интерфейсах. Там есть паттерны, компоненты и понятные правила, которые можно задать заранее: скругления, селекты, как элемент выглядит и как открывается.
А чтобы ИИ следовал нашему стилю, можно отрисовать один-два прототипа в Figma, подцепить к ним нейронку и сказать: вот в таком ключе мне рисуй и в таком дизайне. Если дать ей ещё и UI-кит, она соберёт остальные экраны с высокой точностью. Так мы отдали нейронке и проектирование.
Показываем клиенту прототип в HTML вместо макетов в Figma
Затем у нас вылез ключевой вопрос: где ещё внедрить ИИ? Мы уходили от Figma как основного инструмента проектирования. Мне так и сказали: всё, никакой Figma, это прошлый век. Какая Figma в двадцать шестом году?! Мы поплакали, покакали и пошли дальше. А когда я пришла с этим к команде, она посмотрела на меня как на сумасшедшую.
Мои страхи были очевидны. В Figma удобно показывать объём: клиент платит за проектирование, заходит в файл, а там 557 прототипов. И сразу видно – отработали, молодцы.
А если проект собран в нейронке, в каком виде его нести? HTML, PDF или макеты? Я задала этот вопрос. Мне ответили: потом решим. Вот тогда я и поняла, что это путь в никуда – способ презентации надо понимать заранее, а не искать в последний момент.
В итоге мы стали показывать клиенту HTML-прототипы. Получилось прикольно: почти готовый сайт, только ещё не разукрашенный. Бэк не подключен, а оболочка работает.
Клиент попался очень лояльный и ему зашло. Круто было именно то, что клиент мог потрогать продукт. Проект уже жил, показывал то, что должен был, и не в статике. Но мы все понимаем, что всё может быть абсолютно по-разному. Единственное неудобство, которое возникло – неудобно было оставлять комментарии, в отличие от Figma, но и это дело решаемо.
Можно было добавить карточку клиента, удалить её, прочитать уведомления и пройти по сценариям. Весь функционал, описанный аналитиками, был кликабельным. Обсуждать продукт по такой оболочке оказалось удобнее, чем листать статичные макеты.
Что отдали нейронке, а что рисуем руками
Дальше начался этап дизайна. К тому моменту я сделала на нейронке четыре проекта. Шли мы всё тем же путём: Figma не пользуемся и выживаем как можем. Один проект у нас получился как два. Была публичная часть и личный кабинет.
ЛК мы полностью сделали нейронкой: и прототипирование, и проектирование, и дизайн. Отрисовали концепцию и отдали нейронке, а дальше она подобрала цвета и собрала остальные экраны. Шик, блеск, красота!
Публичную часть прототипировали руками, потому что там важен визуал. Личный кабинет – это внутрянка, а публичка должна быть ещё и красивой. Зато вёрстку отдали нейронке и здесь всё сработало классно.
Только не каждому проекту подходит ИИ. Если это интерфейсная работа на понятных паттернах, с выпадашками и плашечками – нейросеть справляется. В креативном дизайне необходимо «чувство прекрасного» человека – и тут начинается пробуксовка.
Мы пытались выжать из неё креативные макеты: меняли подходы, переписывали промпты и дорабатывали руками. И каждый раз упирались в одно и то же.
Нейронка – это вещь математическая. Она разбирает готовые паттерны и собирает новое из того, что уже видела, то есть делает шаблон высокого качества. Можно упороться, умереть и воскреснуть, пока добиваешься нужного, и всё равно получится не то, а часов уйдёт гораздо больше. Каждый креативный макет уникальный. На него можно потратить больше времени, чем опытный дизайнер потратил бы руками. Смысла в этом нет.
Для интерфейсов нейронка работает, а для творчества пока нет. Может, через год граница сдвинется, но сегодня она проходит именно здесь.
Сколько это дало в часах и деньгах
Самое интересное вскрылось уже после проекта. На реализации личного кабинета и публички мы сократили этап проектирования на две недели.
Скажу честно: две недели мы сэкономили не только благодаря нейронке. Мы одновременно внедряли новые процессы, а это само по себе занимает много времени. Проверяли гипотезы – а сработает ли так, а с этого ли начать. Будь процесс уже отлажен, экономия вышла бы даже больше.
Сначала пробовали Claude Design, а потом поняли, что нам больше подходит Claude Code (вы можете юзать Codex или настраивать ряд агентов из разных нейросетей – как душе угодно). Он собирает всю документацию и изменения, пишет тот самый CHANGELOG.md. Оттуда я всё перенесла в GitHub, где команда видит актуальное состояние проекта в режиме реального времени. Про репозиторий расскажу отдельно.
Эффект догнал нас и на этапе разработки. Средние цифры приведу ниже, но по одной странице разница следующая: я развернула её в нужном стеке за час-полтора, а разработчик сказал, что делал бы ту же страницу пять-семь часов.
Основная работа была сделана раньше: продуманная логика, собранные прототипы и состояния. Оставалось довести свои прототипы до финального вида.
Умножить эту разницу на каждую страницу, а сверху ещё на стоимость часа, которую компания продаёт клиенту, – и речь уже про экономику всего проекта.
Итог
Нейронка помогает мне избавиться от рутины. Те семь экранов авторизации, на которые уходил целый день, – это ровно та работа, которую человек вообще не должен делать вручную.
Работает это не везде, да. Где есть паттерны и правила, нейронка следует стилю и добивает остальное, но где нужна идея – выигрывает дизайнер с руками. Эту границу мы нащупали на публичке и до сих пор считаем её правильной.
На каждом этапе путь был один и тот же. Сначала я разбиралась, как устроен этап и где человек принимает решение, а где по десять раз повторяет одно и то же действие. И только после этого обращалась к нейросети. Выдумывать задачи под ИИ не пришлось ни разу.
Поэтому внедрение прошло спокойно: мы никого не заменяли. Сначала процесс, потом подключение нейронки, и никак не наоборот. А эксперимент у нас всё ещё идёт – об этом расскажу в следующих статьях.
Экономическая выгода внедрения:
Загрузка...
