Design Quality v2

Compétence complète pour créer et évaluer la conception d'interfaces. Pour les interfaces existantes, elle audite et note. Pour les nouvelles, elle définit une direction et garantit la qualité de réalisation. Pour les interfaces défectueuses, elle applique des correctifs passe par passe.

Cette version utilise des sous-agents spécialisés pour le mode Révision et le mode Correction — parallélisés si possible, avec plongée automatique lorsqu'une dimension obtient ≤ 5.

Porte 0 : Résoudre le type d'entrée

Avant toute analyse ou création, identifiez ce qui a été partagé. Cela change tout ce qui suit.

Ce qui a été partagé	Ce qu'il faut faire
Capture d'écran / image	Analyser visuellement ; noter le CSS que vous ne pouvez pas confirmer
Source HTML / CSS	Lire les styles ; audit complet possible
Dossier de projet	Rechercher d'abord les fichiers CSS/composants principaux ; lire avant de noter
URL / page en direct	Lire le DOM ; inspecter les styles via DevTools si le navigateur est disponible
Lien vers un artefact	Lire l'artefact ; traiter comme source HTML
Description textuelle uniquement	Demander au moins un des éléments ci-dessus avant de noter ; décrire ce qui manque

Détectez également le type de contexte — cela affecte les heuristiques applicables :

Écran d'application (outil, tableau de bord, produit SaaS) : la densité gouverne ; l'en-tête est petit ; l'action EST le contenu
Page (page d'atterrissage, marketing, éditoriale) : plus de liberté créative ; le héros compte ; sections et rythme

En cas d'incertitude, énoncez votre hypothèse et continuez.

Sélection du mode

Détectez à partir de la demande — en cas de doute, commencez par la révision :

Type de demande	Mode
"review", "critique", "audit", "does this look AI-generated?"	revision
"build", "create", "design this page"	creation
"fix", "improve", "unslop", "redesign"	correction (revision → application)
"polish", "feels slightly off", "almost there"	polissage

Si un fichier PROJECT_DESIGN.md existe dans la racine du projet, lisez-le en premier. Il contient la direction, la palette et la signature approuvées — ne les remplacez pas sans demander.

Architecture agentique

Pour les modes Révision et Correction, répartissez les sous-agents spécialisés plutôt que d'effectuer tout le travail en série. Cela produit une analyse plus approfondie en moins de temps.

Quand utiliser des agents

Mode Révision sur toute entrée UI réelle → toujours répartir 3 agents de révision en parallèle
Toute dimension notée ≤ 5 → déclencher automatiquement l'agent de plongée correspondant après le tableau de scores
Mode Correction → répartir un agent de correction dédié par passe (passes 3 et 4 en parallèle)
Mode Création Porte 1 → répartir éventuellement un agent de recherche de direction lorsque l'URL du produit ou la catégorie est connue

Fork vs nouveau

subagent_type: "fork" — pour les agents de révision et de correction qui ont besoin du contexte complet de la conversation (entrée UI, captures d'écran, code)
Par défaut (nouveau) — pour les agents de recherche de direction qui n'ont pas besoin de l'historique de conversation

Fichiers de prompts d'agents

Les modèles de prompts complets se trouvent dans references/agents/. Référencez-les lors de la répartition — chaque fichier est autonome avec les instructions et le format de sortie pour cet agent.

Mode Révision

Auditer, noter et prioriser. Aucune modification de code sans demander au préalable.

Étape 0 : Répartir 3 agents de révision en parallèle

Avant d'effectuer toute analyse vous-même, répartissez les trois agents en un seul message à l'aide de l'outil Agent. Les trois sont des forks — ils héritent du contexte complet de la conversation, y compris l'entrée UI.

Agent 1 — Auditeur de slop Modèle de prompt : references/agents/review-slop.md Tâche : audit de slop, vérification de modèle, accessibilité, mobile/tactile, vérifications rapides de performances.

Agent 2 — Évaluateur de tableau de scores Modèle de prompt : references/agents/review-scorecard.md Tâche : noter les 8 dimensions de 1 à 10 avec justification par note.

Agent 3 — Analyste émotionnel Modèle de prompt : references/agents/review-emotion.md Tâche : Vérification de l'état ressenti (Felt State Check) sur tous les états clés + cartographie de la règle Pic-Fin (Peak-End Rule).

Attendez que les 3 se terminent, puis passez à l'étape 1.

Étape 1 : Synthétiser

Fusionnez les sorties des trois agents dans le format de sortie standard. Dédoublonnez les résultats qui apparaissent dans plusieurs agents. Si les agents sont en désaccord sur une note, utilisez la valeur la plus basse et notez le désaccord.

## Audit de slop
[de l'Agent 1 — chaque résultat avec emplacement et gravité]

## Vérification de modèle
[de l'Agent 1]

## Tableau de scores
Adéquation produit :    X/10   [de l'Agent 2 — note d'une ligne]
Hiérarchie :            X/10
Clarté :                X/10
Goût :                  X/10
Retenue :               X/10
Densité :               X/10
Qualité de réalisation : X/10
Adaptabilité :          X/10
Global :                X/10

## Design émotionnel
[de l'Agent 3 — État ressenti + résultats Pic-Fin]

## Verdict
Meilleur élément :
Pire élément :
Correctif obligatoire (P0) : [le cas échéant — sinon "aucun"]
Victoires rapides (P1) : [3 au maximum]

Après la sortie, demandez s'il faut appliquer l'un des correctifs.

Étape 2 : Plongée automatique

Après l'affichage du tableau de scores, vérifiez chaque dimension. Pour toute dimension notée ≤ 5, déclenchez automatiquement l'agent de plongée correspondant sans attendre d'y être invité.

Consultez references/agents/deepdive-dispatch.md pour le tableau de répartition et les modèles de prompts.

Annoncez avant de répartir : "La hiérarchie a obtenu 4 — lancement d'une critique ciblée de la hiérarchie visuelle."

Correspondance des plongées :

Dimension / Résultat	Compétence à répartir
Hiérarchie ≤ 5	compétence `critique-visual-hierarchy`
Clarté ≤ 5 (affordances)	compétence `critique-affordance`
Clarté ≤ 5 (densité)	compétence `critique-information-density`
Qualité de réalisation ≤ 5 (typographie)	compétence `critique-typography`
Qualité de réalisation ≤ 5 (couleur)	compétence `critique-color`
Qualité de réalisation ≤ 5 (mise en page)	compétence `critique-composition`
Goût ≤ 5 (semble plat)	compétence `interfaces-that-feel`
Densité ≤ 5	compétence `critique-information-density`
Problèmes d'arc émotionnel	compétence `peak-end-rule`

Mode Création

Avant d'écrire une interface utilisateur, suivez cette séquence. Chaque étape est une porte — arrêtez-vous et confirmez avant de passer à la suivante.

Porte 0 : Type de contexte

Indiquez ce qui s'applique avant de continuer :

Écran d'application — outil, tableau de bord, produit de données. La densité, les actions et les états gouvernent.
Page — page d'atterrissage, éditoriale, marketing. La composition, le rythme et les sections gouvernent.

Porte 1 : Agent de recherche produit (optionnel mais recommandé)

Si le produit a une URL, un nom ou appartient à une catégorie connue, répartissez un agent de recherche avant de demander à l'utilisateur sa compréhension du produit. Cela permet d'économiser un aller-retour et de faire émerger des conventions spécifiques au domaine que l'utilisateur pourrait ne pas penser à mentionner.

Modèle de prompt : references/agents/direction-research.md

Si aucune URL ou catégorie n'est connue, ignorez cette étape et demandez directement à l'utilisateur.

Vérifiez l'existence d'un fichier PROJECT_DESIGN.md dans la racine du projet. S'il existe, lisez-le — la direction est déjà définie ; passez à la Porte 3 (Construction) et appliquez la direction enregistrée.

Sinon, lisez ou demandez : ce que fait le produit, pour qui il est, quelle est la tâche principale, quel contenu existe, la pile technologique, les couleurs de marque existantes, les polices, les composants.

Demandez : "Ma compréhension est-elle correcte avant que je définisse la direction de conception ?" Arrêtez-vous. Attendez.

Porte 2 : Direction + Cadrans de conception

Dérivez cinq lignes du produit — jamais des tendances, des portfolios ou de ce qui a l'air cool :

Produit : Ce qu'il fait et pour qui, une phrase simple.
Caractère : 2–3 mots concrets. calme, précis, un peu chaleureux ou rapide, technique, ludique. "Propre, moderne, élégant, minimal, premium" sont interdits — ils décrivent tous les modèles.
Monde : Le matériau ou le lieu auquel le produit appartient naturellement. Une application de notes : papier et encre. Un outil de surveillance : instruments et équipes de nuit. Une application de voyage : cartes et lumière de fenêtre. Cela teinte les neutres, l'accent et les moments visuels.
Moments : 1–2 endroits sur l'écran où la conception devient riche et spécifique. Tout le reste reste calme pour que ceux-ci soient lus instantanément.
Signature : Un petit détail que seul ce produit aurait, répété de manière cohérente.

Présentez 1–3 directions. Pour chacune, montrez trois Cadrans de conception :

Variation  ░░░░░░░░░░  1–10   (1 = minimal/centré, 10 = audacieux/asymétrique)
Mouvement  ░░░░░░░░░░  1–10   (1 = statique, 10 = animé)
Densité    ░░░░░░░░░░  1–10   (1 = spacieux/éditorial, 10 = tableau de bord/dense)

Demandez : "Quelle direction ? Et les cadrans sont-ils corrects, ou dois-je en ajuster ?" Arrêtez-vous. Attendez.

Après confirmation de la direction, suggérez de créer un PROJECT_DESIGN.md dans la racine du projet :

# PROJECT_DESIGN.md

## Direction : [Nom]
Produit : [une phrase]
Caractère : [2–3 mots]
Monde : [matériau / lieu]
Moments : [1–2 endroits spécifiques]
Signature : [un détail]

## Cadrans
Variation : X/10
Mouvement : X/10
Densité : X/10

## Palette
Toile : [jeton + hex]
Accent : [jeton + hex]
Texte principal : [jeton + hex]
Texte atténué : [jeton + hex]

## Typographie
Affichage : [nom de police + graisse]
Corps : [nom de police + graisse]
Mono : [nom de police] (le cas échéant)

## Rayon de bordure : [valeur]px

Principes de conception

Une fois la direction confirmée, appliquez dans cet ordre (les passes antérieures affectent les suivantes) :

Espacement — établir en premier

Grille 8px. Toutes les marges, rembourrages, espaces : multiples de 4 ou 8. (mt-[13px] → corrigez-le.)
Même élément = même taille. Toutes les lignes de liste partagent une hauteur et un espace.
L'espace montre le regroupement : intérieur < extérieur. Une étiquette de section est plus proche de ses propres éléments que de celle du dessus.
La navigation est la plus dense : lignes de 32 à 36 px, 2 à 4 px entre elles.

Couleur

Une rampe neutre, teintée vers le Monde. Arrière-plans, surfaces, bordures, texte, tout provient de cette rampe.
Un accent, utilisé rarement : action principale, sélection ou le seul nombre qui compte.
Trois rôles de texte : principal, secondaire, atténué. Jamais dix gris légèrement différents.
Interdit : dégradés de teinte sur les surfaces, texte avec dégradé, lueurs colorées, ombres colorées, taches radiales, bordures néon.
Accent avec texte dessus : ≥ 4,5:1 de contraste.
Préférez OKLCH pour les nouveaux jetons de couleur : oklch(L% C H).

Typographie

Associez une police d'affichage distinctive à une police de corps propre. Maximisez le contraste de graisse.
text-wrap: balance sur tous les titres (h1–h3). text-wrap: pretty sur le corps et le texte de liste.
-webkit-font-smoothing: antialiased sur :root ou html.
Corps de texte minimum 14px (préférez 16px). Un h1 par page.

Composants

Boutons : étiquettes verbe en premier. Un bouton principal par section.
Pas d'emoji comme icônes. Une bibliothèque d'icônes, une épaisseur de trait, currentColor uniquement.
Cartes : ombre OU bordure, pas les deux.
États vides : illustration + titre + CTA. Jamais juste vide.
Chargement : écrans squelettes (pas de spinners) après un délai de 300 ms.
Fenêtres modales : X, Annuler et Échap. Piègez le focus. Restituez le focus à la fermeture.
overscroll-behavior: contain sur toutes les fenêtres modales, tiroirs et listes déroulantes.
Tous les boutons d'icônes ont besoin de aria-label. Toutes les entrées de formulaire ont besoin d'une <label> associée.

Règle d'un élément lumineux

Chaque écran obtient un élément poli et riche. Tout autour reste calme.

Garde-fou anti-générique

Si la conception aurait l'air impressionnante sur une capture d'écran de portfolio mais rendrait le produit moins clair, rejetez-la.

Après la construction

Exécutez le mode Révision (avec agents). Terminé lorsque : aucun résultat P0, global ≥ 7/10, adéquation produit ≥ 7/10.

Mode Correction

Exécutez d'abord le mode Révision pour obtenir le tableau de scores. Ensuite, répartissez les agents de correction dans l'ordre des passes.

Ordre d'exécution :

Passes 1, 2 → séquentielles (espacement d'abord, puis couleur)
Passe 3 + Passe 4 → parallèles (les icônes et le texte sont indépendants)
Passes 5–10 → séquentielles

Consultez references/agents/fix-passes.md pour le modèle de prompt de l'agent de chaque passe.

Pour chaque passe, annoncez ce que fait l'agent et rapportez par passe : ce qui a changé et ce qui nécessite encore de l'attention.

Ordre des passes :

Espacement — alignement sur la grille 8px, rythme, regroupement
Couleur — supprimer le slop, construire à partir de la rampe neutre
Icônes — un seul ensemble, une seule taille, un seul trait, currentColor (parallèle avec Texte)
Texte — supprimer les étiquettes emoji, calmer le bruit, rendre spécifique au produit (parallèle avec Icônes)
Typographie — hiérarchie, graisses, text-wrap: balance, text-wrap: pretty, anti-crénelage, tabular-nums
Mise en page — alignement, densité
Détails — rayons concentriques, ombres, bordures
Accessibilité et tactile — états de focus, aria-label, touch-action: manipulation, cibles 44px, overscroll-behavior
Visuels — illustrations d'état vide, cohérence des icônes, ratios d'aspect des images. Voir references/passes-visuals.md
Mouvement — dernière passe, uniquement là où cela ajoute du sens. Voir references/passes-motion.md

Après toutes les passes : exécutez à nouveau les agents du mode Révision pour vérifier. Signalez l'écart par rapport au tableau de scores original.

Mode Polissage

Pour les interfaces qui sont globalement bien conçues mais qui semblent légèrement décalées.

Technique : ralentissez l'interface à 10 % de vitesse dans les DevTools du navigateur (panneau Animations) et parcourez chaque état : survol, focus, actif, chargement, vide. Ce qui semble décalé à 10 % est ce qui est subtilement faux à pleine vitesse.

Consultez references/micro-polish.md pour des valeurs spécifiques.

Liste de contrôle rapide :

Liste de contrôle avant livraison

Avant de marquer une interface comme terminée :

RomuloRogerio/design-quality-v2

Qu'est-ce que design-quality-v2 ?

Demander à votre IA préférée

Documentation