/ Directory / Playground / design-dna
← All servers ↗ GitHub
● Community zanwei ⚡ Instant

design-dna

by zanwei · zanwei/design-dna

Extract a quantified Design DNA from any reference UI — tokens, qualitative style, visual effects — then generate components that match it.

design-dna takes images, screenshots, or live URLs as references and emits a structured Design DNA JSON: color tokens, type scale, spacing, qualitative style descriptors, and visual effect parameters. Feed the DNA back into Claude when generating components and the output stays on-brand instead of generic Tailwind.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

ready

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use design-dna

Build a component matching a screenshot you love

👤 Devs without a designer, building polished UIs ⏱ ~25 min intermediate

When to use: You see a great UI screenshot on Twitter and want to capture its vibe.

Flow
  1. Extract DNA
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Copied
    → JSON with tokens + style + effects
  2. Generate component
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Copied
    → TSX with matching aesthetic
  3. Compare visually
    Render side-by-side; tweak any drift in shadow strength.✓ Copied
    → Visual match within tolerance

Outcome: On-brand component without copying code from the original.

Pitfalls
  • DNA misses subtle effects (grain texture) — Pass --high-fidelity for slower but richer extraction
Combine with: filesystem

Generate new components that match an existing product's design

👤 Devs adding features to a designed product ⏱ ~30 min intermediate

When to use: You're adding a screen to an existing app and want it to feel native.

Flow
  1. DNA from live URL
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Copied
    → DNA reflects the actual product
  2. Audit token diff
    Compare DNA to our existing tailwind.config — flag drift.✓ Copied
    → Drift list (e.g., 'shadow-md inconsistent across pages')
  3. Generate new screen
    Generate the new 'Settings' screen using our reconciled DNA.✓ Copied
    → Screen indistinguishable from rest of app

Outcome: Cohesive product, even when adding screens months later.

Pitfalls
  • Live URL is behind auth — DNA from public landing page misleads — Use authenticated screenshot, not the marketing page

Bootstrap a design system from references

👤 Solo founders / small teams without a designer ⏱ ~60 min advanced

When to use: You're starting an app and want a coherent design system fast.

Flow
  1. Pick 3 references
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Copied
    → 3 separate DNA objects
  2. Synthesize
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Copied
    → Merged DNA
  3. Output a starter system
    Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Copied
    → Starter design system in repo

Outcome: A cohesive baseline you can iterate on instead of starting from default Tailwind.

Pitfalls
  • Synthesizing wildly different aesthetics yields chaos — Pick references that share a 'family' — variations within a style, not opposites
Combine with: frontend-slides-skill

Combinations

Pair with other MCPs for X10 leverage

design-dna-skill + filesystem

Persist DNA + generated components in repo

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

Generate slide decks that match your product aesthetic

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

Tools

What this MCP exposes

ToolInputsWhen to callCost
extract_dna image_path or url, fidelity? First step from any reference Vision LLM tokens
synthesize_dna dna[] Combining multiple references LLM tokens
generate_component dna, component_spec On-brand component generation LLM tokens
diff_dna dna_a, dna_b Audit drift between reference and current product 0

Cost & Limits

What this costs to run

API quota
Vision-LLM dependent
Tokens per call
Extraction ~3000–8000 tokens (image input + JSON output)
Monetary
Free; pay LLM provider
Tip
Cache DNA per project; only re-extract on real brand refresh

Security

Permissions, secrets, blast radius

Minimum scopes: filesystem-read (images) Outbound HTTPS (URL refs)
Credential storage: None (vision LLM auth via env var)
Data egress: Vision LLM provider; URL fetcher (if used)

Troubleshooting

Common errors and fixes

Extraction misses gradients

Use --fidelity high; default skips subtle gradients to save tokens

DNA tokens differ run-to-run

Vision models are stochastic — set seed if supported; or extract twice and pick median values

Generated code uses inline styles instead of design tokens

Pass --token-mode strict; skill will refuse to inline values that exist as tokens

Live URL extraction blank

Site requires JS; use a fully-rendered screenshot instead of URL fetch

Alternatives

design-dna vs others

AlternativeWhen to use it insteadTradeoff
design-extract (Manavarya09)You want full design-token export including DTCG + multi-platform emittersHeavier; full design-system pipeline vs lightweight DNA
Manual style guide curationYou have a designer and a pattern librarySlower; more authoritative

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →