design-dna (Claude Skill) — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Extrai tokens (cor, tipografia, espaçamento, raios) das referências
Captura estilo qualitativo (editorial / brutalista / vítreo)
Captura efeitos (sombra, blur, grain, gradientes) com parâmetros
Emite JSON portátil — alimente em qualquer LLM de geração de código
Funciona a partir de imagens, screenshots ou URLs ao vivo

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um 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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: design-dna

Construir um componente que corresponda a um screenshot que você admira

👤 Devs sem designer, construindo UIs polidas ⏱ ~25 min intermediate

Quando usar: Você vê um screenshot de UI incrível no Twitter e quer capturar seu estilo.

Pré-requisitos

Skill instalada — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

Fluxo

Extrair o DNA

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

→ JSON com tokens + estilo + efeitos
Gerar o componente

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

→ TSX com estética correspondente
Comparar visualmente

Render side-by-side; tweak any drift in shadow strength.✓ Copiado

→ Correspondência visual dentro da tolerância

Resultado: Componente on-brand sem copiar código do original.

Armadilhas

DNA perde efeitos sutis (textura grain) — Passe --high-fidelity para extração mais lenta mas mais rica

Combine com: filesystem

Gerar novos componentes que correspondam ao design de um produto existente

👤 Devs adicionando features a um produto com design definido ⏱ ~30 min intermediate

Quando usar: Você está adicionando uma tela a um app existente e quer que ela pareça nativa.

Fluxo

DNA da URL ao vivo

Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Copiado

→ DNA reflete o produto real
Auditar a diferença de tokens

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

→ Lista de deriva (ex., 'shadow-md inconsistente entre páginas')
Gerar nova tela

Generate the new 'Settings' screen using our reconciled DNA.✓ Copiado

→ Tela indistinguível do resto do app

Resultado: Produto coeso, mesmo adicionando telas meses depois.

Armadilhas

URL ao vivo fica atrás de autenticação — DNA da landing page pública engana — Use screenshot autenticado, não a página de marketing

Criar um design system a partir de referências

👤 Fundadores solo / times pequenos sem designer ⏱ ~60 min advanced

Quando usar: Você está começando um app e quer um design system coerente rapidamente.

Fluxo

Escolher 3 referências

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

→ 3 objetos de DNA separados
Sintetizar

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

→ DNA mesclado
Emitir um sistema inicial

Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Copiado

→ Design system inicial no repositório

Resultado: Uma baseline coesa para iterar em vez de começar do Tailwind padrão.

Armadilhas

Sintetizar estéticas muito diferentes resulta em caos — Escolha referências que compartilhem uma 'família' — variações dentro de um estilo, não opostos

Combine com: frontend-slides-skill

Combinações

Combine com outros MCPs para 10× de alavancagem

design-dna-skill + filesystem

Persistir DNA + componentes gerados no repositório

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ Copiado

design-dna-skill + frontend-slides-skill

Gerar decks de slides que correspondam à estética do seu produto

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

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
extract_dna	image_path ou url, fidelity?	Primeiro passo a partir de qualquer referência	Tokens de LLM de visão
synthesize_dna	dna[]	Combinando múltiplas referências	Tokens de LLM
generate_component	dna, component_spec	Geração de componente on-brand	Tokens de LLM
diff_dna	dna_a, dna_b	Auditar deriva entre referência e produto atual	0

Custo e limites

O que custa rodar

Cota de API: Depende do LLM de visão
Tokens por chamada: Extração ~3000–8000 tokens (entrada de imagem + saída JSON)
Monetário: Gratuito; pague ao provedor de LLM
Dica: Faça cache do DNA por projeto; só re-extraia em uma atualização real de marca

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-read (imagens) HTTPS de saída (refs de URL)

Armazenamento de credenciais: Nenhuma (auth do LLM de visão via variável de ambiente)

Saída de dados: Provedor de LLM de visão; fetcher de URL (se usado)

Não extraia DNA de assets protegidos por direitos autorais que você não tem permissão de usar como referência; a saída pode carregar características de assinatura

Solução de problemas

Erros comuns e correções

Extração perde gradientes

Use --fidelity high; o padrão pula gradientes sutis para economizar tokens

Tokens do DNA diferem entre execuções

Modelos de visão são estocásticos — defina seed se suportado; ou extraia duas vezes e pegue os valores medianos

Código gerado usa inline styles em vez de tokens de design

Passe --token-mode strict; a skill recusará inlinear valores que existem como tokens

Extração de URL ao vivo em branco

Site requer JS; use um screenshot totalmente renderizado em vez de fetch de URL

Alternativas

design-dna vs. outros

Alternativa	Quando usar	Troca
design-extract (Manavarya09)	Você quer exportação completa de tokens de design incluindo DTCG + emissores multiplataforma	Mais pesado; pipeline completo de design system vs DNA leve
Curação manual de guia de estilo	Você tem um designer e uma biblioteca de padrões	Mais lento; mais autoritativo

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills