Потрібно зверстати наш готовий макет із Figma в чистий адаптивний код

У нас є повністю готовий дизайн продукту в Figma, і потрібно перетворити його на робочий фронтенд-код, який збігається з макетами піксель у піксель. Файл підготовлений як слід: зібрані компоненти, налаштований auto-layout, є єдина система кольорів і типографіки, токени відступів і іменовані текстові стилі. Потрібен розробник, який прочитає цю структуру так, як її задумав дизайнер, і відтворить її в браузері, не відходячи від оригіналу: при накладенні верстки на фрейм відступи, кеглі, міжрядкові інтервали та стани повинні збігатися.

Верстка зобов'язана бути по-справжньому адаптивною на десктопі, планшеті та мобільному, акуратно перестраюючись між заданими брейкпоінтами, а не тільки на тих ширинах, що показані в Figma. Важливий семантичний і доступний HTML: правильний порядок заголовків, підписані поля форм, видимі стани фокусу, достатній контраст і робота з клавіатури. Все повинно вести себе однаково в актуальних Chrome, Firefox, Safari і Edge, а стани hover, active, disabled та помилок потрібно зібрати відразу. Компоненти дизайн-системи переважаємо переиспользовать, а не плодити разові стилі по всьому коду.

Очікуємо чистий, читаємий код з внятною структурою, переиспользуемыми компонентами і без мертвого і дублюючогося CSS. Переважніше React із сучасною збіркою, але акуратний семантичний HTML і CSS теж підійдуть. Розкажіть, як досягаєте точної відповідності макету.