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

Por qué usarlo

Características clave

Extrae tokens (color, tipografía, espaciado, radios) de referencias
Captura el estilo cualitativo (editorial / brutalista / vítreo)
Captura efectos (sombra, desenfoque, grano, degradados) con parámetros
Genera JSON portátil — aliméntalo a cualquier LLM de generación de código
Funciona con imágenes, capturas de pantalla o URLs en vivo

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.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 el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la 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
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "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
    }
  }
}

Mismo formato que Claude Desktop. Reinicia 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"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: design-dna

Construir un componente que coincida con una captura de pantalla que te gusta

👤 Devs sin diseñador que construyen UIs pulidas ⏱ ~25 min intermediate

Cuándo usarlo: Ves una gran captura de UI en Twitter y quieres capturar su estética.

Requisitos previos

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

Flujo

Extraer el DNA

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

→ JSON con tokens + estilo + efectos
Generar el componente

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

→ TSX con estética coincidente
Comparar visualmente

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

→ Coincidencia visual dentro de la tolerancia

Resultado: Componente fiel a la marca sin copiar el código del original.

Errores comunes

El DNA no captura efectos sutiles (textura de grano) — Usa --high-fidelity para una extracción más lenta pero más rica

Combinar con: filesystem

Generar nuevos componentes que coincidan con el diseño de un producto existente

👤 Devs añadiendo funcionalidades a un producto diseñado ⏱ ~30 min intermediate

Cuándo usarlo: Estás añadiendo una pantalla a una app existente y quieres que se sienta nativa.

Flujo

DNA desde URL en vivo

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

→ DNA refleja el producto real
Auditar la diferencia de tokens

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

→ Lista de deriva (ej. 'shadow-md inconsistente entre páginas')
Generar la nueva pantalla

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

→ Pantalla indistinguible del resto de la app

Resultado: Producto coherente, incluso al añadir pantallas meses después.

Errores comunes

La URL en vivo está detrás de auth — el DNA de la landing pública lleva a error — Usa una captura de pantalla autenticada, no la página de marketing

Inicializar un sistema de diseño a partir de referencias

👤 Fundadores en solitario / equipos pequeños sin diseñador ⏱ ~60 min advanced

Cuándo usarlo: Estás empezando una app y quieres un sistema de diseño coherente rápidamente.

Flujo

Elegir 3 referencias

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

→ 3 objetos DNA separados
Sintetizar

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

→ DNA fusionado
Generar un sistema de inicio

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

→ Sistema de diseño inicial en el repositorio

Resultado: Una base coherente sobre la que iterar en lugar de partir del Tailwind por defecto.

Errores comunes

Sintetizar estéticas muy diferentes produce caos — Elige referencias que compartan una «familia» — variaciones dentro de un estilo, no opuestos

Combinar con: frontend-slides-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

design-dna-skill + filesystem

Persistir DNA + componentes generados en el repositorio

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

design-dna-skill + frontend-slides-skill

Generar presentaciones que coincidan con la estética de tu producto

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

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
extract_dna	image_path or url, fidelity?	Primer paso desde cualquier referencia	Vision LLM tokens
synthesize_dna	dna[]	Combinar múltiples referencias	LLM tokens
generate_component	dna, component_spec	Generación de componentes fiel a la marca	LLM tokens
diff_dna	dna_a, dna_b	Auditar la deriva entre la referencia y el producto actual	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Depende del LLM de visión
Tokens por llamada: Extracción ~3000–8000 tokens (imagen de entrada + salida JSON)
Monetario: Gratuito; paga al proveedor del LLM
Consejo: Guarda en caché el DNA por proyecto; solo vuelve a extraer en un refresco real de marca

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-read (images) Outbound HTTPS (URL refs)

Almacenamiento de credenciales: Ninguna (auth del LLM de visión mediante variable de entorno)

Salida de datos: Proveedor del LLM de visión; fetcher de URL (si se usa)

No extraigas DNA de activos con derechos de autor que no tienes derecho a usar como referencia; la salida puede llevar características distintivas

Resolución de problemas

Errores comunes y soluciones

La extracción no capta los degradados

Usa --fidelity high; el modo predeterminado omite los degradados sutiles para ahorrar tokens

Los tokens del DNA difieren entre ejecuciones

Los modelos de visión son estocásticos — define la semilla si está soportada; o extrae dos veces y elige los valores medianos

El código generado usa estilos en línea en lugar de tokens de diseño

Pasa --token-mode strict; la skill se negará a incorporar valores que existen como tokens

La extracción de URL en vivo queda en blanco

El sitio requiere JS; usa una captura de pantalla completamente renderizada en lugar de obtención de URL

Alternativas

design-dna vs otros

Alternativa	Cuándo usarla	Contrapartida
design-extract (Manavarya09)	Quieres exportación completa de tokens de diseño incluyendo DTCG + emisores multi-plataforma	Más pesado; pipeline completo de sistema de diseño vs DNA ligero
Manual style guide curation	Tienes un diseñador y una biblioteca de patrones	Más lento; más autorizado

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills