# UI Dna

> Разобрать визуальный язык живого сайта в измеренные значения вместо догадок по скриншоту: палитра, шрифты и веса, шкала кеглей, отступы, радиусы, тени, CSS-переменные и сигнатуры компонентов — через getComputedStyle в браузере. Два режима: extract (один URL) и compare (свой сайт против референса). Используй когда пользователь говорит «сделай как у linear.app», «разбери дизайн этого сайта», «вытащи палитру и шрифты», «сравни наш дизайн с референсом», «собери ТЗ по образцу». Проектировать с нуля — frontend-design.

- Skill: `goldenprofile/ui-dna` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add goldenprofile/ui-dna`
- Raw SKILL.md: https://api.skillmd.com/api/skills/goldenprofile/ui-dna/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: goldenprofile (https://skillmd.com/u/goldenprofile)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/goldenprofile/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](references/interpretation.md)
   и собери отчёт.

## Отчёт

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

```markdown
# 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](references/interpretation.md) — как из чисел
  получить токены: базовая единица, шкала, чтение кластеров компонентов,
  разобранный пример двух реальных сайтов.