design-review

Vue d’ensemble du skill design-review

Ce que fait design-review

design-review est un skill de QA design qui sert à repérer les incohérences visuelles, les problèmes d’espacement, les défauts de hiérarchie, les motifs de « AI slop » et les frictions d’interaction dans une base de code réelle, puis à les corriger de manière itérative avec vérification. Il est particulièrement adapté aux équipes qui veulent un skill design-review capable de passer de « quelque chose ne va pas » à des modifications concrètes du code, avec validation avant/après.

À qui s’adresse ce skill

Utilisez le skill design-review si vous avez besoin d’un agent orienté UX pour auditer une interface existante, peaufiner une implémentation ou relire une UI déjà présente dans le code. C’est un bon choix pour les product designers, les front-end engineers et les agents qui travaillent sur des applications où la cohérence visuelle compte davantage que la création de nouvelles mises en page.

Ce qui le différencie

Contrairement à un prompt générique pour UX Audit, ce guide design-review tient compte du workflow : il est conçu pour repérer les problèmes, appliquer des corrections atomiques et revérifier le résultat. Il prend aussi en charge la séparation en plan mode, ce qui est essentiel quand vous voulez une revue avant l’implémentation plutôt que des modifications immédiates.

Comment utiliser le skill design-review

Installer et router la tâche

Commencez par la commande d’installation design-review depuis votre gestionnaire de skills, puis pointez l’agent vers le repo qui contient l’interface à examiner. Si vous travaillez en plan mode, routez vers /plan-design-review ; si vous voulez des changements de code, utilisez le chemin de revue active décrit dans le skill.

Donner au skill la bonne entrée

Un bon prompt d’utilisation de design-review nomme l’écran, le parcours utilisateur et le point de défaillance qui vous importe. Mieux : « Passe en revue la fenêtre modale de paiement pour l’espacement, la hiérarchie et la clarté des boutons sur mobile, puis corrige les problèmes les plus graves. » Moins bien : « Rends ça plus joli. » Le premier donne au skill une cible, une contrainte et un critère de réussite.

Lire d’abord ces fichiers

Pour un guide design-review qui aide vraiment à décider si le skill convient, lisez d’abord SKILL.md, puis tout fichier modèle généré comme SKILL.md.tmpl s’il est présent. Inspectez aussi l’arborescence du repo pour repérer les conventions de routing des prompts ou les helpers, car ce dépôt est centré sur le corps du skill plutôt que sur des scripts ou de la documentation d’accompagnement.

L’utiliser comme une boucle de revue

Utilisez le skill en cycles courts : inspecter, corriger, vérifier, recommencer. Demandez-lui de montrer ce qu’il a modifié et pourquoi, et privilégiez une seule famille de problèmes par passage, par exemple la typographie, l’espacement ou la latence d’interaction. Cela permet de garder la revue ciblée et de repérer plus facilement les régressions.

FAQ du skill design-review

design-review sert-il seulement au polish final ?

Non. Le skill design-review fonctionne aussi pour le polish d’un site en production, le nettoyage d’une base de code et les vérifications de type UX Audit lorsque la qualité visuelle existe déjà mais doit être resserrée. Il est moins utile pour l’idéation de concept en amont que pour corriger et valider une interface déjà implémentée.

Faut-il être designer pour l’utiliser ?

Non, mais il faut décrire clairement l’écran et le problème. Les non-designers obtiennent de meilleurs résultats en précisant ce qui ne va pas, qui est l’utilisateur et à quoi ressemble le succès, plutôt qu’en demandant une refonte vague.

En quoi est-ce différent d’un prompt normal ?

Un prompt classique peut générer des suggestions ; design-review est pensé pour repérer les problèmes dans le code, les modifier, puis vérifier le résultat. Si vous voulez seulement des conseils, le skill est peut-être plus complet que nécessaire ; si vous voulez une réparation mesurable de l’interface, il est mieux adapté.

Quand ne faut-il pas utiliser design-review ?

Évitez-le si la tâche est purement stratégique, liée à la marque ou uniquement au contenu, sans interface à inspecter. C’est aussi un moins bon choix si vous ne pouvez pas accéder à la base de code ou vérifier les captures d’écran après les changements, car la valeur du skill repose sur une validation itérative.

Comment améliorer le skill design-review

Commencer par une cible de revue précise

Les meilleurs résultats avec design-review viennent d’une cible resserrée : une page, un composant ou un parcours utilisateur. Donnez au skill le viewport, le contexte de l’appareil et la préoccupation principale, par exemple : « page des paramètres sur desktop, focus sur l’alignement et la lisibilité » ou « carte tarifaire mobile, focus sur la clarté au tap ».

Lui dire sur quoi optimiser

Si votre priorité est la cohérence, l’accessibilité, la clarté de conversion ou la vitesse d’interaction, dites-le dès le départ. Cela aide le skill design-review à arbitrer entre plusieurs correctifs quand une modification améliore un point mais en fragilise un autre.

Surveiller les modes d’échec fréquents

Les entrées faibles les plus courantes sont : « rends ça plus propre », « améliore le design » et « audite tout ». Ces formulations appellent des réponses larges et peu exploitables. Les entrées plus solides nomment la classe de défaut, le composant et la marge de changement acceptable, ce qui réduit les modifications inutiles et améliore la boucle d’utilisation de design-review.

Itérer avec des preuves

Après le premier passage, demandez les principaux problèmes qui restent, les fichiers exacts modifiés et les régressions encore visibles dans les captures. Si le résultat est proche mais pas suffisant, resserrez le brief avec une contrainte plus nette : « garde la mise en page inchangée », « ne modifie pas la palette de couleurs » ou « corrige seulement la hiérarchie et l’espacement ».