Открываю макет. Красиво. Современненько. А потом начинаю присматриваться… и у меня начинает дергаться глаз 😵‍💫

Заголовок в одном блоке с отступом 40px. В соседнем блоке такой же заголовок — уже 42px. Кнопка в хедере высотой 48px, такая же кнопка в футере — 51px. Текст в карточках выровнен по левому краю, но сам левый край гуляет на 2-3 пикселя в зависимости от карточки 😡

И это я еще только начал.

⏭️ Что происходит дальше: Дизайнер говорит: «Ну это же мелочи, в браузере никто не заметит». А потом я сижу и выравниваю каждую секцию по линейке, потому что «на глаз» — это не сетка, а рулетка.

🚨 Почему это реально проублем, а не мои придирки: - Скорость. Вместо того чтобы верстать, я занимаюсь детективом: ищу, какой из пяти размеров шрифта для подзаголовков «правильный». - Код. Чтобы подстроиться под хаотичные отступы, приходится плодить классы и костыли. Там, где мог быть один  padding: 24px , появляется три исключения. - Поддержка. Через полгода клиент попросит «немного изменить блок». Я открываю код и не помню, почему там 42px, а не 40px. Потому что в макете не было системы.

🛟 Что спасает: 1. Дизайн-система в Figma. Стили цветов, размеров, отступов. Не «#1A1A1A, но только на этой странице», а один стиль на весь проект. 2. Сетка и авто-лейауты. Если дизайнер использует Auto Layout, я вижу логику отступов сразу, а не вычисляю её штангенциркулем. 3. Состояния элементов. Hover, focus, disabled — это не «доделай сам, как чувствуешь». Это часть макета. 4. Разговор с дизайнером до верстки. Пять минут разговора экономят мне день переделок.

🔄 Верстка — это перевод с языка дизайна на язык кода. Если оригинал написан без правил, перевод превращается в мучение, а не в кайф.