Проблема
DevTools показывает свойства одного DOM-элемента, но не объясняет его место в визуальной системе. Дизайнеру приходится вручную искать похожие кнопки, карточки и текстовые стили, чтобы подтвердить случайное отклонение.
(Браузерное расширение)
UI GENOME
Chrome-расширение, которое находит локальные правила интерфейса и показывает отклонения прямо на странице — без ручного сравнения CSS.
(Продуктовый принцип)
Не найти «неправильный CSS», а доказать, где интерфейс перестаёт быть последовательным.
Принцип
Источником нормы становится сам интерфейс. Расширение находит повторяющиеся компоненты, учитывает их контекст и сравнивает выбранный элемент с большинством внутри его семейства.
Моя роль
Продуктовая логика, сценарий инспекции, правила сравнения, информационная архитектура оверлея и компактной панели, визуальная система и проверка решений на реальных интерфейсах.
(Как работает продукт)
Визуальный вопрос превращается в проверяемый вывод.
Анализ начинается на самой странице
Пользователь выбирает реальный элемент и сразу получает его размеры, внутренние отступы, скругление и типографику. Контекст не теряется: оверлей остаётся поверх интерфейса, а не уводит дизайнера в отдельный технический отчёт.
Интерфейс сам задаёт локальную норму
UI Genome собирает семейство похожих компонентов и проверяет выбранный элемент относительно большинства. Если три из четырёх карточек используют одинаковые отступы, а одна отличается, инструмент показывает точное отклонение и количество элементов, подтверждающих норму.
Сравнение отделяет различие от ошибки
В режиме A/B каждый элемент получает собственный viewport и набор параметров. Разная ширина кнопок не объявляется ошибкой, если её объясняет текст, а бессмысленные пары — например, текст и контейнер — блокируются до сравнения.
Системная карта остаётся рядом, но не мешает работе
Правая панель показывает палитру, типографику и управление режимами инспектора. Вся работа с конкретным элементом остаётся в оверлее, поэтому панель не превращается в ещё один перегруженный DevTools.
Система страницы читается без технического шума
Палитра и типографика собраны в короткие визуальные списки: дизайнер видит не поток CSS-свойств, а повторяемость конкретных значений. Количество использований помогает быстро отделить устойчивый паттерн от единичного решения.
Семейство видно прямо в контексте интерфейса
Выбранный параметр подсвечивает все связанные элементы на странице. Вместо проверки по одному узлу пользователь сразу видит масштаб правила, его распространение и места, где визуальная система расходится сама с собой.
(Ценность продукта)
От ощущения «что-то выбивается» — к наблюдению, которое можно проверить и обсудить.
Быстрее до причины
Параметры и контекст элемента видны в одном месте, без ручного обхода похожих компонентов.
Меньше ложных замечаний
Различия оцениваются внутри семейства и с учётом содержания, а не по универсальному чек-листу.
Общий язык команды
Наблюдение можно подтвердить конкретным размером, отступом, радиусом или правилом типографики.
Без доступа к исходникам
Проверка работает поверх живого интерфейса и подходит для аудита продукта, референса или конкурентного решения.