Design System
Générez un design system depuis votre code ou auditez votre UI sur 10 dimensions, avec détection des clichés IA.
- Quoi
- Générez un design system depuis votre code ou auditez votre UI sur 10 dimensions, avec détection des clichés IA.
- Coût
- Gratuit
- Prérequis
- Utilisez « design-system » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : un skill de design systems à trois modes. Le mode génération scanne votre CSS, Tailwind ou styled-components, en extrait les vrais tokens (couleurs, typographie, espacements, rayons de bordure, ombres, breakpoints), cherche l'inspiration chez des sites concurrents et produit un jeu de tokens (design-tokens.json plus propriétés CSS custom), un DESIGN.md avec le rationnel de chaque décision et une page d'aperçu HTML interactive autonome. Le mode audit score votre UI sur 10 dimensions de 0 à 10 (cohérence des couleurs, hiérarchie typographique, rythme des espacements, cohérence des composants, comportement responsive, complétude du dark mode, intention des animations, accessibilité, densité d'information, finition), chacune avec des exemples concrets et un correctif épinglé à un fichier et une ligne exacts. Le mode slop-check signale les patterns de design génériques générés par IA : dégradés gratuits, dégradés violet-vers-bleu par défaut, cartes glassmorphism sans objet, spam d'animations au scroll et hero centré sur dégradé stock. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : l'étape de recherche concurrente suppose un outil navigateur pour inspecter les sites en direct ; dans Muse, collez vous-même les URL ou captures des concurrents. Les scores sont des avis argumentés, pas des mesures ; traitez l'audit en 10 dimensions comme une critique structurée avec laquelle débattre. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseCréation de la communauté. Skill Harbor ne vérifie pas le code — examinez la source avant de l'installer.
Utilisez « design-system » avec votre Muse. Prérequis : l'app Muse (mobile ou web). Aucune installation, aucune clé API, aucun compte supplémentaire. Pour le mode génération, ayez votre code accessible ; pour le mode audit, une URL en fonctionnement ou des captures des pages. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/design-system/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez l'une de : « Génère un design system depuis ce code : [décrivez la stack, liez ou collez les fichiers de style clés]. » / « Audite cette UI : [URL ou captures des pages]. » / « Slop-check ce design : [URL ou capture]. » 3. Pour le mode génération, donnez à Muse 2 à 3 sites concurrents que vous admirez pour orienter la proposition de tokens. Astuce : la valeur de l'audit, ce sont les correctifs épinglés à fichier:ligne. Demandez à Muse de classer les 10 dimensions par impact avant de corriger, pour réparer d'abord ce que les utilisateurs ressentent. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. N'y collez jamais de secrets ni de clés API, et relisez tout ce que Muse propose avant qu'il n'agisse.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.