ИИ в дизайне: гемы, плагины и агенты

AI TechTalk — внутренняя встреча OneTwoTrip, на которой команды делятся своими кейсами использования ИИ: с удачными решениями и фейлами. Как говорится, честно. Без паники. Максимально понятным языком.

На этот раз коллеги говорили о дизайне. Разобрали, как с помощью ИИ держать единый визуальный стиль, быстрее моделировать 3D и подбирать фотографии, писать собственные плагины для Figma и отдавать агентам рутину, на которую раньше уходили часы. А заодно — где всё это действительно экономит время, а где нейросети пока сами становятся отдельной задачей.

Один из самых показательных кейсов — производство 3D-иллюстраций. Проблема была не только в том, что 3D требует много времени. У команды не было единого визуального языка: иллюстрации делались под конкретные задачи и постепенно начинали отличаться друг от друга.

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

Из этого получилась подробная инструкция для гема. Внутри сделали несколько веток: для классических 3D-композиций, объёмных иконок и генерации по карандашному наброску. Последняя оказалась скорее инструментом для быстрой прикидки, зато в остальных случаях этапы моделирования и рендеринга получилось практически схлопнуть до промпта и финальной доводки.

Здесь хорошо виден общий принцип: прежде чем автоматизировать дизайн, приходится сначала самим понять, из каких правил он состоит. И это часто самая трудоёмкая часть.

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

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

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

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

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

Сам промпт генерирует Gemini, а изображение — Midjourney. Разделение получилось не случайным: первая модель лучше справляется с частью подготовительной работы, а вторая даёт нужную стилизацию и позволяет сделать фотографию менее похожей на типичный сток.

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

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

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

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

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

Так появился, например, плагин для генерации QR-кодов прямо внутри Figma. До этого их делали во внешних сервисах, скачивали, загружали обратно и вдобавок получали разные скругления и стили. Новый плагин сразу создаёт QR-код по правилам айдентики и отдаёт его в векторе. Код для него написали с помощью Codex.

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

Вместо этого сначала написали скрипт, который анализирует PNG, определяет преобладающий цвет и находит ближайший вариант в заданной палитре. Потом на основе тех же данных появился плагин, который собрал в Figma таблицу сразу для всех 255 стран. На всю задачу ушло меньше четырёх часов — по оценке команды, вручную понадобилось бы минимум втрое больше.

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

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

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

Следующий уровень — работа не с отдельной функцией внутри Figma, а с агентом, которому можно описать задачу целиком.

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

Но чем шире задача, тем заметнее ограничения.

В другом кейсе агенту поручили заменить обложки сразу в сотнях Figma-файлов. Первая попытка закончилась фиаско: агент начал изучать всё подряд, ушёл не туда и потратил около 170 тысяч токенов…

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

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

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

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

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