/ Annuaire / Playground / design-dna
← Tous les serveurs ↗ GitHub
● 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.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "design-dna-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json
{
  "context_servers": {
    "design-dna-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zanwei/design-dna",
          "~/.claude/skills/design-dna"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : design-dna

Créer un composant correspondant à une capture d'écran qui vous plaît

👤 Développeurs sans designer, construisant des interfaces soignées ⏱ ~25 min intermediate

Quand l'utiliser : Vous voyez une superbe interface sur Twitter et voulez capturer son esthétique.

Prérequis
  • Skill installé — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna
Déroulement
  1. Extraire le DNA
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Copié
    → JSON avec tokens + style + effets
  2. Générer le composant
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Copié
    → TSX avec esthétique correspondante
  3. Comparer visuellement
    Render side-by-side; tweak any drift in shadow strength.✓ Copié
    → Correspondance visuelle dans les tolérances

Résultat : Composant dans la charte sans copier le code original.

Pièges
  • Le DNA manque les effets subtils (texture grain) — Passer --high-fidelity pour une extraction plus lente mais plus riche
Combiner avec : filesystem

Générer de nouveaux composants correspondant au design d'un produit existant

👤 Développeurs ajoutant des fonctionnalités à un produit designé ⏱ ~30 min intermediate

Quand l'utiliser : Vous ajoutez un écran à une application existante et voulez qu'il semble natif.

Déroulement
  1. 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
  2. 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')
  3. 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

Amorcer un système de design depuis des références

👤 Fondateurs solo / petites équipes sans designer ⏱ ~60 min advanced

Quand l'utiliser : Vous démarrez une application et voulez un système de design cohérent rapidement.

Déroulement
  1. 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
  2. Synthétiser
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Copié
    → DNA fusionné
  3. 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
Combiner avec : frontend-slides-skill

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

design-dna-skill + filesystem

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é
design-dna-skill + frontend-slides-skill

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é

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
extract_dna image_path ou url, fidelity? Première étape depuis toute référence Tokens LLM vision
synthesize_dna dna[] Combiner plusieurs références Tokens LLM
generate_component dna, component_spec Génération de composants dans la charte Tokens LLM
diff_dna dna_a, dna_b Auditer la dérive entre référence et produit actuel 0

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é)

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

AlternativeQuand l'utiliserCompromis
design-extract (Manavarya09)Vous voulez un export complet de tokens de design incluant DTCG + émetteurs multi-plateformePlus lourd ; pipeline complet de système de design vs DNA léger
Curation manuelle de guide de styleVous avez un designer et une bibliothèque de patternsPlus lent ; plus autoritaire

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills