83.3K+Télécharger
Aller au guide d’utilisation
design-reviewpar Garry Tan

Design Review Skill.

Un skill Claude Code et Codex pour la revue de design : contrôle qualité d'une page construite avec l'œil d'un designer : incohérences, espacement, hiérarchie, motifs bâclés ; puis les corrige.

  • Revue de conception et accessibilité
  • Rapport de revue
Télécharger OpenDesignVoir le guide d'utilisation
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 126 647 caractères au total

01 Ce qu'il fait

Ce que fait le Skill design-review dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un contrôle qualité digne d'un œil de designer sur un site en ligne. Il ouvre les pages dans le navigateur de l'utilisateur, les capture en 375, 768 et 1440, note dix catégories allant de la hiérarchie visuelle aux états d'interaction, puis modifie le code source pour corriger ce qu'il a trouvé, un commit par correction, en revérifiant avec des captures avant et après.

La profondeur par défaut est de 5 à 8 pages ; sans URL sur une branche de fonctionnalité, il devient sensible au diff. Les lecteurs obtiennent deux notes principales, un Design Score pondéré et un AI Slop Score autonome, ainsi que 30 règles de détection nommées telles que [kicker-above-heading] et [gradient-text] derrière les jugements portés.

Ce qu'il produit

  • Un rapport d'audit structuré en markdown dans le répertoire d'exécution.
  • Un fichier design-baseline.json écrit pour la comparaison de régression lors des exécutions suivantes.
  • Des paires de captures d'écran avant et après pour chaque correction appliquée.
  • Un fichier DESIGN.md facultatif rédigé à partir des observations extraites, si l'utilisateur accepte la proposition de la Phase 2.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Réagir avant d'analyser

    La Phase 1 ouvre la cible et prend une capture d'écran desktop pleine page, puis rédige une première impression structurée nommant ce qui attire le regard en premier.

  2. 02
    Extraire le système rendu

    La Phase 2 sonde les polices, les couleurs, l'échelle des titres et les zones tactiles dans la page, puis propose d'enregistrer les résultats dans un DESIGN.md.

  3. 03
    Auditer page par page

    La Phase 3 exécute un hook console, un instantané interactif et une capture d'écran annotée par page, puis répète l'opération à trois largeurs de viewport.

  4. 04
    Ressentir les flux

    La Phase 4 parcourt 2 à 3 parcours utilisateur, en comparant l'instantané après chaque action et en suivant un score de bonne volonté pour la friction et la réparation.

  5. 05
    Corriger une constatation à la fois

    La Phase 8 apporte le changement minimal, le commit seul, puis retteste avant de passer à la constatation suivante.

  6. 06
    Noter deux titres

    Le design score est une moyenne pondérée sur dix catégories, tandis que la note AI slop reste indépendante.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-review

Utilisez le skill design-review dans Claude Code ou Codex lorsque le travail consiste en une design review de ce type. La portée et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • Un audit avant lancement ou après refonte où l'ensemble du site nécessite un passage systématique, pas un simple contrôle ponctuel.
  • Travailler sur une branche de fonctionnalité qui modifie l'UI, où seules les routes concernées doivent être auditées.
  • Lorsque vous mentionnez des incohérences visuelles ou souhaitez peaufiner un site en ligne, le skill devrait se suggérer de lui-même.
  • Juger si une page mise en production se lit comme générée par IA, ce que la plupart des développeurs ne peuvent pas évaluer eux-mêmes.
  • Un contrôle rapide de cohérence quand il n'y a pas le temps pour le balayage complet : page d'accueil plus deux pages clés et une checklist abrégée.

Connaître les limites

  • Revoir un design avant qu'il ne soit construit : c'est un skill distinct en mode plan.
  • Les problèmes situés hors de la source, comme des widgets tiers ou du texte qui doit venir de l'équipe, sont marqués comme différés plutôt que corrigés.
  • Il ne touchera pas à votre configuration CI, et les tests existants sont hors limites ; seuls de nouveaux fichiers de tests de régression peuvent être créés.

Quoi fournir

  • L'URL cibleUne adresse en direct, localhost inclus. Sans elle, le skill la détecte automatiquement ou, sur main, vous la demande.
  • Une restriction de périmètreLimitez le balayage à une seule page ou zone lorsque vous ne voulez pas de la tournée complète.
  • Un indicateur de profondeurPar défaut, le mode est standard ; --quick réduit à trois pages et --deep étend à un balayage complet avant lancement.
  • Votre DESIGN.md s'il existeLes documents de design à la racine du repo sont lus en premier afin que chaque décision soit calibrée par rapport au système déclaré, et les écarts sont jugés plus sévèrement.
  • Une session de navigateur déjà connectéeL'audit fonctionne dans la session dont dispose déjà l'utilisateur, donc les pages authentifiées n'ont besoin d'aucun flux de connexion.

03 Dans le skill

Règles que le skill design-review donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Juger le rendu, pas le repo

    L'audit ne lit jamais les fichiers d'implémentation : les constats doivent provenir de la page rendue. La seule exception est la rédaction de DESIGN.md à partir des observations extraites.

  2. Un commit par correction

    Chaque correction est commitée seule avec le format de message style(design): FINDING-NNN suivi d'une courte description.

  3. Arbre propre avant de commencer

    Un arbre de travail sale arrête l'exécution : l'agent doit demander s'il faut commiter, remiser (stash) ou abandonner avant qu'aucun commit de correction n'existe.

  4. Demander avant d'agir sur un compte réel

    Sur une cible non locale, les actions modifiantes nécessitent une question de consentement par exécution listant exactement ce qui sera fait ; les chemins de déconnexion et de suppression ne sont jamais suivis.

  5. Les identifiants restent hors de l'agent

    La session déjà connectée est utilisée telle quelle. Mots de passe, codes à usage unique, détails de paiement, cookies, tokens et localStorage sont tous hors limites.

  6. Des captures d'écran appuient chaque constat

    Un constat sans au moins une capture d'écran ne compte pas, et les images sont extraites et lues afin que l'utilisateur les voie en ligne.

  7. Annuler dès que cela s'aggrave

    Toute régression déclenche un git revert HEAD immédiat, et le constat est marqué comme différé plutôt que corrigé à la volée.

  8. Arrêt à 30 corrections

    La boucle s'intensifie tous les cinq correctifs et s'arrête net une fois que le risque de correction de conception dépasse 20 % ou que le nombre de correctifs atteint 30.

04 Mettez-le en pratique

Installer design-review dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-review à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-review

Forme générique de la CLI skills pour design-review/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what you can.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Retestez la page concernée après chaque correction et vérifiez que la liste des erreurs console est vide ou pas plus longue que la référence.
  • Lorsqu'une maquette cible a été générée, comparez la capture corrigée à celle-ci et enregistrez un résultat réussi ou échoué.
  • Chaque correction est classée : vérifiée lorsque le retest la confirme sans nouvelle erreur.
  • La phase 9 réaudite les pages concernées et avertit fortement si les notes finales sont inférieures à la référence.
  • Le rapport indique le nombre de détecteurs sous forme d'écart entre le début et la fin, ou précise que le détecteur n'était pas installé ou était désactivé.

Dans OpenDesign, design-review est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branche main
Fichier du skill
design-review/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 71f6048
License
MIT Tiré de LICENSE.
Étoiles du dépôt
132 921 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt garrytan/gstack, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un comptage d'utilisation pour design-review.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. ConfigurationAnalyse l'URL, la portée, la profondeur et l'authentification ; vérifie DESIGN.md, l'arbre propre, le navigateur, les tests.
  2. ModesLes portées complète, rapide, approfondie, sensible aux différences et de régression déterminent les pages visitées.
  3. Phase 1 : première impressionCapture d'écran de la page complète en desktop, puis une réaction à chaud structurée et un test des zones de page.
  4. Phase 2 : extraction du design systemSonde les polices, les couleurs, l'échelle des titres et les zones tactiles, puis propose d'enregistrer un DESIGN.md.
  5. Phase 3 : audit visuel page par pageInstantanés, captures annotées et responsives, test du tronc commun, puis une liste de contrôle en 10 catégories.
  6. Phase 4 : revue du flux d'interactionParcourt 2 à 3 flux, compare chaque étape, et note un indice de bienveillance à partir de 70.
  7. Phase 5 : cohérence entre les pagesCompare la navigation, le pied de page, les composants, le ton et le rythme des espacements entre les pages.
  8. Phase 6 : compilation du rapportNote chaque catégorie de A à F et rédige le rapport ainsi que design-baseline.json.
  9. Phase 7 : triClasse les constats par impact et diffère ceux que les modifications du code source ne peuvent pas corriger.
  10. Phase 8 : boucle de correctionLocalise la source, applique la correction minimale, valide, retest, classe, s'autorégule.
  11. Phase 9 : audit de conception finalRéaudite les pages concernées, recalcule les notes et le nombre de détecteurs, avertit en cas de régression.
  12. Phase 10 : rapportRédige le rapport complet, le résumé de l'index du projet, la ligne de PR et l'écart de détecteurs.
Description du skill lui-même
« QA d'œil de designer : détecte les incohérences visuelles, les problèmes d'espacement, les problèmes de hiérarchie, les motifs générés par IA, et les interactions lentes — puis les corrige. (gstack) »

Description front-matter de SKILL.md. Le fichier complet fait environ 126 647 caractères. Lire le fichier complet sur GitHub.

Design Review

Exécutez design-review sur une vraie tâche de design review.

Le skill design-review est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-review