ПРАКТИЧНІ НОТАТКИ / ОЛЕГ ГЕБЕЛЬ
Як зупинити розбіжності UI під час роботи AI-агентів
Проблема часто в тому, що правильне правило складніше знайти, ніж вигадати правдоподібне локальне рішення.
Цикл розбіжностей
AI-агент добре створює компонент, доречний у поточному контексті. Кожен локальний успіх може додати трохи іншу кнопку, картку, відступ або стан. Продукт продовжує компілюватися, але система поступово розходиться.
Цикл починається з нечіткої задачі: «додай картку оплати» описує функцію, але не правила продукту. Агент бачить сусідній код, не знаходить канонічний компонент, вигадує локальний варіант. Збірка проходить. Новий дублікат стає прецедентом для наступної генерації.
Найнебезпечніше, що така помилка часто є цілком коректним кодом. Звичайні функціональні перевірки можуть не помітити її.
Самих промптів недостатньо
«Використовуй нашу дизайн-систему» — правильний напрям, але слабка інструкція для виконання. Яка кнопка основна? Який варіант для небезпечної дії? Де токени відступів? Коли можна створювати новий компонент?
Правила мають вести до конкретних джерел, прикладів і рішень. Це задача доступності контексту, а не прикрашання запиту.
П’ять способів розірвати цикл
1. Зроби канонічні компоненти найпростішими для пошуку. Одне очевидне місце, прямі посилання в правилах, визначений переможець серед дублікатів. Спочатку повторне використання, потім розширення, новий компонент — лише для справді іншої взаємодії.
2. Давай токенам семантичні назви. Значення кольору не пояснює призначення. text-muted, surface-danger, space-section та radius-control передають намір. Узгоджуй словник між Figma, CSS і правилами агента.
3. Посилайся на приклади замість копіювання всієї системи. Корисне правило містить обов’язкову поведінку, канонічний файл, джерело токенів, один-два небажані приклади та перевірку результату.
4. Показуй межі. Замість «узгоджуй відступи» — «використовуй шкалу з tokens.css; нове значення потребує обґрунтування». Замість «користуйся кнопками» — конкретний компонент і пакет.
5. Перевіряй відповідність системі. Чи з’явився новий колір, радіус, відступ, компонент або спосіб завантаження? Чи це свідоме рішення? Лінтинг допомагає, але візуальний та інтеракційний перегляд усе ще потрібні.
Мінімальний набір правил
Глобальні правила: принципи взаємодії, адаптивність, доступність і межі локальних змін. Правила компонентів: бібліотеки, варіанти та порядок розширення. Правила токенів: джерело кольору, шрифту, відступів і руху. Правила перевірки: що дослідити до завершення задачі.
Ознаки недостатнього контексту
Команда повторно виправляє одну категорію помилок. Агенти створюють примітиви, які дизайнери не погодили б. Кожен запит потребує довгих пояснень і скриншотів. Це означає, що продуктовий намір ще не став частиною середовища роботи.
Мета — зменшити повторне виправлення, зробити відхилення помітними та полегшити правильний вибір. Жоден файл правил не замінює продуктового судження та перевірки.
Українська редакція матеріалу. Повний англомовний оригінал ↗