design-dna (Claude Skill) — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Tokens aus Referenzen extrahieren (Farbe, Typografie, Abstände, Radien)
Qualitativen Stil erfassen (editorial / brutalist / glassy)
Effekte erfassen (Schatten, Unschärfe, Körnung, Gradienten) mit Parametern
Portables JSON ausgeben — an jedes Code-Gen-LLM übergeben
Funktioniert mit Bildern, Screenshots oder Live-URLs

Live-Demo

In der Praxis

bereit

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

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.

Ablauf

DNA extrahieren

Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Kopiert

→ JSON mit Tokens + Stil + Effekten
Komponente generieren

Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Kopiert

→ TSX mit passendem Erscheinungsbild
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

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
Token-Drift prüfen

Compare DNA to our existing tailwind.config — flag drift.✓ Kopiert

→ Drift-Liste (z.B. 'shadow-md inkonsistent über Seiten')
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

3 Referenzen auswählen

Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Kopiert

→ 3 separate DNA-Objekte
Synthetisieren

Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Kopiert

→ Zusammengeführte DNA
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

Werkzeug	Eingaben	Wann aufrufen	Kosten
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)

Keine DNA aus urheberrechtlich geschützten Assets extrahieren ohne Nutzungsrechte; Ausgabe kann Signaturmerkmale tragen

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

Alternative	Wann stattdessen	Kompromiss
design-extract (Manavarya09)	Vollständiger Design-Token-Export inkl. DTCG + Multi-Platform-Emitter gewünscht	Schwerer; vollständige Design-System-Pipeline vs. leichtgewichtige DNA
Manual style guide curation	Du hast einen Designer und eine Pattern-Bibliothek	Langsamer; mehr Autorität

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen