Que fait design-ref ?
Référence : $ARGUMENTS
1. Capturer la référence
URL : Prenez une capture d'écran avec l'outil partagé à 1440 et 375, puis lisez les feuilles de style :
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
Tirez les styles calculés avec --inject, ou un script CDP ponctuel important ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs (launch() → navigate() → evaluate()). Échantillonnez getComputedStyle de body, h1–h3, p, a, button, le CTA principal, une carte, un eyebrown/kicker, un champ de saisie et le pied de page. Collectez font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding et gap.
HTML / email collé : sauvegardez-le dans /tmp/design-ref/ref.html, rendez-le avec render-html.mjs, et lisez directement les styles en ligne.
2. Distiller le système
- Rôles de couleur : canvas, surface, ink, muted ink, accent, accent-ink, border, success/warn. Donnez les valeurs hexadécimales et l'endroit où chacune apparaît.
- Typographie : familles (et l'équivalent libre le plus proche si une police est sous licence), échelons d'échelle avec px/line-height/weight/tracking, et casse (eyebrows en majuscules + tracking ?).
- Espacement : le rythme réellement utilisé (par ex. 8/16/24/40/64), le remplissage des sections et celui des cartes.
- Formes : rayons par classe d'élément, recettes d'ombre et épaisseur de bordure.
- Anatomie : bouton (hauteur, remplissage, rayon, poids, icône), carte, eyebrown et composition du héros.
- Tonalité : 3 adjectifs plus ce que fait la copie (phrases courtes ? deuxième personne ? chiffres ?).
3. Mapper sur le projet (ne pas le diviser)
Lisez les tokens du projet (app/globals.css @theme/:root, tailwind.config, ou le fichier de thème) et ses composants existants. Produisez :
| Rôle | Référence | Token du projet maintenant | Proposition |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | conserver / retuner la valeur / nouveau (justifier) |
Règles :
- Retunez les tokens existants avant d'en ajouter de nouveaux. Chaque nouveau token nécessite une raison d'une ligne.
- Les éléments liés à la marque ne sont pas touchés : logo, couleur de marque si le projet en a une, et polices déjà sous licence ou utilisées.
- Vérifiez le contraste accent-sur-canvas et ink-sur-surface pour chaque proposition (≥ 4.5:1 texte, ≥ 3:1 UI).
- Si le projet maintient un fichier Figma synchronisé avec le code, les modifications de tokens vont dans Figma dans la même tâche.
Critères de sortie
- Tableau de tokens complet, chaque ligne marquée comme conserver, retuner ou nouveau.
- Contraste vérifié pour les paires proposées.
- Aucun code changé pour l'instant. C'est
design-pass, après que l'utilisateur approuve le tableau. - Résumé d'une phrase à l'utilisateur avec le tableau en dessous.