UI Dna

UI DNA

Извлечение дизайн-системы работающей страницы из живого DOM. Ценность одна и конкретная: getComputedStyle возвращает факт, скриншот — повод для догадки. По картинке модель скажет «радиус около 8, шрифт вроде Inter, вес 500»; замер даёт 6px, Inter Variable, 510. Вес 510 не угадывается в принципе.

Чего навык НЕ даёт — прочти до запуска

Токены не равны дизайну. Ты получишь верную палитру и точную сетку отступов, наложенные на свою композицию — а различает сайты в первую очередь ритм, плотность и то, чего на странице нет. Навык снимает ошибки уровня «не угадал шрифт», но не заменяет вкус и не переносит layout. Обещать пользователю «получится как у них» — неверно; правильная формулировка: «визуальный язык будет согласован с референсом».

Запуск

Экстрактор — scripts/extract.js, один файл, целиком является арроу-выражением. Передавай его содержимое как есть, ничего не оборачивая:

• Playwright MCP — browser_evaluate({function: <содержимое файла>})
• claude-in-chrome — javascript_tool

Расширение UIDrop и любые другие ставить не нужно.

Процесс

1. Зафиксируй вьюпорт — browser_resize 1440x1000. Без этого числа несравнимы между прогонами и между сайтами.
2. Загрузи страницу, дождись шрифтов. Если нужен раздел ниже первого экрана — доскроль до него: невидимое в DOM не попадёт в замер.
3. Прогони экстрактор. Вернётся агрегат ~4-6 КБ. Агрегация идёт внутри браузера намеренно: на типовом лендинге 4000+ элементов, подеревный дамп выжег бы контекст без пользы.
4. Сделай скриншот — он нужен для смыслового слоя (характер, ритм, иерархия), которого в числах нет.
5. Интерпретируй по references/interpretation.md и собери отчёт.

Отчёт

Рядом кладутся два файла: UI-DNA.md (человекочитаемый) и ui-dna.json (сырой агрегат). Структура UI-DNA.md:

# UI DNA — <домен>, <дата>, вьюпорт 1440x1000
## Характер            # 2-3 фразы по скриншоту
## Цвета               # фон / поверхности / текст / акцент
## Типографика         # семейства, шкала кеглей, веса, интерлиньяж
## Ритм                # базовая единица, шкала отступов, радиусы
## Компоненты          # кластеры сигнатур: кнопки, поля
## Layout              # ширина контейнера, высота шапки
## Реализация          # CSS-переменные или @theme для Tailwind v4
## Не копировать       # логотип, фото, тексты, иллюстрации

Режим compare

Прогони экстрактор на каждом URL с одинаковым вьюпортом и сведи в таблицу. Самое полезное — не «у кого красивее», а разрыв в дисциплине: есть ли сетка отступов, есть ли шкала кеглей, сколько CSS-переменных, используется ли gap. Пустой gap при непустых padding означает вёрстку на отступах и флоатах, а не на flex/grid, — это диагноз, а не придирка.

Ограничения — указывай в отчёте

• Снимается только активная тема. Для светлой и тёмной нужны два прогона.
• Контент ниже фолда и по :hover не попадает — только то, что отрисовано.
• Cloudflare и подобная защита может не пустить headless-браузер.
• Шрифт может быть лицензионным (futura-pt, Inter Variable с Typekit) — проверь лицензию прежде чем предлагать его в реализацию.
• Имена CSS-переменных бывают захешированы сборщиком (--sx-1urpf9d); такие отфильтровываются, остаются осмысленные.

Не копировать

Токены — измеримые факты и не охраняются. Композитный look-and-feel, логотипы, фотографии, иллюстрации и тексты — охраняются. Секция «Не копировать» в отчёте обязательна, а не по желанию.

Справочники

• references/interpretation.md — как из чисел получить токены: базовая единица, шкала, чтение кластеров компонентов, разобранный пример двух реальных сайтов.