Claude + Figma

Я создал агента на базе Claude Code, который берёт url страницы Figma и автоматически проводит UX-аудит макетов, добавляя аннотации к конкретным элементам дизайна. Агент обучен по методологии аудита, которую я разработал сам – туда входят названия и описания хороших UX-принципов, оценка их важности и правила оценки элементов интерфейса.

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

Но что делать, если макетов в Figma нет, только скриншоты? Для этого сценария я обучил и Claude, и Notion AI и написал скрипт, который подсвечивает конкретные элементы интерфейса прямо на скриншотах. Ещё я выгружаю статистику просмотров страниц из Amplitude (это можно автоматизировать, но об этом позже) и добавляю её как весовой коэффициент для оценки.

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

Оценив результаты, могу сказать, что Claude неплохо находит UI-проблемы, несогласованности и опечатки, но пока не способен обнаруживать более фундаментальные UX-проблемы – в основном из-за непонимания связей между экранами. Тем не менее результаты автоматического аудита можно использовать для обучения начинающих дизайнеров.

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

В итоге я остановился на таком процессе: во время встречи в Zoom с другим дизайнером мы обсуждаем продукт, делаем скриншоты, подсвечиваем UX-проблемы и, что важнее всего, записываем аудио (каждый участник – на отдельную дорожку). Затем аудио расшифровывается и отправляется AI-агенту вместе со скриншотами. Обработав эту информацию, агент размечает скриншоты, заполняет таблицы с нарушениями UX-принципов и создаёт статью в Notion. Остаётся лишь попросить агента ещё раз проверить скриншоты и заметить то, что мы могли упустить. Затем ИИ выбирает 7 самых важных исправлений; мы выбираем из них 5 и отправляем статью product owner для финального решения (надеюсь, он не будет принимать его с помощью ИИ).

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

Я большой поклонник ИИ, я посвятил ему годы учёбы в университете и использую его и в работе, и в хобби-проектах. Но мой вывод может прийтись по душе не всем из-за своей прямоты. Сейчас самые эффективные применения LLM в продуктовом дизайне – это распознавание и расшифровка речи, а также автоматическое форматирование документов. Раньше этого можно было добиться кодом на Python или через Apple Automator, а теперь это стало доступнее широкой аудитории – благодаря тому, что компьютер понимает естественный человеческий язык. Встроенный в Figma ИИ пока довольно ограничен и реально полезен лишь для исправления ошибок, которые обычно делают только новички.

Claude Code всё ещё очень плохо создаёт компоненты в Figma, и опытному дизайнеру в итоге приходится переделывать абсолютно всё, что он выдаёт.

Иначе говоря, в продуктовом дизайне ИИ пока не ускоряет работу и не повышает качество. Если вы хотите обучить ИИ на будущее, делайте это системно: наймите системного аналитика для детальной документации, дождитесь появления Frontier Tuning и других подобных технологий для обучения локальных моделей и купите нужное оборудование. Хорошего результата не добиться, просто велев всем сотрудникам как-нибудь использовать ИИ.

Звучит пессимистично? Нет, просто дайте дизайнерам пользоваться любыми инструментами, какими они хотят. ИИ повсюду, и люди используют его, даже не замечая этого. Избежать ИИ сейчас невозможно. Код этого сайта на 50% сделан ИИ. Настаивать на «использовании ИИ» сейчас – всё равно что 10 лет назад настаивать на «компьютерной грамотности». Умелые профессионалы давно пользуются автоматизацией, начиная с создания макросов для Photoshop. Профессионал никогда не упустит возможности автоматизировать и ускорить свою работу. Об этом не беспокойтесь. Вместо этого сосредоточьтесь на найме талантливых людей.