ИИ-генераторы интерфейсов: почему макет красивый, а UX ломается

Что показали замеры ИИ-генераторов интерфейсов

Цифра, с которой у меня началась эта тема, – 29,0%. Столько сгенерированных экранов прошли проверку по WCAG в работе Web4All 2026: 54 дизайнера сделали интерфейсы руками в Figma, те же задачи отдали шести ИИ-инструментам, суммарно 21 880 проверок. Разброс между генераторами приличный: Figma Make – 33,0%, Banani – 18,4%.

Интереснее, где именно провал. Не в композиции, не в сетке, не в шрифтовой паре. Худшие показатели там, где проверка арифметическая: контраст текста и фона – 26,8%, передача смысла одним лишь цветом – 19,2%. Машина плывёт там, где есть точный порог и ответ «да/нет».

Второй замер, CHI EA 2026, зашёл с другой стороны. 138 мобильных экранов от Figma (47), Banani (34) и Google Stitch (57) прогнали по десяти эвристикам Якоба Нильсена. Со структурой и эстетикой всё хорошо, у Figma почти идеально. Дальше интереснее: помощь и подсказки у неё же – 14,9%, следом проседают восстановление после ошибки, эффективность для опытного пользователя и предотвращение ошибок.

Генератор рисует счастливый путь. Всё, что за его пределами, придумывает человек.

Совпадает с тем, что я вижу в дизайн-аудитах. Экран «список заказов» выглядит собранным. А «фильтр ничего не нашёл», «оплата не прошла, деньги списаны», «связь отвалилась на середине формы» либо отсутствуют, либо нарисованы одинаковой серой плашкой с текстом «Ошибка». Именно тут пользователь решает, остаётся он с продуктом или нет.

Почему просьба «сделай доступно» делает макет хуже

Самый неудобный результат исследования: если добавить в промпт требование соблюдать доступность, соответствие критериям падает. Не растёт, не остаётся на месте – падает.

Авторы называют три причины. Конфликт ограничений: модель тянут одновременно в «сделай красиво» и «сделай контрастно», и она выбирает то, что чаще встречалось в обучении. Неоднозначность: «достаточный контраст» не содержит числа, модель читает это как пожелание, а не как порог 4.5:1. Рассеивание внимания: чем больше требований в промпте, тем хуже выполняется каждое.

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

То же с кодом, который генераторы отдают из макета. В апрельском разборе на Master.dev автор берёт сгенерированный сайдбар – 29 строк – и находит десять нарушений доступности: интерактивные элементы из div вместо кнопок и ссылок, нет списочной разметки, у сворачиваемых пунктов нет aria-expanded и aria-controls, иконки без подписей, с клавиатуры меню не открывается вовсе. Визуально сайдбар безупречен. Разбор качественный, без выборки и процентов, но паттерн знаком любому, кто принимал вёрстку.

С 1 марта 2026 контраст 4.5:1 перестал быть пожеланием

Для российских продуктов у истории появилось юридическое дно. С 1 марта 2026 года действует постановление № 102: официальные сайты госорганов, органов местного самоуправления и подведомственных организаций обязаны соответствовать ГОСТ Р 52872-2019. Навигация с клавиатуры, совместимость со скринридерами, масштаб текста до 200% без горизонтальной прокрутки, мигание не чаще трёх раз в секунду, PDF по ГОСТ Р 70176-2022 или доступная альтернатива. Кнопка «версия для слабовидящих» вопрос больше не закрывает: доступным должен быть основной интерфейс.

Формально это про госсектор. На практике планка ползёт дальше: подрядчик, сдавший портал по этим требованиям, тащит тот же чек-лист в коммерческие проекты, а крупные заказчики спрашивают про контраст и клавиатуру на приёмке. У нас требования из ГОСТа переезжают из проектов для госсектора туда, где их никто не просил.

Где генератор экономит время, а где мы его выключили

Из нашего дизайн-процесса ИИ никуда не денется. На разведке он полезен: пять раскладок главного экрана за десять минут, черновые состояния для разговора с аналитиком, мокап, чтобы показать заказчику развилку и не рисовать три дня вслепую. Config 2026 добавил в Figma кодовые слои, генеративные плагины и агента – идея держать код и макет в одном холсте мне нравится.

Дальше начинаются границы. Четыре вещи генератор у нас не решает.

Состояния. Пусто, загрузка, ошибка сети, отказ платежа, частичный успех, недостаток прав. Список берётся из логики продукта, а не из среднего по интернету.

Доступность. Контраст, фокус, порядок табуляции, подписи к иконкам. Проверяется инструментом и руками, а не обещанием модели.

Дизайн-система. Сгенерированный экран красив ровно один раз. Второй приезжает с другими отступами, третий – с новой кнопкой.

Сложные интерфейсы. Финтех, B2B-дашборды, кабинеты с ролями. Картинка разваливается при первой проверке логикой: генератор не знает, что у пользователя бывает семнадцать договоров и два из них заблокированы.

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

В экспресс-аудите личного кабинета экосистемы Космос логика была та же: сначала неудачные сценарии, потом визуальный слой. Устройство такого аудита в блоге мы разбирали отдельно – «Дизайн-аудит здорового человека».

Чек-лист проверки сгенерированного экрана

Что мы прогоняем перед показом макета заказчику.

1. Контраст основного текста к фону – от 4.5:1, крупного текста и иконок – от 3:1. Пипетка, а не глаз.
2. Ни один статус, ошибка или обязательное поле не обозначены одним цветом. Нужна иконка или подпись.
3. Экран проходится с клавиатуры: Tab, Shift+Tab, Enter, Space. Фокус видно всегда, порядок обхода совпадает с визуальным.
4. Нарисованы четыре состояния: пусто, загрузка, ошибка, частичный результат. Ошибка объясняет, что делать дальше.
5. Текст масштабируется до 200% без горизонтальной прокрутки и обрезанных подписей.
6. Компоненты взяты из дизайн-системы. Отступы, радиусы и размеры кнопок совпадают с соседними экранами.
7. У иконок без подписи есть текстовая альтернатива для скринридера.

Если у вас один лендинг раз в два года, пункты 3 и 5 можно отложить. Если вы делаете кабинет, где человек управляет деньгами или документами, – нельзя.