Claude, XCode и 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, я пробовал использовать трафик страницы как оценку серьёзности, но, предсказуемо, мелкая деталь на главной получила более высокую оценку серьёзности, чем критическая проблема на редко посещаемой странице (например, на странице завершения регистрации). Поэтому мы решили пока отказаться от автоматической оценки серьёзности и оставить её на усмотрение человека.

Раньше автоматизации можно было добиться кодом на Python, через Apple Automator или макросами Photoshop, а теперь это стало доступнее широкой аудитории – благодаря тому, что компьютер понимает естественный человеческий язык. Сильнее всего ИИ повысил продуктивность начинающих дизайнеров, а нагрузка на ведущего дизайнера по контролю качества выросла. Профессионалы по-прежнему делают аналогичную работу быстрее и качественней. Но, вероятно, так не будет продолжаться вечно. Если мы хотим идти в ногу с будущим, нужны DesignOps, чтобы обучать локальные модели, и нужное оборудование.

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

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

Анализ исходного кода проходит в 7 этапов и делится на 3 смысловых уровня:

1. Цели, намерения, решения и действия пользователя
2. Что происходит в интерфейсе и какие состояния доступны
3. Что происходит внутри программы, под капотом

ИИ фиксирует результаты анализа, описывает диаграммы на языке Mermaid и проводит внутренние проверки. Визуализация в Figma – отдельный этап.

Честная оценка производительности: Claude Code работал в фоне 1,5 часа, и ещё полчаса ушло на ручную доводку диаграмм. Ещё 1,5 часа Claude Code автоматически делал скриншоты – всё это время пользоваться компьютером было невозможно. Такие задачи можно поручать ИИ на ночь. Обязательно посмотрите итоговую диаграмму в Figma.

Вот несколько примеров интересных находок, которые сделали мои ИИ-инструменты при анализе исходного кода:

• Что видит пользователь: файлы появляются в очереди. Заголовок: «Waiting to copy». Гипотеза: во время фонового сканирования нет индикатора загрузки. Пользователь может засомневаться, сработало ли перетаскивание большого количества файлов.
• Цель пользователя: выбрать, куда копировать файлы. Известный пробел в реализации: нет проверки того, что папка назначения – это сама исходная папка, её подпапка или папка, в которой она лежит.
• Открытый вопрос: гонка при первом запуске через перетаскивание файла: не проверено, какой элемент (панель About или главное окно) окажется сверху. Низкий приоритет.

Помимо инструментов UI-аудита, описанных в начале статьи, мои ИИ-инструменты анализа кода находят недочёты с точки зрения целей и ожиданий пользователя, а также поведения программы – это крайне полезно даже опытному продуктовому дизайнеру.

А вот пример документации, которую целиком написал Claude Code, проанализировав исходный код моей программы. Скриншоты тоже подобрал ИИ. Документация автоматически переведена на 9 языков (я лишь немного поправил тексты на тех языках, которые знаю).