Révision de la conception front-end

Vérifiez la conformité des implémentations de l'interface utilisateur avec les normes de qualité de conception et votre système de conception OU créez de toutes pièces des interfaces front-end originales et prêtes à être mises en production.

Deux modes

Mode 1 : Révision de conception

Évaluez l’interface utilisateur existante au regard de la conformité au système de conception, des trois piliers de qualité (fluidité, qualité de conception, fiabilité), de l’accessibilité et de la qualité du code.

Mode 2 : Conception créative du front-end

Créez des interfaces originales qui évitent l’esthétique générique et « bâclée » souvent associée à l’IA, qui suivent une orientation conceptuelle claire et qui sont mises en œuvre avec précision.

Conception créative du front-end

Avant de coder, définissez clairement une orientation esthétique :

• Objectif : quel problème cela résout-il ? Qui l’utilise ?
• Style : minimaliste, maximaliste, rétro-futuriste, organique, luxueux, ludique, éditorial, brutaliste, art déco, doux/pastel, industriel, etc.
• Contraintes : framework, performances, exigences d’accessibilité.
• Différenciation : qu'est-ce qui rend ce projet unique et adapté au contexte ?

Directives esthétiques

• Typographie : des polices distinctives qui rehaussent l’esthétique. Associez une police d’affichage à une police de corps raffinée. Évitez Inter, Roboto, Arial et Space Grotesk.
• Couleurs et thème : palette cohérente avec des variables CSS. Couleurs dominantes + accents marqués > palettes timides et uniformément réparties.
• Animation : de préférence uniquement en CSS. Un chargement de page bien orchestré avec des révélations échelonnées > des micro-interactions éparses.
• Composition spatiale : asymétrie, superposition, flux diagonal, éléments rompant la grille, espace négatif généreux OU densité contrôlée.
• Arrière-plans : maillages dégradés, textures de bruit, motifs géométriques, transparences en couches, ombres spectaculaires, superpositions granulées.

À ÉVITER : polices surutilisées, palettes de couleurs clichées, mises en page prévisibles, design standardisé sans caractère spécifique au contexte.

Adaptez la complexité de la mise en œuvre à la vision. Maximaliste = code élaboré. Minimaliste = retenue et précision.

Révision du design

Workflow du système de design

Avant la mise en œuvre :

1. Vérifiez le composant dans votre Storybook / bibliothèque de composants pour connaître l’API et son utilisation
2. Utilisez le mode Développement de Figma pour obtenir les spécifications exactes (espacement, jetons, propriétés)
3. Mettez en œuvre en utilisant les composants du système de conception et les jetons de conception

Pendant la révision :

1. Comparez la mise en œuvre au design Figma
2. Vérifiez que les jetons de conception sont bien utilisés (et non des valeurs codées en dur)
3. Vérifiez que toutes les variantes/états sont correctement implémentés
4. Signaler les écarts (validation du design requise)

Si le composant n'existe pas :

1. Vérifier si un composant existant peut être adapté
2. Contacter l'équipe de conception pour la création d'un nouveau composant
3. Documenter l'exception et sa justification dans le code

Processus de révision

1. Identifier la tâche de l'utilisateur
2. Vérifier si le système de conception propose des modèles adaptés
3. Évaluer l'orientation esthétique
4. Identifier le périmètre (composant, fonctionnalité ou flux)
5. Évaluer chaque pilier
6. Noter et hiérarchiser les problèmes (bloquants / majeurs / mineurs)
7. Formuler des recommandations accompagnées d’exemples tirés du système de conception

Principes fondamentaux

• Réalisation des tâches : nombre minimal de clics. Chaque écran répond aux questions « Que puis-je faire ? » et « Que se passe-t-il ensuite ? »
• Hiérarchie des actions : 1 à 2 actions principales par vue. Affichage progressif des actions secondaires.
• Intégration : expliquer les fonctionnalités dès l’introduction. Privilégier les paramètres par défaut intelligents plutôt que la configuration.
• Navigation : points d’entrée et de sortie clairs. Boutons « Retour » et « Annuler » toujours disponibles. Fil d’Ariane pour les parcours complexes.

Piliers de qualité

1. Passage sans friction de la prise de connaissance à l’action

Évaluation : la tâche peut-elle être accomplie en ≤ 3 interactions ? L’action principale est-elle évidente et unique ?

Signaux d’alerte : nombre excessif de clics, plusieurs boutons principaux concurrents, actions difficiles à trouver, impasses.

2. La qualité est un art

Évaluation :

• Conformité au système de design : respecte les spécifications Figma, utilise des jetons de design
• Orientation esthétique : typographie distinctive, couleurs cohérentes, animations réfléchies
• Accessibilité : niveau C minimum (WCAG 2.1 A), niveau B idéal (WCAG 2.1 AA)

Signaux d'alerte : esthétique générique générée par l'IA, valeurs codées en dur, implémentation non conforme à Figma, réagencement défectueux, indicateurs de focus manquants.

3. Construction fiable

Évaluation :

• Transparence de l'IA : mention légale concernant le contenu généré par l'IA
• Transparence des erreurs : messages d'erreur exploitables

Signaux d’alerte : absence de mentions légales concernant l’IA, erreurs opaques sans indication.

Format de sortie de l'évaluation

Consultez le fichier references/review-output-format.md pour obtenir le modèle de révision complet.

Modificateurs de type de révision

Consultez references/review-type-modifiers.md pour connaître les axes de révision spécifiques à chaque contexte (PR, Création, Design, Accessibilité).

Liste de contrôle rapide

Consultez le fichier references/quick-checklist.md pour accéder à la liste de contrôle préalable à la validation, qui porte sur la conformité au système de design, la qualité esthétique, la fluidité d'utilisation, la qualité de l'exécution et la fiabilité.

Exemples de modèles

Consultez le fichier references/pattern-examples.md pour découvrir des exemples de bonnes et de mauvaises pratiques en matière de révision du front-end créatif et du système de design.

Remerciements

Les principes de front-end créatif s'inspirent de l'expertise d'Anthropic en matière de conception front-end. Les principes de révision de conception et le cadre des piliers de qualité ont été créés par @Quirinevwm pour permettre une évaluation systématique de l'interface utilisateur.