Design Range

Que fait Design Range ?

Par défaut, Claude conçoit chaque produit de la même manière : Inter ou Geist, un dégradé indigo/violet, un hero centré avec deux boutons, trois cartes de fonctionnalités avec des icônes dans des cercles teintés, rounded-2xl partout, des ombres grises douces. Ça a l'air correct, et ça ressemble à tous les autres sites générés par IA. Ce skill existe pour briser ce schéma volontairement.

Le geste central est simple : ne choisis pas le style toi-même, sélectionne-le aléatoirement. Un modèle à qui on demande de "choisir un style" retombe toujours sur les mêmes choix ; le choix est donc confié à un script qui échantillonne une bibliothèque de directions cohérentes et évite ce que le projet a utilisé récemment. Ton travail consiste ensuite à t'engager pleinement dans cette direction et à l'exécuter avec soin.

Workflow

1. Analyser la situation

• Qu'est-ce qui est construit ? Fais correspondre à un type de produit : marketing (pages d'accueil, sites, portfolios comptent aussi si tu préfères), saas (écrans d'application dans lesquels les gens travaillent), dashboard (analytique, administration, monitoring), ecommerce (boutiques, pages produit et catégorie), mobile (écrans d'application natifs ou mobile-first), portfolio.
• Existe-t-il une marque ou un système de design existant ? Si le projet a déjà des tokens établis, un fichier design-direction.md, ou si l'utilisateur demande une fonctionnalité dans une application existante, conserve sa direction. La variété est pour les nouveaux projets, les redesigns et lorsque l'utilisateur demande quelque chose de différent. La cohérence au sein d'un même produit est une fonctionnalité ; la similarité entre produits est le problème.
• L'utilisateur a-t-il nommé une ambiance ? ("luxueux", "ludique", "sombre et technologique"). Traduis cela en filtres (--energy, --mode) ou un --show <id> spécifique, mais montre quand même des alternatives à moins qu'il n'ait été précis.
• Fichier de goût. Si references/taste.md a du contenu, lis-le. Il contient les préférences personnelles de l'utilisateur et annule la bibliothèque en cas de conflit. Ses lignes exclude: et favor: sont appliquées automatiquement par le script de sélection ; le reste (polices favorites, couleurs, éléments qu'il a aimés) est pour toi afin de les intégrer dans la direction construite.

2. Sélectionner des directions

python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

Exécute-le depuis la racine du projet. Il lit deux historiques : le .design-history.json du projet et un ~/.claude/design-range-history.json partagé couvrant tous les projets, et s'éloigne des deux, afin que le produit suivant n'ait pas le même aspect que le précédent. Il répartit également les couleurs d'accentuation : la palette de chaque option est choisie de sorte que sa teinte d'accent soit éloignée des autres options et des accents récemment utilisés, ce qui évite que la "variété" ne se réduise à une seule famille de couleurs avec des polices différentes. Il affiche 3 options contrastées, chacune étant un brief complet : humeur, polices avec URL CSS prêtes, palette nommée, archétype de mise en page, langage des formes, animation, éléments signatures, éléments à éviter, et un bloc @theme Tailwind v4.

Autres commandes : --list (toutes les directions), --show <id> --product <type> (une direction en détail, avec éventuellement --font N --palette N --layout <id>).

3. Laisser l'utilisateur choisir (quand il est présent)

Présente les options de manière compacte, un petit bloc chacune : nom, humeur en une ligne, la paire de polices, la palette en valeurs hexadécimales, l'idée de mise en page. Demande laquelle, et mentionne qu'il peut mélanger ("les polices de l'option 2 avec la palette de l'option 3") ou relancer.

Si l'utilisateur a dit "construis-le", ou si tu travailles sans humain dans la boucle, choisis pour lui, et choisis pour l'adéquation. Le caractère aléatoire est là pour briser tes habitudes, pas pour mettre une esthétique de boîte de nuit sur un planificateur de dîner. Pour chaque option, demande-toi : les clients de cette marque s'y reconnaîtraient-ils ? L'ambiance correspond-elle à ce que fait le produit (calme pour le bien-être et l'argent, énergique pour le sport et la vie nocturne, précis pour les données, chaleureux pour la nourriture et la maison) ? Choisis l'option qui correspond le mieux. Si aucune ne correspond, relance une fois (--count 4, ou filtre avec --energy/--mode) et choisis dans le nouvel ensemble. Un choix surprenant est bon quand tu peux dire en une phrase pourquoi il convient au produit ; dis cette phrase quand tu rapportes quelle direction tu as utilisée. Ne bloque pas la construction en attendant un choix que personne ne fera.

4. Enregistrer et écrire un fichier de direction

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>

Ceci écrit à la fois l'historique du projet et l'historique partagé. Ensuite, enregistre le brief choisi dans design-direction.md à la racine du projet. Les sessions futures (et toi-même, dans une heure) le liront pour rester cohérents au sein de ce produit, et l'historique partagé empêche le prochain produit d'obtenir le même aspect.

5. Construire

Lis la référence de plateforme correspondante avant de construire, car chaque type de produit a ses propres règles de conception :

Produit	À lire
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

Stack : React + Tailwind par défaut (voir "Configuration de la stack" ci-dessous). Ensuite :

• Câble les tokens d'abord. Charge les polices, colle le bloc @theme, et stylise avec les noms sémantiques (bg-bg, bg-surface, text-text, text-muted, border-border, bg-accent, font-display). Le script a déjà vérifié le contraste : utilise text-accent-ink chaque fois que du texte de couleur d'accent repose sur bg ou surface (il correspond à l'accent quand l'accent est déjà lisible), et text-on-accent pour les étiquettes sur les boutons et badges remplis d'accent. Si le brief montre une ligne Contrast, elle indique ce qui a été ajusté. Les classes de palette Tailwind brutes comme indigo-500 ou slate-100 sont la façon dont le look par défaut s'infiltre, alors garde-les hors des composants.

• Engage-toi dans la direction. Utilise au moins deux de ses éléments signatures de manière visible, et traite la liste "à éviter" comme des contraintes strictes. Une direction appliquée timidement (polices correctes, tout le reste par défaut) retombe dans le look générique. Si le brief dit rayon 0, rien n'est arrondi. S'il dit ombres portées dures, il n'y en a pas de floues.

• Laisse l'archétype de mise en page façonner la page. La mise en page sélectionnée (par exemple sticky-scroll-story, three-pane, hub-and-sheet) est là pour briser le squelette hero centré + trois cartes. Construis autour d'elle.

• Étends la palette, ne la remplace pas. Tu auras besoin de teintes hover, active et subtiles. Dérive-les des couleurs données (color-mix(in oklch, var(--color-accent) 85%, black), ou des modificateurs d'opacité comme bg-accent/10) plutôt que d'utiliser de nouvelles teintes.

• Contenu réel. Rédige un texte plausible et spécifique pour le produit. Le lorem ipsum et "Fonctionnalité Un" cachent si le design fonctionne réellement.

• Fais-le bouger. Les pages statiques donnent l'impression d'être des modèles, et le fichier de goût de l'utilisateur demande du mouvement dans chaque construction. Chaque construction reçoit les quatre éléments suivants, exprimés dans la personnalité motion de la direction (vif pour le brutaliste et le sport, élastique pour le jouet, lent et cinématographique pour le cinéma, doux pour l'organique, saccadé pour le rétro OS) :

  1. Chorégraphie d'entrée au chargement : les éléments du hero arrivent dans une séquence courte et décalée (titre, puis copie, puis actions, espacés de 60 à 120 ms), pas tous en même temps et pas un seul fondu lent.
  2. Retour visuel au survol et à l'appui sur tout ce qui est cliquable, dans le style de la direction : une ombre dure à l'appui, une échelle élastique, un soulignement coulissant, une lueur, une oscillation.
  3. Une animation signature tirée des champs motion ou signature du brief (scintillement, glyphe tournant, blob morphing, Ken Burns, machine à écrire, marquee, formes rotatives). C'est le moment dont les gens se souviennent, alors donne-lui une place visible.
  4. Dévoilements au défilement pour les sections sous la ligne de flottaison où ils s'intègrent (IntersectionObserver ou CSS animation-timeline: view() avec un repli).

  Anime transform et opacity plutôt que les propriétés de mise en page pour rester fluide, garde les retours UI sous ~300 ms, et mets tout ce qui est décoratif derrière @media (prefers-reduced-motion: no-preference) (ou désactive-le sous reduce) afin que les personnes qui désactivent le mouvement obtiennent une page calme et complète.

6. Vérification d'uniformité avant de terminer

Regarde ce que tu as construit et corrige l'un des éléments suivants, sauf si la direction les demande explicitement :

• Inter, Roboto, Arial ou system-ui comme police d'affichage visible
• Dégradé violet/indigo/bleu vers violet où que ce soit
• Hero centré, titre + sous-titre + deux boutons, puis une grille d'icônes 3 colonnes
• Chaque conteneur rounded-xl/2xl avec shadow-md/lg
• Icônes dans des cercles teintés pastel
• Page gris-50 avec cartes blanches comme seule idée visuelle
• Tout le texte avec les mêmes quelques tailles ; pas de contraste typographique
• Texte en dégradé sur le titre (sauf Chrome Y2K ou Aurora de verre)

Ensuite, une rapide passe de qualité : le contraste du texte respecte WCAG AA (4,5:1 pour le corps, 3:1 pour les grands textes ; ajuste muted si une palette échoue sur son bg), chaque élément interactif a des états hover, focus-visible et disabled, ça fonctionne à 375 px de large, et les animations respectent prefers-reduced-motion.

Configuration de la stack

Tailwind v4 (par défaut) : mets les <link> de polices dans index.html (ou next/font / @import url(...) en haut du CSS), puis le bloc @theme sélectionné dans le fichier CSS principal après @import "tailwindcss";. Les classes comme bg-accent, font-display, text-muted fonctionnent automatiquement.

Tailwind v3 : mets les mêmes valeurs sous theme.extend.colors et theme.extend.fontFamily dans tailwind.config.js avec les mêmes noms.

Next.js : préfère next/font/google pour les polices Google (mêmes noms, underscores pour les espaces) et mappe-les aux variables CSS. Les polices Fontshare se chargent via l'URL CSS.

React Native / Expo (pour mobile) : utilise NativeWind avec la palette dans tailwind.config.js, et charge les polices avec @expo-google-fonts/<nom-police> ou expo-font. Les polices Fontshare nécessitent de télécharger les fichiers de police dans assets/fonts. Si l'utilisateur veut juste une maquette visuelle, une page web React de taille mobile (cadre 390x844) est acceptable et beaucoup plus rapide ; demande si ce n'est pas clair.

Aperçus mono-fichier : s'il n'y a pas encore de projet et que l'utilisateur veut juste voir le résultat, un seul fichier HTML avec le CDN Tailwind (<script src="https://cdn.tailwindcss.com"></script> pour la configuration v3, ou @tailwindcss/browser@4 avec un <style type="text/tailwindcss">@theme {...}</style> en ligne) plus React via ESM est acceptable.

Quand l'utilisateur veut encore plus de variété

• Relancer : exécute le script à nouveau ; il évite déjà les choix récents.
• Remixer : prends le type d'une direction avec la palette d'une autre. Vérifie que le résultat reste cohérent (une police pixel avec une palette de luxe est une blague, ce qui est acceptable seulement si c'est le but).
• Nouvelle direction : si l'utilisateur décrit un look que la bibliothèque ne contient pas, ajoute-le à assets/directions.json dans le même format afin qu'il rejoigne les futurs tirages. Vérifie que ses polices existent sur Google Fonts ou Fontshare.
• Goût : quand l'utilisateur dit ce qu'il aime ou déteste ("n'utilise jamais de serif", "j'adore le brutalisme"), propose de l'ajouter à references/taste.md pour que cela s'applique à chaque fois.