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

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

Нейросети для дизайнера — это не только ИИ-картинки

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

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

Мы поняли, что можем сделать работу дизайнеров быстрее и эффективнее. Особенно важен такой подход в дизайн-поддержке, когда команде регулярно нужны новые баннеры, презентации и макеты страниц. Чем меньше времени дизайнеры тратят на повторяющиеся операции, тем больше внимания могут уделить самим задачам. Если вам нужна команда для такой работы, свяжитесь с нами через кнопку «Обсудить проект» — разберем объем задач и формат поддержки.

Среди дизайнеров эта практика уже достаточно распространена. Недвний опрос Designer Fund и Foundation Capital «AI in Design» (2026) дает такие цифры: 76% специалистов сферы пробовали ИИ-инструменты для кода, 65% — конкретно Claude Code. И неудивительно, ведь для дизайнера освоение вайб-кодинга — это возможность быстро создать для себя удобные инструменты, не тратя время на поиски разработчика.

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

Плагин Typika от Кирилла Гринько: экономим время на «проверке» шрифтов

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

В основе Typika простая логика: если шрифт есть на Google Fonts, то он бесплатный — подсветка синяя. Если шрифта там нет, но он поддерживает кириллицу — зеленая. Если только латиницу — фиолетовая. По клику плагин ведет либо на страницу шрифта в Google Fonts, либо к его поиску в другом источнике. Также рядом с курсором появляется табличка с названием и кеглем.

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

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

Сначала дизайнер работал в Claude Code, а ближе к концу перешел в VS Code с подключенным расширением: там интерфейс удобнее, поскольку в одном окне видны файлы проекта, чат и код. Это позволяло быстро вносить мелкие правки, такие как размер шрифта, цвет кнопки. По словам Кирилла, в этом тоже помогал ИИ-агент, которому он отправлял запрос «дай мне строчку кода, где это можно менять».

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

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

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

Логобук Uplab от Янины Юллинен: больше ресурса дизайнеров для клиентских задач

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

Дизайнер сделала этот инструмент в формате лендинга, и для нее это был первый вайб-код-проект. Перед стартом Янина прошла внутренний семинар от разработчиков Uplab и дополнила свои знания видеоуроками из открытых источников. Процесс работы с Claude Code она сравнивает со своим прежним опытом работы с нейросетями, для создания изображений и текстов, и отмечает, что сходства много. Только вместо описания света и композиции пришлось формулировать техническое задание: какая нужна анимация и какой плавности, что происходит на каждом экране.

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

Суммарно на работу с Claude Code ушло около шести часов. К этому времени нужно добавить часы, потраченные на изучение рабочей среды по видеоурокам, анализ «лучших практик» логобуков и подготовку макета в Figma. Как считает Янина, для создания простого сайта времени потрачено много, но при более точных промптах время сократилось бы в несколько раз — поэтому следующий проект наверняка получится быстрее.

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

Стоит ли учить дизайн-команду вайб-кодить

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

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