AI выдал плохой результат — как это заметить до того, как увидит заказчик

## Почему это важно именно сейчас

Опытный дизайнер Гэри Саймон — 20 лет в UI/UX, миллион подписчиков на YouTube — тестировал обновлённый Google Stitch сразу после его выхода в марте 2026. Дал инструменту задачу: сгенерировать лендинг по PRD. Генерация заняла минуту. Результат он охарактеризовал как «по-прежнему посредственный»: размытая цветовая схема, плоская иерархия, спорные решения на уровне секций.

Это не частный случай. Это системная черта AI-дизайна: инструмент оптимизирует под «в целом нормально», а не под «хорошо для конкретного контекста». Разницу между этими двумя состояниями дизайнер должен замечать сам.

## Сигнал 1. Иерархия плоская — взгляд не знает, куда идти

Открываете результат и за первые три секунды не понимаете, на что смотреть. Всё примерно одинакового веса: заголовки не сильно крупнее подзаголовков, кнопки не выделяются среди карточек, акценты расставлены везде — а значит, нигде.

AI выстраивает иерархию «по умолчанию»: H1 крупнее H2, H2 крупнее тела — и на этом всё. Этого недостаточно. Хорошая иерархия делает очевидным следующий шаг пользователя без объяснений.

Как проверить. Размойте экран до нечёткости или посмотрите на него с расстояния вытянутой руки. Что выделяется? Если ничего конкретного — иерархия не работает.

Как исправить. Дайте уточняющий промпт: «Усиль визуальный контраст между основным заголовком и остальными элементами. Главная кнопка должна быть самым заметным интерактивным элементом на экране». Или исправьте размеры и веса вручную в Figma.

## Сигнал 2. Цвета выглядят «нормально», но не работают на задачу

AI выбирает цвета, которые гармонично смотрятся вместе — это он умеет хорошо. Но гармония и функциональность — разные вещи.

Типичная ситуация: акцентный цвет используется и для кнопок, и для иконок, и для подчёркиваний, и для бейджей. В результате он перестаёт быть акцентом — он просто цвет интерфейса. Кнопка не выделяется, CTA теряется.

Другой паттерн — приглушённая, «воздушная» палитра, которая выглядит стильно на скриншоте, но на реальном экране в дневном освещении теряет контраст и становится нечитаемой.

Как проверить. Посмотрите на экран и ответьте: куда нужно нажать? Если акцентный цвет не ведёт к действию — он декоративный, а не функциональный. Отдельно проверьте контраст текста через Contrast Checker — минимум 4.5:1 для основного текста.

Как исправить. Зарезервируйте акцентный цвет только для основного CTA. Всё остальное — нейтральные оттенки основной палитры.

## Сигнал 3. Иконки из разных визуальных языков

Один из самых частых артефактов AI-генерации, который не замечают с первого взгляда.

Stitch или Figma Make берут иконки из того, что доступно — и в одном экране могут оказаться outline-иконки рядом с filled, thin-иконки рядом с bold, иконки с разным скруглением углов. По отдельности каждая выглядит нормально. Вместе — интерфейс выглядит несобранным, даже если вы не можете сразу сформулировать почему.

Заказчик это чувствует как «что-то не так», хотя не может назвать конкретно. Дизайнер должен называть конкретно.

Как проверить. Выпишите все иконки на одном экране. Они из одной библиотеки? Одинаковый стиль (все outline или все filled)? Одинаковая толщина линий? Одинаковое скругление?

Как исправить. Выберите одну иконочную библиотеку на весь экран — и замените все иконки на неё. В Figma это быстро через плагин Iconify.

## Сигнал 4. Текст не проверен на реальных данных

AI заполняет интерфейс идеальными заглушками: имена ровно одной длины, описания точно помещаются в блок, числа красивые и круглые. Реальные данные так не работают.

Имя пользователя может быть «Александра Петровская-Воронцова» — и оно не влезет в карточку. Описание товара может быть однострочным или восьмистрочным. Сумма может быть «1 234 567,89 ₽» — и поломает выравнивание.

Если не проверить это до показа, заказчик проверит сам — вставит реальные данные и увидит, что макет рассыпается.

Как проверить. Замените все заглушки на реальные или реалистичные данные: длинное имя, короткое описание, нулевое состояние (пустой список), очень длинное число. Посмотрите, что происходит с лейаутом.

Как исправить. Auto Layout с правильными параметрами — min/max ширина на текстовых блоках, text truncation там где нужно, числовые поля с достаточной шириной для реальных значений.

## Сигнал 5. Генерик-визуал без связи с продуктом

AI не знает, что за продукт вы делаете. Он знает, как выглядят похожие продукты в интернете. И генерирует усреднённое.

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

Это особенно заметно когда заказчик смотрит на конкурентов и видит, что его интерфейс выглядит как их интерфейс, только хуже сделан.

Как проверить. Уберите логотип и название продукта с макета. Понятно ли, что это за продукт и для кого? Если нет — дизайн слишком обобщённый.

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

## Сигнал 6. Отступы непоследовательные

Смотрите на экран — и он «немного неровный». Между карточками разные промежутки. Внутренние отступы у похожих блоков разные. Элементы не выстроены по одной сетке.

Это один из самых характерных артефактов AI-генерации. Модель понимает концепцию отступов, но не всегда выдерживает систему. Отступы могут отличаться на 2–4px — незаметно при беглом просмотре, очень заметно при внимательном взгляде или при передаче в разработку.

Разработчик это поймает и либо спросит, либо сделает как ему удобнее.

Как проверить. Включите сетку в Figma (Shift+G) и посмотрите, следуют ли элементы ей. Проверьте отступы между похожими элементами — они должны быть одинаковыми.

Как исправить. Зафиксируйте систему отступов кратно 8px (8, 16, 24, 32, 48) и пройдитесь по всему экрану, выравнивая элементы вручную. На сложный экран уходит 10–15 минут — но это делает разницу между «набросок» и «готов к разработке».

## Сигнал 7. Happy path — и больше ничего

AI генерирует идеальный сценарий: данные загружены, пользователь авторизован, список заполнен, всё прошло успешно. Это один из четырёх реальных состояний интерфейса.

Три остальных — загрузка, ошибка, пустое состояние — AI не покрывает, если вы об этом не попросили. И заказчик, который попробует представить, как выглядит пустой список или ошибка загрузки, не получит ответа из макета.

Это не просто пропуск. Это сигнал, что дизайнер не думал о продукте в динамике — только как о статичной картинке.

Как проверить. Для каждого ключевого экрана задайте три вопроса: как это выглядит во время загрузки? Что видит пользователь, если список пустой? Что происходит при ошибке?

Как исправить. Добавьте в промпт явно: «Покажи также empty state для этого экрана — когда список пустой и данных ещё нет». Или сделайте эти состояния отдельными фреймами в Figma — это занимает 15–20 минут, но кардинально меняет восприятие макета.

## Чеклист перед показом заказчику

Быстрая проверка — до отправки или до демо. Достаточно пяти минут.

Иерархия
☐ За 3 секунды понятно, на что смотреть и куда нажать
☐ Главный CTA визуально выделяется среди остальных элементов

Цвет
☐ Акцентный цвет используется только для действий, не декоративно
☐ Контраст текста ≥ 4.5:1 (проверить через Contrast Checker)

Консистентность
☐ Все иконки из одной библиотеки, одного стиля
☐ Отступы между похожими элементами одинаковые
☐ Типографика использует стили, не произвольные размеры

Реальные данные
☐ Длинное имя/название влезает в блок
☐ Пустое состояние проверено
☐ Числа с реальным количеством знаков не ломают лейаут

Состояния
☐ Показано хотя бы empty state для списков
☐ Показано состояние загрузки для ключевых блоков

Контекст продукта
☐ Без логотипа понятно, что за продукт и для кого

## Как встроить проверку в воркфлоу

Проверка не должна быть отдельным этапом, который можно пропустить под дедлайном. Удобнее встроить её в конец каждой итерации — буквально как последний шаг перед тем, как отправить ссылку.

Повесьте чеклист прямо в Figma-файл — отдельный фрейм рядом с макетом. Или держите его как сохранённый промпт для Claude: «Вот макет, проверь по этим критериям и скажи, что требует доработки». Это работает — модель хорошо видит проблемы иерархии, консистентности и отступов по описанию или скриншоту.

Цель не в том, чтобы довести каждый экран до идеала перед первым показом. Цель в том, чтобы заказчик видел проблемы, которые вы уже знаете и контролируете — а не те, о которых вы не подозревали.