Nous devons coder notre maquette Figma prête à l'emploi en un code propre et réactif

Nous avons un design de produit entièrement prêt dans Figma et devons le transformer en code frontend fonctionnel qui correspond aux maquettes pixel par pixel. Le fichier est correctement préparé : les composants sont rassemblés, la mise en page automatique est configurée, il y a un système de couleurs et de typographie unifié, des tokens d'espacement et des styles de texte nommés. Nous avons besoin d'un développeur qui lira cette structure comme le designer l'a prévu et la reproduira dans le navigateur sans s'écarter de l'original : lorsque la mise en page est superposée au cadre, le rembourrage, les tailles de police, les hauteurs de ligne et les états doivent correspondre.

Le balisage doit être véritablement réactif sur desktop, tablette et mobile, s'adaptant proprement entre les points de rupture spécifiés, pas seulement aux largeurs montrées dans Figma. Un HTML sémantique et accessible est important : hiérarchie de titres correcte, champs de formulaire étiquetés, états de focus visibles, contraste suffisant et navigation au clavier. Tout doit se comporter de la même manière dans les navigateurs actuels Chrome, Firefox, Safari et Edge, et les états de survol, actif, désactivé et d'erreur doivent être gérés dès le départ. Nous préférons réutiliser les composants du système de design plutôt que de créer des styles uniques dans tout le code.

Nous attendons un code propre et lisible avec une structure claire, des composants réutilisables et pas de CSS mort ou dupliqué. React avec des builds modernes est préférable, mais un HTML et CSS sémantiques soignés fonctionneront également. Veuillez nous dire comment vous atteignez une conformité exacte avec la maquette.