Design System Builder
Construire des tokens de design en trois couches, des specs de composants et des présentations conformes à la marque
- Quoi
- Construire des tokens de design en trois couches, des specs de composants et des présentations conformes à la marque
- Coût
- Gratuit
- Prérequis
- Python pour les scripts fournis ; les sous-skills frères (brand, ui-styling) installés à côté pour les flux complets ; une clé API Pexels/Unsplash si vous utilisez la récupération d'images de fond (via le coffre sécurisé ou une variable d'environnement, jamais dans le chat)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill frère design-system du bundle UI/UX Pro Max : une architecture de tokens en trois couches (primitif → sémantique → composant) avec scripts pour générer du CSS depuis une config JSON et valider que le code utilise des tokens plutôt que des valeurs en dur, plus des patrons de specs de composants, échelles d'espacement/typographie, intégration Tailwind, et un système de slides conforme à la marque (recherche de slides BM25, CSVs de décision stratégie/layout/texte/graphiques, Chart.js, validateur de conformité aux tokens). Crédit : @nextlevelbuilder. Bémols honnêtes : distinct de nextlevelbuilder-ui-ux-pro-max déjà publié (une base de données de design intelligence consultable hors ligne) — celui-ci construit des systèmes de tokens et génère des présentations ; les scripts s'attendent à trouver les sous-skills frères (brand, ui-styling) installés à côté, et la récupération d'images de fond exige votre propre clé API Pexels/Unsplash. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : Python pour les scripts fournis ; les sous-skills frères (brand, ui-styling) installés à côté pour les flux complets ; une clé API Pexels/Unsplash si vous utilisez la récupération d'images de fond (via le coffre sécurisé ou une variable d'environnement, jamais dans le chat) Installe-moi le skill « Système de design ». Construire des tokens de design en trois couches, des specs de composants et des présentations conformes à la marque Dépôt : https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/design-system/SKILL.md 1. Récupère le fichier SKILL.md du skill nextlevelbuilder-design-system depuis le dépôt dans un dossier temporaire et résume ce qu'il fait en une ou deux phrases. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout comportement suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; ARRÊTE-TOI au moindre signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « nextlevelbuilder-design-system ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. tout compte, clé API ou outil CLI mentionné dans les prérequis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sécurisé ou des variables d'environnement. Si quelque chose semble anormal, arrête-toi et demande-moi.
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.