Design System Is All You Need

Huit guides de style UI nommés avec des tokens auto-dérivés, appliqués avant tout code

par devPnal · devPnal/design-system-is-all-you-need

Testé · Fonctionne ★ 7.6/10

Design System Is All You Need — Huit guides de style UI nommés avec des tokens auto-dérivés, appliqués avant tout code

Ce que fait

Regroupe huit directives de design écrites — neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage et le 'pnalism' de l'auteur — chacune avec des règles communes, des spécifications par composant et un système de tokens dérivé d'une simple couleur de thème et d'un mot-clé d'intensité. Se déclenche sur les travaux d'UI : construction de pages, tableaux de bord, cartes, formulaires ou tout composant frontend, en HTML/CSS, React, SwiftUI ou Compose. Il s'arrête et demande quel style et quelle couleur hexadécimale avant d'écrire quoi que ce soit.

Rapport de test

Construit la même carte de connexion deux fois, une fois simple et une fois sous la directive de néomorphisme intégrée : le fichier guidé contenait 11 tokens de design contre zéro, a placé les six valeurs d'espacement sur la grille de 8px (celle simple l'a manquée 0 sur 6), et a donné à chaque contrôle une cible de 44px plus un anneau de focus. La même mesure a exposé une contradiction au sein de la directive — sa règle de CTA primaire (étiquette de couleur de thème sur une surface teintée) calcule un contraste de 2.94:1, en dessous du 4.5:1 exigé par sa propre checklist finale, et pire que le 3.7:1 de la version simple. L'étape 2 de la compétence pointe vers references/meterial-design.md, un fichier qui n'existe pas (le vrai est material-design.md), bien que le nom correct apparaisse dans le tableau au-dessus. Attendez-vous à un arrêt forcé pour deux questions — style et couleur hexadécimale — avant que toute sortie n'apparaisse.

Testé le: 2026-07-29 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/devPnal/design-system-is-all-you-need.git
mkdir -p ~/.claude/skills
cd design-system-is-all-you-need && cp -r design-system-is-all-you-need ~/.claude/skills/design-system-is-all-you-need

Commandes et exemples de prompts

/design-system-is-all-you-needHuit guides de style UI nommés avec des tokens auto-dérivés, appliqués avant tout code

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 sign-in card for my app using a neumorphism design style
Design a pricing card component in glassmorphism for our React app
Create a dashboard with a consistent brutalist design system applied

Rapport complet →