● Communauté
zanwei
⚡ Instantané
design-dna
par zanwei · zanwei/design-dna
Extrayez un Design DNA quantifié depuis n'importe quelle interface de référence — tokens, style qualitatif, effets visuels — puis générez des composants qui lui correspondent.
design-dna prend des images, captures d'écran ou URLs en direct comme références et émet un JSON Design DNA structuré : tokens de couleur, échelle typographique, espacement, descripteurs de style qualitatifs et paramètres d'effets visuels. Réinjectez le DNA dans Claude lors de la génération de composants et la sortie reste dans la charte au lieu d'être du Tailwind générique.
Pourquoi l'utiliser
Fonctionnalités clés
- Extrait les tokens (couleur, typographie, espacement, rayons) depuis les références
- Capture le style qualitatif (éditorial / brutaliste / vitreux)
- Capture les effets (ombre, flou, grain, dégradés) avec paramètres
- Produit un JSON portable — à injecter dans tout LLM de génération de code
- Fonctionne depuis des images, captures d'écran ou URLs en direct
Démo en direct
Aperçu en pratique
prêt
Cas d'usage
Usages concrets : design-dna
Quand l'utiliser : Vous ajoutez un écran à une application existante et voulez qu'il semble natif.
Déroulement
-
DNA depuis l'URL en direct
Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Copié
→ DNA reflétant le vrai produit
-
Auditer le diff de tokens
Compare DNA to our existing tailwind.config — flag drift.✓ Copié
→ Liste de dérive (ex. 'shadow-md incohérent entre les pages')
-
Générer le nouvel écran
Generate the new 'Settings' screen using our reconciled DNA.✓ Copié
→ Écran indiscernable du reste de l'app
Résultat : Produit cohérent, même en ajoutant des écrans des mois plus tard.
Pièges
- L'URL en direct est derrière une auth — le DNA de la page publique induit en erreur — Utiliser une capture d'écran authentifiée, pas la page marketing
Quand l'utiliser : Vous démarrez une application et voulez un système de design cohérent rapidement.
Déroulement
-
Choisir 3 références
Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Copié
→ 3 objets DNA séparés
-
Synthétiser
Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Copié
→ DNA fusionné
-
Produire un système de démarrage
Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Copié
→ Système de design de démarrage dans le dépôt
Résultat : Une baseline cohérente sur laquelle itérer au lieu de partir du Tailwind par défaut.
Pièges
- Synthétiser des esthétiques radicalement différentes produit du chaos — Choisir des références qui partagent une «famille» — variations dans un style, pas des opposés
Combinaisons
Associez-le à d'autres MCPs pour un effet X10
Persister DNA + composants générés dans le dépôt
Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ Copié
Générer des decks de slides correspondant à l'esthétique de votre produit
Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ Copié
Coût et limites
Coût d'exécution
- Quota d'API
- Dépend du LLM vision
- Tokens par appel
- Extraction ~3000–8000 tokens (entrée image + sortie JSON)
- Monétaire
- Gratuit ; payer le fournisseur LLM
- Astuce
- Mettre en cache le DNA par projet ; ne ré-extraire qu'à la vraie refonte de marque
Sécurité
Permissions, secrets, portée
Portées minimales : filesystem-read (images) HTTPS sortant (références URL)
Stockage des identifiants : Aucun (auth LLM vision via variable d'env)
Sortie de données : Fournisseur LLM vision ; fetcher URL (si utilisé)
- Ne pas extraire de DNA depuis des assets protégés par le droit d'auteur que vous n'avez pas le droit d'utiliser comme référence ; la sortie peut porter des traits distinctifs
Dépannage
Erreurs courantes et correctifs
L'extraction manque les dégradés
Utiliser --fidelity high ; le défaut ignore les dégradés subtils pour économiser des tokens
Les tokens DNA diffèrent d'une exécution à l'autre
Les modèles vision sont stochastiques — définir le seed si supporté ; ou extraire deux fois et prendre les valeurs médianes
Le code généré utilise des styles inline au lieu de tokens de design
Passer --token-mode strict ; le skill refusera d'inliner des valeurs qui existent comme tokens
Extraction d'URL vide
Le site nécessite JS ; utiliser une capture d'écran entièrement rendue plutôt que la récupération d'URL
Alternatives
design-dna vs autres
| Alternative | Quand l'utiliser | Compromis |
|---|
| design-extract (Manavarya09) | Vous voulez un export complet de tokens de design incluant DTCG + émetteurs multi-plateforme | Plus lourd ; pipeline complet de système de design vs DNA léger |
| Curation manuelle de guide de style | Vous avez un designer et une bibliothèque de patterns | Plus lent ; plus autoritaire |