Replica Design, rebuild the design system for your app clone
Reconstruit le système de design d'une application pour un clone : rôles de couleur, échelle typographique, espacements, rayons, ombres et chaque composant avec ses états, sous forme de design tokens et de spécifications de composants.
- Quoi
- Reconstruit le système de design d'une application pour un clone : rôles de couleur, échelle typographique, espacements, rayons, ombres et chaque composant avec ses états, sous forme de design tokens et de spécifications de composants.
- Coût
- Gratuit
- Prérequis
- une carte de reconnaissance et des captures d'écran de replica-recon ; Python 3 pour le contrôle de contraste.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : l'étape du système de design du pack Replica, qui compte 11 skills. Replica Design reconstruit le système derrière une application, pas ses actifs : rôles de couleur, échelle typographique, espacements, rayons, ombres et mise en page mesurés à partir de captures d'écran, puis écrits sous forme de design tokens et de spécifications de composants, avec les primitives construites une fois, de façon isolée. Il ne reprend jamais les logos, icônes, illustrations, polices sous licence, textes ou couleur de marque distinctive de l'original, et il exécute un contrôle de contraste WCAG jusqu'à obtenir zéro échec AA. Le résultat est un clone qui ressemble à l'application étudiée, sans copier ce qui lui appartient. Par @Jakeschincariol, présenté ici avec le crédit de son créateur. Skill Harbor ne relit jamais le code d'un skill répertorié, alors relisez-le vous-même avant utilisation.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans Muse📌 Version épinglée : commit 77c9436Prérequis : une carte de reconnaissance et des captures d'écran de replica-recon ; Python 3 pour le contrôle de contraste. Installez « Replica Design, reconstruisez le système de design de votre clone d'application » pour moi. Il donne à mon agent le flux de travail de design de @Jakeschincariol, l'étape du système de design du pack Replica : mesurer les rôles de couleur, l'échelle typographique, les espacements, les rayons, les ombres et la mise en page à partir de captures d'écran, écrire des design tokens et des spécifications de composants, construire les primitives une fois, de façon isolée, et exécuter le contrôle de contraste WCAG jusqu'à obtenir zéro échec AA. Reconstruisez le système, jamais les logos, icônes, illustrations, photos, polices sous licence, textes ou couleur de marque distinctive de l'original. Dépôt : https://raw.githubusercontent.com/Jakeschincariol/replica-skill/77c9436fb3d18c3d58169efb8caf4fe906b0dc51/replica-design/SKILL.md Version épinglée : installez le code au commit 77c9436fb3d18c3d58169efb8caf4fe906b0dc51 exactement. Ne substituez pas une version plus récente. Si ce commit est inaccessible, arrêtez-vous et dites-le-moi. 1. Récupérez le fichier SKILL.md (et tous les fichiers d'aide, y compris le modèle tokens.json et contrast.py) depuis le chemin du dépôt dans un dossier temporaire 2. Contrôle de sécurité : examinez le SKILL.md et les scripts pour tout élément suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code : vous créez vos propres comptes et clés et vous mettez les clés dans .env.local, l'agent écrit .env.example avec les noms seulement et ne tape jamais un mot de passe, une carte ou une clé en production. Vérifiez que c'est bien le cas ici ; ARRÊTEZ-VOUS en cas de drapeau rouge et dites-le-moi. 3. Installez-le comme skill : copiez SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « replica-design ». 4. Vérifiez sans appel réseau : frontmatter valide, fichiers en place. 5. Indiquez ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple, avoir la carte de reconnaissance et les captures d'écran prêtes ; exécuter le contrôle de contraste sur mes tokens). GitHub est facultatif : si j'ai un compte GitHub ou l'outil gh en ligne de commande, vous pouvez l'utiliser ; sinon, l'accès public suffit. Ne l'exigez jamais, sauf s'il figure dans les prérequis ci-dessus. Règles : ne touchez à rien en dehors du dossier temporaire et de la cible d'installation. Dans Muse, invoquez les skills voisins du pack par leur nom, pas comme des commandes /slash. Si quelque chose semble anormal, arrêtez-vous et demandez-moi. Après l'installation, demandez-moi si je veux laisser un commentaire privé. Privé pour l'instant : seule l'équipe Skill Harbor le voit. Les vendeurs pourront être impliqués plus tard.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
🔒 Sécurité, provenance et ce que ça touche
Le prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
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.