Ошибки и особенности AI в интерфейсах
На скриншоте всё может выглядеть хорошо. Попробуйте кликнуть у края поля, прокрутить список и открыть страницу на телефоне.
Сравнить примерыи поведение элементов
Скопируйте промпт под нужным примером и отправьте AI в своём проекте.
Края поля не реагируют на клик
Поле видно до рамки, а курсор появляется только рядом с текстом. Пустые области по краям не принимают клик.
Попробуйте кликнуть у левого края
Пустота слева и справа принадлежит обёртке.
Вся область внутри рамки принимает клик
Отступы находятся внутри самого input.
Проверьте: нажмите слева от текста, затем справа. В исправленном поле появляется курсор; текст можно выделить обычным способом.
Промпт для исправления
Свернуть
Выпадающий список в стиле браузера
Поле выглядит как часть сервиса, но после нажатия появляется системный список. Стрелка при этом часто прижата к рамке.
Откройте системный список
Справа 2 px, меню оформляет браузер.
Свои пункты, фон, выбранное состояние и отступы.
Проверьте: откройте оба списка, выберите длинный пункт. В исправленном варианте проверьте клавиши со стрелками, Enter и Escape.
Промпт для исправления
Свернуть
Календарь в стиле браузера
У поля свои цвета и отступы, а открытую панель календаря оформляет браузер. Сравните её с календарём в стиле сервиса.
Нажмите на значок календаря
Панель календаря зависит от браузера и ОС.
Поле и раскрытый календарь оформлены вместе.
Проверьте: откройте календари, смените месяц и выберите день. В исправленном варианте сравните левый отступ текста и правый отступ иконки.
Промпт для исправления
Свернуть
Выбор времени в стиле браузера
Поле оформлено в стиле сервиса, а список часов и минут открывается в оформлении браузера.
Откройте выбор времени
Внешний вид панели задаёт браузер.
Список времени повторяет стиль поля и сервиса.
Проверьте: выберите время мышью, клавиатурой и касанием. Проверьте читаемость значений и одинаковые отступы у текста и иконки.
Промпт для исправления
Свернуть
Календарь меняет высоту при смене месяца
В календарной сетке бывает разное число недель. Если панель выровнена по центру и меняет высоту, вместе с ней двигаются месяц, стрелки и нижняя кнопка.
Высота зависит от количества недель.
Шесть строк сохраняют геометрию панели.
Проверьте: переключите февраль, март и май кнопками над примерами. Следите за названием месяца, стрелками и нижней кнопкой; в исправленном варианте их положение сохраняется.
Промпт для исправления
Свернуть
Текстовые символы вместо SVG-иконок
Стрелки и знаки набраны текстом. У них разные пропорции, толщина и положение относительно подписи.
Вид символа зависит от выбранного шрифта.
Один размер, одна толщина, общая сетка.
Форма SVG задана независимо от шрифта.
Проверьте: сравните размеры и толщину. Для кнопки с одной иконкой проверьте доступное название.
Промпт для исправления
Свернуть
Предлог остаётся в конце строки
Короткое слово отрывается от следующего. На другой ширине тот же дефект появляется в новом месте.
Сохраните материалы для
следующего занятия
Перенос намеренно оставлен для демонстрации.
Сохраните материалы для следующего занятия
Предлог связан со следующим словом.
Проверьте: сузьте окно. Предлоги, союзы, частицы и английские артикли должны переноситься со следующим словом; тире не должно начинать строку.
Промпт для исправления
Свернуть
Скроллбар отступает от края окна
Внутренний отступ задан всему окну. Вместе с содержимым от края отступает и полоса прокрутки.
Материалы занятия
Прокрутка отступает от правого и нижнего края.
Материалы занятия
Скроллбар у края; отступы сохраняются у текста.
Проверьте: прокрутите оба списка колёсиком, жестом и клавишами. Сравните правый и нижний края. ОС может скрывать полосу до начала прокрутки.
Промпт для исправления
Свернуть
Слайдер обрезается раньше края экрана
Общий отступ страницы случайно стал границей обрезки. Следующая карточка исчезает раньше края экрана.
Обрезка происходит на внутреннем отступе.
Текст выровнен, карточки уходят к краю экрана.
Проверьте: прокрутите карточки или нажмите стрелку. Сравните место обрезки с внешним краем демонстрационного экрана.
Промпт для исправления
Свернуть
Акцентная полоса обрезается на углах
Толстую линию прижали к скруглённому краю. На стыке она сужается или резко заканчивается и выглядит случайной.
У каждого блока должна быть понятная задача.
Сравните примеры перед проверкой.
Полоса слева и полоса сверху спорят со скруглением.
У каждого блока должна быть понятная задача.
Сравните примеры перед проверкой.
Маркер отделён от края, вторая карточка без полосы.
Проверьте: посмотрите на окончания линий и углы. Декор должен совпадать с согласованным стилем и не создавать случайных срезов.
Промпт для исправления
Свернуть
Общие фразы вместо описания функций
Текст обещает удобство или результат без конкретики. Читатель не понимает, что умеет продукт и что произойдёт после нажатия.
Все замены — вымышленные учебные примеры. Для реального продукта сначала проверьте факты.
Проверьте: спросите у каждой фразы: что человек сделает и какой результат увидит? Если ответа нет, нужна конкретика.
Промпт для исправления
Свернуть
Текст кнопки смещён из-за отступов
У прозрачной кнопки есть внутренний отступ. Фон появляется только при наведении, поэтому до наведения подпись выглядит сдвинутой относительно соседнего текста.
Материалы курса
Записи прошедших занятий
До наведения текст сдвинут вправо на 16 px.
Материалы курса
Записи прошедших занятий
Текст всегда стоит на линии заголовка.
Проверьте: наведите курсор, затем уйдите с кнопки. Пройдите к ней клавишей Tab. Подпись и соседние блоки не должны смещаться.
Промпт для исправления
Свернуть
Эффект наведения залипает на телефоне
После касания эффект наведения может сохраняться. Подсказка остаётся открытой, а для действия иногда требуется повторное нажатие.
Практика по вёрстке
Нажмите на карточку
Симуляция показывает залипание hover
В симуляции карточка сохраняет эффект наведения.
Практика по вёрстке
Действие доступно сразу
Касание меняет состояние кнопки
Кнопка работает независимо от наведения.
Проверьте: коснитесь карточки и нажмите «Добавить в список». Затем проверьте на настоящем телефоне: симуляция объясняет дефект, но не заменяет такую проверку.
Промпт для исправления
Свернуть
Документ открывается вместо текущей страницы
Ссылка на документ, соцсеть или другую страницу открывается в той же вкладке. Читатель уходит из материала и может потерять введённый текст.
Документ заменяет форму в этой области.
Документ открывается отдельно, заметка остаётся в форме.
Проверьте: введите текст в обе формы и откройте документ. В примере с ошибкой документ заменит форму. В исправленном варианте документ откроется в новой вкладке, а заметка сохранится.