Скил «Сверка с дизайном»: чек-лист приёмки вёрстки
Токены цвета, типографика, сетка, брейкпоинты, состояния. Список расхождений с приоритетами вместо «вроде похоже».
🎯 Что получите
Чек-лист сверки готовой вёрстки с дизайн-макетом: от токенов цвета до поведения на брейкпоинтах — приёмка без «ну, вроде похоже».
Что понадобится: Макет (Figma) рядом с вёрсткой · Чек-лист из скилла
Шаги
1Сверьте визуальную точность
Цвета — по токенам, а не «на глаз». Типографика: шрифт, кегль, интерлиньяж, трекинг. Радиусы, тени, прозрачности. Иконки — правильного размера и начертания.
2Проверьте сетку и отступы
Выравнивание по колонкам, одинаковые отступы между однотипными блоками (шаг сетки 4 или 8px). Расхождение в 4px на каждом втором блоке — визуальный шум.
3Прогоните все брейкпоинты
Поведение на каждом контрольном размере совпадает с макетом или логикой адаптива: контент перестраивается, не обрезается, не налезает.
4Проверьте состояния и контент
Hover, focus, active, disabled у всех интерактивных элементов. Длинные тексты (переполнение), отсутствующие картинки (alt, соотношение сторон), граничные случаи: 0, 1, 100+ элементов.
5Оформите результат сверки
Список расхождений по категориям с приоритетом: блокер (не соответствует совсем) / правка (заметно) / мелочь (только дизайнер увидит). Приёмка — по списку, а не по впечатлению.
✅ Сделал материал, если:
- ☐Цвета сверены по токенам, а не на глаз
- ☐Типографика совпадает по всем параметрам
- ☐Отступы кратны шагу сетки
- ☐Все брейкпоинты проверены
- ☐Состояния hover/focus/disabled реализованы
- ☐Есть список расхождений с приоритетами
💡 Совет
Делайте сверку в два прохода: сначала на скриншоте целиком (композиция, ритм), потом пиксельная проверка блоков. Смешанный проход пропускает и то и другое.