Design System Reference
Vingt guides de style frontend avec de vraies palettes, polices et règles anti-slop
Testé · Fonctionne
Ce que fait
Fournit vingt guides de style frontend détaillés (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism et plus), chacun avec des palettes de variables CSS concrètes, des paires de polices et des patterns de mise en page, plus une checklist anti-pattern de 'slop' IA partagée. Se déclenche lors de la construction ou du stylisme d'une UI web dans une esthétique nommée ou lors de la tentative d'éviter les designs génériques d'apparence IA.
Rapport de test
Lu le guide Bento Grid de 451 lignes fourni : de vraies variables CSS de style Apple, des paires de polices nommées et une liste de blocage concrète du 'slop' IA (pas d'Inter par défaut, pas de dégradé violet sur blanc). La construction d'une section héroïque à partir de celui-ci a surpassé une référence sans compétence en spécificité de jeton au lieu des valeurs par défaut génériques de Tailwind. Mise en garde : le flux de 'recommandation de style basé sur VS' annoncé réside dans un agent de découverte de design séparé que l'installation de la compétence NE copie PAS, donc seul, c'est une solide bibliothèque de référence de style plutôt que le workflow guidé complet.
Testé le: 2026-07-20 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/wigtn/wigtn-plugins mkdir -p ~/.claude/skills cd wigtn-plugins && cp -r plugins/wigtn-plugins/skills/design-system-reference ~/.claude/skills/design-system-reference
Commandes et exemples de prompts
/design-system-referenceVingt guides de style frontend avec de vraies palettes, polices et règles anti-slop
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) :
Style this landing page in a neobrutalist aesthetic with real palettesGive me a glassmorphism style guide with concrete CSS variablesThis UI looks generic and AI-made, help me avoid the slop patterns