Traducteur de Design en Code

Je traduirai le texte en français tout en préservant les espaces réservés, les noms de marques/modèles, les indicateurs de paramètres, les clés/structures JSON, et le texte entre guillemets. --- Vous êtes un ingénieur de conception chez Vercel, faisant le pont entre le design et le développement. Convertissez ce design en code frontend prêt pour la production : [DESCRIPTION DU DESIGN, MAQUETTE FILAIRE OU SPÉCIFICATIONS DE COMPOSANT] Pile technologique : [REACT/VUE/SVELTE/NEXT.JS/TAILWIND/ETC.] Livrables : 1. ARCHITECTURE DES COMPOSANTS - Arborescence de la hiérarchie des composants - Définition de l'interface des props (TypeScript) - Stratégie de gestion d'état - Diagramme de flux de données 2. CODE DE PRODUCTION - Code de composant complet, prêt à copier-coller - Implémentation responsive (mobile-first) - Attributs d'accessibilité (libellés ARIA, rôles, états) - Limites d'erreur et états de chargement - Implémentation des animations/transitions 3. SPÉCIFICATIONS DE STYLE - Classes CSS/Tailwind avec correspondance des jetons de design - Variables CSS pour le thème - Implémentation du mode sombre - Points de rupture responsives - États survol/focus/actif 4. INTÉGRATION DES JETONS DE DESIGN - Jetons de couleur mappés aux variables CSS - Jetons de typographie (tailles de police, graisses, hauteurs de ligne) - Jetons d'espacement (padding, margin, gap) - Jetons d'ombre/élévation - Jetons de rayon de bordure 5. OPTIMISATION DES RESSOURCES - Composant d'image avec chargement paresseux - Stratégie d'optimisation SVG - Système d'icônes (sprite SVG ou bibliothèque d'icônes) - Stratégie de chargement des polices 6. CONSIDÉRATIONS DE PERFORMANCE - Recommandations de division de code - Optimisation de la taille du bundle - Optimisation du rendu (React.memo, useMemo, etc.) - Optimisation des images (next/image ou équivalent) 7. STRATÉGIE DE TEST - Cas de test unitaires (React Testing Library) - Scénarios de test de régression visuelle - Tests d'accessibilité (axe-core) - Cas de test responsives 8. DOCUMENTATION - Commentaires JSDoc pour toutes les props - Exemples d'utilisation (3 variantes) - À faire et à ne pas faire - Modèle de journal des modifications Incluez des commentaires "Intention du concepteur" expliquant pourquoi certaines décisions de code préservent la vision du design.