Design Visual Frontend
Force un travail UI vérifié par navigateur : archétype réel, pas de fausses métriques, pas de pile de motifs
Testé · Fonctionne
Ce que fait
Une discipline de conception frontend pour les agents de codage : classer l'archétype de surface, rédiger une fiche de décision compacte avant tout code UI, puis vérifier la page rendue par rapport à huit portes de révision non compensatoires sur une matrice de viewport fixe de 390x844 à 2560x1080. Elle limite les motifs génériques tels que les grilles de fond, les panneaux de verre et les lueurs de dégradé à un seul, et interdit les métriques inventées, les témoignages et les logos utilisés comme crédibilité. Se déclenche sur la construction, la refonte ou la révision de sites web, de flux de connexion et de formulaires, de tableaux de bord, d'outils d'administration et de pages produit.
Rapport de test
J'ai construit la même page de connexion de répartition de camions deux fois et mesuré les deux dans un vrai navigateur. La page sans skill a livré trois métriques inventées, cinq motifs génériques empilés, des cibles tactiles de 41px, une statistique coupée de l'héro mobile, aucun état d'erreur, de chargement ou désactivé, et à 2560x1080 une carte de 380px isolée dans une moitié vide — 15 pour cent du viewport, ce qui est l'échec exact que la Gate C de la skill nomme comme exemple. La page guidée par la skill est revenue avec zéro faits inventés, zéro motifs, des cibles de 44px, aucun rognage, une erreur role=alert qui déplace le focus, un état de chargement réel, et 37 nœuds significatifs sur le viewport large contre 17 pour la version de base. Il est bon de savoir que ses propres portes ne sont pas un blanc-seing : elles ont toujours signalé des gouttières vides à 2560 et un sélecteur de terminal tronqué à 390 sur la page construite par la skill, tous deux visibles uniquement sur la capture d'écran et non dans le balisage.
Testé le: 2026-08-10 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Commandes et exemples de prompts
/design-visual-frontendForce un travail UI vérifié par navigateur : archétype réel, pas de fausses métriques, pas de pile de motifs
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 a login page for a trucking dispatch platform, dispatcher useReview this UI against responsive breakpoints from mobile to 4KClassify this page's archetype and write a UI decision sheet first