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

Plan Design Review Skill.

Un skill Claude Code et Codex pour la revue de design : examine un plan de conception pour vérifier son exhaustivité et les risques d'expérience avant l'implémentation.

  • Revue de conception et accessibilité
  • Rapport de revue
Télécharger OpenDesignVoir le guide d'utilisation
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (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)
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 72 139 caractères au total

01 Ce qu'il fait

Ce que fait le skill plan-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

Examine un plan de conception pour en vérifier l'exhaustivité et le risque en matière d'expérience avant l'implémentation. Effectue sept passes de conception (Architecture de l'information, États d'interaction, Parcours utilisateur, États vides, Hiérarchie visuelle, Risque d'AI Slop, Accessibilité) en notant chacune de 0 à 10, explique ce qui donnerait un 10, puis corrige le plan pour y arriver. Génère des maquettes visuelles avec le designer gstack par défaut lorsque l'UI est dans le périmètre.

Comprend une étape optionnelle de voix extérieures : Codex évalue selon les règles de conception strictes d'OpenAI ainsi que des tests décisifs ; un sous-agent Claude effectue un examen d'exhaustivité indépendant. Fonctionne en mode plan. Pour les audits visuels d'un site en production, utilisez plutôt /design-review. Le résultat est un meilleur plan accompagné d'un rapport d'examen structuré, pas un document à propos du plan.

Ce qu'il produit

  • Un fichier de plan amélioré avec les lacunes de conception corrigées, des dimensions notées, et une section GSTACK REVIEW REPORT structurée ajoutée
  • Un fichier HTML de tableau de comparaison et un fichier approved.json enregistrant la variante choisie par l'utilisateur, les notes, les commentaires et les retours
  • Une fiche de score décisive synthétisant les constats de Codex et du sous-agent Claude si les voix extérieures ont été exécutées
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    La porte de périmètre confirme la cible de l'examen

    Avant toute autre chose, demande à l'utilisateur de confirmer ce qui doit être examiné (diff de branche, document de plan, ou page spécifique), sauf si le mode plan sélectionne automatiquement le plan actif ou si l'utilisateur a explicitement nommé une cible.

  2. 02
    Génère des maquettes visuelles par défaut

    Lorsque le designer gstack est disponible et que le plan a un périmètre UI, génère des maquettes immédiatement sans demander l'autorisation.

  3. 03
    Les voix de conception extérieures optionnelles s'exécutent en parallèle

    Si l'utilisateur y consent, lance Codex (règles de conception strictes + tests décisifs) et le sous-agent Claude (examen d'exhaustivité indépendant) simultanément.

  4. 04
    Sept passes de conception notées de 0 à 10 corrigent les lacunes

    Pour chaque dimension (Architecture de l'information, États d'interaction, Parcours utilisateur, États vides, Hiérarchie visuelle, Risque d'AI Slop, Accessibilité), note le plan, explique à quoi ressemble un 10/10, modifie le plan pour combler les lacunes, renote, et répète jusqu'à obtenir 10 ou jusqu'à ce que l'utilisateur indique de passer à la suite.

  5. 05
    Écrit un rapport d'examen structuré dans le fichier de plan

    Ajoute une section GSTACK REVIEW REPORT avec un tableau des exécutions/statuts/constats, une ligne VERDICT, et un statut des décisions non résolues comme dernière ligne non vide du fichier.

02 Trouvez celui qui vous convient

Quand utiliser le skill plan-design-review

Utilisez le skill plan-design-review dans Claude Code ou Codex lorsque la tâche consiste en une revue de design de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

  • L'utilisateur a rédigé un plan avec des composants UI/UX qui doivent être examinés avant le début de l'implémentation
  • Un plan de conception a besoin de maquettes visuelles pour rendre concrètes des descriptions abstraites avant le début du codage
  • Un plan décrit ce que fait le backend mais ne précise jamais ce que voit l'utilisateur, les états vides, les états d'erreur, ou le comportement responsive

Connaître les limites

  • Modifications purement backend, API uniquement, ou d'infrastructure sans périmètre UI
  • Audits visuels de sites en direct (utilisez plutôt /design-review)

Quoi fournir

  • Un plan de design ou un diff de branche avec un périmètre UILe fichier du plan, un document collé par l'utilisateur, une page/un chemin spécifique, ou le diff de la branche courante.
  • Retour sur les maquettes via un tableau de comparaisonLe designer gstack sert un tableau de comparaison via HTTP où l'utilisateur note les variantes, laisse des commentaires, clique sur Regenerate/Remix, ou soumet un choix final.

03 Dans le skill

Les règles que le skill plan-design-review donne à Claude Code et Codex

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

  1. Tous les artefacts de design sont enregistrés dans ~/.gstack/projects/$SLUG/designs/

    Les maquettes, les tableaux de comparaison et approved.json doivent être enregistrés dans le répertoire designs du projet gstack de l'utilisateur, jamais dans .context/, docs/designs/, /tmp/, ou tout autre répertoire local au projet.

  2. Hiérarchie des priorités : Step 0 > Maquettes > États d'interaction > AI Slop > IA > Parcours utilisateur

    Ne jamais sauter l'évaluation du périmètre Step 0 ni la génération de maquettes lorsque le designer est disponible. Les maquettes avant les passes de revue sont non négociables.

  3. Les revues de design se calibrent sur DESIGN.md lorsqu'il est présent

    Si DESIGN.md existe, toutes les décisions de design doivent s'aligner sur le design system énoncé.

  4. Les voix externes préchargent les problèmes dans les passes

    Les rejets stricts (hard rejections) de Codex sont soulevés comme premiers éléments de la Pass 1, tagués [HARD REJECTION]. Les éléments Litmus DISAGREE font apparaître les deux perspectives dans la passe concernée.

  5. Principe de complétude : l'IA rend l'exhaustivité peu coûteuse

    Recommander une couverture complète (tests, cas limites, chemins d'erreur) — faire bouillir l'océan un lac à la fois.

04 Mettez-le en pratique

Installer plan-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 plan-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 plan-design-review

Forme générique de la CLI skills pour plan-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
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if 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 :

  • Confirmer que le dernier titre du fichier de plan est ## GSTACK REVIEW REPORT avant de sortir du mode plan
  • Vérifier que le rapport de revue contient un tableau runs/status/findings, une ligne VERDICT, et un statut de décisions non résolues comme dernière ligne non vide du fichier
  • Vérifier que gstack-review-log a été appelé et que gstack-review-read a été exécuté au moins une fois si un fichier de plan est dans le contexte

Dans OpenDesign, plan-design-review est inclus : 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
plan-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. Ne constitue pas une note ni un compteur d'utilisation pour plan-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. Quand invoquer ce skillÀ utiliser pour les revues de plan de design ; à suggérer de manière proactive lorsqu'un plan UI/UX nécessite une revue avant implémentation
  2. Préambule (à exécuter en premier)Exécute gstack-skill-start, gère le mode dégradé, lit les blocs d'instructions, définit SESSION_KIND et les marqueurs de télémétrie
  3. Philosophie du designGarantit que le design paraît intentionnel et non généré ; trouve chaque lacune, explique son importance, corrige les évidentes
  4. Le designer gstack — VOTRE OUTIL PRINCIPALGénérateur de maquettes par IA créant de vrais visuels à partir de briefs de design ; à utiliser par défaut lorsqu'une UI existe
  5. Principes de designNeuf principes : les états vides sont des fonctionnalités, la hiérarchie compte, la spécificité plutôt que le ressenti, les cas limites sont de l'UX, l'AI slop est l'ennemi, le responsive est intentionnel, l'accessibilité est obligatoire, la soustraction est le réflexe par défaut, la confiance se gagne au niveau du pixel
  6. Schémas cognitifs — Comment les grands designers voientDouze réflexes perceptifs : voir des systèmes et non des écrans, l'empathie comme simulation, la hiérarchie comme service, le culte de la contrainte, le réflexe de questionnement, la paranoïa des cas limites, le test « le remarquerais-je », le goût raisonné, la soustraction par défaut, la conception selon l'horizon temporel, la conception pour la confiance, les parcours en storyboard
  7. Principes UX : comment les utilisateurs se comportent réellementTrois lois (ne me faites pas réfléchir, les clics ne comptent pas mais la réflexion oui, omettre puis omettre encore), comportement des utilisateurs (parcourir plutôt que lire, se satisfaire, se débrouiller), design d'affichage, navigation comme orientation, réservoir de bonne volonté, enjeux plus élevés sur mobile
  8. Hiérarchie des priorités sous contrainte de contexteÉtape 0 > maquettes > états d'interaction > AI Slop > IA > parcours utilisateur ; ne jamais sauter l'étape 0 ni les maquettes
  9. AUDIT SYSTÈME PRÉ-REVUE (avant l'étape 0)Recueille le contexte à partir du git log, du diff stat, du plan, de CLAUDE.md, DESIGN.md, TODOS.md, cartographie le périmètre de l'UI et les patterns existants
  10. CONFIGURATION DU DESIGN (à exécuter AVANT toute commande de maquette)Vérifie si le binaire gstack designer est disponible ; affiche DESIGN_READY ou DESIGN_NOT_AVAILABLE
  11. Contexte Brain (préflight)Charge le contexte structuré du projet (produit, marque, objectifs, décisions récentes) depuis gstack-brain-cache avant de poser des questions de clarification
  12. Étape 0 : évaluation du périmètre designNote initiale de design de 0 à 10, vérification du statut de DESIGN.md, exploitation du design existant, question sur les zones à privilégier (STOP jusqu'à réponse de l'utilisateur)
Description du skill lui-même
« Revue de plan avec l'œil du designer — interactive, comme les revues CEO et Eng. (gstack) »

Description en en-tête de SKILL.md. Le fichier complet compte environ 72 139 caractères. Lire le fichier complet sur GitHub.

Plan Design Review

Exécuter plan-design-review sur une vraie tâche de revue de design.

Le skill plan-design-review est inclus dans OpenDesign. Téléchargez l'application, choisissez 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 plan-design-review