Dobbiamo codificare il nostro mockup Figma predefinito in codice pulito e reattivo

Abbiamo un design di prodotto completamente pronto in Figma e dobbiamo trasformarlo in codice frontend funzionante che corrisponda ai mockup pixel per pixel. Il file è correttamente preparato: i componenti sono raccolti, il layout automatico è impostato, c'è un sistema di colori e tipografia unificato, token di spaziatura e stili di testo nominati. Abbiamo bisogno di uno sviluppatore che legga questa struttura come inteso dal designer e la riproduca nel browser senza deviare dall'originale: quando il layout è sovrapposto al frame, il padding, le dimensioni dei caratteri, le altezze delle righe e gli stati devono corrispondere.

Il markup deve essere veramente reattivo su desktop, tablet e mobile, adattandosi pulitamente tra i breakpoint specificati, non solo alle larghezze mostrate in Figma. È importante un HTML semantico e accessibile: gerarchia corretta dei titoli, campi modulo etichettati, stati di messa a fuoco visibili, contrasto sufficiente e navigazione da tastiera. Tutto dovrebbe comportarsi allo stesso modo nei browser attuali Chrome, Firefox, Safari ed Edge, e gli stati hover, attivi, disabilitati e di errore dovrebbero essere gestiti fin dall'inizio. Preferiamo riutilizzare i componenti del sistema di design piuttosto che creare stili unici in tutto il codice.

Ci aspettiamo codice pulito e leggibile con una struttura chiara, componenti riutilizzabili e nessun CSS morto o duplicato. React con build moderne è preferibile, ma anche un attento HTML e CSS semantico funzioneranno. Per favore, dicci come raggiungi la conformità esatta con il mockup.