Открываешь страницу рядом с макетом. Кнопка вроде та же, но что-то не так: то ли отступ больше, то ли шрифт тяжелее. И дальше начинается разговор, кто ошибся, дизайнер или фронт.

Летом я писал, что раньше между макетом и работающим интерфейсом была довольно большая дистанция: передать макеты, объяснить состояния, обсудить детали с разработчиком, дождаться реализации, потом что-то поправить. С Cursor она стала короче. Но последний шаг, мне кажется, остался самым неудобным: надо объяснить, что именно не так, а аргумент пока только «на глаз».

Поэтому я сделал себе небольшой инспектор, который работает прямо в React-приложении. Держишь Alt (на Mac это Option) и наводишь на элемент. Видишь рамку с размерами, подсвеченные padding и margin, а в подсказке шрифт, размер, вес, line-height, цвет, gap, фон, скругление и тень. Alt+клик закрепляет подсказку, и можно спокойно положить рядом макет.

По сути это Figma Inspect, только для того, что в итоге отрисовал браузер. Значения он берёт из уже посчитанных стилей элемента, поэтому видно то, что видит пользователь, а не то, что задумано в коде.

Главное тут, наверное, даже не скорость. Проще договариваться: оба смотрят на одни и те же цифры, а не на ощущение «что-то не так». Условно, если в макете padding 16, а в браузере 12, это уже не спор о вкусе, а конкретная правка. И можно спокойно разобраться, откуда взялось 12: из токена, из старого компонента или просто так вышло.

Я по-прежнему не фронтенд-разработчик.

Где у вас чаще расходятся макет и прод: в отступах, шрифтах или цветах? И как вы обычно показываете, что именно не так?