# Chapitre A — Design & UI 5 skills regroupés sous ce thème. # plan-design-review # plan-design-review > _Catalogue généré le 2026-05-11_ ## En une phrase Relit ton plan de fonctionnalité avec un œil de designer, note chaque dimension visuelle sur 10 et te dit ce qu'il faudrait changer pour qu'elle devienne excellente. ## Quand l'utiliser - Quand tu as rédigé un plan ou un design doc et tu veux le passer au crible avant de coder. - Pour repérer les erreurs UX, de hiérarchie ou d'accessibilité avant qu'elles soient dans le code. - Quand tu hésites entre plusieurs approches visuelles et tu veux un avis structuré. - Pendant une session en plan mode, pour valider qu'une feature UI est bien pensée. ## Comment l'invoquer - **Slash command** : `/plan-design-review` - **Phrases déclencheurs (texte)** : "review the design plan" / "design critique" / "review ux plan" / "check design decisions" - **Auto-invocation** : ✅ Oui — Claude suggère ce skill de lui-même quand tu as un plan avec des composants UI/UX qui mérite une relecture avant l'implémentation. ## Description détaillée Ce skill fonctionne comme une revue de plan menée par un designer senior. Il lit ton document de plan, identifie les dimensions visuelles et UX importantes (hiérarchie, typographie, espacement, motion, accessibilité, états vides, etc.), et donne une note 0-10 sur chacune. Pour chaque note inférieure à 10, il explique précisément ce qui manque et ce qu'il faudrait modifier pour atteindre la note maximale. Contrairement à `/design-review` qui audite un site déjà en ligne, `plan-design-review` travaille uniquement sur du texte — sur la phase amont, avant que le code soit écrit. Il fonctionne en mode interactif : il pose des questions ciblées si quelque chose manque dans ton plan, propose des options, et modifie directement le plan pour intégrer les corrections. C'est l'équivalent design des skills `/plan-ceo-review` (stratégie) et `/plan-eng-review` (architecture). Les trois peuvent être enchaînés via `/autoplan`. Il est conçu pour fonctionner même en plan mode (mode où Claude ne touche pas au code), ce qui est exactement le moment où tu veux ce regard critique. ## Source - **Plugin** : `gstack` - **Nom interne** : `plan-design-review` - **Fichier** : `/home/thymon/.claude/skills/gstack/plan-design-review/SKILL.md` # design-review # design-review > _Catalogue généré le 2026-05-11_ ## En une phrase Audite ton site déjà en ligne avec un œil de designer, repère les problèmes visuels et UX, puis les corrige directement dans le code en commit après commit. ## Quand l'utiliser - Quand ton site marche mais "fait un peu cheap" et tu veux le polir. - Pour repérer les soucis d'alignement, d'espacement, de hiérarchie, ou de typographie qu'on ne voit plus à force de regarder son propre site. - Pour traquer les "patterns AI slop" (les tics visuels qui trahissent un design généré). - Avant de montrer ton site à quelqu'un et tu veux qu'il fasse "pro". ## Comment l'invoquer - **Slash command** : `/design-review` - **Phrases déclencheurs (texte)** : "audit the design" / "visual QA" / "check if it looks good" / "design polish" / "visual design audit" / "fix design issues" - **Auto-invocation** : ✅ Oui — Claude suggère ce skill quand tu mentionnes une incohérence visuelle ou que tu veux peaufiner l'aspect d'un site déjà en ligne. ## Description détaillée Ce skill ouvre le navigateur invisible sur ton site, prend des captures d'écran, et les analyse avec un regard de designer. Il cherche des problèmes concrets : espacements incohérents, alignements ratés, contraste insuffisant, hiérarchie typographique floue, interactions trop lentes, ou patterns trop "génériques AI". Une fois qu'il a sa liste de problèmes, il ne se contente pas de te la donner — il les corrige un par un directement dans le code source. Chaque correction est faite atomiquement (un commit = un fix), avec une capture avant/après pour prouver que le souci est résolu. C'est une vraie boucle : repérer, corriger, vérifier, recommencer. À ne pas confondre avec `/plan-design-review`, qui fait la même chose mais sur un PLAN (du texte), avant que le code existe. `design-review` travaille sur le site vivant après le déploiement. C'est l'outil parfait pour la dernière passe avant de montrer quelque chose. Tu peux le lancer plusieurs fois — chaque passe attrape ce que la précédente a manqué. ## Source - **Plugin** : `gstack` - **Nom interne** : `design-review` - **Fichier** : `/home/thymon/.claude/skills/gstack/design-review/SKILL.md` # design-html # design-html > _Catalogue généré le 2026-05-11_ ## En une phrase Transforme un design approuvé (maquette, plan, ou simple description) en HTML/CSS de qualité production, prêt à être servi en ligne, sans dépendances. ## Quand l'utiliser - Quand tu as choisi une maquette via `/design-shotgun` et tu veux en faire une vraie page web. - Quand un plan CEO ou design est validé et il faut maintenant le matérialiser en code. - Quand tu décris une page à Claude et tu veux qu'il te ponde le HTML d'un coup, sans framework lourd. - Pour créer une landing page, une page produit, ou un mini-site léger qui doit charger vite. ## Comment l'invoquer - **Slash command** : `/design-html` - **Voice triggers** : « build the design » · « code the mockup » · « make it real » - **Phrases déclencheurs (texte)** : "finalize this design" / "turn this into HTML" / "build me a page" / "implement this design" - **Auto-invocation** : ✅ Oui — Claude suggère ce skill quand tu viens d'approuver un design ou que tu as un plan prêt à coder. ## Description détaillée Ce skill génère du HTML/CSS "Pretext-native" — une approche où le texte coule naturellement, où les hauteurs sont calculées dynamiquement, et où les layouts s'adaptent au contenu. Pas de JavaScript lourd, pas de framework, juste environ 30 Ko de code total pour rendre la page autonome. Il sait s'enchaîner avec d'autres skills : il peut partir d'une maquette validée par `/design-shotgun`, d'un plan stratégique de `/plan-ceo-review`, du contexte d'une revue design `/plan-design-review`, ou simplement d'une description écrite par toi. Il a un routage intelligent : selon le type de design demandé (landing, dashboard, formulaire, etc.), il choisit les bons patterns Pretext à appliquer. Le résultat est censé être directement publiable, pas un brouillon à retoucher. L'intérêt par rapport à un "Claude qui code une page" classique : le résultat est pensé pour être responsive, accessible et léger dès le départ, plutôt que de faire un Tailwind générique qu'il faudra ensuite nettoyer. ## Source - **Plugin** : `gstack` - **Nom interne** : `design-html` - **Fichier** : `/home/thymon/.claude/skills/gstack/design-html/SKILL.md` # design-shotgun # design-shotgun > _Catalogue généré le 2026-05-11_ ## En une phrase Génère plusieurs variantes de design en parallèle, les affiche côte à côte sur un tableau de comparaison, et te laisse choisir celle qui te plaît avant d'aller plus loin. ## Quand l'utiliser - Quand tu commences une page et tu n'as pas d'idée précise de ce que tu veux visuellement. - Quand tu n'aimes pas comment ça rend mais tu ne sais pas comment l'expliquer — laisse Claude proposer plusieurs pistes. - Pour explorer rapidement plusieurs directions artistiques avant de t'engager. - Quand tu veux un "brainstorm visuel" comme on en ferait avec un designer humain. ## Comment l'invoquer - **Slash command** : `/design-shotgun` - **Phrases déclencheurs (texte)** : "explore designs" / "show me options" / "design variants" / "visual brainstorm" / "I don't like how this looks" - **Auto-invocation** : ✅ Oui — Claude suggère ce skill quand tu décris une feature UI sans avoir vu à quoi elle pourrait ressembler. ## Description détaillée Ce skill fonctionne comme un "shotgun" : il tire plein de cartouches en même temps. Il génère plusieurs maquettes différentes pour la même demande, avec des directions visuelles distinctes (par exemple : une version minimaliste, une version colorée, une version dense, une version dans un style éditorial, etc.). Une fois les variantes générées, il ouvre un tableau de comparaison où elles s'affichent côte à côte. Tu peux les regarder, donner ton feedback structuré (j'aime ceci, je n'aime pas cela), et le skill itère en générant une nouvelle vague basée sur ton retour. C'est un skill autonome — tu peux le lancer n'importe quand, même sans avoir d'autre skill en cours. Il se branche bien sur `/design-html` derrière (une fois ta maquette préférée choisie, ce skill la transforme en code) ou sur `/plan-design-review` (pour critiquer le plan associé). L'idée derrière, c'est que les humains choisissent mieux quand ils comparent que quand ils notent dans le vide. Au lieu de te demander "tu veux quoi ?" sans contexte, le skill te dit "voilà 6 directions possibles, laquelle te parle ?". ## Source - **Plugin** : `gstack` - **Nom interne** : `design-shotgun` - **Fichier** : `/home/thymon/.claude/skills/gstack/design-shotgun/SKILL.md` # design-consultation # design-consultation > _Catalogue généré le 2026-05-11_ ## En une phrase Pose les bases du design d'un nouveau projet — palette, typographie, espacement, motion — et te génère un fichier DESIGN.md qui devient la référence visuelle de tout le projet. ## Quand l'utiliser - Quand tu démarres un projet de zéro et tu n'as pas encore de direction artistique. - Quand tu veux poser une "bible visuelle" claire avant de commencer à coder les écrans. - Pour avoir une palette de couleurs et un système typographique cohérents partout sur le site. - Quand tu veux une page de prévisualisation qui montre ta palette + tes polices côte à côte. ## Comment l'invoquer - **Slash command** : `/design-consultation` - **Phrases déclencheurs (texte)** : "design system" / "brand guidelines" / "create DESIGN.md" / "create a brand" / "design from scratch" - **Auto-invocation** : ✅ Oui — Claude suggère ce skill quand tu attaques l'UI d'un nouveau projet qui n'a encore ni système de design ni DESIGN.md. ## Description détaillée Ce skill fonctionne comme une consultation avec un designer. Il commence par poser des questions sur ton produit — à qui il s'adresse, quelle ambiance tu veux donner, quels concurrents tu aimes, lesquels tu détestes. Puis il fait sa recherche : il regarde l'état de l'art dans ton domaine et identifie les directions visuelles qui pourraient coller. Ensuite, il te propose un système de design complet : l'esthétique générale (minimaliste, éditorial, ludique…), une famille typographique avec les tailles, une palette de couleurs (primaires, secondaires, accents, états d'erreur/succès), un système d'espacement, des règles de layout, et même les motion tokens si tu prévois des animations. Le résultat final, c'est un fichier `DESIGN.md` à la racine de ton projet, qui devient la source unique de vérité pour toutes les décisions visuelles à venir. En bonus, il génère des pages de prévisualisation HTML qui affichent ta palette et tes polices en condition réelle, pour valider que ça rend bien. Si ton site existe déjà et que tu veux DÉDUIRE le système de design à partir de l'existant (au lieu d'en créer un de zéro), utilise plutôt `/plan-design-review` ou `/design-review`. ## Source - **Plugin** : `gstack` - **Nom interne** : `design-consultation` - **Fichier** : `/home/thymon/.claude/skills/gstack/design-consultation/SKILL.md`