UX-Auditor

Скилл для автоматического UX-аудита продуктов через Playwright CLI + CDP attach к Chrome + AI-аналитик с эвристиками Нильсена и таксономией dark patterns Brignull.

Не маркетинговый анализ конкурентов и не лендингов. Заходит внутрь продукта, проходит реальный путь пользователя (поиск → товар → корзина → checkout, или логин, или онбординг), собирает скриншоты, и LLM разбирает каждый экран по UX-эвристикам.

Работает на любом сайте и в любом регионе. Для защищённых антиботом продуктов — режим CDP attach с residential-прокси.

Что внутри

• @playwright/cli от Microsoft — token-efficient browser automation специально для AI-агентов
• CDP attach к изолированному Chrome — обход антибота на любых защищённых сайтах
• Локальный mitmproxy — proxy-chain для residential-прокси с auth
• Системный промпт UX-аналитика уровня Lead UX Researcher (Nielsen 10 + Brignull 14 + WCAG 2.2 + законы UX)
• HTML / Markdown шаблоны для поэкранного разбора и сравнительной матрицы N продуктов

Установка

git clone <repo> ux-auditor
cd ux-auditor
bash scripts/install.sh

install.sh поставит Playwright CLI, проверит Chrome, поставит mitmproxy через brew, создаст .env. Если планируешь аудит сайтов с антиботом — впиши параметры residential-прокси в .env.

Использование

Сайты без антибота (большинство западных SaaS, документация, открытые e-commerce)

Прямо через playwright-cli без всякой инфраструктуры:

playwright-cli open https://example.com
playwright-cli snapshot
playwright-cli click e15
playwright-cli screenshot --filename=01.png
playwright-cli close

Сайты с антиботом (маркетплейсы, банки, билетные сервисы, авиа)

# Один раз: стартовать прокси-цепочку и Chrome
bash scripts/start-proxy-chain.sh    # mitmproxy с auth из .env
bash scripts/cdp-launch.sh           # изолированный Chrome через mitmproxy

# Прогон
bash scripts/run-with-cdp.sh <site> <url>

# Когда закончил
bash scripts/cdp-stop.sh
bash scripts/stop-proxy-chain.sh

Cookies сохраняются между прогонами — следующий аудит того же сайта идёт сразу, без повторной каптчи.

Из Claude Code

/ux-audit goal=checkout products=site1,site2,site3

Claude автоматически:

1. Поднимет прокси-чейн если в .env есть креды
2. Откроет изолированный Chrome через CDP
3. Прогонит сценарий из config/goals/<goal>.yaml на каждом продукте
4. Соберёт скриншоты
5. Прогонит через системный промпт UX-аналитика
6. Сгенерирует index.html со сравнительной матрицей + report.md для архива

Структура

ux-auditor/
├── SKILL.md                          триггер для Claude Code
├── README.md
├── .env.example                      шаблон прокси-кредов
├── .gitignore
├── scripts/
│   ├── install.sh                    онбординг от нуля
│   ├── cdp-launch.sh                 запуск изолированного Chrome
│   ├── cdp-stop.sh
│   ├── start-proxy-chain.sh          mitmproxy с auth из .env
│   ├── stop-proxy-chain.sh
│   ├── save-cookies.sh               сохранение state
│   └── run-with-cdp.sh
├── config/
│   ├── products.example.json         шаблон списка продуктов
│   └── heuristics.md                 чеклист Nielsen + Brignull + WCAG
├── prompts/
│   └── ux-analyst-system.md          системный промпт UX-аналитика
├── templates/
│   ├── dashboard-mockup.html         референс HTML-отчёта
│   └── report-template.md            шаблон Markdown
├── examples/                         кейсы как референс
│   └── marketplaces-ru/              пример: 3 маркетплейса РФ
├── cookies/                          state по сайтам (gitignored)
└── reports/                          артефакты прогонов (gitignored)

Residential proxy — какой брать

Скилл работает с любым residential-прокси провайдером. Главное:

• Тип: residential или ISP (не datacenter — антиботы их режут)
• Локация: подходящий регион для целевых сайтов
• Аутентификация: login/password или IP-whitelist
• Объём: 100-500 МБ хватает на разовый аудит 3-5 продуктов

Известные провайдеры:

• Bright Data — top tier, дорого ($500+/мес)
• Smartproxy — средний tier, гибкие тарифы
• Oxylabs — enterprise
• ProxyMesh — простой API
• proxy.market — небольшие пакеты от 49 ₽ за 100 МБ (РФ-локации)

Любой из них подойдёт. В .env.example показан формат — host, port, user, pass.

Никогда не использовать публичные free-прокси для авторизованных сессий — оператор такого прокси видит cookies и может перехватить session. Только для anonymous browsing.

Антибот — как обходим

Современные сайты используют Cloudflare Bot Management, Akamai, DataDome, PerimeterX, reCAPTCHA. Они детектируют headless Chrome по:

• navigator.webdriver свойству
• TLS-fingerprint (Playwright/Puppeteer)
• Behavioral signals (ровные клики, отсутствие скролла)
• WebGL/canvas fingerprint
• IP-репутация (datacenter сразу режутся)

Решение скилла — изолированный Chrome с DevTools Protocol + residential proxy:

1. Запускаем обычный Chrome.app в отдельном профиле (не трогает основной)
2. С remote-debugging-port для DevTools Protocol
3. С proxy-server указывающим на локальный mitmproxy
4. Mitmproxy аутентифицируется в residential-прокси (Chrome не умеет inline-auth)
5. Скрипт через CDP attach управляет этим Chrome

Антибот видит реальный Chrome fingerprint + residential IP — пропускает как живого пользователя.

Если на сайте всё-таки появилась CAPTCHA — пользователь решает её один раз руками в открытом Chrome. Cookies сохраняются в профиле, следующие прогоны идут без повторной каптчи.

Безопасность

• cookies/ и .env в .gitignore — секреты не коммитятся
• Изолированный Chrome profile не имеет доступа к основным закладкам и паролям
• Прокси-чейн через mitmproxy --ignore-hosts '.*' — без MITM-перехвата SSL
• Никогда не использовать публичные free-прокси для авторизованных сессий

Зависимости

• Node.js 18+
• Google Chrome
• Homebrew (для mitmproxy на macOS)
• Claude Code (для запуска через скилл)

Лицензия

MIT.

Автор

Ата — продакт-менеджер, пишу про AI и продуктовые процессы в @ai_vdel. Скилл собрал из реальной задачи команды — присылайте улучшения и сценарии, доработаю.

Если использовал скилл и нашёл интересные UX-паттерны — напиши, заберу в банк находок для будущих постов.