👁 Рубрика: Ультимативна Шпаргалка #8 | Знищуємо UI-баги за допомогою ШІ-зору

Всі ми знаємо цей біль: відкриваєш макет у Figma, відкриваєш тестовий стенд, і починаєш грати в "знайди 10 відмінностей". Кнопка поїхала на 2 пікселі, шрифт не той, контрастність така, що текст зливається з фоном. Це випалює очі, але тестувати верстку все одно треба.

Сучасні ШІ-моделі (Claude 3.5 Sonnet, GPT-4o) вже мають геніальний "зір" (Vision). Замість того, щоб вдивлятися в монітор, їх можна перетворити на безжалісних UX/UI тестувальників.

Ви просто робите скріншот сторінки, закидаєте його в чат і додаєте цей системний промпт:
"Дій як Senior UI/UX QA Engineer та експерт з Accessibility (a11y). Я надіслав тобі скріншот вебсторінки з тестового стенда.

Твоя задача:

Знайди всі візуальні баги: проблеми з вирівнюванням, сіткою, відступами (margin/padding) та накладанням елементів один на одного.

Перевір контрастність: вкажи місця, де текст важко читається або порушені базові правила доступності (WCAG).

Знайди логічні проблеми в UX: чи є на екрані елементи, які виглядають клікабельними, але такими навряд чи є (або навпаки)?

Видай звіт у вигляді маркованого списку з чітким зазначенням проблемних зон на скріншоті."

⚙️ Чому це працює?
ШІ бачить те, що замилене око пропускає після 8 годин робочого дня. Ви отримуєте готовий список візуальних дефектів, перевіряєте їх і відправляєте фронтендеру на виправлення. Це економить купу часу, зберігає ваші нерви і рятує зір.

А як ви тестуєте верстку?

👇
🔥 — Довіряю тільки своїм очам, я бачу кожен піксель!
👀 — Забиваю на дрібниці, головне, щоб бізнес-логіка працювала.
🤯 — Вже давно кидаю скріни в ШІ, нехай він сліпне замість мене.