Musimy zakodować nasz gotowy mockup Figma w czysty, responsywny kod

Mamy w pełni gotowy projekt produktu w Figma i musimy przekształcić go w działający kod frontendowy, który odpowiada mockupom piksel za pikselem. Plik jest odpowiednio przygotowany: komponenty są zebrane, auto-layout jest skonfigurowany, istnieje zjednoczony system kolorów i typografii, tokeny odstępów oraz nazwane style tekstowe. Potrzebujemy dewelopera, który odczyta tę strukturę tak, jak zamierzał projektant, i odtworzy ją w przeglądarce, nie odbiegając od oryginału: gdy układ jest nałożony na ramkę, odstępy, rozmiary czcionek, wysokości linii i stany powinny się zgadzać.

Markup musi być naprawdę responsywny na komputerach stacjonarnych, tabletach i urządzeniach mobilnych, czysto dostosowując się między określonymi punktami przerwania, a nie tylko w szerokościach pokazanych w Figma. Semantyczny i dostępny HTML jest ważny: poprawna hierarchia nagłówków, oznaczone pola formularzy, widoczne stany fokusu, wystarczający kontrast i nawigacja za pomocą klawiatury. Wszystko powinno działać tak samo w aktualnych wersjach Chrome, Firefox, Safari i Edge, a stany hover, aktywne, wyłączone i błędne powinny być obsługiwane od samego początku. Preferujemy ponowne wykorzystanie komponentów systemu projektowania, zamiast tworzyć jednorazowe style w całym kodzie.

Oczekujemy czystego, czytelnego kodu z wyraźną strukturą, wielokrotnego użytku komponentami i brakiem martwego lub zduplikowanego CSS. React z nowoczesnymi kompilacjami jest preferowany, ale staranny semantyczny HTML i CSS również będą działać. Proszę powiedzieć nam, jak osiągasz dokładne dostosowanie do mockupu.