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

Comment l'invoquer

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

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

Comment l'invoquer

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

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

Comment l'invoquer

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

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

Comment l'invoquer

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

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

Comment l'invoquer

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