Design Elevation
Discipline de conception de tokens Tailwind pour toute sortie visuelle — tableaux de bord, PPTX, HTML, rapports.
Testé · Fonctionne
Ce que fait
Une bibliothèque de référence de tokens de design et de règles (échelles de couleur/typographie/espacement, mouvements d'élévation, cadre fonctionnel vs perceptuel de Kholmatova, plus des overrides pour Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) que Claude applique chaque fois qu'il produit un artefact visuel. Se déclenche sur toute demande de présentation, tableau de bord, page HTML, PDF ou visualisation de données ; c'est une guidance de prompt, pas un outil exécutable, donc toute sa valeur réside dans la spécificité des instructions que Claude suit.
Rapport de test
Construit le même tableau de bord KPI à 3 cartes deux fois — une fois de zéro, une fois en suivant strictement les règles de tokens Tailwind de la compétence — et la différence est concrète : hiérarchie de texte gray-900/500/400 au lieu de noir pur, shadow-sm au lieu d'une ombre portée dure, accents sémantiques émeraude/rose au lieu de rouge/vert littéral, tabular-nums sur chaque métrique, et une ligne source text-xs que la base de référence n'a jamais pensé à ajouter.
Testé le: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/cuellarfr/design-skills cd design-skills mkdir -p ~/.claude/skills cp -r design-elevation ~/.claude/skills/design-elevation
Commandes et exemples de prompts
/design-elevationDiscipline de conception de tokens Tailwind pour toute sortie visuelle — tableaux de bord, PPTX, HTML, rapports.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Build an HTML KPI dashboard using proper Tailwind design tokensRedesign this PPTX slide with real elevation and spacing scalesApply IBM Carbon-style color and type discipline to this report