Examen de Conception Frontend

Examinez les implémentations UI par rapport aux normes de qualité de conception et votre système de design OU créez des interfaces frontend distinctives et de qualité production à partir de zéro.

Deux Modes

Mode 1 : Examen de Conception

Évaluez l'UI existante pour la conformité au système de design, les trois piliers de qualité (Frictionless, Quality Craft, Trustworthy), l'accessibilité et la qualité du code.

Mode 2 : Conception Frontend Créative

Créez des interfaces distinctives qui évitent l'esthétique générique « AI slop », ont une direction conceptuelle claire et s'exécutent avec précision.

Conception Frontend Créative

Avant de coder, engagez-vous sur une direction esthétique :

• Purpose : Quel problème cela résout-il ? Qui l'utilise ?
• Tone : minimaliste, maximaliste, rétro-futuriste, organique, luxe, ludique, éditorial, brutaliste, art déco, doux/pastel, industriel, etc.
• Constraints : Framework, performance, exigences d'accessibilité.
• Differentiation : Qu'est-ce qui rend cela distinctif et approprié au contexte ?

Directives Esthétiques

• Typography : Polices distinctives qui élèvent l'esthétique. Associez une police d'affichage à une police de corps raffinée. Évitez Inter, Roboto, Arial, Space Grotesk.
• Color & Theme : Palette cohésive avec variables CSS. Couleurs dominantes + accents marqués > palettes timides et uniformément distribuées.
• Motion : CSS uniquement de préférence. Un chargement de page bien orchestré avec révélations échelonnées > micro-interactions dispersées.
• Spatial Composition : Asymétrie, chevauchement, flux diagonal, éléments qui cassent la grille, espace blanc généreux OU densité contrôlée.
• Backgrounds : Dégradés en maille, textures de bruit, motifs géométriques, transparences en couches, ombres dramatiques, superpositions de grain.

À ÉVITER : Polices surexploitées, schémas de couleurs clichés, mises en page prévisibles, designs génériques sans caractère spécifique au contexte.

Adaptez la complexité de l'implémentation à la vision. Maximaliste = code élaboré. Minimaliste = retenue et précision.

Examen de Conception

Workflow du Système de Design

Avant d'implémenter :

1. Examinez le composant dans votre Storybook / bibliothèque de composants pour l'API et l'utilisation
2. Utilisez Figma Dev Mode pour obtenir les spécifications exactes (espacement, tokens, propriétés)
3. Implémentez en utilisant les composants du système de design + design tokens

Pendant l'examen :

1. Comparez l'implémentation au design Figma
2. Vérifiez que les design tokens sont utilisés (pas de valeurs codées en dur)
3. Vérifiez que toutes les variantes/états sont implémentés correctement
4. Signalez les écarts (nécessite l'approbation du design)

Si le composant n'existe pas :

1. Vérifiez si un composant existant peut être adapté
2. Contactez le design pour la création d'un nouveau composant
3. Documentez l'exception et la justification dans le code

Processus d'Examen

1. Identifiez la tâche utilisateur
2. Cherchez un motif correspondant dans le système de design
3. Évaluez la direction esthétique
4. Identifiez le périmètre (composant, fonctionnalité ou flux)
5. Évaluez chaque pilier
6. Notez et priorisez les problèmes (bloquant/majeur/mineur)
7. Fournissez des recommandations avec des exemples du système de design

Principes Fondamentaux

• Task completion : Clics minimums. Chaque écran répond à « Que puis-je faire ? » et « Que se passe-t-il ensuite ? »
• Action hierarchy : 1-2 actions primaires par vue. Révélation progressive pour les actions secondaires.
• Onboarding : Expliquez les fonctionnalités à l'introduction. Paramètres intelligents par rapport à la configuration.
• Navigation : Points d'entrée/sortie clairs. Retour/annulation toujours disponibles. Fils d'Ariane pour les flux profonds.

Piliers de Qualité

1. Frictionless Insight to Action

Évaluez : La tâche peut-elle être complétée en ≤3 interactions ? L'action primaire est-elle évidente et singulière ?

Red flags : Clics excessifs, plusieurs boutons primaires concurrents, actions enfouies, impasses.

2. Quality is Craft

Évaluez :

• Conformité du système de design : correspond aux spécifications Figma, utilise les design tokens
• Direction esthétique : typographie distincte, couleurs cohésives, mouvement intentionnel
• Accessibilité : Grade C minimum (WCAG 2.1 A), Grade B idéal (WCAG 2.1 AA)

Red flags : Esthétique générique d'IA, valeurs codées en dur, implémentation ne correspond pas à Figma, reflow cassé, indicateurs de focus manquants.

3. Trustworthy Building

Évaluez :

• AI transparency : avertissement sur le contenu généré par l'IA
• Error transparency : messages d'erreur actionnables

Red flags : Avertissements IA manquants, erreurs opaques sans guidance.

Format de Sortie d'Examen

Voir references/review-output-format.md pour le modèle complet d'examen.

Modificateurs de Type d'Examen

Voir references/review-type-modifiers.md pour les domaines d'examen spécifiques au contexte (PR, Creative, Design, Accessibility).

Checklist Rapide

Voir references/quick-checklist.md pour la checklist de pré-approbation couvrant la conformité du système de design, la qualité esthétique, les piliers frictionless, quality craft et trustworthy.

Exemples de Motifs

Voir references/pattern-examples.md pour des exemples bons/mauvais de travaux de conception frontend créative et d'examen du système de design.

Remerciements

Les principes de conception frontend créative s'inspirent de la skill frontend-design d'Anthropic. Les principes d'examen de conception et le framework des piliers de qualité ont été créés par @Quirinevwm pour l'évaluation systématique de l'UI.