Playwright CLI Skill — Детерминированный AI-аудит интерфейса

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

Мы больше не используем «магический ИИ», который просто смотрит на скриншот и говорит «вроде нормально».

У нас теперь повторяемый инженерный процесс — как автотест, только в 10 раз быстрее и умнее.

ИИ управляет реальным браузером, снимает точные метрики каждые 100 мс, фиксирует визуальные артефакты, ловит ошибки и сразу привязывает каждый баг к конкретной строке кода в вашем проекте — это и есть Детерминированный AI UI Audit.

## Стек

• Playwright CLI Skill — управление реальным браузером из терминала (официальный инструмент Microsoft 2026)
• AI-агент (Claude / Cursor / Grok / Codex) — строит сценарии, анализирует скриншоты и логи
• ripgrep (rg) — мгновенный поиск по всему коду для root-cause

## Полный 7-шаговый процесс

1. Фиксируем профиль теста
   Один и тот же viewport (393×852 — iPhone 14/15), одна среда (staging или preview), один и тот же набор маршрутов.
   Пример команды:

   bash копировать

   playwright-cli open https://staging.yourapp.com --viewport=393,852

2. Строим карту экранов
   ИИ читает ваш routing.ts / app/routes / Next.js App Router и генерирует полный список страниц + пользовательских путей.
   Промпт для этого шага ниже.

3. Прогоняем навигацию через реальный браузер
   ИИ по очереди открывает все экраны и выполняет базовую навигацию (клик по табам, открытие модалок и т.д.).

4. Снимаем метрики «прыжков» (layout shift)
   Каждые ~100 мс читаем getBoundingClientRect() ключевых блоков (header, CTA-кнопки, карточки, контейнеры).
   Считаем максимальный сдвиг по X/Y за сессию.
   Результат: «max shift = 57 px на карточке товара».

5. Фиксируем визуальные артефакты
   Делаем 3 скриншота на каждом экране:

   • early — сразу после загрузки
   • mid — через 800 мс
   • settled — после полной стабилизации (network idle + 500 мс тишины)

6. Собираем runtime-ошибки
   Логируем всё:

   • console.error и console.warn
   • HTTP-запросы ≥400
   • Проблемы с ассетами, авторизацией, данными

7. Делаем root-cause анализ
   ИИ получает: скриншоты + метрики + логи + свежий snapshot элементов.
   Он запускает rg "className|id|data-testid" и выдаёт:

   • файл и строку кода
   • приоритет (P0/P1/P2)
   • готовый план фикса

## Что это даёт на практике

• Воспроизводимость 100 % — запустили сегодня, запустили через неделю — результат сравнимый
• Измеримость — баг теперь звучит не «вроде дергается», а «max layout shift 57 px на мобильном, элемент .product-card, строка 142 в ProductGrid.tsx»
• Регрессионная защита — после каждого фикса запускаете тот же аудит и видите: стало лучше или хуже
• Экономия времени — полный аудит приложения из 25 экранов занимает 12–18 минут вместо 3–4 часов вручную

## Ключевой принцип методики

ИИ — это только ускоритель анализа.
Качество даёт именно детерминированный пайплайн:
фиксированные условия → метрики → артефакты → повторный прогон.

## Готовые промпты для Claude / Cursor / Grok (копируй-вставляй)

Промпт №1 — Полный аудит за один запрос

Выполни Детерминированный AI UI Audit для моего приложения.

Профиль теста:
- Viewport: 393x852
- URL: [Ссылка на ваш сайт]
- Маршруты: прочитай файл app/routes.ts и составь полный список

Шаги:
1. Построй карту экранов
2. Открой каждый экран через Playwright CLI
3. Сделай 3 скриншота (early/mid/settled)
4. Измерь max layout shift каждые 100 мс для блоков: header, main, cta-buttons
5. Собери console.error/warn + HTTP >=400
6. Сделай root-cause анализ через rg по коду
7. Выдай таблицу багов с приоритетами P0-P2 и готовыми фиксами

Используй только Playwright CLI Skill команды.

Промпт №2 — Анализ одного экрана

Проанализируй эти 3 скриншота + метрики layout shift + логи Playwright.
Для каждого визуального бага укажи:
- Приоритет (P0/P1/P2)
- Точное место в коде (файл:строка)
- Предлагаемый фикс одной строкой

Промпт №3 — Настройка профиля теста

Создай файл audit-profile.json для Детерминированного AI UI Audit:
- viewport 393x852
- 12 ключевых экранов
- Список селекторов для измерения shift
- Команда запуска через Playwright CLI

## Как запустить первый аудит

1. Установи Playwright CLI Skill
2. Скопируй промпт №1 в Claude/Cursor
3. Попроси ИИ запустить скрипт, если не запустил автоматически
4. Получи готовый отчёт в Markdown + папку с артефактами

## Как поддерживать

• Добавьте аудит в CI/CD (GitHub Actions / GitLab) — запускается после каждого PR
• Храните результаты в Supabase (таблица audits)
• Раз в неделю сравнивайте метрики (max shift должен падать)
• После крупных рефакторингов — запускайте регрессионный аудит

## FAQ

Можно ли использовать без Playwright CLI?
Можно, но потеряете скорость и детерминированность. Playwright CLI — основа методики.

Работает ли на мобильных устройствах?
Да — просто укажите viewport и используйте --device="iPhone 15".

Сколько стоит запуск?
0 рублей, всё локально.

Подходит для больших приложений?
Да. Мы прогоняли аудит на проекте с 47 экранами — 14 минут.

## Итог

Детерминированный AI UI Audit — это не просто «ИИ посмотрел на сайт».
Это инженерный инструмент уровня автотестов, который уже сегодня даёт нам стабильные интерфейсы и уверенность при каждом деплое.

## Что читать дальше

• Docker для новичка: полный гайд по запуску, образам и контейнерам
• Как обновить дизайн сайта с ИИ: быстрый маршрут без хаоса
• Google Stitch — ИИ от Google для UI и кода: три режима Gemini 3 + экспорт в Figma