/ Verzeichnis / Playground / design-dna
← Alle Server ↗ GitHub
● Community zanwei ⚡ Sofort

design-dna

von zanwei · zanwei/design-dna

Design-DNA aus jeder Referenz-UI quantifizieren extrahieren — Tokens, qualitative Stile, visuelle Effekte — dann Komponenten generieren, die dazu passen.

design-dna nimmt Bilder, Screenshots oder Live-URLs als Referenzen und gibt ein strukturiertes Design-DNA-JSON aus: Farb-Tokens, Typografie-Skala, Abstände, qualitative Stil-Deskriptoren und visuelle Effektparameter. Die DNA zurück in Claude einspeisen beim Generieren von Komponenten und die Ausgabe bleibt on-brand statt generisches Tailwind.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren 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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die 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
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

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

Continue nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: design-dna

Komponente erstellen die zu einem Screenshot passt, den man liebt

👤 Entwickler ohne Designer, die polierte UIs bauen ⏱ ~25 min intermediate

Wann einsetzen: Du siehst einen tollen UI-Screenshot auf Twitter und willst seinen Vibe erfassen.

Voraussetzungen
  • Skill installiert — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna
Ablauf
  1. DNA extrahieren
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Kopiert
    → JSON mit Tokens + Stil + Effekten
  2. Komponente generieren
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Kopiert
    → TSX mit passendem Erscheinungsbild
  3. Visuell vergleichen
    Render side-by-side; tweak any drift in shadow strength.✓ Kopiert
    → Visuelle Übereinstimmung innerhalb der Toleranz

Ergebnis: On-Brand-Komponente ohne Code aus dem Original zu kopieren.

Fallstricke
  • DNA übersieht subtile Effekte (Körnung) — --high-fidelity für langsamere aber reichhaltigere Extraktion übergeben
Kombinieren mit: filesystem

Neue Komponenten generieren, die zum Design eines bestehenden Produkts passen

👤 Entwickler, die Features zu einem gestalteten Produkt hinzufügen ⏱ ~30 min intermediate

Wann einsetzen: Du fügst einem bestehenden App einen Bildschirm hinzu und willst, dass er sich native anfühlt.

Ablauf
  1. DNA von Live-URL
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Kopiert
    → DNA spiegelt das tatsächliche Produkt wider
  2. Token-Drift prüfen
    Compare DNA to our existing tailwind.config — flag drift.✓ Kopiert
    → Drift-Liste (z.B. 'shadow-md inkonsistent über Seiten')
  3. Neuen Bildschirm generieren
    Generate the new 'Settings' screen using our reconciled DNA.✓ Kopiert
    → Bildschirm nicht von der restlichen App zu unterscheiden

Ergebnis: Kohärentes Produkt, auch wenn Monate später neue Bildschirme hinzugefügt werden.

Fallstricke
  • Live-URL hinter Auth — DNA von öffentlicher Landing Page irreführend — Authentifizierten Screenshot verwenden, nicht die Marketing-Seite

Design-System aus Referenzen aufbauen

👤 Solo-Gründer / kleine Teams ohne Designer ⏱ ~60 min advanced

Wann einsetzen: Du startest eine App und willst schnell ein kohärentes Design-System.

Ablauf
  1. 3 Referenzen auswählen
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Kopiert
    → 3 separate DNA-Objekte
  2. Synthetisieren
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Kopiert
    → Zusammengeführte DNA
  3. Starter-System ausgeben
    Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Kopiert
    → Starter-Design-System im Repo

Ergebnis: Kohärente Baseline zum Iterieren statt mit Standard-Tailwind zu starten.

Fallstricke
  • Wildly unterschiedliche Ästhetiken synthetisieren ergibt Chaos — Referenzen wählen, die eine 'Familie' teilen — Variationen innerhalb eines Stils, keine Gegensätze
Kombinieren mit: frontend-slides-skill

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

design-dna-skill + filesystem

DNA + generierte Komponenten im Repo persistieren

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ Kopiert
design-dna-skill + frontend-slides-skill

Slide-Decks generieren, die zur Produkt-Ästhetik passen

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
extract_dna image_path or url, fidelity? Erster Schritt aus jeder Referenz Vision LLM tokens
synthesize_dna dna[] Mehrere Referenzen kombinieren LLM tokens
generate_component dna, component_spec On-Brand-Komponentengenerierung LLM tokens
diff_dna dna_a, dna_b Drift zwischen Referenz und aktuellem Produkt prüfen 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Abhängig vom Vision-LLM
Tokens pro Aufruf
Extraktion ~3000–8000 Tokens (Bildeingabe + JSON-Ausgabe)
Kosten in €
Kostenlos; LLM-Provider bezahlen
Tipp
DNA pro Projekt cachen; nur bei echtem Brand-Refresh neu extrahieren

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-read (Bilder) Outbound HTTPS (URL-Referenzen)
Credential-Speicherung: Keine (Vision-LLM-Auth via Umgebungsvariable)
Datenabfluss: Vision-LLM-Provider; URL-Fetcher (wenn verwendet)

Fehlerbehebung

Häufige Fehler und Lösungen

Extraktion übersieht Gradienten

--fidelity high verwenden; Standard überspringt subtile Gradienten um Tokens zu sparen

DNA-Tokens variieren von Lauf zu Lauf

Vision-Modelle sind stochastisch — Seed setzen wenn unterstützt; oder zweimal extrahieren und Medianwerte nehmen

Generierter Code verwendet Inline-Styles statt Design-Tokens

--token-mode strict übergeben; Skill weigert sich dann, Werte inline zu setzen die als Tokens existieren

Live-URL-Extraktion leer

Site benötigt JS; vollständig gerenderten Screenshot statt URL-Fetch verwenden

Alternativen

design-dna vs. andere

AlternativeWann stattdessenKompromiss
design-extract (Manavarya09)Vollständiger Design-Token-Export inkl. DTCG + Multi-Platform-Emitter gewünschtSchwerer; vollständige Design-System-Pipeline vs. leichtgewichtige DNA
Manual style guide curationDu hast einen Designer und eine Pattern-BibliothekLangsamer; mehr Autorität

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen