Зачем Mozilla переносит прототипы из Figma в живой код с помощью Claude
Gemini: Claude-код Mozilla пора в релиз. GPT: пока ловит клавиатуру
Mozilla тестирует новый подход к проверке интерфейсов: UX-прототип функции «Report Broken Site» в Firefox для Android собран с помощью ИИ-ассистента Claude прямо в реальном коде приложения, а не как кликабельный макет в Figma. В живом коде работают настоящая клавиатура, ввод текста и динамические данные, поэтому участник теста сталкивается с реальными ограничениями продукта, а не с границами макета. Подход пока требует навыков работы с терминалом и средой сборки, но помогает раньше находить проблемы, особенно в доступности интерфейса.
Команда Firefox в Mozilla применила необычный способ проверки интерфейса: вместо того чтобы собирать кликабельный макет в Figma, она попросила ИИ-ассистента Claude создать прототип функции «Report Broken Site» прямо внутри Android-версии Firefox. Такой подход называют Native Fidelity Prototyping, то есть создание прототипа не на отдельной дизайн-площадке, а в коде реального приложения. Для разработчика это значит, что прототип наследует окружение устройства: настоящую клавиатуру, ввод текста, динамические данные и поведение при смене размера экрана. Эти вещи сложно воспроизвести в статичном макете, поэтому тестирование становится ближе к реальной эксплуатации. Главная проблема обычного кликабельного прототипа в том, что он показывает только заранее продуманные маршруты. Если в макете работает одна кнопка, участник теста начинает угадывать задуманный сценарий, а не свободно исследует интерфейс. Как отмечает команда Mozilla, в такой ситуации люди упираются не в ограничения дизайна, а в границы самого прототипа. В реальном коде, наоборот, сразу видны пропущенные состояния, неоднозначные реакции интерфейса и особые случаи ввода. Поэтому можно раньше обнаружить, где пользователь действительно застрянет. Авторы также ссылаются на наблюдения Nielsen Norman Group: слишком отполированные или медленные прототипы переключают внимание на внешний вид, а не на удобство работы. У метода есть и свои требования. Mozilla прямо называет высокий порог входа: нужны уверенные навыки работы с терминалом, сборочным окружением и средой разработки. Для небольших студий, где нет отдельного разработчика, такой путь сложнее привычного кликабельного макета, в том числе сделанного в открытых инструментах вроде самостоятельно развёрнутого Penpot. Тем не менее индустрия движется в ту же сторону: например, Figma Make связывает инструмент с кодом приложения и генерирует рабочие прототипы на основе текстового запроса, а не просто статичные картинки. Это постепенно сокращает расстояние между черновиком и готовым продуктом. Особенно заметна польза такого прототипирования в теме доступности. С 28 июня 2025 года в Германии действует закон Barrierefreiheitsstärkungsgesetz, который для многих цифровых предложений требует соответствия стандарту WCAG 2.1 AA. Проверить реальную работу клавиатуры или поведение скринридера в Figma-макете почти невозможно. Прототип в настоящем коде наследует эти свойства от устройства, поэтому барьеры становятся заметны на раннем этапе разработки, до того как продукт попадёт в релиз. Для фронтенд-разработчика и UX-специалиста это означает: вместо имитации интерфейса можно сразу тестировать его в той среде, где он будет работать. Пока подход у Mozilla находится в стадии проверки, но он показывает, как ИИ-помощь может сокращать путь от дизайнерской идеи до реального кода и давать более честные данные о юзабилити.