Pixel Perfect + Visual Testing Guidelines

Методология

• Figma → Code синхронизация по токенам: typography, colors, radius, shadow, layout
• Фиксированный spacing‑scale (4/8/12 или проектный)
• Экспорт точных значений через Figma Inspect
• Отключение адаптивных авто‑решений при жёстких размерах

Правила

• Допустимое отклонение ≤ 1px
• Один baseline на компонент/страницу
• Fix Layout Freeze: фиксированный viewport, стабильные шрифты, загруженная тема

Visual Tests

• Playwright toHaveScreenshot с threshold 0.3, maxDiffPixels 1
• Снимок каждого состояния компонента: hover, active, focus, disabled
• Edge cases: длинные тексты, пустые данные, большие изображения, ошибки

Универсальный промпт

Создать компонент/страницу строго по Figma, используя pixel‑perfect подход.

Требования: все параметры (ширина, высота, radius, gap, padding, margin, typography, colors) совпадают 1:1 с макетом. Использовать только дизайн‑токены. Структура блоков как в Figma. Отклонения > 1px считаются ошибкой. Viewport 1440×900. Добавить визуальные тесты (Playwright snapshot) со всеми состояниями. Стабильный layout без авто‑stretch.