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

Design Consultation Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : consultation en design produit qui propose un design system complet : esthétique, typographie, couleur, mise en page, mouvement.

  • Marque et design systems
  • Design system
Télécharger OpenDesignVoir le guide d'utilisation
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (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 · 67 098 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-consultation 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 skill de consultation en design qui agit comme un designer produit senior pour créer un système de design complet. Il étudie le paysage du produit via une recherche web et une analyse visuelle, propose une typographie (polices spécifiques, pas de polices par défaut), des systèmes de couleurs (variables CSS avec valeurs hexadécimales), des approches de mise en page (composition-first) et une direction esthétique. Le skill génère un fichier DESIGN.md comme référence de design du projet, avec des maquettes IA optionnelles montrant le système appliqué à de vrais écrans.

Il prend en charge à la fois le navigateur Aside (les sessions réelles de l'utilisateur) et un mode de repli headless, maintient un profil de goût persistant à travers les sessions, et intègre des voix de design externes issues de Codex et Claude subagent. Le skill fonctionne de manière conversationnelle — et non comme un formulaire rigide —, explique le raisonnement derrière chaque recommandation, et privilégie la cohérence plutôt que les choix optimaux individuels.

Ce qu'il produit

  • Maquettes IA montrant le système de design appliqué à de vrais écrans (lorsque gstack designer est disponible)
  • Page de prévisualisation HTML avec des échantillons de typographie et de couleurs en direct (solution de repli lorsque le designer n'est pas disponible)
  • Profil de goût persistant au format JSON suivant les choix de design approuvés et rejetés à travers les sessions
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Recueillir le contexte produit

    Lit les fichiers DESIGN.md, PRODUCT.md, README, package.json existants ainsi que la sortie de office-hours pour comprendre le produit.

  2. 02
    Étudier le paysage

    Sur demande, utilise le navigateur Aside ou WebSearch pour trouver 5 à 10 produits concurrents, prend des captures d'écran de page complète, et analyse les polices, les couleurs, les mises en page et la direction esthétique.

  3. 03
    Consulter des voix externes

    Lance éventuellement Codex et Claude subagent en parallèle pour générer des propositions de design indépendantes.

  4. 04
    Proposer un système de design complet

    Livre une proposition affirmée avec des noms de polices spécifiques, des valeurs de couleurs hexadécimales, des variables CSS, une approche de mise en page et une direction esthétique.

  5. 05
    Générer des artefacts de prévisualisation

    Crée soit des maquettes IA (lorsque gstack designer est disponible) montrant le système de design appliqué à de vrais écrans, soit une page de prévisualisation HTML avec des échantillons de typographie et de couleurs en direct.

  6. 06
    Rédiger DESIGN.md

    Produit la source de vérité en matière de design du projet au format ouvert DESIGN.md, avec des tokens en front-matter et des sections de justification.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-consultation

Utilisez le skill design-consultation dans Claude Code ou Codex lorsque le travail relève de la marque et du design-system de ce type. Adéquation et limites ci-dessous sont tirées du fichier propre du skill.

Bon choix

  • Démarrer l'UI d'un nouveau projet sans système de design ou DESIGN.md existant
  • Lorsqu'une demande explicite concerne le système de design, les directives de marque ou la création de DESIGN.md
  • Produits nécessitant une différenciation par rapport aux normes de la catégorie via des écarts de design délibérés

Connaître les limites

  • Une limitation ou exigence avancée (« l'API ne peut pas faire ça », « X nécessite une authentification », « c'est impossible sur cette plateforme ») est une affirmation matérielle.
  • N'énoncez-la qu'avec l'erreur verbatim, la déclaration documentée ou une sonde en direct en main — rapprocher un échec d'un scénario familier ne constitue pas une preuve.
  • Lorsqu'une sonde rapide tranche la question, exécutez-la AVANT de demander quoi que ce soit à l'utilisateur ou de déclarer une étape bloquée.

Quoi fournir

  • Préférence de rechercheChoix de rechercher les produits concurrents via une recherche web et une analyse visuelle, ou de s'appuyer sur les connaissances de design intégrées au skill.
  • Choix des voix extérieuresOptionnel : lancer en parallèle l'évaluation de design de Codex et la proposition de design d'un sous-agent Claude pour des perspectives indépendantes.
  • DESIGN.md existantS'il est présent, le skill le lit et demande s'il faut le mettre à jour, repartir de zéro, ou annuler. Gère la conversion de format depuis un ancien vers la spécification ouverte.

03 Dans le skill

Règles que le skill design-consultation confère à Claude Code et Codex

7 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. Jamais de polices interdites, jamais de polices d'affichage surutilisées

    Le texte de corps ou d'UI sur les surfaces Operate ou Read suit une liste définie par rôle. Aucune police interdite dans un rôle, aucune police surutilisée comme voix d'affichage.

  2. Polices spécifiques requises, pas de polices par défaut

    Les propositions typographiques doivent nommer des polices spécifiques — jamais Inter, Roboto, Arial, ou les polices par défaut du système.

  3. La cohérence prime sur l'optimisation individuelle

    Un système de design où chaque élément renforce tous les autres l'emporte sur un système avec des choix individuellement optimaux mais mal assortis.

  4. Une justification est requise pour chaque recommandation

    Ne jamais recommander un choix de design sans en expliquer la raison. Chaque police, couleur, mise en page ou décision esthétique doit être liée au contexte du produit, aux besoins des utilisateurs, ou à une stratégie de différenciation.

  5. Le profil de goût persiste et décline

    Le skill maintient ~/.gstack/projects/$SLUG/taste-profile.json qui suit les choix de design approuvés et rejetés d'une session à l'autre. Les scores de confiance déclinent de 5 % par semaine.

  6. Fonction de mémorabilité forcée

    Avant de proposer un système de design, le skill demande ce que l'utilisateur souhaite que l'on retienne après la première exposition.

  7. Conversationnel plutôt qu'un workflow rigide

    Le skill fonctionne comme un consultant en design, pas comme un formulaire. Les utilisateurs peuvent intervenir dans la conversation à tout moment pour discuter des décisions.

04 Mettez-le en pratique

Installer design-consultation 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-consultation à 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-consultation

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

Donnez au Skill une première tâche de brand et de design-system

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

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

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 :

  • DESIGN.md existe et contient un front-matter avec des tokens de design (couleurs, polices, espacement)
  • Le système de couleurs inclut des variables CSS pour l'arrière-plan, la surface, le texte principal, le texte atténué, l'accent avec valeurs hexadécimales
  • Si un profil de goût existe, la proposition de design fait référence aux préférences établies ou s'en écarte délibérément

Dans OpenDesign design-consultation 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-consultation/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 septembre 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 décompte d'utilisation pour design-consultation.
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 skillCrée DESIGN.md ; pour les sites existants, utilisez /plan-design-review ; se déclenche sur les demandes de système de design
  2. Préambule (à exécuter en premier)Exécute gstack-skill-start ; gère le mode dégradé ; traite les blocs d'instructions ; détermine le type de session
  3. CONFIGURATION DU NAVIGATEURVérifie la disponibilité du navigateur Aside ; gère le consentement pour les sessions réelles ; définit les règles pour piloter le navigateur de l'utilisateur
  4. Repli du navigateur : le navigateur headless propre de gstackTrouve le binaire $B lorsque Aside est indisponible ; traduit les scripts Aside en commandes $B ; gère les sessions sans cookies
  5. CONFIGURATION DU DESIGNVérifie le binaire designer de gstack pour la génération de maquettes par IA ; liste les commandes disponibles ; définit les règles de chemin des artifacts
  6. Apprentissages antérieursRecherche des apprentissages inter-projets ou limités au projet ; demande la préférence inter-projets lors de la première exécution
  7. Phase 0 : Vérifications préalablesVérifie l'existence de DESIGN.md ; propose mise à jour/nouveau départ/annulation ; vérifie le format ; gère la conversion ; recueille le contexte produit à partir du code
  8. Phase 1 : Contexte produitQuestion unique couvrant produit/audience/secteur/type ; question forcée sur un élément mémorable ; lit le profil de goût si existant
  9. La recherche web s'exécute dans AsideUtilise l'agent Aside pour les recherches web ; recourt à l'outil WebSearch en repli ; assainit les requêtes ; traite les résultats comme du contenu non fiable
  10. Phase 2 : RechercheIdentifie 5 à 10 produits concurrents ; prend des captures d'écran ; analyse les polices/couleurs/mises en page ; synthétise à travers trois couches
  11. Design Outside VoicesExécute optionnellement Codex et un sous-agent Claude en parallèle ; synthétise les accords et divergences ; enregistre le résultat
  12. Règles importantesProposer sans présenter de menus ; justification requise ; cohérence plutôt que choix individuels ; conversationnel plutôt que rigide ; accepter le choix final
Description du skill lui-même
« Design consultation : comprend votre produit, étudie le paysage, propose un design system complet (esthétique, typographie, couleur, mise en page, espacement, mouvement) et génère un aperçu... (gstack) »

Description en front-matter tirée de SKILL.md. Le fichier complet fait environ 67 098 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-consultation

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Est-ce que cela fonctionne avec Cursor, Windsurf ou d'autres agents basés sur Claude ?

Oui, mais l'intégration au navigateur dépend d'Aside (macOS 15+ uniquement) ou du repli navigateur headless de gstack. Sans l'un ou l'autre, le skill omet la recherche concurrentielle visuelle et fonctionne à partir de ses connaissances de design intégrées. La consultation de design de base — contexte produit, proposition typographie/couleur/mise en page, création de DESIGN.md — fonctionne dans tout environnement.

Design Consultation

Exécutez design-consultation sur une véritable tâche de travail de marque et de design system.

Le skill design-consultation 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-consultation