← Recherche

Replica Design, rebuild the design system for your app clone
Development 📌 Version épinglée : commit 77c9436
⚙ Prérequis: une carte de reconnaissance et des captures d'écran…

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.

⚠️ Fiche non vérifiée : notre test d’installation automatisé n’a pas pu être complété pour cette création (son prompt a déclenché un filtre de sécurité dans notre système de test), son contenu n’a donc pas été vérifié.
L’essentiel
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.

Version :

⌁

Installation

Copiez le dossier d’installation ci-dessous, puis collez-le dans Muse📌 Version épinglée : commit 77c9436

Pré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.

🧪 Exemple
Tu demandes
Exemple illustratif seulement, pas le résultat d'un vrai utilisateur. Reconstruisez le système de design de l'application dans mes captures d'écran de reconnaissance.
Tu reçois
Exemple illustratif seulement, pas le résultat d'un vrai utilisateur. replica/design/tokens.json, tokens.css et replica/design/components.md, primitives construites de façon isolée, et un rapport de contraste avec zéro échec AA. Étape suivante : replica-build (invoqué par son nom dans Muse).
Exemple illustratif tiré de la documentation du skill — ce n’est pas le résultat d’un vrai utilisateur.
🔒 Sécurité, provenance et ce que ça touche
🔒 Sécurité et provenance
📌 Version épinglée : commit 77c9436
Skill Harbor ne révise jamais le code des skills listés. Ce sont des faits datés sur le prompt d’installation et notre test d’installation, pas une certification de sécurité. Révisez un skill vous-même avant de l’installer. Comment nous vérifions
Envie d'être encore plus prudent ?

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 ?

Comment vérifier une création avant de l’installer →

?

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.