design-review — revue et correction UI des livrables web
Vous êtes le passage QA design obligatoire avant livraison. Deux modes : review (rapport de findings priorisés, sans toucher au code) et fix (corrections appliquées, listées et justifiées). Par défaut : review, puis fix sur validation.
Étape 0 — Charger les design tokens de la marque (OBLIGATOIRE)
Charger 01-brand/style-guide.md — la marque PRIME sur tout style générique de cette skill.
- Lire
01-brand/style-guide.md: couleurs, police, radius, gradient, interdits visuels ({{BRAND_BANNED_VISUALS}}). - Lire
01-brand/design-anti-generique.md: la revue traque aussi les patterns « IA générique » — un livrable conforme aux tokens mais visuellement générique est un 🟠. - Si un
design-tokens.mdaccompagne le livrable (produit par la skilldesign-system), le charger : c'est le contrat à vérifier. - La conformité marque est la priorité 0 de la revue, avant même l'accessibilité : une page accessible mais hors marque est refusée aussi sûrement qu'une page inaccessible.
Si 01-brand/style-guide.md est manquant ou contient des {{...}}, signaler et limiter la revue aux priorités 1-8 (génériques).
Format du rapport
Pour chaque finding : [P{n}-{sévérité}] {fichier}:{ligne} — {problème} → {correction}. Sévérités : bloquant (livraison interdite), majeur (corriger avant publication), mineur (amélioration). Conclure par un verdict : ✅ livrable / ⚠ corrections majeures requises / ❌ retour en production.
Grille de revue par priorité
P0 — Conformité marque (BLOQUANT)
- Couleurs = tokens du style-guide, aucun hex étranger à la marque sur les éléments identitaires (CTA, titres, fonds).
- Police =
{{BRAND_FONT_PRIMARY}}(+ complément validé). Radius ={{BRAND_BORDER_RADIUS}}décliné en échelle cohérente. - Aucun interdit visuel de
{{BRAND_BANNED_VISUALS}}. - Logos : assets officiels de
01-brand/assets/, proportions et zones de protection respectées — jamais recolorés ou déformés.
P1 — Accessibilité (CRITIQUE)
- Contraste : texte normal ≥ 4.5:1, texte large (≥ 24 px ou 19 px gras) et composants UI ≥ 3:1. Tester aussi le dark mode s'il existe.
- Focus visible (ring 2-4 px) sur tout élément interactif — ne jamais supprimer
outlinesans remplacement. altdescriptif sur les images porteuses de sens ;alt=""sur le décoratif.aria-labelsur les boutons icône-seul ; ordre de tabulation = ordre visuel ; lien « aller au contenu ».- Hiérarchie de titres séquentielle (h1→h6, sans saut) ; un seul h1.
- L'information n'est jamais portée par la couleur seule (ajouter icône ou texte).
prefers-reduced-motionrespecté : animations réduites/désactivées avec fallback complet.
P2 — Interaction et cibles (CRITIQUE)
- Cibles tactiles ≥ 44×44 px, espacement ≥ 8 px entre cibles.
cursor: pointersur le cliquable ; hover n'est jamais le seul chemin vers une interaction.- Feedback visuel ≤ 100 ms au clic ; boutons désactivés + spinner pendant les opérations async.
- 4 états distincts sur chaque interactif : default / hover / active / disabled (opacité 0.38-0.5 + cursor).
- Confirmation avant toute action destructive.
P3 — Performance perçue (HAUTE)
- Images : WebP/AVIF,
srcset/sizes,loading="lazy"sous le pli,width/heightouaspect-ratiodéclarés (CLS < 0.1). - Fonts :
font-display: swap, précharger uniquement les graisses critiques. - Espace réservé pour tout contenu async (pas de saut de layout) ; skeleton au-delà de 300 ms de chargement.
- Scripts tiers en
async/defer; CSS critique en tête. - Vidéo : jamais d'autoplay avec son ; click-to-play ou pause hors écran ; compressée.
P4 — Cohérence de style (HAUTE)
- Un seul style UI sur tout le livrable ; ombres/blur/radius alignés sur ce style (échelle d'élévation unique).
- Pas d'emoji comme icônes structurelles : SVG uniquement (Lucide, Heroicons, Phosphor), un seul set, stroke constant (1.5 ou 2 px), filled vs outline discipliné par niveau de hiérarchie.
- Tailles d'icônes tokenisées (sm/md/lg), alignées sur la baseline du texte.
- Un seul CTA primaire par écran ; secondaires visuellement subordonnés.
- Tokens sémantiques partout — aucun hex brut dans les composants.
P5 — Layout et responsive (HAUTE)
<meta name="viewport" content="width=device-width, initial-scale=1">— jamais de blocage du zoom.- Aucun scroll horizontal ; tester 320 / 375 / 768 / 1024 / 1440 px.
- Corps ≥ 16 px sur mobile ; mesure 35-60 caractères mobile, 60-75 desktop.
- Échelle d'espacement 4/8 px systématique ; rythme vertical hiérarchisé (ex. 16/24/32/48).
max-widthcohérente sur desktop ; échelle z-index définie (10/20/40/100/1000) ; padding compensant les barres fixes/sticky.- Préférer
min-height: 100dvhà100vhsur mobile ;max-width: 100%sur les images ; tableaux → scroll horizontal contenu ou passage en cartes.
P6 — Typographie et couleur (MOYENNE)
- Line-height 1.5-1.75 pour le corps ; échelle modulaire cohérente ; hiérarchie par la graisse (700/400/500).
- Texte sombre sur fond clair (pas de gris-sur-gris) ; chiffres tabulaires pour données/prix.
- Troncature : préférer le retour à la ligne ; sinon ellipse + accès au texte complet.
- Dark mode : variantes désaturées, jamais une inversion ; contrastes re-testés séparément.
P7 — Animation (MOYENNE)
- Micro-interactions 150-300 ms ; transitions complexes ≤ 400 ms ; jamais > 500 ms.
transform/opacityuniquement — jamaiswidth/height/top/left(reflow).ease-outen entrée,ease-inen sortie ; sortie ~60-70 % de la durée d'entrée.- 1-2 éléments animés max par vue ; chaque animation exprime une relation cause-effet, pas une décoration.
- Stagger de listes 30-50 ms/item ; aucune animation ne bloque l'input utilisateur.
P8 — Formulaires et feedback (MOYENNE)
- Label visible par champ (jamais placeholder-seul) ; erreur sous le champ concerné, avec cause + correction.
- Validation au blur (pas à la frappe) ; focus auto sur le premier champ invalide après soumission ;
aria-live/role="alert"pour les erreurs. - Types sémantiques (
email,tel,url,number) +autocomplete; hauteur d'input ≥ 44 px. - États submit : loading → succès/erreur ; toasts auto-fermés 3-5 s sans voler le focus.
- États vides utiles (message + action) ; parcours multi-étapes avec indicateur de progression et retour possible.
Checklist express pré-livraison
À dérouler en dernier passage, dans l'ordre :
- P0 : tokens marque exacts, aucun interdit visuel, logos officiels
- Contrastes 4.5:1 / 3:1 vérifiés (light et dark)
- Focus visibles, navigation clavier complète,
altetaria-labelposés - Zéro emoji-icône ; un seul set SVG cohérent
- Testé 320-375 px et desktop ; zéro scroll horizontal ; corps ≥ 16 px
-
prefers-reduced-motionrespecté ; animationstransform/opacity150-300 ms - Images dimensionnées + lazy ; pas de saut de layout
- Formulaires : labels, erreurs claires, feedback submit
- Un seul CTA primaire par écran
Si le livrable est du contenu marketing en dossier de production, enchaîner avec la skill brand-check (fond éditorial) — design-review couvre la forme, pas le message.
Source : règles condensées et adaptées de ui-ux-pro-max v2.5.0 (quick-reference.md + ux-guidelines.csv), © 2024 Next Level Builder, licence MIT. Adaptations : recentrage web (règles iOS/Android/React Native/Flutter écartées), ajout de la priorité P0 conformité marque, format de rapport et modes review/fix. Registre : docs/vendored-design.md.
