Frontend Design

• Construire un nouveau composant UI ou une page où la qualité visuelle et le caractère distinctif comptent, pas seulement la justesse fonctionnelle.
• Prototyper un produit ou une landing page et vous souhaitez quelque chose qui paraît véritablement conçu plutôt qu'auto-généré.
• Explorer des directions créatives pour une marque, une application ou une campagne avant de s'engager dans un système de design.
• Remplacer une interface existante terne ou générique par quelque chose qui possède un point de vue esthétique clair.

• Si vous avez besoin d'une conformité stricte à la charte graphique/au système de design — cette compétence privilégie la distinctivité créative et peut s'écarter des guides de style existants.
• Si vous avez uniquement besoin d'une API backend ou d'une couche de données — cette compétence est exclusivement axée sur le code de présentation frontend.

Avant d'écrire la moindre ligne de code, la compétence Frontend Design s'engage dans une tonalité conceptuelle claire — brutalement minimaliste, maximaliste, organique, luxueuse, industrielle, éditoriale, et bien d'autres encore. Le résultat est une interface dotée d'un point de vue cohérent, et non un composite générique.

Les polices génériques (Inter, Roboto, Arial) sont explicitement évitées au profit d'associations de polices d'affichage et de corps au caractère affirmé. Les palettes de couleurs utilisent des variables CSS avec des teintes dominantes et des accents tranchants, plutôt que des schémas timides et uniformément répartis.

Les animations sont utilisées de manière stratégique — des révélations orchestrées au chargement de la page avec des délais échelonnés, des effets déclenchés au défilement, et des états de survol qui surprennent. Les solutions en CSS pur sont privilégiées pour le HTML ; la bibliothèque Motion est utilisée pour React lorsqu'elle est disponible.

Les arrière-plans vont au-delà des couleurs unies : dégradés en maillage, textures de bruit, motifs géométriques, transparences superposées, ombres dramatiques, superpositions de grain et bordures décoratives sont utilisés de manière contextuelle pour créer de la profondeur et de l'atmosphère.

Les mises en page privilégient l'asymétrie, le chevauchement, les flux diagonaux et les éléments qui brisent la grille. L'espace négatif généreux ou la densité maîtrisée est choisi délibérément — jamais par défaut.

Le code généré est fonctionnel et de qualité production, avec prise en charge de HTML/CSS/JS, React, Vue et d'autres frameworks. La complexité correspond à la vision esthétique — les designs maximalistes incluent des animations élaborées ; les designs minimalistes offrent précision et sobriété.

Un fondateur souhaite une page d'accueil qui se démarque de la concurrence. La compétence Frontend Design choisit une direction esthétique audacieuse — par exemple, un style éditorial/magazine avec une hiérarchie typographique marquée — et génère une page entièrement fonctionnelle avec des animations au défilement et un système de couleurs distinctif.

Un designer ou développeur a besoin d'un site personnel qui reflète sa personnalité. La compétence Frontend Design évite les structures génériques et produit quelque chose de mémorable, avec peut-être une mise en page asymétrique, un curseur personnalisé et une association de polices soigneusement choisie.

Une équipe a besoin d'un composant d'interface à forte densité de données — un tableau, une carte graphique ou un panneau de filtres — qui conserve néanmoins un aspect soigné. La compétence Frontend Design applique une esthétique utilitaire ou minimaliste raffinée, avec un espacement méticuleux et des animations subtiles, pour donner au composant un rendu impeccable.

Une page de campagne doit être immersive et visuellement percutante. La compétence Frontend Design peut produire une page maximaliste et riche en animations, avec des effets visuels superposés, une typographie dramatique et des animations d'entrée orchestrées qui suscitent un véritable émerveillement.